.elementor-4538 .elementor-element.elementor-element-a75fa48{--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-4538 .elementor-element.elementor-element-a75fa48::before, .elementor-4538 .elementor-element.elementor-element-a75fa48 > .elementor-background-video-container::before, .elementor-4538 .elementor-element.elementor-element-a75fa48 > .e-con-inner > .elementor-background-video-container::before, .elementor-4538 .elementor-element.elementor-element-a75fa48 > .elementor-background-slideshow::before, .elementor-4538 .elementor-element.elementor-element-a75fa48 > .e-con-inner > .elementor-background-slideshow::before, .elementor-4538 .elementor-element.elementor-element-a75fa48 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0000008C;--background-overlay:'';}.elementor-4538 .elementor-element.elementor-element-c724cbc{--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-4538 .elementor-element.elementor-element-c724cbc.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-60ef3e0 .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-2fbe6b1 .elementor-icon-wrapper{text-align:center;}.elementor-4538 .elementor-element.elementor-element-2fbe6b1.elementor-view-stacked .elementor-icon{background-color:#FFFFFF00;}.elementor-4538 .elementor-element.elementor-element-2fbe6b1.elementor-view-framed .elementor-icon, .elementor-4538 .elementor-element.elementor-element-2fbe6b1.elementor-view-default .elementor-icon{color:#FFFFFF00;border-color:#FFFFFF00;}.elementor-4538 .elementor-element.elementor-element-2fbe6b1.elementor-view-framed .elementor-icon, .elementor-4538 .elementor-element.elementor-element-2fbe6b1.elementor-view-default .elementor-icon svg{fill:#FFFFFF00;}.elementor-4538 .elementor-element.elementor-element-2fbe6b1 .elementor-icon{font-size:16px;}.elementor-4538 .elementor-element.elementor-element-2fbe6b1 .elementor-icon svg{height:16px;}.elementor-4538 .elementor-element.elementor-element-c64a7f1 .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-10c61df{margin:24px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-10c61df .elementor-heading-title{font-size:60px;font-weight:600;line-height:64px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-c27e675{--display:flex;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-4538 .elementor-element.elementor-element-6af83d0{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-4538 .elementor-element.elementor-element-6af83d0.elementor-element{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-6af83d0 .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-4538 .elementor-element.elementor-element-6af83d0 .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-4538 .elementor-element.elementor-element-6af83d0 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#303879;}.elementor-4538 .elementor-element.elementor-element-6af83d0 .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-4538 .elementor-element.elementor-element-6af83d0 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#E71E26;}.elementor-4538 .elementor-element.elementor-element-6af83d0 .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-4538 .elementor-element.elementor-element-6af83d0 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-4538 .elementor-element.elementor-element-8306dc5{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:10px 0px 10px 0px;text-align:center;color:#000000;}.elementor-4538 .elementor-element.elementor-element-8306dc5 p{margin-block-end:10px;}.elementor-4538 .elementor-element.elementor-element-c1e467c{--display:flex;}.elementor-4538 .elementor-element.elementor-element-03a4659{--display:flex;}.elementor-4538 .elementor-element.elementor-element-a4efd3c{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(3, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-4538 .elementor-element.elementor-element-a4efd3c:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-a4efd3c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-4538 .elementor-element.elementor-element-a4efd3c.e-con{--align-self:flex-end;}.elementor-4538 .elementor-element.elementor-element-879f8c4{--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-4538 .elementor-element.elementor-element-879f8c4:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-879f8c4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-879f8c4.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-3604702{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-3604702 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-51b1d7c{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-51b1d7c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-23bbaa8 .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-4538 .elementor-element.elementor-element-23bbaa8 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-23bbaa8 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-23bbaa8{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-4538 .elementor-element.elementor-element-23bbaa8 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-23bbaa8 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-ab632db{--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-4538 .elementor-element.elementor-element-ab632db:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-ab632db > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-ab632db.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-ce9d6e8{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-ce9d6e8 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-2f45a49{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-2f45a49 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-520dc96 .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-4538 .elementor-element.elementor-element-520dc96 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-520dc96 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-520dc96{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-4538 .elementor-element.elementor-element-520dc96 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-520dc96 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-7bcf1c0{--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-4538 .elementor-element.elementor-element-7bcf1c0:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-7bcf1c0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-7bcf1c0.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-ee36bb8{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-ee36bb8 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-96b65e0{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-96b65e0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-2763016 .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-4538 .elementor-element.elementor-element-2763016 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-2763016 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-2763016{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-4538 .elementor-element.elementor-element-2763016 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-2763016 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-25bfc4d{--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-4538 .elementor-element.elementor-element-25bfc4d:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-25bfc4d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-25bfc4d.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-c7a10d8{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-c7a10d8 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-a109568{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-a109568 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-fd8af93 .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-4538 .elementor-element.elementor-element-fd8af93 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-fd8af93 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-fd8af93{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-4538 .elementor-element.elementor-element-fd8af93 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-fd8af93 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-25aad2f{--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-4538 .elementor-element.elementor-element-25aad2f:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-25aad2f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-25aad2f.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-8f4f68a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-8f4f68a img{width:100%;}.elementor-4538 .elementor-element.elementor-element-3445bd3{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-3445bd3 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-bdfc040 .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-4538 .elementor-element.elementor-element-bdfc040 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-bdfc040 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-bdfc040{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-4538 .elementor-element.elementor-element-bdfc040 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-bdfc040 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-5e1dd3a{--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-4538 .elementor-element.elementor-element-5e1dd3a:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-5e1dd3a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-5e1dd3a.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-78eeaf3{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-78eeaf3 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-7e7962b{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-7e7962b .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-3448926 .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-4538 .elementor-element.elementor-element-3448926 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-3448926 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-3448926{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-4538 .elementor-element.elementor-element-3448926 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-3448926 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-5a0e262{--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-4538 .elementor-element.elementor-element-5a0e262:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-5a0e262 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-5a0e262.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-1fdd34e{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-1fdd34e img{width:100%;}.elementor-4538 .elementor-element.elementor-element-8085198{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-8085198 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-de09e68 .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-4538 .elementor-element.elementor-element-de09e68 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-de09e68 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-de09e68{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-4538 .elementor-element.elementor-element-de09e68 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-de09e68 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-d6a65f1{--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-4538 .elementor-element.elementor-element-d6a65f1:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-d6a65f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-d6a65f1.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-9689413{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-9689413 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-4af0621{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-4af0621 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-e046e07 .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-4538 .elementor-element.elementor-element-e046e07 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-e046e07 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-e046e07{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-4538 .elementor-element.elementor-element-e046e07 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-e046e07 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-85ef341{--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-4538 .elementor-element.elementor-element-85ef341:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-85ef341 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-85ef341.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-f59dacc{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-f59dacc img{width:100%;}.elementor-4538 .elementor-element.elementor-element-14d5d2c{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-14d5d2c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-a772788 .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-4538 .elementor-element.elementor-element-a772788 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-a772788 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-a772788{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-4538 .elementor-element.elementor-element-a772788 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-a772788 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-4711b9d{--display:flex;}.elementor-4538 .elementor-element.elementor-element-cd76f8d{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(3, 1fr);--grid-auto-flow:row;--justify-items:center;--border-radius:30px 30px 30px 30px;--margin-top:10px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:40px;--padding-left:90px;--padding-right:90px;}.elementor-4538 .elementor-element.elementor-element-cd76f8d:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-cd76f8d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-4538 .elementor-element.elementor-element-cd76f8d.e-con{--align-self:flex-end;}.elementor-4538 .elementor-element.elementor-element-f6f944f{--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-4538 .elementor-element.elementor-element-f6f944f:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-f6f944f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-f6f944f.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-6041ceb{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-6041ceb img{width:100%;}.elementor-4538 .elementor-element.elementor-element-698dd5f{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-698dd5f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-f5b773f .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-4538 .elementor-element.elementor-element-f5b773f .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-f5b773f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-f5b773f{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-4538 .elementor-element.elementor-element-f5b773f .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-f5b773f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-3cbbf74{--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-4538 .elementor-element.elementor-element-3cbbf74:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-3cbbf74 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-3cbbf74.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-257c61d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-257c61d img{width:100%;}.elementor-4538 .elementor-element.elementor-element-1434941{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-1434941 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-4e37a8f .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-4538 .elementor-element.elementor-element-4e37a8f .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-4e37a8f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-4e37a8f{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-4538 .elementor-element.elementor-element-4e37a8f .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-4e37a8f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-37d852d{--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-4538 .elementor-element.elementor-element-37d852d:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-37d852d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-37d852d.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-88407de{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-88407de img{width:100%;}.elementor-4538 .elementor-element.elementor-element-daa972c{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-daa972c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-bb1eabd .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-4538 .elementor-element.elementor-element-bb1eabd .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-bb1eabd .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-bb1eabd{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-4538 .elementor-element.elementor-element-bb1eabd .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-bb1eabd .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-6f3a081{--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-4538 .elementor-element.elementor-element-6f3a081:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-6f3a081 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-6f3a081.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-792a555{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-792a555 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-f199f5c{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-f199f5c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-3edb596 .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-4538 .elementor-element.elementor-element-3edb596 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-3edb596 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-3edb596{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-4538 .elementor-element.elementor-element-3edb596 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-3edb596 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-7c357d6{--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-4538 .elementor-element.elementor-element-7c357d6:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-7c357d6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-7c357d6.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-987db9b{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-987db9b img{width:100%;}.elementor-4538 .elementor-element.elementor-element-782aff3{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-782aff3 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-de8c727 .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-4538 .elementor-element.elementor-element-de8c727 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-de8c727 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-de8c727{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-4538 .elementor-element.elementor-element-de8c727 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-de8c727 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-3026552{--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-4538 .elementor-element.elementor-element-3026552:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-3026552 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-3026552.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-6ecd570{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-6ecd570 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-f0bc9b5{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-f0bc9b5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-1d0f770 .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-4538 .elementor-element.elementor-element-1d0f770 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-1d0f770 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-1d0f770{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-4538 .elementor-element.elementor-element-1d0f770 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-1d0f770 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-64aad71{--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-4538 .elementor-element.elementor-element-64aad71:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-64aad71 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-64aad71.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-6628083{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-6628083 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-b96b5b7{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-b96b5b7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-1b3d378 .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-4538 .elementor-element.elementor-element-1b3d378 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-1b3d378 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-1b3d378{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-4538 .elementor-element.elementor-element-1b3d378 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-1b3d378 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-4a8621d{--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-4538 .elementor-element.elementor-element-4a8621d:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-4a8621d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-4a8621d.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-6d9ac87{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-6d9ac87 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-575406e{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-575406e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-f508e39 .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-4538 .elementor-element.elementor-element-f508e39 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-f508e39 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-f508e39{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-4538 .elementor-element.elementor-element-f508e39 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-f508e39 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-19edfd9{--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-4538 .elementor-element.elementor-element-19edfd9:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-19edfd9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-19edfd9.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-672bc15{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-4538 .elementor-element.elementor-element-672bc15 img{width:100%;}.elementor-4538 .elementor-element.elementor-element-bc8d398{padding:20px 05px 0px 05px;text-align:center;}.elementor-4538 .elementor-element.elementor-element-bc8d398 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-9612709 .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-4538 .elementor-element.elementor-element-9612709 .elementor-button:hover, .elementor-4538 .elementor-element.elementor-element-9612709 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-9612709{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-4538 .elementor-element.elementor-element-9612709 .elementor-button:hover svg, .elementor-4538 .elementor-element.elementor-element-9612709 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-79d1ffb{--display:flex;}.elementor-4538 .elementor-element.elementor-element-c405489{--display:flex;}.elementor-4538 .elementor-element.elementor-element-42f1b41{--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-4538 .elementor-element.elementor-element-42f1b41 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-42f1b41.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-4538 .elementor-element.elementor-element-42f1b41.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-4538 .elementor-element.elementor-element-42f1b41.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-4538 .elementor-element.elementor-element-42f1b41.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-4538 .elementor-element.elementor-element-42f1b41 [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-4538 .elementor-element.elementor-element-a20fbe9{--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-4538 .elementor-element.elementor-element-a20fbe9 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#001D8C;}.elementor-4538 .elementor-element.elementor-element-a20fbe9.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-4538 .elementor-element.elementor-element-a20fbe9.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-4538 .elementor-element.elementor-element-a20fbe9.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-4538 .elementor-element.elementor-element-a20fbe9 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;}.elementor-4538 .elementor-element.elementor-element-07073f9{--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-4538 .elementor-element.elementor-element-c09fdc3{width:100%;max-width:100%;margin:40px 0px calc(var(--kit-widget-spacing, 0px) + 030px) 200px;}.elementor-4538 .elementor-element.elementor-element-c09fdc3.elementor-element{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-c09fdc3 .jeg-elementor-kit.jkit-animated-text{text-align:left;}.elementor-4538 .elementor-element.elementor-element-c09fdc3 .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-4538 .elementor-element.elementor-element-c09fdc3 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#303879;}.elementor-4538 .elementor-element.elementor-element-c09fdc3 .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-4538 .elementor-element.elementor-element-c09fdc3 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#E71E26;}.elementor-4538 .elementor-element.elementor-element-c09fdc3 .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-4538 .elementor-element.elementor-element-c09fdc3 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-4538 .elementor-element.elementor-element-bc3b26f{width:var( --container-widget-width, 85% );max-width:85%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 10px;--container-widget-width:85%;--container-widget-flex-grow:0;font-size:18px;color:#000000;}.elementor-4538 .elementor-element.elementor-element-7d375e8{width:var( --container-widget-width, 85% );max-width:85%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 10px;--container-widget-width:85%;--container-widget-flex-grow:0;font-size:18px;color:#000000;}.elementor-4538 .elementor-element.elementor-element-817fe73{--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-4538 .elementor-element.elementor-element-ac2b771{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4538 .elementor-element.elementor-element-ac2b771.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4538 .elementor-element.elementor-element-f91507d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-4538 .elementor-element.elementor-element-f91507d .elementor-heading-title{font-size:40px;line-height:56px;letter-spacing:-0.02em;color:#000000;}.elementor-4538 .elementor-element.elementor-element-a282cb7 img{width:100%;max-width:100%;}.elementor-4538 .elementor-element.elementor-element-952af19{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4538 .elementor-element.elementor-element-472eeae .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-4538 .elementor-element.elementor-element-472eeae .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-4538 .elementor-element.elementor-element-472eeae .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-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card .elementskit-card-header>.elementskit-btn-link[aria-expanded="true"]{border-style:none;border-radius:8px 8px 8px 8px;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card:not(:last-child){margin-bottom:12px;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-body p{color:var( --e-global-color-text );}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-body{color:var( --e-global-color-text );border-radius:0px 0px 8px 8px;padding:12px 32px 24px 32px;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-body p, .elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-body{font-family:"Inter", Sans-serif;font-size:15px;font-weight:400;line-height:24px;letter-spacing:-0.02em;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion > .elementskit-card.active{border-radius:8px 8px 8px 8px;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-header > .elementskit-btn-link{border-radius:8px 8px 0px 0px;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion > .elementskit-card{border-radius:8px 8px 8px 8px;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-header > .elementskit-btn-link.collapsed{border-radius:8px 8px 8px 8px;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-header .elementskit-btn-link .ekit_accordion_normal_icon{font-size:16px;color:#02010100;fill:#02010100;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card .elementskit-card-header .elementskit-btn-link .ekit_accordion_active_icon{font-size:16px;color:#000000;fill:#000000;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card .elementskit-card-header .elementskit-btn-link .ekit_accordion_icon_group{padding:7px 7px 7px 7px;}.elementor-4538 .elementor-element.elementor-element-472eeae .ekit_accordion_icon_group, .elementor-4538 .elementor-element.elementor-element-472eeae .ekit_accordion_icon_left_group{margin:0px 10px 0px 0px;}.elementor-4538 .elementor-element.elementor-element-b745daa{--display:flex;}.elementor-4538 .elementor-element.elementor-element-aa45936{--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-4538 .elementor-element.elementor-element-8c7ef77{--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-4538 .elementor-element.elementor-element-8f8e235{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 12px) 0px;--icon-box-icon-margin:8px;}.elementor-4538 .elementor-element.elementor-element-8f8e235 .elementor-icon-box-wrapper{align-items:center;}.elementor-4538 .elementor-element.elementor-element-8f8e235 .elementor-icon-box-title{margin-block-end:0px;color:#000000;}.elementor-4538 .elementor-element.elementor-element-8f8e235.elementor-view-stacked .elementor-icon{background-color:#02010100;}.elementor-4538 .elementor-element.elementor-element-8f8e235.elementor-view-framed .elementor-icon, .elementor-4538 .elementor-element.elementor-element-8f8e235.elementor-view-default .elementor-icon{fill:#02010100;color:#02010100;border-color:#02010100;}.elementor-4538 .elementor-element.elementor-element-8f8e235 .elementor-icon{font-size:20px;}.elementor-4538 .elementor-element.elementor-element-8f8e235 .elementor-icon-box-title, .elementor-4538 .elementor-element.elementor-element-8f8e235 .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-4538 .elementor-element.elementor-element-422bd48{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4538 .elementor-element.elementor-element-422bd48 .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-4538 .elementor-element.elementor-element-422bd48 .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-4538 .elementor-element.elementor-element-422bd48 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-422bd48 .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-4538 .elementor-element.elementor-element-422bd48 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#001D8C;}.elementor-4538 .elementor-element.elementor-element-422bd48 .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-4538 .elementor-element.elementor-element-422bd48 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-4538 .elementor-element.elementor-element-dbeefa2{--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-4538 .elementor-element.elementor-element-dbeefa2:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-dbeefa2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://stark.edu.np/wp-content/uploads/2025/07/markus-leo-p_Q8El-tS-M-unsplash.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-4538 .elementor-element.elementor-element-4b00c9a{--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-4538 .elementor-element.elementor-element-4b00c9a:not(.elementor-motion-effects-element-type-background), .elementor-4538 .elementor-element.elementor-element-4b00c9a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4538 .elementor-element.elementor-element-4b00c9a.e-con{--align-self:center;}.elementor-4538 .elementor-element.elementor-element-10bad90{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-4538 .elementor-element.elementor-element-10bad90 .elementor-heading-title{font-size:32px;font-weight:600;line-height:40px;letter-spacing:-0.02em;color:#AB0C2F;}.elementor-4538 .elementor-element.elementor-element-9cd8245{--display:flex;--min-height:0px;--margin-top:-140px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;}.elementor-4538 .elementor-element.elementor-element-0784348{margin:00px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4538 .elementor-element.elementor-element-0784348 iframe{height:450px;}@media(max-width:1366px){.elementor-4538 .elementor-element.elementor-element-a4efd3c{--grid-auto-flow:row;}.elementor-4538 .elementor-element.elementor-element-cd76f8d{--grid-auto-flow:row;}.elementor-4538 .elementor-element.elementor-element-817fe73{--padding-top:100px;--padding-bottom:124px;--padding-left:40px;--padding-right:40px;}.elementor-4538 .elementor-element.elementor-element-f91507d .elementor-heading-title{font-size:40px;}.elementor-4538 .elementor-element.elementor-element-4b00c9a{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}}@media(max-width:1024px){.elementor-4538 .elementor-element.elementor-element-a75fa48{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-4538 .elementor-element.elementor-element-6af83d0 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;line-height:1.4em;}.elementor-4538 .elementor-element.elementor-element-6af83d0 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;line-height:1.4em;}.elementor-4538 .elementor-element.elementor-element-a4efd3c{--grid-auto-flow:row;}.elementor-4538 .elementor-element.elementor-element-cd76f8d{--grid-auto-flow:row;}.elementor-4538 .elementor-element.elementor-element-c09fdc3 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;line-height:1.4em;}.elementor-4538 .elementor-element.elementor-element-c09fdc3 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;line-height:1.4em;}.elementor-4538 .elementor-element.elementor-element-817fe73{--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-4538 .elementor-element.elementor-element-aa45936{--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-4538 .elementor-element.elementor-element-422bd48 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;}.elementor-4538 .elementor-element.elementor-element-422bd48 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;}.elementor-4538 .elementor-element.elementor-element-dbeefa2{--min-height:440px;}}@media(max-width:767px){.elementor-4538 .elementor-element.elementor-element-a75fa48{--min-height:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-4538 .elementor-element.elementor-element-c724cbc{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-4538 .elementor-element.elementor-element-10c61df{margin:14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-4538 .elementor-element.elementor-element-10c61df .elementor-heading-title{font-size:48px;line-height:1.1em;}.elementor-4538 .elementor-element.elementor-element-6af83d0 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-4538 .elementor-element.elementor-element-6af83d0 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-4538 .elementor-element.elementor-element-a4efd3c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4538 .elementor-element.elementor-element-cd76f8d{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-4538 .elementor-element.elementor-element-c09fdc3 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-4538 .elementor-element.elementor-element-c09fdc3 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-4538 .elementor-element.elementor-element-817fe73{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}.elementor-4538 .elementor-element.elementor-element-f91507d .elementor-heading-title{font-size:32px;line-height:1.4em;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-header>.elementskit-btn-link{font-size:18px;line-height:1.4em;}.elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-body p, .elementor-4538 .elementor-element.elementor-element-472eeae .elementskit-accordion .elementskit-card-body{font-size:13px;line-height:1.4em;}.elementor-4538 .elementor-element.elementor-element-aa45936{--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-4538 .elementor-element.elementor-element-422bd48 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-4538 .elementor-element.elementor-element-422bd48 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-4538 .elementor-element.elementor-element-4b00c9a{--width:90% !important;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}@media(min-width:768px){.elementor-4538 .elementor-element.elementor-element-a75fa48{--content-width:1200px;}.elementor-4538 .elementor-element.elementor-element-c724cbc{--width:fit-content;}.elementor-4538 .elementor-element.elementor-element-879f8c4{--width:90%;}.elementor-4538 .elementor-element.elementor-element-ab632db{--width:90%;}.elementor-4538 .elementor-element.elementor-element-7bcf1c0{--width:90%;}.elementor-4538 .elementor-element.elementor-element-25bfc4d{--width:90%;}.elementor-4538 .elementor-element.elementor-element-25aad2f{--width:90%;}.elementor-4538 .elementor-element.elementor-element-5e1dd3a{--width:90%;}.elementor-4538 .elementor-element.elementor-element-5a0e262{--width:90%;}.elementor-4538 .elementor-element.elementor-element-d6a65f1{--width:90%;}.elementor-4538 .elementor-element.elementor-element-85ef341{--width:90%;}.elementor-4538 .elementor-element.elementor-element-f6f944f{--width:90%;}.elementor-4538 .elementor-element.elementor-element-3cbbf74{--width:90%;}.elementor-4538 .elementor-element.elementor-element-37d852d{--width:90%;}.elementor-4538 .elementor-element.elementor-element-6f3a081{--width:90%;}.elementor-4538 .elementor-element.elementor-element-7c357d6{--width:90%;}.elementor-4538 .elementor-element.elementor-element-3026552{--width:90%;}.elementor-4538 .elementor-element.elementor-element-64aad71{--width:90%;}.elementor-4538 .elementor-element.elementor-element-4a8621d{--width:90%;}.elementor-4538 .elementor-element.elementor-element-19edfd9{--width:90%;}.elementor-4538 .elementor-element.elementor-element-07073f9{--width:95%;}.elementor-4538 .elementor-element.elementor-element-817fe73{--width:95%;}.elementor-4538 .elementor-element.elementor-element-ac2b771{--width:480px;}.elementor-4538 .elementor-element.elementor-element-952af19{--width:676px;}.elementor-4538 .elementor-element.elementor-element-aa45936{--content-width:1200px;}.elementor-4538 .elementor-element.elementor-element-4b00c9a{--width:1000px;}}@media(max-width:1366px) and (min-width:768px){.elementor-4538 .elementor-element.elementor-element-ac2b771{--width:561.594px;}.elementor-4538 .elementor-element.elementor-element-4b00c9a{--width:871px !important;}}@media(max-width:1024px) and (min-width:768px){.elementor-4538 .elementor-element.elementor-element-ac2b771{--width:100%;}.elementor-4538 .elementor-element.elementor-element-952af19{--width:100%;}.elementor-4538 .elementor-element.elementor-element-4b00c9a{--width:90% !important;}}/* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-3604702 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-879f8c4 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ce9d6e8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ab632db *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-ee36bb8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7bcf1c0 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-c7a10d8 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25bfc4d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-8f4f68a *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-25aad2f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-78eeaf3 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5e1dd3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-1fdd34e *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5a0e262 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-9689413 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d6a65f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-f59dacc *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-85ef341 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6041ceb *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6f944f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-257c61d *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3cbbf74 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-88407de *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-37d852d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-792a555 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6f3a081 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-987db9b *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-7c357d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6ecd570 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3026552 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6628083 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-64aad71 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-6d9ac87 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4a8621d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */ /* Start custom CSS for image, class: .elementor-element-672bc15 *//* ===== Image: rounded top + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area like Blue Lotus */ object-position: center top !important; /* favors the top of the image */ display: block !important; border-radius: 0 !important; /* image itself not rounded (wrapper handles rounding) */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } } /* ===== Image: rounded top & bottom + cover ===== Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes) */ .inst-media-top { display: block !important; width: 100% !important; height: 190px; /* adjust height to your preference */ overflow: hidden !important; border-radius: 18px !important; /* all corners rounded */ padding: 0 !important; margin: 0 !important; background: #fff; /* neutral bg behind logos */ } /* ensure the actual fills the wrapper and covers */ .inst-media-top img { width: 100% !important; height: 100% !important; object-fit: cover !important; /* fills the area */ object-position: center top !important; /* favors the top */ display: block !important; border-radius: 0 !important; /* wrapper handles rounding */ } /* responsive: slightly shorter on smaller screens */ @media (max-width: 1024px) { .inst-media-top { height: 150px; } } @media (max-width: 480px) { .inst-media-top { height: 120px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-19edfd9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */ .inst-card-hover { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; will-change: transform, box-shadow; /* keep existing layout/padding — this only adds animation */ } .inst-card-hover:hover, .inst-card-hover:focus-within { transform: translateY(-6px) scale(1.02); /* small lift + subtle scale */ box-shadow: 0 18px 36px rgba(12,24,48,0.18); border-color: rgba(11,102,209,0.08); /* light accent ring only */ z-index: 6; /* rise above neighbors */ } /* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */ @media (hover: none) { .inst-card-hover:hover { transform: none; box-shadow: none; } }/* End custom CSS */