.elementor-1840 .elementor-element.elementor-element-344c4b5{--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-1840 .elementor-element.elementor-element-344c4b5::before, .elementor-1840 .elementor-element.elementor-element-344c4b5 > .elementor-background-video-container::before, .elementor-1840 .elementor-element.elementor-element-344c4b5 > .e-con-inner > .elementor-background-video-container::before, .elementor-1840 .elementor-element.elementor-element-344c4b5 > .elementor-background-slideshow::before, .elementor-1840 .elementor-element.elementor-element-344c4b5 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1840 .elementor-element.elementor-element-344c4b5 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0000008C;--background-overlay:'';}.elementor-1840 .elementor-element.elementor-element-5d244d2{--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-1840 .elementor-element.elementor-element-5d244d2.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-6b7e6a0 .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-547684c .elementor-icon-wrapper{text-align:center;}.elementor-1840 .elementor-element.elementor-element-547684c.elementor-view-stacked .elementor-icon{background-color:#FFFFFF00;}.elementor-1840 .elementor-element.elementor-element-547684c.elementor-view-framed .elementor-icon, .elementor-1840 .elementor-element.elementor-element-547684c.elementor-view-default .elementor-icon{color:#FFFFFF00;border-color:#FFFFFF00;}.elementor-1840 .elementor-element.elementor-element-547684c.elementor-view-framed .elementor-icon, .elementor-1840 .elementor-element.elementor-element-547684c.elementor-view-default .elementor-icon svg{fill:#FFFFFF00;}.elementor-1840 .elementor-element.elementor-element-547684c .elementor-icon{font-size:16px;}.elementor-1840 .elementor-element.elementor-element-547684c .elementor-icon svg{height:16px;}.elementor-1840 .elementor-element.elementor-element-fc3dd58 .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-4ea1f5c{margin:24px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-4ea1f5c .elementor-heading-title{font-size:60px;font-weight:600;line-height:64px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-42b1391{--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:50px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:120px;--padding-right:120px;}.elementor-1840 .elementor-element.elementor-element-42b1391.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-ca63501{width:100%;max-width:100%;margin:40px 0px calc(var(--kit-widget-spacing, 0px) + 030px) 200px;}.elementor-1840 .elementor-element.elementor-element-ca63501.elementor-element{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-ca63501 .jeg-elementor-kit.jkit-animated-text{text-align:left;}.elementor-1840 .elementor-element.elementor-element-ca63501 .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-1840 .elementor-element.elementor-element-ca63501 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#303879;}.elementor-1840 .elementor-element.elementor-element-ca63501 .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-1840 .elementor-element.elementor-element-ca63501 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#E71E26;}.elementor-1840 .elementor-element.elementor-element-ca63501 .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-1840 .elementor-element.elementor-element-ca63501 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-1840 .elementor-element.elementor-element-92c1703{width:var( --container-widget-width, 85% );max-width:85%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 15px;padding:0px 20px 0px 10px;--container-widget-width:85%;--container-widget-flex-grow:0;font-size:18px;color:#000000;}.elementor-1840 .elementor-element.elementor-element-522656d{width:var( --container-widget-width, 85% );max-width:85%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 15px;padding:0px 20px 0px 10px;--container-widget-width:85%;--container-widget-flex-grow:0;font-size:18px;color:#000000;}.elementor-1840 .elementor-element.elementor-element-160658f{--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-1840 .elementor-element.elementor-element-cc4d82c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1840 .elementor-element.elementor-element-cc4d82c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1840 .elementor-element.elementor-element-d717981{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-1840 .elementor-element.elementor-element-d717981 .elementor-heading-title{font-size:40px;line-height:56px;letter-spacing:-0.02em;color:#000000;}.elementor-1840 .elementor-element.elementor-element-1e32b00 img{width:100%;max-width:100%;}.elementor-1840 .elementor-element.elementor-element-19ef73a{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1840 .elementor-element.elementor-element-517ce6a .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-1840 .elementor-element.elementor-element-517ce6a .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-1840 .elementor-element.elementor-element-517ce6a .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-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card .elementskit-card-header>.elementskit-btn-link[aria-expanded="true"]{border-style:none;border-radius:8px 8px 8px 8px;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card:not(:last-child){margin-bottom:12px;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-body p{color:var( --e-global-color-text );}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-body{color:var( --e-global-color-text );border-radius:0px 0px 8px 8px;padding:12px 32px 24px 32px;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-body p, .elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-body{font-family:"Inter", Sans-serif;font-size:15px;font-weight:400;line-height:24px;letter-spacing:-0.02em;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion > .elementskit-card.active{border-radius:8px 8px 8px 8px;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-header > .elementskit-btn-link{border-radius:8px 8px 0px 0px;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion > .elementskit-card{border-radius:8px 8px 8px 8px;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-header > .elementskit-btn-link.collapsed{border-radius:8px 8px 8px 8px;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-header .elementskit-btn-link .ekit_accordion_normal_icon{font-size:16px;color:#02010100;fill:#02010100;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card .elementskit-card-header .elementskit-btn-link .ekit_accordion_active_icon{font-size:16px;color:#000000;fill:#000000;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card .elementskit-card-header .elementskit-btn-link .ekit_accordion_icon_group{padding:7px 7px 7px 7px;}.elementor-1840 .elementor-element.elementor-element-517ce6a .ekit_accordion_icon_group, .elementor-1840 .elementor-element.elementor-element-517ce6a .ekit_accordion_icon_left_group{margin:0px 10px 0px 0px;}.elementor-1840 .elementor-element.elementor-element-4c7216b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-1840 .elementor-element.elementor-element-1c9de42{width:var( --container-widget-width, 594px );max-width:594px;margin:40px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:594px;--container-widget-flex-grow:0;}.elementor-1840 .elementor-element.elementor-element-1c9de42.elementor-element{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-1c9de42 .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-1840 .elementor-element.elementor-element-1c9de42 .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-1840 .elementor-element.elementor-element-1c9de42 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#303879;}.elementor-1840 .elementor-element.elementor-element-1c9de42 .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-1840 .elementor-element.elementor-element-1c9de42 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#E71E26;}.elementor-1840 .elementor-element.elementor-element-1c9de42 .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-1840 .elementor-element.elementor-element-1c9de42 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-1840 .elementor-element.elementor-element-07f510a{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 0px 10px 0px;text-align:center;color:#000000;}.elementor-1840 .elementor-element.elementor-element-07f510a p{margin-block-end:10px;}.elementor-1840 .elementor-element.elementor-element-125c9f4{--display:flex;}.elementor-1840 .elementor-element.elementor-element-452cf15{--display:flex;}.elementor-1840 .elementor-element.elementor-element-b24c277{--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-1840 .elementor-element.elementor-element-b24c277:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-b24c277 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1840 .elementor-element.elementor-element-b24c277.e-con{--align-self:flex-end;}.elementor-1840 .elementor-element.elementor-element-58813d5{--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-1840 .elementor-element.elementor-element-58813d5:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-58813d5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-58813d5.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-d00ea87{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-d00ea87 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-751fc5f{padding:10px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-751fc5f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-d9ae92f .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-1840 .elementor-element.elementor-element-d9ae92f .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-d9ae92f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-d9ae92f{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-1840 .elementor-element.elementor-element-d9ae92f .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-d9ae92f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-03b7715{--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-1840 .elementor-element.elementor-element-03b7715:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-03b7715 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-03b7715.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-192f978{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-192f978 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-6fc854e{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-6fc854e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-88a255f .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-1840 .elementor-element.elementor-element-88a255f .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-88a255f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-88a255f{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-1840 .elementor-element.elementor-element-88a255f .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-88a255f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-9f1acaf{--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-1840 .elementor-element.elementor-element-9f1acaf:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-9f1acaf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-9f1acaf.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-fb50e5d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-fb50e5d img{width:100%;}.elementor-1840 .elementor-element.elementor-element-5232846{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-5232846 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-491fc9c .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-1840 .elementor-element.elementor-element-491fc9c .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-491fc9c .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-491fc9c{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-1840 .elementor-element.elementor-element-491fc9c .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-491fc9c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-49dad6a{--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-1840 .elementor-element.elementor-element-49dad6a:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-49dad6a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-49dad6a.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-6cc0c86{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-6cc0c86 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-b619cc0{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-b619cc0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-5b33df0 .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-1840 .elementor-element.elementor-element-5b33df0 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-5b33df0 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-5b33df0{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-1840 .elementor-element.elementor-element-5b33df0 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-5b33df0 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-103b3df{--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-1840 .elementor-element.elementor-element-103b3df:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-103b3df > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-103b3df.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-344d10f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-344d10f img{width:100%;}.elementor-1840 .elementor-element.elementor-element-18bf9e7{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-18bf9e7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-de2b23e .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-1840 .elementor-element.elementor-element-de2b23e .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-de2b23e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-de2b23e{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-1840 .elementor-element.elementor-element-de2b23e .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-de2b23e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-9be3d8b{--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-1840 .elementor-element.elementor-element-9be3d8b:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-9be3d8b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-9be3d8b.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-1adb38b{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-1adb38b img{width:100%;}.elementor-1840 .elementor-element.elementor-element-3c46077{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-3c46077 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-dbabcbf .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-1840 .elementor-element.elementor-element-dbabcbf .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-dbabcbf .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-dbabcbf{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-1840 .elementor-element.elementor-element-dbabcbf .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-dbabcbf .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-a152968{--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-1840 .elementor-element.elementor-element-a152968:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-a152968 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-a152968.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-2445b4b{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-2445b4b img{width:100%;}.elementor-1840 .elementor-element.elementor-element-6ae0c7d{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-6ae0c7d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-8f62358 .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-1840 .elementor-element.elementor-element-8f62358 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-8f62358 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-8f62358{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-1840 .elementor-element.elementor-element-8f62358 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-8f62358 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-5fccef7{--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-1840 .elementor-element.elementor-element-5fccef7:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-5fccef7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-5fccef7.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-ba830cd{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-ba830cd img{width:100%;}.elementor-1840 .elementor-element.elementor-element-5de02b7{padding:10px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-5de02b7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-36d415a .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-1840 .elementor-element.elementor-element-36d415a .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-36d415a .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-36d415a{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-1840 .elementor-element.elementor-element-36d415a .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-36d415a .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-dfcc636{--display:flex;}.elementor-1840 .elementor-element.elementor-element-0cdbfbc{--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-1840 .elementor-element.elementor-element-0cdbfbc:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-0cdbfbc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1840 .elementor-element.elementor-element-0cdbfbc.e-con{--align-self:flex-end;}.elementor-1840 .elementor-element.elementor-element-6697156{--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-1840 .elementor-element.elementor-element-6697156:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-6697156 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-6697156.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-e734431{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-e734431 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-a800045{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-a800045 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-6189545 .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-1840 .elementor-element.elementor-element-6189545 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-6189545 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-6189545{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-1840 .elementor-element.elementor-element-6189545 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-6189545 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-8ab44c8{--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-1840 .elementor-element.elementor-element-8ab44c8:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-8ab44c8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-8ab44c8.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-0b91b1c{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-0b91b1c img{width:100%;}.elementor-1840 .elementor-element.elementor-element-ecfb1ad{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-ecfb1ad .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-4336654 .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-1840 .elementor-element.elementor-element-4336654 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-4336654 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-4336654{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-1840 .elementor-element.elementor-element-4336654 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-4336654 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-0a0e674{--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-1840 .elementor-element.elementor-element-0a0e674:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-0a0e674 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-0a0e674.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-bfdbbfe{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-bfdbbfe img{width:100%;}.elementor-1840 .elementor-element.elementor-element-3b253b1{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-3b253b1 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-4310a18 .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-1840 .elementor-element.elementor-element-4310a18 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-4310a18 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-4310a18{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-1840 .elementor-element.elementor-element-4310a18 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-4310a18 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-11e5cad{--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-1840 .elementor-element.elementor-element-11e5cad:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-11e5cad > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-11e5cad.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-18feb89{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-18feb89 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-1ea3842{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-1ea3842 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-ed5d63d .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-1840 .elementor-element.elementor-element-ed5d63d .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-ed5d63d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-ed5d63d{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-1840 .elementor-element.elementor-element-ed5d63d .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-ed5d63d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-2e8093b{--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-1840 .elementor-element.elementor-element-2e8093b:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-2e8093b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-2e8093b.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-efd2705{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-efd2705 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-5d28fd3{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-5d28fd3 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-f1e4568 .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-1840 .elementor-element.elementor-element-f1e4568 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-f1e4568 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-f1e4568{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-1840 .elementor-element.elementor-element-f1e4568 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-f1e4568 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-cd21f2c{--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-1840 .elementor-element.elementor-element-cd21f2c:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-cd21f2c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-cd21f2c.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-417d8cf{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-417d8cf img{width:100%;}.elementor-1840 .elementor-element.elementor-element-79b6f1e{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-79b6f1e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-7dcbda8 .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-1840 .elementor-element.elementor-element-7dcbda8 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-7dcbda8 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-7dcbda8{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-1840 .elementor-element.elementor-element-7dcbda8 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-7dcbda8 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-0cb0b01{--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-1840 .elementor-element.elementor-element-0cb0b01:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-0cb0b01 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-0cb0b01.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-996a2fd{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-996a2fd img{width:100%;}.elementor-1840 .elementor-element.elementor-element-eeeef6f{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-eeeef6f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-83c195e .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-1840 .elementor-element.elementor-element-83c195e .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-83c195e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-83c195e{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-1840 .elementor-element.elementor-element-83c195e .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-83c195e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-b58d59b{--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-1840 .elementor-element.elementor-element-b58d59b:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-b58d59b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-b58d59b.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-cb01d3f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-cb01d3f img{width:100%;}.elementor-1840 .elementor-element.elementor-element-6e48082{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-6e48082 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-c68368c .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-1840 .elementor-element.elementor-element-c68368c .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-c68368c .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-c68368c{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-1840 .elementor-element.elementor-element-c68368c .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-c68368c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-67e8e99{--display:flex;}.elementor-1840 .elementor-element.elementor-element-3da00d3{--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-1840 .elementor-element.elementor-element-3da00d3:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-3da00d3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1840 .elementor-element.elementor-element-3da00d3.e-con{--align-self:flex-end;}.elementor-1840 .elementor-element.elementor-element-243c6af{--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-1840 .elementor-element.elementor-element-243c6af:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-243c6af > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-243c6af.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-a1cd197{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-a1cd197 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-a9cbd45{padding:10px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-a9cbd45 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-4e53e48 .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-1840 .elementor-element.elementor-element-4e53e48 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-4e53e48 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-4e53e48{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-1840 .elementor-element.elementor-element-4e53e48 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-4e53e48 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-036575c{--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-1840 .elementor-element.elementor-element-036575c:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-036575c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-036575c.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-836d359{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-836d359 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-93b14e2{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-93b14e2 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-2265aa6 .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-1840 .elementor-element.elementor-element-2265aa6 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-2265aa6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-2265aa6{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-1840 .elementor-element.elementor-element-2265aa6 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-2265aa6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-be61b61{--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-1840 .elementor-element.elementor-element-be61b61:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-be61b61 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-be61b61.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-432b0b0{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-432b0b0 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-7c1f16d{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-7c1f16d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-f4c48d9 .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-1840 .elementor-element.elementor-element-f4c48d9 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-f4c48d9 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-f4c48d9{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-1840 .elementor-element.elementor-element-f4c48d9 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-f4c48d9 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-a1aadc5{--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-1840 .elementor-element.elementor-element-a1aadc5:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-a1aadc5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-a1aadc5.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-3202fac{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-3202fac img{width:100%;}.elementor-1840 .elementor-element.elementor-element-6277a3e{padding:10px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-6277a3e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-984e8b9 .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-1840 .elementor-element.elementor-element-984e8b9 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-984e8b9 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-984e8b9{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-1840 .elementor-element.elementor-element-984e8b9 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-984e8b9 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-d5a8205{--display:flex;--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-1840 .elementor-element.elementor-element-d5a8205:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-d5a8205 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-d5a8205.e-con{--align-self:center;--order:-99999 /* order start hack */;}.elementor-1840 .elementor-element.elementor-element-2729c4d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-2729c4d img{width:100%;}.elementor-1840 .elementor-element.elementor-element-4c43697{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-4c43697 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-8208cbd .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-1840 .elementor-element.elementor-element-8208cbd .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-8208cbd .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-8208cbd{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-1840 .elementor-element.elementor-element-8208cbd .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-8208cbd .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-531d513{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:20px 20px 20px 20px;--margin-top:20px;--margin-bottom:15px;--margin-left:5px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-1840 .elementor-element.elementor-element-531d513:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-531d513 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-531d513.e-con{--align-self:center;--order:-99999 /* order start hack */;}.elementor-1840 .elementor-element.elementor-element-956f028{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-956f028 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-4d8c5f1{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-4d8c5f1 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-ca9d9a2 .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-1840 .elementor-element.elementor-element-ca9d9a2 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-ca9d9a2 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-ca9d9a2{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-1840 .elementor-element.elementor-element-ca9d9a2 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-ca9d9a2 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-7d2dd3f{--display:flex;}.elementor-1840 .elementor-element.elementor-element-29ed533{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-1840 .elementor-element.elementor-element-29ed533:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-29ed533 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1840 .elementor-element.elementor-element-29ed533.e-con{--align-self:flex-end;}.elementor-1840 .elementor-element.elementor-element-40c8bc2{--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-1840 .elementor-element.elementor-element-40c8bc2:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-40c8bc2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-40c8bc2.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-7ef7be2{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-7ef7be2 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-3661181{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-3661181 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-9a3fdfa .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-1840 .elementor-element.elementor-element-9a3fdfa .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-9a3fdfa .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-9a3fdfa{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-1840 .elementor-element.elementor-element-9a3fdfa .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-9a3fdfa .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-68f81d8{--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-1840 .elementor-element.elementor-element-68f81d8:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-68f81d8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-68f81d8.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-cbd77c7{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-cbd77c7 img{width:100%;}.elementor-1840 .elementor-element.elementor-element-027dc34{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-027dc34 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-bc5a2ee .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-1840 .elementor-element.elementor-element-bc5a2ee .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-bc5a2ee .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-bc5a2ee{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-1840 .elementor-element.elementor-element-bc5a2ee .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-bc5a2ee .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-a23c143{--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-1840 .elementor-element.elementor-element-a23c143:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-a23c143 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-a23c143.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-6039d6f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-6039d6f img{width:100%;}.elementor-1840 .elementor-element.elementor-element-44a7eb0{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-44a7eb0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-48f012d .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-1840 .elementor-element.elementor-element-48f012d .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-48f012d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-48f012d{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-1840 .elementor-element.elementor-element-48f012d .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-48f012d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-8e91f30{--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-1840 .elementor-element.elementor-element-8e91f30:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-8e91f30 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-8e91f30.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-98ebfeb{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1840 .elementor-element.elementor-element-98ebfeb img{width:100%;}.elementor-1840 .elementor-element.elementor-element-9529610{padding:20px 05px 0px 05px;text-align:center;}.elementor-1840 .elementor-element.elementor-element-9529610 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-bffbb16 .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-1840 .elementor-element.elementor-element-bffbb16 .elementor-button:hover, .elementor-1840 .elementor-element.elementor-element-bffbb16 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-bffbb16{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-1840 .elementor-element.elementor-element-bffbb16 .elementor-button:hover svg, .elementor-1840 .elementor-element.elementor-element-bffbb16 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-4a07b4a{--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-1840 .elementor-element.elementor-element-4a07b4a > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-4a07b4a.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-1840 .elementor-element.elementor-element-4a07b4a.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1840 .elementor-element.elementor-element-4a07b4a.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-1840 .elementor-element.elementor-element-4a07b4a.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-1840 .elementor-element.elementor-element-4a07b4a [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-1840 .elementor-element.elementor-element-b32c4b5{--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-1840 .elementor-element.elementor-element-b32c4b5 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#001D8C;}.elementor-1840 .elementor-element.elementor-element-b32c4b5.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-1840 .elementor-element.elementor-element-b32c4b5.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1840 .elementor-element.elementor-element-b32c4b5.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-1840 .elementor-element.elementor-element-b32c4b5 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;}.elementor-1840 .elementor-element.elementor-element-3ce465f{--display:flex;}.elementor-1840 .elementor-element.elementor-element-2fdf9b8{--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-1840 .elementor-element.elementor-element-c15632a{--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-1840 .elementor-element.elementor-element-54dbb77{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 12px) 0px;--icon-box-icon-margin:8px;}.elementor-1840 .elementor-element.elementor-element-54dbb77 .elementor-icon-box-wrapper{align-items:center;}.elementor-1840 .elementor-element.elementor-element-54dbb77 .elementor-icon-box-title{margin-block-end:0px;color:#000000;}.elementor-1840 .elementor-element.elementor-element-54dbb77.elementor-view-stacked .elementor-icon{background-color:#02010100;}.elementor-1840 .elementor-element.elementor-element-54dbb77.elementor-view-framed .elementor-icon, .elementor-1840 .elementor-element.elementor-element-54dbb77.elementor-view-default .elementor-icon{fill:#02010100;color:#02010100;border-color:#02010100;}.elementor-1840 .elementor-element.elementor-element-54dbb77 .elementor-icon{font-size:20px;}.elementor-1840 .elementor-element.elementor-element-54dbb77 .elementor-icon-box-title, .elementor-1840 .elementor-element.elementor-element-54dbb77 .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-1840 .elementor-element.elementor-element-08d9313{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1840 .elementor-element.elementor-element-08d9313 .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-1840 .elementor-element.elementor-element-08d9313 .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-1840 .elementor-element.elementor-element-08d9313 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-08d9313 .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-1840 .elementor-element.elementor-element-08d9313 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#001D8C;}.elementor-1840 .elementor-element.elementor-element-08d9313 .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-1840 .elementor-element.elementor-element-08d9313 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-1840 .elementor-element.elementor-element-4c2a4a2{--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-1840 .elementor-element.elementor-element-4c2a4a2:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-4c2a4a2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://antiquewhite-tapir-914724.hostingersite.com/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-1840 .elementor-element.elementor-element-7f06507{--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-1840 .elementor-element.elementor-element-7f06507:not(.elementor-motion-effects-element-type-background), .elementor-1840 .elementor-element.elementor-element-7f06507 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1840 .elementor-element.elementor-element-7f06507.e-con{--align-self:center;}.elementor-1840 .elementor-element.elementor-element-a15f952{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-1840 .elementor-element.elementor-element-a15f952 .elementor-heading-title{font-size:32px;font-weight:600;line-height:40px;letter-spacing:-0.02em;color:#AB0C2F;}.elementor-1840 .elementor-element.elementor-element-82de913{--display:flex;--min-height:0px;--margin-top:-140px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;}.elementor-1840 .elementor-element.elementor-element-25183c2{margin:00px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1840 .elementor-element.elementor-element-25183c2 iframe{height:450px;}@media(max-width:1366px){.elementor-1840 .elementor-element.elementor-element-160658f{--padding-top:100px;--padding-bottom:124px;--padding-left:40px;--padding-right:40px;}.elementor-1840 .elementor-element.elementor-element-d717981 .elementor-heading-title{font-size:40px;}.elementor-1840 .elementor-element.elementor-element-b24c277{--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-0cdbfbc{--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-3da00d3{--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-29ed533{--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-7f06507{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}}@media(max-width:1024px){.elementor-1840 .elementor-element.elementor-element-344c4b5{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-1840 .elementor-element.elementor-element-ca63501 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;line-height:1.4em;}.elementor-1840 .elementor-element.elementor-element-ca63501 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;line-height:1.4em;}.elementor-1840 .elementor-element.elementor-element-160658f{--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-1840 .elementor-element.elementor-element-1c9de42 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;line-height:1.4em;}.elementor-1840 .elementor-element.elementor-element-1c9de42 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;line-height:1.4em;}.elementor-1840 .elementor-element.elementor-element-b24c277{--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-0cdbfbc{--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-3da00d3{--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-29ed533{--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-2fdf9b8{--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-1840 .elementor-element.elementor-element-08d9313 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;}.elementor-1840 .elementor-element.elementor-element-08d9313 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;}.elementor-1840 .elementor-element.elementor-element-4c2a4a2{--min-height:440px;}}@media(max-width:767px){.elementor-1840 .elementor-element.elementor-element-344c4b5{--min-height:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-1840 .elementor-element.elementor-element-5d244d2{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1840 .elementor-element.elementor-element-4ea1f5c{margin:14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1840 .elementor-element.elementor-element-4ea1f5c .elementor-heading-title{font-size:48px;line-height:1.1em;}.elementor-1840 .elementor-element.elementor-element-ca63501 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-1840 .elementor-element.elementor-element-ca63501 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-1840 .elementor-element.elementor-element-160658f{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-1840 .elementor-element.elementor-element-d717981 .elementor-heading-title{font-size:32px;line-height:1.4em;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-header>.elementskit-btn-link{font-size:18px;line-height:1.4em;}.elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-body p, .elementor-1840 .elementor-element.elementor-element-517ce6a .elementskit-accordion .elementskit-card-body{font-size:13px;line-height:1.4em;}.elementor-1840 .elementor-element.elementor-element-1c9de42 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-1840 .elementor-element.elementor-element-1c9de42 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-1840 .elementor-element.elementor-element-b24c277{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-0cdbfbc{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-3da00d3{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-29ed533{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1840 .elementor-element.elementor-element-2fdf9b8{--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-1840 .elementor-element.elementor-element-08d9313 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-1840 .elementor-element.elementor-element-08d9313 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-1840 .elementor-element.elementor-element-7f06507{--width:90% !important;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}@media(min-width:768px){.elementor-1840 .elementor-element.elementor-element-344c4b5{--content-width:1200px;}.elementor-1840 .elementor-element.elementor-element-5d244d2{--width:fit-content;}.elementor-1840 .elementor-element.elementor-element-42b1391{--width:95%;}.elementor-1840 .elementor-element.elementor-element-160658f{--width:95%;}.elementor-1840 .elementor-element.elementor-element-cc4d82c{--width:480px;}.elementor-1840 .elementor-element.elementor-element-19ef73a{--width:676px;}.elementor-1840 .elementor-element.elementor-element-58813d5{--width:90%;}.elementor-1840 .elementor-element.elementor-element-03b7715{--width:90%;}.elementor-1840 .elementor-element.elementor-element-9f1acaf{--width:90%;}.elementor-1840 .elementor-element.elementor-element-49dad6a{--width:90%;}.elementor-1840 .elementor-element.elementor-element-103b3df{--width:90%;}.elementor-1840 .elementor-element.elementor-element-9be3d8b{--width:90%;}.elementor-1840 .elementor-element.elementor-element-a152968{--width:90%;}.elementor-1840 .elementor-element.elementor-element-5fccef7{--width:90%;}.elementor-1840 .elementor-element.elementor-element-6697156{--width:90%;}.elementor-1840 .elementor-element.elementor-element-8ab44c8{--width:90%;}.elementor-1840 .elementor-element.elementor-element-0a0e674{--width:90%;}.elementor-1840 .elementor-element.elementor-element-11e5cad{--width:90%;}.elementor-1840 .elementor-element.elementor-element-2e8093b{--width:90%;}.elementor-1840 .elementor-element.elementor-element-cd21f2c{--width:90%;}.elementor-1840 .elementor-element.elementor-element-0cb0b01{--width:90%;}.elementor-1840 .elementor-element.elementor-element-b58d59b{--width:90%;}.elementor-1840 .elementor-element.elementor-element-243c6af{--width:90%;}.elementor-1840 .elementor-element.elementor-element-036575c{--width:90%;}.elementor-1840 .elementor-element.elementor-element-be61b61{--width:90%;}.elementor-1840 .elementor-element.elementor-element-a1aadc5{--width:90%;}.elementor-1840 .elementor-element.elementor-element-d5a8205{--width:90%;}.elementor-1840 .elementor-element.elementor-element-531d513{--width:90%;}.elementor-1840 .elementor-element.elementor-element-40c8bc2{--width:90%;}.elementor-1840 .elementor-element.elementor-element-68f81d8{--width:90%;}.elementor-1840 .elementor-element.elementor-element-a23c143{--width:90%;}.elementor-1840 .elementor-element.elementor-element-8e91f30{--width:90%;}.elementor-1840 .elementor-element.elementor-element-2fdf9b8{--content-width:1200px;}.elementor-1840 .elementor-element.elementor-element-7f06507{--width:1000px;}}@media(max-width:1366px) and (min-width:768px){.elementor-1840 .elementor-element.elementor-element-cc4d82c{--width:561.594px;}.elementor-1840 .elementor-element.elementor-element-7f06507{--width:871px !important;}}@media(max-width:1024px) and (min-width:768px){.elementor-1840 .elementor-element.elementor-element-cc4d82c{--width:100%;}.elementor-1840 .elementor-element.elementor-element-19ef73a{--width:100%;}.elementor-1840 .elementor-element.elementor-element-7f06507{--width:90% !important;}}/* Start custom CSS for image, class: .elementor-element-d00ea87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a0e674 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-18feb89 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-11e5cad *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-efd2705 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e8093b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417d8cf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cd21f2c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-996a2fd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0cb0b01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb01d3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b58d59b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a1cd197 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-243c6af *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-836d359 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-036575c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-432b0b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-be61b61 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3202fac *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1aadc5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2729c4d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5a8205 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-956f028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-531d513 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7ef7be2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-40c8bc2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbd77c7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-68f81d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6039d6f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a23c143 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98ebfeb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8e91f30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d00ea87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-58813d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-192f978 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-03b7715 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fb50e5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1acaf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6cc0c86 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49dad6a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-344d10f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-103b3df *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1adb38b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9be3d8b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2445b4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a152968 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ba830cd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5fccef7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e734431 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6697156 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0b91b1c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8ab44c8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bfdbbfe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a0e674 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-18feb89 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-11e5cad *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-efd2705 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e8093b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417d8cf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cd21f2c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-996a2fd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0cb0b01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb01d3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b58d59b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a1cd197 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-243c6af *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-836d359 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-036575c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-432b0b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-be61b61 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3202fac *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1aadc5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2729c4d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5a8205 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-956f028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-531d513 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7ef7be2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-40c8bc2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbd77c7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-68f81d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6039d6f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a23c143 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98ebfeb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8e91f30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d00ea87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-58813d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-192f978 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-03b7715 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fb50e5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1acaf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6cc0c86 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49dad6a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-344d10f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-103b3df *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1adb38b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9be3d8b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2445b4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a152968 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ba830cd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5fccef7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e734431 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6697156 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0b91b1c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8ab44c8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bfdbbfe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a0e674 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-18feb89 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-11e5cad *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-efd2705 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e8093b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417d8cf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cd21f2c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-996a2fd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0cb0b01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb01d3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b58d59b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a1cd197 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-243c6af *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-836d359 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-036575c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-432b0b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-be61b61 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3202fac *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1aadc5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2729c4d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5a8205 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-956f028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-531d513 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7ef7be2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-40c8bc2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbd77c7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-68f81d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6039d6f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a23c143 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98ebfeb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8e91f30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d00ea87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-58813d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-192f978 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-03b7715 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fb50e5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1acaf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6cc0c86 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49dad6a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-344d10f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-103b3df *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1adb38b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9be3d8b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2445b4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a152968 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ba830cd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5fccef7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e734431 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6697156 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0b91b1c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8ab44c8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bfdbbfe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a0e674 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-18feb89 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-11e5cad *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-efd2705 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e8093b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417d8cf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cd21f2c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-996a2fd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0cb0b01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb01d3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b58d59b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a1cd197 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-243c6af *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-836d359 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-036575c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-432b0b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-be61b61 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3202fac *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1aadc5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2729c4d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5a8205 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-956f028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-531d513 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7ef7be2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-40c8bc2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbd77c7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-68f81d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6039d6f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a23c143 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98ebfeb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8e91f30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d00ea87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-58813d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-192f978 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-03b7715 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fb50e5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1acaf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6cc0c86 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49dad6a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-344d10f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-103b3df *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1adb38b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9be3d8b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2445b4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a152968 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ba830cd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5fccef7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e734431 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6697156 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0b91b1c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8ab44c8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bfdbbfe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a0e674 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-18feb89 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-11e5cad *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-efd2705 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e8093b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417d8cf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cd21f2c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-996a2fd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0cb0b01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb01d3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b58d59b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a1cd197 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-243c6af *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-836d359 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-036575c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-432b0b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-be61b61 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3202fac *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1aadc5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2729c4d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5a8205 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-956f028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-531d513 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7ef7be2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-40c8bc2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbd77c7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-68f81d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6039d6f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a23c143 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98ebfeb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8e91f30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d00ea87 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-58813d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-192f978 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-03b7715 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fb50e5d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1acaf *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6cc0c86 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49dad6a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-344d10f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-103b3df *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1adb38b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9be3d8b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2445b4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a152968 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ba830cd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5fccef7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e734431 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6697156 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0b91b1c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8ab44c8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bfdbbfe *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0a0e674 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-18feb89 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-11e5cad *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-efd2705 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e8093b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-417d8cf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cd21f2c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-996a2fd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0cb0b01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb01d3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b58d59b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a1cd197 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-243c6af *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-836d359 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-036575c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-432b0b0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-be61b61 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3202fac *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1aadc5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2729c4d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5a8205 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-956f028 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-531d513 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7ef7be2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-40c8bc2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cbd77c7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-68f81d8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6039d6f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a23c143 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98ebfeb *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8e91f30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */