.elementor-4540 .elementor-element.elementor-element-6b0aeb9{--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-4540 .elementor-element.elementor-element-6b0aeb9::before, .elementor-4540 .elementor-element.elementor-element-6b0aeb9 > .elementor-background-video-container::before, .elementor-4540 .elementor-element.elementor-element-6b0aeb9 > .e-con-inner > .elementor-background-video-container::before, .elementor-4540 .elementor-element.elementor-element-6b0aeb9 > .elementor-background-slideshow::before, .elementor-4540 .elementor-element.elementor-element-6b0aeb9 > .e-con-inner > .elementor-background-slideshow::before, .elementor-4540 .elementor-element.elementor-element-6b0aeb9 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0000008C;--background-overlay:'';}.elementor-4540 .elementor-element.elementor-element-f6f1f1c{--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-4540 .elementor-element.elementor-element-f6f1f1c.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-e8ccb0e .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-5254aa9 .elementor-icon-wrapper{text-align:center;}.elementor-4540 .elementor-element.elementor-element-5254aa9.elementor-view-stacked .elementor-icon{background-color:#FFFFFF00;}.elementor-4540 .elementor-element.elementor-element-5254aa9.elementor-view-framed .elementor-icon, .elementor-4540 .elementor-element.elementor-element-5254aa9.elementor-view-default .elementor-icon{color:#FFFFFF00;border-color:#FFFFFF00;}.elementor-4540 .elementor-element.elementor-element-5254aa9.elementor-view-framed .elementor-icon, .elementor-4540 .elementor-element.elementor-element-5254aa9.elementor-view-default .elementor-icon svg{fill:#FFFFFF00;}.elementor-4540 .elementor-element.elementor-element-5254aa9 .elementor-icon{font-size:16px;}.elementor-4540 .elementor-element.elementor-element-5254aa9 .elementor-icon svg{height:16px;}.elementor-4540 .elementor-element.elementor-element-b202981 .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-3f5bc9b{margin:24px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-3f5bc9b .elementor-heading-title{font-size:60px;font-weight:600;line-height:64px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-d173fab{--display:flex;}.elementor-4540 .elementor-element.elementor-element-5be49d0{width:var( --container-widget-width, 594px );max-width:594px;margin:50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:594px;--container-widget-flex-grow:0;}.elementor-4540 .elementor-element.elementor-element-5be49d0.elementor-element{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-5be49d0 .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-4540 .elementor-element.elementor-element-5be49d0 .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-4540 .elementor-element.elementor-element-5be49d0 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#303879;}.elementor-4540 .elementor-element.elementor-element-5be49d0 .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-4540 .elementor-element.elementor-element-5be49d0 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#E71E26;}.elementor-4540 .elementor-element.elementor-element-5be49d0 .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-4540 .elementor-element.elementor-element-5be49d0 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-4540 .elementor-element.elementor-element-0d2a6af{--display:flex;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-4540 .elementor-element.elementor-element-87c44a8{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 0px 10px 0px;text-align:center;color:#000000;}.elementor-4540 .elementor-element.elementor-element-87c44a8 p{margin-block-end:10px;}.elementor-4540 .elementor-element.elementor-element-032a49f{--display:flex;}.elementor-4540 .elementor-element.elementor-element-a4e8938{--display:flex;}.elementor-4540 .elementor-element.elementor-element-f4e575e{--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-4540 .elementor-element.elementor-element-f4e575e:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-f4e575e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-4540 .elementor-element.elementor-element-f4e575e.e-con{--align-self:flex-end;}.elementor-4540 .elementor-element.elementor-element-63954c6{--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-4540 .elementor-element.elementor-element-63954c6:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-63954c6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-63954c6.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-eb63bcf{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-eb63bcf img{width:100%;}.elementor-4540 .elementor-element.elementor-element-8d86f80{padding:10px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-8d86f80 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-5686426 .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-4540 .elementor-element.elementor-element-5686426 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-5686426 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-5686426{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-4540 .elementor-element.elementor-element-5686426 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-5686426 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-74be995{--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-4540 .elementor-element.elementor-element-74be995:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-74be995 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-74be995.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-c71b6dc{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-c71b6dc img{width:100%;}.elementor-4540 .elementor-element.elementor-element-bb71f41{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-bb71f41 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-98d617c .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-4540 .elementor-element.elementor-element-98d617c .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-98d617c .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-98d617c{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-4540 .elementor-element.elementor-element-98d617c .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-98d617c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-5d5bd2f{--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-4540 .elementor-element.elementor-element-5d5bd2f:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-5d5bd2f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-5d5bd2f.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-d4aaf42{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-d4aaf42 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-0cbe8b0{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-0cbe8b0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-a952b0e .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-4540 .elementor-element.elementor-element-a952b0e .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-a952b0e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-a952b0e{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-4540 .elementor-element.elementor-element-a952b0e .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-a952b0e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-ff30052{--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-4540 .elementor-element.elementor-element-ff30052:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-ff30052 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-ff30052.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-8bec180{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-8bec180 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-08656cf{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-08656cf .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-c4b5a08 .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-4540 .elementor-element.elementor-element-c4b5a08 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-c4b5a08 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-c4b5a08{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-4540 .elementor-element.elementor-element-c4b5a08 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-c4b5a08 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-0f8d0b8{--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-4540 .elementor-element.elementor-element-0f8d0b8:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-0f8d0b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-0f8d0b8.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-dc883e2{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-dc883e2 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-3d7bcdd{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-3d7bcdd .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-a28dda8 .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-4540 .elementor-element.elementor-element-a28dda8 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-a28dda8 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-a28dda8{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-4540 .elementor-element.elementor-element-a28dda8 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-a28dda8 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-6320c9f{--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-4540 .elementor-element.elementor-element-6320c9f:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-6320c9f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-6320c9f.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-db468e3{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-db468e3 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-f151d49{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-f151d49 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-cdf023c .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-4540 .elementor-element.elementor-element-cdf023c .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-cdf023c .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-cdf023c{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-4540 .elementor-element.elementor-element-cdf023c .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-cdf023c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-d855c1c{--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-4540 .elementor-element.elementor-element-d855c1c:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-d855c1c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-d855c1c.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-748becc{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-748becc img{width:100%;}.elementor-4540 .elementor-element.elementor-element-82e0f45{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-82e0f45 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-9183d4c .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-4540 .elementor-element.elementor-element-9183d4c .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-9183d4c .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-9183d4c{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-4540 .elementor-element.elementor-element-9183d4c .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-9183d4c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-27252a6{--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-4540 .elementor-element.elementor-element-27252a6:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-27252a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-27252a6.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-43004be{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-43004be img{width:100%;}.elementor-4540 .elementor-element.elementor-element-936b17e{padding:10px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-936b17e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-0a26b9b .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-4540 .elementor-element.elementor-element-0a26b9b .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-0a26b9b .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-0a26b9b{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-4540 .elementor-element.elementor-element-0a26b9b .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-0a26b9b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-554c839{--display:flex;}.elementor-4540 .elementor-element.elementor-element-5bb64a0{--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-4540 .elementor-element.elementor-element-5bb64a0:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-5bb64a0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-4540 .elementor-element.elementor-element-5bb64a0.e-con{--align-self:flex-end;}.elementor-4540 .elementor-element.elementor-element-e4e9c7d{--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-4540 .elementor-element.elementor-element-e4e9c7d:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-e4e9c7d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-e4e9c7d.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-dbb36ec{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-dbb36ec img{width:100%;}.elementor-4540 .elementor-element.elementor-element-8fbc0f6{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-8fbc0f6 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-5d6dac1 .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-4540 .elementor-element.elementor-element-5d6dac1 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-5d6dac1 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-5d6dac1{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-4540 .elementor-element.elementor-element-5d6dac1 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-5d6dac1 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-bff3a2d{--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-4540 .elementor-element.elementor-element-bff3a2d:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-bff3a2d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-bff3a2d.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-b76beea{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-b76beea img{width:100%;}.elementor-4540 .elementor-element.elementor-element-0a83c80{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-0a83c80 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-b2f3461 .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-4540 .elementor-element.elementor-element-b2f3461 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-b2f3461 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-b2f3461{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-4540 .elementor-element.elementor-element-b2f3461 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-b2f3461 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-2de4c72{--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-4540 .elementor-element.elementor-element-2de4c72:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-2de4c72 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-2de4c72.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-b627d05{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-b627d05 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-88ca462{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-88ca462 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-e6014bb .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-4540 .elementor-element.elementor-element-e6014bb .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-e6014bb .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-e6014bb{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-4540 .elementor-element.elementor-element-e6014bb .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-e6014bb .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-cbfd3f4{--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-4540 .elementor-element.elementor-element-cbfd3f4:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-cbfd3f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-cbfd3f4.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-a5ef8f1{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-a5ef8f1 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-3f2b80a{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-3f2b80a .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-7759efd .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-4540 .elementor-element.elementor-element-7759efd .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-7759efd .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-7759efd{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-4540 .elementor-element.elementor-element-7759efd .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-7759efd .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-c20ecb1{--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-4540 .elementor-element.elementor-element-c20ecb1:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-c20ecb1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-c20ecb1.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-175c9f4{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-175c9f4 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-7706334{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-7706334 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-1e327af .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-4540 .elementor-element.elementor-element-1e327af .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-1e327af .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-1e327af{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-4540 .elementor-element.elementor-element-1e327af .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-1e327af .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-5750507{--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-4540 .elementor-element.elementor-element-5750507:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-5750507 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-5750507.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-0f68c68{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-0f68c68 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-54eb7c1{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-54eb7c1 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-3dc526c .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-4540 .elementor-element.elementor-element-3dc526c .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-3dc526c .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-3dc526c{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-4540 .elementor-element.elementor-element-3dc526c .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-3dc526c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-33596eb{--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-4540 .elementor-element.elementor-element-33596eb:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-33596eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-33596eb.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-90e91d3{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-90e91d3 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-b06f0e2{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-b06f0e2 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-dbfec1f .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-4540 .elementor-element.elementor-element-dbfec1f .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-dbfec1f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-dbfec1f{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-4540 .elementor-element.elementor-element-dbfec1f .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-dbfec1f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-e260471{--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-4540 .elementor-element.elementor-element-e260471:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-e260471 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-e260471.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-c63729f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-c63729f img{width:100%;}.elementor-4540 .elementor-element.elementor-element-780b6ab{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-780b6ab .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-1b65854 .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-4540 .elementor-element.elementor-element-1b65854 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-1b65854 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-1b65854{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-4540 .elementor-element.elementor-element-1b65854 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-1b65854 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-c007314{--display:flex;}.elementor-4540 .elementor-element.elementor-element-ac28eae{--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-4540 .elementor-element.elementor-element-ac28eae:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-ac28eae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-4540 .elementor-element.elementor-element-ac28eae.e-con{--align-self:flex-end;}.elementor-4540 .elementor-element.elementor-element-ac89898{--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-4540 .elementor-element.elementor-element-ac89898:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-ac89898 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-ac89898.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-20cfc04{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-20cfc04 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-89188a0{padding:10px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-89188a0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-67cac99 .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-4540 .elementor-element.elementor-element-67cac99 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-67cac99 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-67cac99{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-4540 .elementor-element.elementor-element-67cac99 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-67cac99 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-b62f06b{--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-4540 .elementor-element.elementor-element-b62f06b:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-b62f06b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-b62f06b.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-b48bdec{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-b48bdec img{width:100%;}.elementor-4540 .elementor-element.elementor-element-56c9a8a{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-56c9a8a .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-5f15ef7 .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-4540 .elementor-element.elementor-element-5f15ef7 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-5f15ef7 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-5f15ef7{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-4540 .elementor-element.elementor-element-5f15ef7 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-5f15ef7 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-c2d6d1b{--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-4540 .elementor-element.elementor-element-c2d6d1b:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-c2d6d1b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-c2d6d1b.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-67fe328{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-67fe328 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-eb48649{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-eb48649 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-a207f65 .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-4540 .elementor-element.elementor-element-a207f65 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-a207f65 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-a207f65{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-4540 .elementor-element.elementor-element-a207f65 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-a207f65 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-553de83{--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-4540 .elementor-element.elementor-element-553de83:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-553de83 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-553de83.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-1648dbc{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-1648dbc img{width:100%;}.elementor-4540 .elementor-element.elementor-element-520d782{padding:10px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-520d782 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-c3f8cf0 .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-4540 .elementor-element.elementor-element-c3f8cf0 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-c3f8cf0 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-c3f8cf0{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-4540 .elementor-element.elementor-element-c3f8cf0 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-c3f8cf0 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-fef7b3a{--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-4540 .elementor-element.elementor-element-fef7b3a:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-fef7b3a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-fef7b3a.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-e52701a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-e52701a img{width:100%;}.elementor-4540 .elementor-element.elementor-element-85ae593{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-85ae593 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-d2006b6 .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-4540 .elementor-element.elementor-element-d2006b6 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-d2006b6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-d2006b6{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-4540 .elementor-element.elementor-element-d2006b6 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-d2006b6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-64324fd{--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-4540 .elementor-element.elementor-element-64324fd:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-64324fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-64324fd.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-b7ec9eb{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-b7ec9eb img{width:100%;}.elementor-4540 .elementor-element.elementor-element-b6c020c{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-b6c020c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-7be7e0f .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-4540 .elementor-element.elementor-element-7be7e0f .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-7be7e0f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-7be7e0f{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-4540 .elementor-element.elementor-element-7be7e0f .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-7be7e0f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-3cd5fb5{--display:flex;}.elementor-4540 .elementor-element.elementor-element-0bee4de{--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-4540 .elementor-element.elementor-element-0bee4de:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-0bee4de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-4540 .elementor-element.elementor-element-0bee4de.e-con{--align-self:flex-end;}.elementor-4540 .elementor-element.elementor-element-aec5ad3{--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-4540 .elementor-element.elementor-element-aec5ad3:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-aec5ad3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-aec5ad3.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-db4a58f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-db4a58f img{width:100%;}.elementor-4540 .elementor-element.elementor-element-e7fe612{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-e7fe612 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-cb99c1e .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-4540 .elementor-element.elementor-element-cb99c1e .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-cb99c1e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-cb99c1e{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-4540 .elementor-element.elementor-element-cb99c1e .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-cb99c1e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-004f345{--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-4540 .elementor-element.elementor-element-004f345:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-004f345 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-004f345.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-69ff854{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-69ff854 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-d045557{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-d045557 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-864e147 .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-4540 .elementor-element.elementor-element-864e147 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-864e147 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-864e147{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-4540 .elementor-element.elementor-element-864e147 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-864e147 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-3bbb96f{--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-4540 .elementor-element.elementor-element-3bbb96f:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-3bbb96f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-3bbb96f.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-2e6eb87{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-2e6eb87 img{width:100%;}.elementor-4540 .elementor-element.elementor-element-2983b87{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-2983b87 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-e9b1f3d .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-4540 .elementor-element.elementor-element-e9b1f3d .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-e9b1f3d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-e9b1f3d{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-4540 .elementor-element.elementor-element-e9b1f3d .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-e9b1f3d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-59c6118{--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-4540 .elementor-element.elementor-element-59c6118:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-59c6118 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-59c6118.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-d41aecd{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-d41aecd img{width:100%;}.elementor-4540 .elementor-element.elementor-element-9c501a2{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-9c501a2 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-e717df5 .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-4540 .elementor-element.elementor-element-e717df5 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-e717df5 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-e717df5{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-4540 .elementor-element.elementor-element-e717df5 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-e717df5 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-49d7572{--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-4540 .elementor-element.elementor-element-49d7572:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-49d7572 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-49d7572.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-ac20eea{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-ac20eea img{width:100%;}.elementor-4540 .elementor-element.elementor-element-eefafa1{padding:20px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-eefafa1 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-0926169 .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-4540 .elementor-element.elementor-element-0926169 .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-0926169 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-0926169{width:var( --container-widget-width, 100% );max-width:100%;margin:015px 0px calc(var(--kit-widget-spacing, 0px) + 15px) 0px;padding:20px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4540 .elementor-element.elementor-element-0926169 .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-0926169 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-a1c2746{--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-4540 .elementor-element.elementor-element-a1c2746:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-a1c2746 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-a1c2746.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-e4caf1b{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4540 .elementor-element.elementor-element-e4caf1b img{width:100%;}.elementor-4540 .elementor-element.elementor-element-9325d3a{margin:04px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 05px 0px 05px;text-align:center;}.elementor-4540 .elementor-element.elementor-element-9325d3a .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-9d872bd .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-4540 .elementor-element.elementor-element-9d872bd .elementor-button:hover, .elementor-4540 .elementor-element.elementor-element-9d872bd .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-9d872bd{width:var( --container-widget-width, 100% );max-width:100%;margin:012px 0px calc(var(--kit-widget-spacing, 0px) + 05px) 0px;padding:0px 0px 5px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-4540 .elementor-element.elementor-element-9d872bd .elementor-button:hover svg, .elementor-4540 .elementor-element.elementor-element-9d872bd .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-a73c08a{--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-4540 .elementor-element.elementor-element-a73c08a > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-a73c08a.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-4540 .elementor-element.elementor-element-a73c08a.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-4540 .elementor-element.elementor-element-a73c08a.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-4540 .elementor-element.elementor-element-a73c08a.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-4540 .elementor-element.elementor-element-a73c08a [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-4540 .elementor-element.elementor-element-7cbe086{--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-4540 .elementor-element.elementor-element-7cbe086 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#001D8C;}.elementor-4540 .elementor-element.elementor-element-7cbe086.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-4540 .elementor-element.elementor-element-7cbe086.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-4540 .elementor-element.elementor-element-7cbe086.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-4540 .elementor-element.elementor-element-7cbe086 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;}.elementor-4540 .elementor-element.elementor-element-e300078{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:90px;--padding-right:90px;}.elementor-4540 .elementor-element.elementor-element-e300078.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-705f117{width:100%;max-width:100%;margin:40px 0px calc(var(--kit-widget-spacing, 0px) + 030px) 200px;}.elementor-4540 .elementor-element.elementor-element-705f117.elementor-element{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text{text-align:left;}.elementor-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-family:"Outfit", Sans-serif;font-size:45px;font-weight:600;text-transform:none;line-height:64px;letter-spacing:-0.02em;}.elementor-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#303879;}.elementor-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-family:"Outfit", Sans-serif;font-size:45px;font-weight:600;text-transform:capitalize;line-height:64px;letter-spacing:-0.02em;z-index:auto;}.elementor-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#E71E26;}.elementor-4540 .elementor-element.elementor-element-705f117 .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-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-4540 .elementor-element.elementor-element-d89f818{width:var( --container-widget-width, 85% );max-width:85%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 10px;--container-widget-width:85%;--container-widget-flex-grow:0;font-size:18px;color:#000000;}.elementor-4540 .elementor-element.elementor-element-8db60b5{width:var( --container-widget-width, 85% );max-width:85%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 10px;--container-widget-width:85%;--container-widget-flex-grow:0;font-size:18px;color:#000000;}.elementor-4540 .elementor-element.elementor-element-7f1a779{--display:flex;}.elementor-4540 .elementor-element.elementor-element-f67b37c{--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:44px 44px;--row-gap:44px;--column-gap:44px;--padding-top:100px;--padding-bottom:124px;--padding-left:0px;--padding-right:0px;}.elementor-4540 .elementor-element.elementor-element-f18f087{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4540 .elementor-element.elementor-element-f18f087.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4540 .elementor-element.elementor-element-998fbb3{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-4540 .elementor-element.elementor-element-998fbb3 .elementor-heading-title{font-size:40px;line-height:56px;letter-spacing:-0.02em;color:#000000;}.elementor-4540 .elementor-element.elementor-element-a601599 img{width:100%;max-width:100%;}.elementor-4540 .elementor-element.elementor-element-1bb51c4{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-header .elementskit-btn-link[aria-expanded="false"] > .ekit_accordion_icon_group{background-color:var( --e-global-color-3c1df16 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-secondary );}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-header .elementskit-btn-link .ekit_accordion_icon_group{background-color:#0C128B;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-secondary );border-radius:50% 50% 50% 50%;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-header>.elementskit-btn-link{font-family:"Outfit", Sans-serif;font-size:18px;font-weight:500;line-height:32px;letter-spacing:-0.01em;border-style:none;padding:24px 32px 24px 32px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card .elementskit-card-header>.elementskit-btn-link[aria-expanded="true"]{border-style:none;border-radius:8px 8px 8px 8px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card:not(:last-child){margin-bottom:12px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-body p{color:var( --e-global-color-text );}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-body{color:var( --e-global-color-text );border-radius:0px 0px 8px 8px;padding:12px 32px 24px 32px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-body p, .elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-body{font-family:"Inter", Sans-serif;font-size:15px;font-weight:400;line-height:24px;letter-spacing:-0.02em;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion > .elementskit-card.active{border-radius:8px 8px 8px 8px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-header > .elementskit-btn-link{border-radius:8px 8px 0px 0px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion > .elementskit-card{border-radius:8px 8px 8px 8px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-header > .elementskit-btn-link.collapsed{border-radius:8px 8px 8px 8px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-header .elementskit-btn-link .ekit_accordion_normal_icon{font-size:16px;color:#02010100;fill:#02010100;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card .elementskit-card-header .elementskit-btn-link .ekit_accordion_active_icon{font-size:16px;color:#000000;fill:#000000;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card .elementskit-card-header .elementskit-btn-link .ekit_accordion_icon_group{padding:7px 7px 7px 7px;}.elementor-4540 .elementor-element.elementor-element-104bc55 .ekit_accordion_icon_group, .elementor-4540 .elementor-element.elementor-element-104bc55 .ekit_accordion_icon_left_group{margin:0px 10px 0px 0px;}.elementor-4540 .elementor-element.elementor-element-8123f15{--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-4540 .elementor-element.elementor-element-e049488{--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-4540 .elementor-element.elementor-element-1601d2e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 12px) 0px;--icon-box-icon-margin:8px;}.elementor-4540 .elementor-element.elementor-element-1601d2e .elementor-icon-box-wrapper{align-items:center;}.elementor-4540 .elementor-element.elementor-element-1601d2e .elementor-icon-box-title{margin-block-end:0px;color:#000000;}.elementor-4540 .elementor-element.elementor-element-1601d2e.elementor-view-stacked .elementor-icon{background-color:#02010100;}.elementor-4540 .elementor-element.elementor-element-1601d2e.elementor-view-framed .elementor-icon, .elementor-4540 .elementor-element.elementor-element-1601d2e.elementor-view-default .elementor-icon{fill:#02010100;color:#02010100;border-color:#02010100;}.elementor-4540 .elementor-element.elementor-element-1601d2e .elementor-icon{font-size:20px;}.elementor-4540 .elementor-element.elementor-element-1601d2e .elementor-icon-box-title, .elementor-4540 .elementor-element.elementor-element-1601d2e .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-4540 .elementor-element.elementor-element-3afbf99{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4540 .elementor-element.elementor-element-3afbf99 .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-4540 .elementor-element.elementor-element-3afbf99 .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-4540 .elementor-element.elementor-element-3afbf99 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-3afbf99 .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-4540 .elementor-element.elementor-element-3afbf99 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#001D8C;}.elementor-4540 .elementor-element.elementor-element-3afbf99 .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-4540 .elementor-element.elementor-element-3afbf99 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-4540 .elementor-element.elementor-element-06fa805{--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-4540 .elementor-element.elementor-element-06fa805:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-06fa805 > .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-4540 .elementor-element.elementor-element-9077215{--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-4540 .elementor-element.elementor-element-9077215:not(.elementor-motion-effects-element-type-background), .elementor-4540 .elementor-element.elementor-element-9077215 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4540 .elementor-element.elementor-element-9077215.e-con{--align-self:center;}.elementor-4540 .elementor-element.elementor-element-96eb2e0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-4540 .elementor-element.elementor-element-96eb2e0 .elementor-heading-title{font-size:32px;font-weight:600;line-height:40px;letter-spacing:-0.02em;color:#AB0C2F;}.elementor-4540 .elementor-element.elementor-element-cf0c3d7{--display:flex;--min-height:0px;--margin-top:-140px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;}.elementor-4540 .elementor-element.elementor-element-39318ac{margin:00px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4540 .elementor-element.elementor-element-39318ac iframe{height:450px;}@media(max-width:1366px){.elementor-4540 .elementor-element.elementor-element-f4e575e{--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-5bb64a0{--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-ac28eae{--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-0bee4de{--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-f67b37c{--padding-top:100px;--padding-bottom:124px;--padding-left:40px;--padding-right:40px;}.elementor-4540 .elementor-element.elementor-element-998fbb3 .elementor-heading-title{font-size:40px;}.elementor-4540 .elementor-element.elementor-element-9077215{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}}@media(max-width:1024px){.elementor-4540 .elementor-element.elementor-element-6b0aeb9{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-4540 .elementor-element.elementor-element-5be49d0 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;line-height:1.4em;}.elementor-4540 .elementor-element.elementor-element-5be49d0 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;line-height:1.4em;}.elementor-4540 .elementor-element.elementor-element-f4e575e{--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-5bb64a0{--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-ac28eae{--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-0bee4de{--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;line-height:1.4em;}.elementor-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;line-height:1.4em;}.elementor-4540 .elementor-element.elementor-element-f67b37c{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-4540 .elementor-element.elementor-element-8123f15{--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-4540 .elementor-element.elementor-element-3afbf99 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;}.elementor-4540 .elementor-element.elementor-element-3afbf99 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;}.elementor-4540 .elementor-element.elementor-element-06fa805{--min-height:440px;}}@media(max-width:767px){.elementor-4540 .elementor-element.elementor-element-6b0aeb9{--min-height:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-4540 .elementor-element.elementor-element-f6f1f1c{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-4540 .elementor-element.elementor-element-3f5bc9b{margin:14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4540 .elementor-element.elementor-element-3f5bc9b .elementor-heading-title{font-size:48px;line-height:1.1em;}.elementor-4540 .elementor-element.elementor-element-5be49d0 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-4540 .elementor-element.elementor-element-5be49d0 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-4540 .elementor-element.elementor-element-f4e575e{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-5bb64a0{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-ac28eae{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-0bee4de{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-4540 .elementor-element.elementor-element-705f117 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-4540 .elementor-element.elementor-element-f67b37c{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-4540 .elementor-element.elementor-element-998fbb3 .elementor-heading-title{font-size:32px;line-height:1.4em;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-header>.elementskit-btn-link{font-size:18px;line-height:1.4em;}.elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-body p, .elementor-4540 .elementor-element.elementor-element-104bc55 .elementskit-accordion .elementskit-card-body{font-size:13px;line-height:1.4em;}.elementor-4540 .elementor-element.elementor-element-8123f15{--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-4540 .elementor-element.elementor-element-3afbf99 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-4540 .elementor-element.elementor-element-3afbf99 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-4540 .elementor-element.elementor-element-9077215{--width:90% !important;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}@media(min-width:768px){.elementor-4540 .elementor-element.elementor-element-6b0aeb9{--content-width:1200px;}.elementor-4540 .elementor-element.elementor-element-f6f1f1c{--width:fit-content;}.elementor-4540 .elementor-element.elementor-element-63954c6{--width:90%;}.elementor-4540 .elementor-element.elementor-element-74be995{--width:90%;}.elementor-4540 .elementor-element.elementor-element-5d5bd2f{--width:90%;}.elementor-4540 .elementor-element.elementor-element-ff30052{--width:90%;}.elementor-4540 .elementor-element.elementor-element-0f8d0b8{--width:90%;}.elementor-4540 .elementor-element.elementor-element-6320c9f{--width:90%;}.elementor-4540 .elementor-element.elementor-element-d855c1c{--width:90%;}.elementor-4540 .elementor-element.elementor-element-27252a6{--width:90%;}.elementor-4540 .elementor-element.elementor-element-e4e9c7d{--width:90%;}.elementor-4540 .elementor-element.elementor-element-bff3a2d{--width:90%;}.elementor-4540 .elementor-element.elementor-element-2de4c72{--width:90%;}.elementor-4540 .elementor-element.elementor-element-cbfd3f4{--width:90%;}.elementor-4540 .elementor-element.elementor-element-c20ecb1{--width:90%;}.elementor-4540 .elementor-element.elementor-element-5750507{--width:90%;}.elementor-4540 .elementor-element.elementor-element-33596eb{--width:90%;}.elementor-4540 .elementor-element.elementor-element-e260471{--width:90%;}.elementor-4540 .elementor-element.elementor-element-ac89898{--width:90%;}.elementor-4540 .elementor-element.elementor-element-b62f06b{--width:90%;}.elementor-4540 .elementor-element.elementor-element-c2d6d1b{--width:90%;}.elementor-4540 .elementor-element.elementor-element-553de83{--width:90%;}.elementor-4540 .elementor-element.elementor-element-fef7b3a{--width:90%;}.elementor-4540 .elementor-element.elementor-element-64324fd{--width:90%;}.elementor-4540 .elementor-element.elementor-element-aec5ad3{--width:90%;}.elementor-4540 .elementor-element.elementor-element-004f345{--width:90%;}.elementor-4540 .elementor-element.elementor-element-3bbb96f{--width:90%;}.elementor-4540 .elementor-element.elementor-element-59c6118{--width:90%;}.elementor-4540 .elementor-element.elementor-element-49d7572{--width:90%;}.elementor-4540 .elementor-element.elementor-element-a1c2746{--width:90%;}.elementor-4540 .elementor-element.elementor-element-f67b37c{--width:95%;}.elementor-4540 .elementor-element.elementor-element-f18f087{--width:480px;}.elementor-4540 .elementor-element.elementor-element-1bb51c4{--width:676px;}.elementor-4540 .elementor-element.elementor-element-8123f15{--content-width:1200px;}.elementor-4540 .elementor-element.elementor-element-9077215{--width:1000px;}}@media(max-width:1366px) and (min-width:768px){.elementor-4540 .elementor-element.elementor-element-f18f087{--width:561.594px;}.elementor-4540 .elementor-element.elementor-element-9077215{--width:871px !important;}}@media(max-width:1024px) and (min-width:768px){.elementor-4540 .elementor-element.elementor-element-f18f087{--width:100%;}.elementor-4540 .elementor-element.elementor-element-1bb51c4{--width:100%;}.elementor-4540 .elementor-element.elementor-element-9077215{--width:90% !important;}}/* Start custom CSS for image, class: .elementor-element-eb63bcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5d5bd2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8bec180 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ff30052 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dc883e2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0f8d0b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db468e3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6320c9f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-748becc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d855c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-43004be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-27252a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dbb36ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e4e9c7d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b76beea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bff3a2d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b627d05 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2de4c72 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a5ef8f1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cbfd3f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-175c9f4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c20ecb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f68c68 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5750507 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-90e91d3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-33596eb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c63729f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e260471 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-20cfc04 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac89898 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b48bdec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b62f06b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-67fe328 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c2d6d1b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1648dbc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-553de83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e52701a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fef7b3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b7ec9eb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-64324fd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db4a58f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec5ad3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69ff854 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-004f345 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2e6eb87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3bbb96f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d41aecd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59c6118 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ac20eea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49d7572 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e4caf1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1c2746 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eb63bcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63954c6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c71b6dc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74be995 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4aaf42 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5d5bd2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8bec180 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ff30052 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dc883e2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0f8d0b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db468e3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6320c9f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-748becc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d855c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-43004be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-27252a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dbb36ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e4e9c7d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b76beea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bff3a2d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b627d05 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2de4c72 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a5ef8f1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cbfd3f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-175c9f4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c20ecb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f68c68 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5750507 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-90e91d3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-33596eb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c63729f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e260471 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-20cfc04 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac89898 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b48bdec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b62f06b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-67fe328 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c2d6d1b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1648dbc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-553de83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e52701a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fef7b3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b7ec9eb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-64324fd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db4a58f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec5ad3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69ff854 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-004f345 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2e6eb87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3bbb96f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d41aecd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59c6118 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ac20eea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49d7572 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e4caf1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1c2746 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eb63bcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63954c6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c71b6dc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74be995 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4aaf42 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5d5bd2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8bec180 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ff30052 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dc883e2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0f8d0b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db468e3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6320c9f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-748becc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d855c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-43004be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-27252a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dbb36ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e4e9c7d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b76beea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bff3a2d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b627d05 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2de4c72 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a5ef8f1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cbfd3f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-175c9f4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c20ecb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f68c68 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5750507 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-90e91d3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-33596eb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c63729f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e260471 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-20cfc04 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac89898 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b48bdec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b62f06b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-67fe328 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c2d6d1b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1648dbc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-553de83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e52701a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fef7b3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b7ec9eb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-64324fd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db4a58f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec5ad3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69ff854 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-004f345 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2e6eb87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3bbb96f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d41aecd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59c6118 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ac20eea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49d7572 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e4caf1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1c2746 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eb63bcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63954c6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c71b6dc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74be995 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4aaf42 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5d5bd2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8bec180 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ff30052 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dc883e2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0f8d0b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db468e3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6320c9f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-748becc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d855c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-43004be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-27252a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dbb36ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e4e9c7d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b76beea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bff3a2d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b627d05 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2de4c72 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a5ef8f1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cbfd3f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-175c9f4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c20ecb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f68c68 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5750507 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-90e91d3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-33596eb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c63729f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e260471 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-20cfc04 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac89898 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b48bdec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b62f06b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-67fe328 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c2d6d1b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1648dbc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-553de83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e52701a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fef7b3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b7ec9eb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-64324fd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db4a58f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec5ad3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69ff854 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-004f345 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2e6eb87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3bbb96f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d41aecd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59c6118 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ac20eea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49d7572 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e4caf1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1c2746 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eb63bcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63954c6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c71b6dc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74be995 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4aaf42 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5d5bd2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8bec180 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ff30052 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dc883e2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0f8d0b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db468e3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6320c9f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-748becc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d855c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-43004be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-27252a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dbb36ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e4e9c7d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b76beea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bff3a2d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b627d05 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2de4c72 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a5ef8f1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cbfd3f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-175c9f4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c20ecb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f68c68 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5750507 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-90e91d3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-33596eb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c63729f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e260471 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-20cfc04 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac89898 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b48bdec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b62f06b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-67fe328 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c2d6d1b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1648dbc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-553de83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e52701a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fef7b3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b7ec9eb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-64324fd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db4a58f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec5ad3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69ff854 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-004f345 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2e6eb87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3bbb96f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d41aecd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59c6118 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ac20eea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49d7572 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e4caf1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1c2746 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-eb63bcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-63954c6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c71b6dc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-74be995 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4aaf42 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5d5bd2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8bec180 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ff30052 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dc883e2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0f8d0b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db468e3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6320c9f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-748becc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d855c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-43004be *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-27252a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-dbb36ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e4e9c7d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b76beea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bff3a2d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b627d05 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2de4c72 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a5ef8f1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cbfd3f4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-175c9f4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c20ecb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0f68c68 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5750507 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-90e91d3 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-33596eb *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c63729f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e260471 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-20cfc04 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ac89898 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b48bdec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b62f06b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-67fe328 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c2d6d1b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1648dbc *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-553de83 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e52701a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fef7b3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b7ec9eb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-64324fd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db4a58f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-aec5ad3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-69ff854 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-004f345 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2e6eb87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3bbb96f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d41aecd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-59c6118 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ac20eea *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49d7572 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e4caf1b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1c2746 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */