.elementor-61 .elementor-element.elementor-element-51fb7cc{--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;--padding-top:20px;--padding-bottom:10px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-b32ca3f{--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;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-b32ca3f:not(.elementor-motion-effects-element-type-background), .elementor-61 .elementor-element.elementor-element-b32ca3f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-widget-nested-tabs.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-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.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-accent );}.elementor-widget-nested-tabs.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:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-nested-tabs{--n-tabs-title-font-size:var( --e-global-typography-accent-font-size );}.elementor-61 .elementor-element.elementor-element-451e19f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-d92ec51{--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;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-61 .elementor-element.elementor-element-39d6dd6{text-align:center;}.elementor-61 .elementor-element.elementor-element-39d6dd6 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );color:var( --e-global-color-b81ce27 );}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-a4c5daa{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:8px;padding:0px 0px 50px 0px;}.elementor-61 .elementor-element.elementor-element-a4c5daa .elementor-divider-separator{width:372px;margin:0 auto;margin-center:0;}.elementor-61 .elementor-element.elementor-element-a4c5daa .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-61 .elementor-element.elementor-element-4569307 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-e939ae1{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;}.elementor-61 .elementor-element.elementor-element-313c4f5{--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;}.elementor-61 .elementor-element.elementor-element-f5bb2e6 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-e7bb3d4{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-62ea7ff{--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;}.elementor-61 .elementor-element.elementor-element-7a9d9c8 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-dfa1709{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-f3274bf{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-4b896f2{--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;}.elementor-61 .elementor-element.elementor-element-348c07a{text-align:center;}.elementor-61 .elementor-element.elementor-element-348c07a .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-4c72cab{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:8px;padding:0px 0px 50px 0px;}.elementor-61 .elementor-element.elementor-element-4c72cab .elementor-divider-separator{width:372px;margin:0 auto;margin-center:0;}.elementor-61 .elementor-element.elementor-element-4c72cab .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-61 .elementor-element.elementor-element-1569d5f .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-2b5824c{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-7e51e15{--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;}.elementor-61 .elementor-element.elementor-element-7a09f3a .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-3156b5a{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-9230de2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-a41828a{--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;}.elementor-61 .elementor-element.elementor-element-43b5dc1{text-align:center;}.elementor-61 .elementor-element.elementor-element-43b5dc1 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-9b07d80{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:8px;padding:0px 0px 50px 0px;}.elementor-61 .elementor-element.elementor-element-9b07d80 .elementor-divider-separator{width:372px;margin:0 auto;margin-center:0;}.elementor-61 .elementor-element.elementor-element-9b07d80 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-61 .elementor-element.elementor-element-ffa1004 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-9f7cd18{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-cce5b52{--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;}.elementor-61 .elementor-element.elementor-element-1d41d81 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-48f559e{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-aa9c864{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-ab5541a{--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;}.elementor-61 .elementor-element.elementor-element-fad025f{text-align:center;}.elementor-61 .elementor-element.elementor-element-fad025f .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-7c55b39{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:8px;padding:0px 0px 50px 0px;}.elementor-61 .elementor-element.elementor-element-7c55b39 .elementor-divider-separator{width:372px;margin:0 auto;margin-center:0;}.elementor-61 .elementor-element.elementor-element-7c55b39 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-61 .elementor-element.elementor-element-37c5ac9 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-1ebebed{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-afbc007{--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;}.elementor-61 .elementor-element.elementor-element-a8534c1 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-f8fc3df{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-09c9114{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-61 .elementor-element.elementor-element-af6253f{--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;}.elementor-61 .elementor-element.elementor-element-4f2304b{text-align:center;}.elementor-61 .elementor-element.elementor-element-4f2304b .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-5335875{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:8px;padding:0px 0px 50px 0px;}.elementor-61 .elementor-element.elementor-element-5335875 .elementor-divider-separator{width:372px;margin:0 auto;margin-center:0;}.elementor-61 .elementor-element.elementor-element-5335875 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-61 .elementor-element.elementor-element-470e48a .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-cf79f7a{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-ed01fcb{--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;}.elementor-61 .elementor-element.elementor-element-d0c9d76 .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-b36f372{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-80aebe5{--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;}.elementor-61 .elementor-element.elementor-element-e87417b .elementor-heading-title{font-family:"Open Sans", Sans-serif;font-size:18px;font-weight:500;font-style:italic;line-height:30px;color:var( --e-global-color-b81ce27 );}.elementor-61 .elementor-element.elementor-element-6e8af03{--grid-columns:4;--grid-row-gap:8px;--grid-column-gap:8px;--e-loop-nothing-found-message-color:var( --e-global-color-secondary );}.elementor-61 .elementor-element.elementor-element-c289f6f{--n-tabs-heading-wrap:nowrap;--n-tabs-heading-overflow-x:scroll;--n-tabs-title-white-space:nowrap;--n-tabs-title-gap:0px;--n-tabs-gap:36px;--n-tabs-title-transition:0.3s;--n-tabs-title-border-radius:0px 0px 0px 0px;--n-tabs-title-font-size:var( --e-global-typography-text-font-size );--n-tabs-title-color:var( --e-global-color-b81ce27 );--n-tabs-title-direction:row;--n-tabs-icon-order:1;--n-tabs-title-justify-content-toggle:initial;--n-tabs-title-align-items-toggle:center;--n-tabs-icon-size:15px;--n-tabs-icon-color:var( --e-global-color-accent );}.elementor-61 .elementor-element.elementor-element-c289f6f > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:var( --e-global-color-4777205 );}.elementor-61 .elementor-element.elementor-element-c289f6f.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-primary );border-style:solid;border-width:0px 0px 2px 0px;border-color:var( --e-global-color-accent );}.elementor-61 .elementor-element.elementor-element-c289f6f.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-61 .elementor-element.elementor-element-c289f6f.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 );border-style:solid;border-width:0px 0px 2px 0px;border-color:var( --e-global-color-accent );}.elementor-61 .elementor-element.elementor-element-c289f6f.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:not( :hover ){border-style:none;}.elementor-61 .elementor-element.elementor-element-c289f6f.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:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-61 .elementor-element.elementor-element-51fb7cc{--padding-top:5%;--padding-bottom:3%;--padding-left:5%;--padding-right:5%;}.elementor-widget-nested-tabs{--n-tabs-title-font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-nested-tabs.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 ){line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-61 .elementor-element.elementor-element-39d6dd6 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-4569307 .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-e939ae1{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-f5bb2e6 .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-e7bb3d4{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-7a9d9c8 .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-dfa1709{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-348c07a .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-1569d5f .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-2b5824c{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-7a09f3a .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-3156b5a{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-43b5dc1 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-ffa1004 .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-9f7cd18{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-1d41d81 .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-48f559e{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-fad025f .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-37c5ac9 .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-1ebebed{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-a8534c1 .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-f8fc3df{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-4f2304b .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-470e48a .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-cf79f7a{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-d0c9d76 .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-b36f372{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-e87417b .elementor-heading-title{font-size:30px;line-height:30px;}.elementor-61 .elementor-element.elementor-element-6e8af03{--grid-columns:2;}.elementor-61 .elementor-element.elementor-element-c289f6f{--n-tabs-title-font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-widget-nested-tabs{--n-tabs-title-font-size:var( --e-global-typography-accent-font-size );}.elementor-widget-nested-tabs.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 ){line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-61 .elementor-element.elementor-element-39d6dd6 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-a4c5daa .elementor-divider-separator{width:280px;}.elementor-61 .elementor-element.elementor-element-4569307 .elementor-heading-title{font-size:24px;}.elementor-widget-loop-grid .elementor-pagination{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-widget-loop-grid .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-widget-loop-grid .e-load-more-message{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-e939ae1{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-f5bb2e6 .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-e7bb3d4{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-7a9d9c8 .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-dfa1709{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-348c07a .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-4c72cab .elementor-divider-separator{width:280px;}.elementor-61 .elementor-element.elementor-element-1569d5f .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-2b5824c{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-7a09f3a .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-3156b5a{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-43b5dc1 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-9b07d80 .elementor-divider-separator{width:280px;}.elementor-61 .elementor-element.elementor-element-ffa1004 .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-9f7cd18{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-1d41d81 .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-48f559e{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-fad025f .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-7c55b39 .elementor-divider-separator{width:280px;}.elementor-61 .elementor-element.elementor-element-37c5ac9 .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-1ebebed{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-a8534c1 .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-f8fc3df{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-4f2304b .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-61 .elementor-element.elementor-element-5335875 .elementor-divider-separator{width:280px;}.elementor-61 .elementor-element.elementor-element-470e48a .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-cf79f7a{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-d0c9d76 .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-b36f372{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-e87417b .elementor-heading-title{font-size:24px;}.elementor-61 .elementor-element.elementor-element-6e8af03{--grid-columns:1;}.elementor-61 .elementor-element.elementor-element-c289f6f{--n-tabs-title-font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS for loop-grid, class: .elementor-element-e939ae1 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e7bb3d4 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-dfa1709 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-2b5824c *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-3156b5a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-9f7cd18 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-48f559e *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-1ebebed *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-f8fc3df *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-cf79f7a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-b36f372 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-6e8af03 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e939ae1 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e7bb3d4 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-dfa1709 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-2b5824c *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-3156b5a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-9f7cd18 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-48f559e *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-1ebebed *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-f8fc3df *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-cf79f7a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-b36f372 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-6e8af03 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e939ae1 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e7bb3d4 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-dfa1709 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-2b5824c *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-3156b5a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-9f7cd18 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-48f559e *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-1ebebed *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-f8fc3df *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-cf79f7a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-b36f372 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-6e8af03 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e939ae1 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e7bb3d4 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-dfa1709 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-2b5824c *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-3156b5a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-9f7cd18 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-48f559e *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-1ebebed *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-f8fc3df *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-cf79f7a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-b36f372 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-6e8af03 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e939ae1 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e7bb3d4 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-dfa1709 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-2b5824c *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-3156b5a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-9f7cd18 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-48f559e *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-1ebebed *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-f8fc3df *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-cf79f7a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-b36f372 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-6e8af03 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e939ae1 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-e7bb3d4 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-dfa1709 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-2b5824c *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-3156b5a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-9f7cd18 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-48f559e *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-1ebebed *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-f8fc3df *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-cf79f7a *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-b36f372 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-6e8af03 *//* 1. Setup the main card container */
.team-member-card {
  position: relative;
  overflow: visible; /* CHANGED: Allows the dropdown text to spill out of the card */
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

/* 2. Format the image wrapper */
.team-member-card .image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* ADDED: Keeps the image hover effect contained here */
  /* If your cards have rounded corners, add your border-radius here too, e.g.: border-radius: 8px; */
}

/* 3. Position the hover image exactly over the normal image */
.team-member-card .image-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 4. Swap the images on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .image-hover,
.team-member-card.active .image-hover {
  opacity: 1;
}

/* 5. CHANGED: Absolute positioning makes the text float without pushing layout */
.team-member-card .member-details {
  position: absolute;
  top: 100%; /* Places it perfectly at the bottom edge of the card */
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  z-index: 99; /* Forces it to sit ON TOP of the cards in the row below */
  
  /* IMPORTANT: You must give this a background color, otherwise 
     it will be transparent and clash with the content it covers. */
  background-color: #ffffff; 
  
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1); /* Optional: gives it a clean "dropdown" depth */
  transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
  box-sizing: border-box;
}

/* 6. Reveal the text on HOVER (Desktop) or ACTIVE (Mobile) */
.team-member-card:hover .member-details,
.team-member-card.active .member-details {
  max-height: 500px; 
  opacity: 1;
  padding: 20px; /* Gives the floating text nice inside padding */
}/* End custom CSS */