.elementor-1911 .elementor-element.elementor-element-508fcc1{--display:flex;--min-height:85vh;--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;--justify-content:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--overlay-opacity:0.4;--padding-top:50px;--padding-bottom:50px;--padding-left:100px;--padding-right:50px;}.elementor-1911 .elementor-element.elementor-element-508fcc1:not(.elementor-motion-effects-element-type-background), .elementor-1911 .elementor-element.elementor-element-508fcc1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://it.dit.hua.gr/wp-content/uploads/2026/09/jh8Cir2Bla2RELG11Py0kJLWbqZ2jUNK9wNzvBp1LVlqi00yZE65ZC7owe7UiKvgA37UlUYIDFlYLrg_P4N_JGs5_9Rfo90XbNxcCrMqNTL3r4UWpi2qjLfC18ZAkCBHvGDJrCQZribVSZKOGfu8HWY-d_KPveVLvClSu0AMx1apyW-I4M4zt1QdSXK1uz5.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1911 .elementor-element.elementor-element-508fcc1::before, .elementor-1911 .elementor-element.elementor-element-508fcc1 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-508fcc1 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-508fcc1 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-508fcc1 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-508fcc1 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-9e62f45 );--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1911 .elementor-element.elementor-element-78d11e0 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:14px;font-weight:500;color:var( --e-global-color-0940656 );}.elementor-1911 .elementor-element.elementor-element-312f8d3 .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:70px;font-weight:600;color:var( --e-global-color-0f639b7 );}.elementor-1911 .elementor-element.elementor-element-b6748ef{padding:0px 0px 0px 100px;}.elementor-1911 .elementor-element.elementor-element-b6748ef .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:70px;font-weight:300;font-style:italic;color:var( --e-global-color-0940656 );}.elementor-1911 .elementor-element.elementor-element-e46e151{--spacer-size:50px;}.elementor-1911 .elementor-element.elementor-element-aa9b6af .elementor-heading-title{font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:var( --e-global-color-0f639b7 );}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon-wrapper{text-align:center;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon{font-size:28px;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon svg{height:28px;}.elementor-1911 .elementor-element.elementor-element-d5ad59b{--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-1911 .elementor-element.elementor-element-b71fd9d{--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;}.elementor-1911 .elementor-element.elementor-element-7440643{--display:flex;}.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-weight:var( --e-global-typography-secondary-font-weight );}.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-1911 .elementor-element.elementor-element-f7f4894{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1911 .elementor-element.elementor-element-f7f4894 .elementor-divider-separator{width:35%;}.elementor-1911 .elementor-element.elementor-element-f7f4894 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1911 .elementor-element.elementor-element-2828d5a{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1911 .elementor-element.elementor-element-e181e32{--display:flex;}.elementor-1911 .elementor-element.elementor-element-e01608c{--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;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1911 .elementor-element.elementor-element-db34d5c{--display:flex;}.elementor-1911 .elementor-element.elementor-element-0e87b4d{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1911 .elementor-element.elementor-element-0e87b4d .elementor-divider-separator{width:100%;}.elementor-1911 .elementor-element.elementor-element-0e87b4d .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1911 .elementor-element.elementor-element-4c84488{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:24px 24px;--row-gap:24px;--column-gap:24px;}.elementor-1911 .elementor-element.elementor-element-77c30f5{--display:flex;}.elementor-1911 .elementor-element.elementor-element-2053da4{--display:flex;}.elementor-1911 .elementor-element.elementor-element-f101185{--display:flex;}.elementor-1911 .elementor-element.elementor-element-22e83d5{--display:flex;}.elementor-1911 .elementor-element.elementor-element-86a1e7c{--display:flex;}.elementor-1911 .elementor-element.elementor-element-aaee15f{--display:flex;}.elementor-1911 .elementor-element.elementor-element-4694ce8{--display:flex;}.elementor-1911 .elementor-element.elementor-element-fb39103{--display:flex;}.elementor-1911 .elementor-element.elementor-element-4925cb8{--display:flex;}.elementor-1911 .elementor-element.elementor-element-60055cd{--display:flex;}.elementor-1911 .elementor-element.elementor-element-900cf6e{--display:flex;}.elementor-1911 .elementor-element.elementor-element-4e935df{--display:flex;}.elementor-1911 .elementor-element.elementor-element-f650aba{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;}.elementor-1911 .elementor-element.elementor-element-3bef6ca{--display:flex;}.elementor-1911 .elementor-element.elementor-element-d94005a{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1911 .elementor-element.elementor-element-d94005a .elementor-divider-separator{width:100%;}.elementor-1911 .elementor-element.elementor-element-d94005a .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1911 .elementor-element.elementor-element-168bd97{--display:flex;}.elementor-1911 .elementor-element.elementor-element-168bd97.e-con{--align-self:center;}.elementor-1911 .elementor-element.elementor-element-cce83d2{--display:flex;}.elementor-1911 .elementor-element.elementor-element-25ca3b9{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1911 .elementor-element.elementor-element-25ca3b9 .elementor-divider-separator{width:100%;}.elementor-1911 .elementor-element.elementor-element-25ca3b9 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1911 .elementor-element.elementor-element-a1a0220{--display:flex;}.elementor-1911 .elementor-element.elementor-element-e9a6fa6{--display:flex;}.elementor-1911 .elementor-element.elementor-element-67faf9b{--display:flex;}.elementor-1911 .elementor-element.elementor-element-6254a6a{--display:flex;}.elementor-1911 .elementor-element.elementor-element-f260402{--display:flex;}.elementor-1911 .elementor-element.elementor-element-506d7ea{--display:flex;}.elementor-1911 .elementor-element.elementor-element-a39773c{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1911 .elementor-element.elementor-element-a39773c .elementor-divider-separator{width:100%;}.elementor-1911 .elementor-element.elementor-element-a39773c .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1911 .elementor-element.elementor-element-ec6b4f2{--display:flex;}.elementor-1911 .elementor-element.elementor-element-edbd8f7{--display:flex;}.elementor-1911 .elementor-element.elementor-element-2ea1594{--display:flex;}.elementor-1911 .elementor-element.elementor-element-b16f936{--display:flex;}.elementor-1911 .elementor-element.elementor-element-bb5faec{--display:flex;}.elementor-1911 .elementor-element.elementor-element-c0b02eb{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1911 .elementor-element.elementor-element-c0b02eb .elementor-divider-separator{width:100%;}.elementor-1911 .elementor-element.elementor-element-c0b02eb .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1911 .elementor-element.elementor-element-1937b4f{--display:flex;--padding-top:0px;--padding-bottom:50px;--padding-left:180px;--padding-right:180px;}.elementor-1911 .elementor-element.elementor-element-3c195b1{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:12px 12px;--row-gap:12px;--column-gap:12px;}.elementor-1911 .elementor-element.elementor-element-4e0a978 .elementor-button{background-color:var( --e-global-color-0f639b7 );font-family:"Manrope", Sans-serif;font-size:20px;font-weight:600;fill:var( --e-global-color-9e62f45 );color:var( --e-global-color-9e62f45 );transition-duration:0.2s;border-style:solid;border-width:2px 2px 2px 2px;border-color:#AFAFAF;border-radius:10px 10px 10px 10px;padding:15px 25px 15px 25px;}.elementor-1911 .elementor-element.elementor-element-4e0a978 .elementor-button:hover, .elementor-1911 .elementor-element.elementor-element-4e0a978 .elementor-button:focus{background-color:var( --e-global-color-9e62f45 );color:var( --e-global-color-0f639b7 );box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-1911 .elementor-element.elementor-element-4e0a978 .elementor-button:hover svg, .elementor-1911 .elementor-element.elementor-element-4e0a978 .elementor-button:focus svg{fill:var( --e-global-color-0f639b7 );}.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-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-1911 .elementor-element.elementor-element-71abedd{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-71abedd > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-71abedd .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-71abedd .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-71abedd .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-71abedd .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-71abedd .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-d7f2394{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-d7f2394 > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-d7f2394 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-d7f2394 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-d7f2394 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-d7f2394 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-d7f2394 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-96edd65{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-96edd65 > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-96edd65 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-96edd65 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-96edd65 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-96edd65 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-96edd65 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-c2f1f27{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-c2f1f27 > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-c2f1f27 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-c2f1f27 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-c2f1f27 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-c2f1f27 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-c2f1f27 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-5d7addc{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-5d7addc > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-5d7addc .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-5d7addc .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-5d7addc .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-5d7addc .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-5d7addc .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-5df1f25{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-5df1f25 > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-5df1f25 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-5df1f25 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-5df1f25 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-5df1f25 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-5df1f25 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-f48eed0{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-f48eed0 > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-f48eed0 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-f48eed0 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-f48eed0 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-f48eed0 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-f48eed0 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-639ed4f{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-639ed4f > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-639ed4f .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-639ed4f .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-639ed4f .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-639ed4f .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-639ed4f .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-70bb383{--display:flex;}.elementor-1911 .elementor-element.elementor-element-4ffcd7e{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1911 .elementor-element.elementor-element-4ffcd7e .elementor-divider-separator{width:100%;}.elementor-1911 .elementor-element.elementor-element-4ffcd7e .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1911 .elementor-element.elementor-element-4aa7ae8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-1911 .elementor-element.elementor-element-93104ae{--grid-columns:3;}.elementor-1911 .elementor-element.elementor-element-93104ae > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-93104ae .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-93104ae .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-93104ae .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-93104ae .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-93104ae .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-a936de3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-1911 .elementor-element.elementor-element-5df8fa0{--grid-columns:3;}.elementor-1911 .elementor-element.elementor-element-5df8fa0 > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-5df8fa0 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-5df8fa0 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-5df8fa0 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-5df8fa0 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-5df8fa0 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-b698f23{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-1911 .elementor-element.elementor-element-c53481f{--grid-columns:3;}.elementor-1911 .elementor-element.elementor-element-c53481f > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-c53481f .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-c53481f .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-c53481f .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-c53481f .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-c53481f .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-856f7b9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-1911 .elementor-element.elementor-element-675a7ab{--grid-columns:3;}.elementor-1911 .elementor-element.elementor-element-675a7ab > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-675a7ab .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-675a7ab .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-675a7ab .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-675a7ab .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-675a7ab .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-3c00f4c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-1911 .elementor-element.elementor-element-b97e5a3{--grid-columns:3;}.elementor-1911 .elementor-element.elementor-element-b97e5a3 > .elementor-widget-container{padding:30px 0px 0px 0px;}.elementor-1911 .elementor-element.elementor-element-b97e5a3 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-b97e5a3 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1911 .elementor-element.elementor-element-b97e5a3 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-b97e5a3 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1911 .elementor-element.elementor-element-b97e5a3 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1911 .elementor-element.elementor-element-037ca4d{--display:flex;}.elementor-1911 .elementor-element.elementor-element-e337cb6{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1911 .elementor-element.elementor-element-e337cb6 .elementor-divider-separator{width:100%;}.elementor-1911 .elementor-element.elementor-element-e337cb6 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1911 .elementor-element.elementor-element-abdc0e9{--display:flex;}.elementor-1911 .elementor-element.elementor-element-82e5791{--display:flex;}.elementor-1911 .elementor-element.elementor-element-1aa60bc{--display:flex;}.elementor-1911 .elementor-element.elementor-element-d192f3a{--display:flex;}.elementor-1911 .elementor-element.elementor-element-f584c37{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1911 .elementor-element.elementor-element-7440643{--width:65%;}.elementor-1911 .elementor-element.elementor-element-2828d5a{--width:35%;}}@media(max-width:1366px){.elementor-1911 .elementor-element.elementor-element-508fcc1{--min-height:70vh;}.elementor-1911 .elementor-element.elementor-element-312f8d3 .elementor-heading-title{font-size:50px;}.elementor-1911 .elementor-element.elementor-element-b6748ef .elementor-heading-title{font-size:50px;}.elementor-1911 .elementor-element.elementor-element-aa9b6af .elementor-heading-title{font-size:15px;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon{font-size:24px;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon svg{height:24px;}.elementor-1911 .elementor-element.elementor-element-1937b4f{--padding-top:0px;--padding-bottom:40px;--padding-left:60px;--padding-right:60px;}}@media(max-width:1200px){.elementor-1911 .elementor-element.elementor-element-508fcc1{--min-height:55vh;--justify-content:flex-end;--padding-top:050px;--padding-bottom:050px;--padding-left:70px;--padding-right:050px;}.elementor-1911 .elementor-element.elementor-element-78d11e0 .elementor-heading-title{font-size:12px;}.elementor-1911 .elementor-element.elementor-element-312f8d3 .elementor-heading-title{font-size:40px;}.elementor-1911 .elementor-element.elementor-element-b6748ef .elementor-heading-title{font-size:40px;}.elementor-1911 .elementor-element.elementor-element-e46e151{--spacer-size:30px;}.elementor-1911 .elementor-element.elementor-element-aa9b6af .elementor-heading-title{font-size:13px;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon{font-size:28px;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon svg{height:28px;}.elementor-1911 .elementor-element.elementor-element-1937b4f{--padding-top:0px;--padding-bottom:30px;--padding-left:50px;--padding-right:50px;}}@media(max-width:1024px){.elementor-1911 .elementor-element.elementor-element-508fcc1{--min-height:40vh;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-1911 .elementor-element.elementor-element-508fcc1:not(.elementor-motion-effects-element-type-background), .elementor-1911 .elementor-element.elementor-element-508fcc1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1911 .elementor-element.elementor-element-78d11e0 .elementor-heading-title{font-size:10px;}.elementor-1911 .elementor-element.elementor-element-312f8d3 .elementor-heading-title{font-size:30px;}.elementor-1911 .elementor-element.elementor-element-b6748ef{padding:0px 0px 0px 40px;}.elementor-1911 .elementor-element.elementor-element-b6748ef .elementor-heading-title{font-size:30px;}.elementor-1911 .elementor-element.elementor-element-e46e151{--spacer-size:15px;}.elementor-1911 .elementor-element.elementor-element-aa9b6af .elementor-heading-title{font-size:9px;line-height:1.4em;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon{font-size:23px;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon svg{height:23px;}.elementor-1911 .elementor-element.elementor-element-1937b4f{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-1911 .elementor-element.elementor-element-71abedd{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-d7f2394{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-96edd65{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-c2f1f27{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-5d7addc{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-5df1f25{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-f48eed0{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-639ed4f{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-93104ae{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-5df8fa0{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-c53481f{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-675a7ab{--grid-columns:2;}.elementor-1911 .elementor-element.elementor-element-b97e5a3{--grid-columns:2;}}@media(max-width:767px){.elementor-1911 .elementor-element.elementor-element-508fcc1{--min-height:35vh;--justify-content:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1911 .elementor-element.elementor-element-78d11e0 .elementor-heading-title{font-size:9px;}.elementor-1911 .elementor-element.elementor-element-312f8d3 .elementor-heading-title{font-size:20px;}.elementor-1911 .elementor-element.elementor-element-b6748ef .elementor-heading-title{font-size:16px;}.elementor-1911 .elementor-element.elementor-element-aa9b6af{text-align:start;}.elementor-1911 .elementor-element.elementor-element-aa9b6af .elementor-heading-title{font-size:9px;line-height:13px;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon{font-size:20px;}.elementor-1911 .elementor-element.elementor-element-3e7587c .elementor-icon svg{height:20px;}.elementor-1911 .elementor-element.elementor-element-1937b4f{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1911 .elementor-element.elementor-element-71abedd{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-d7f2394{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-96edd65{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-c2f1f27{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-5d7addc{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-5df1f25{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-f48eed0{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-639ed4f{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-93104ae{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-5df8fa0{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-c53481f{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-675a7ab{--grid-columns:1;}.elementor-1911 .elementor-element.elementor-element-b97e5a3{--grid-columns:1;}}/* Start custom CSS for icon, class: .elementor-element-3e7587c *//* ================================= */ /* HERO SCROLL ARROW */ /* BLUE + GOLD DETAILS */ /* ================================= */ .hero-scroll-arrow { display: flex; justify-content: center; align-items: center; margin-top: 48px; } /* ICON */ .hero-scroll-arrow .elementor-icon { position: relative; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; color: #5CC8F1; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) ); border: 1px solid rgba(92, 200, 241, 0.55); border-radius: 50%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14), 0 0 18px rgba(92, 200, 241, 0.12); animation: elegantArrow 2.2s ease-in-out infinite; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* GOLD ACCENT RING */ .hero-scroll-arrow .elementor-icon::before { content: ""; position: absolute; width: 68px; height: 68px; border: 1px solid rgba(212, 175, 55, 0.42); border-radius: 50%; pointer-events: none; } /* SMALL GOLD DETAIL */ .hero-scroll-arrow .elementor-icon::after { content: ""; position: absolute; top: -7px; width: 7px; height: 7px; background: #D4AF37; border-radius: 50%; box-shadow: 0 0 10px rgba(212, 175, 55, 0.45); } /* SVG */ .hero-scroll-arrow .elementor-icon svg { width: 24px; height: 24px; } /* HOVER */ .hero-scroll-arrow .elementor-icon:hover { transform: translateY(5px) scale(1.05); border-color: rgba(92, 200, 241, 0.9); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), 0 0 24px rgba(92, 200, 241, 0.22), 0 0 18px rgba(212, 175, 55, 0.10); } /* ANIMATION */ @keyframes elegantArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* ================================================= */ /* TABLET */ /* 768px – 1024px */ /* ================================================= */ @media (max-width: 1024px) { .hero-scroll-arrow { margin-top: 15px; } .hero-scroll-arrow .elementor-icon { width: 50px; height: 50px; } .hero-scroll-arrow .elementor-icon::before { width: 60px; height: 60px; } .hero-scroll-arrow .elementor-icon::after { width: 6px; height: 6px; top: -6px; } .hero-scroll-arrow .elementor-icon svg { width: 21px; height: 21px; } } /* ================================================= */ /* MOBILE */ /* έως 767px */ /* ================================================= */ @media (max-width: 767px) { .hero-scroll-arrow { margin-top: 12px; } .hero-scroll-arrow .elementor-icon { width: 44px; height: 44px; border-width: 1px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 0 12px rgba(92, 200, 241, 0.10); } .hero-scroll-arrow .elementor-icon::before { width: 52px; height: 52px; border-color: rgba(201, 169, 93, 0.38); } .hero-scroll-arrow .elementor-icon::after { width: 5px; height: 5px; top: -5px; } .hero-scroll-arrow .elementor-icon svg { width: 18px; height: 18px; } @keyframes elegantArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b71fd9d *//* ================================================= */ /* PROGRAMME HERO — DESKTOP */ /* ================================================= */ .programme-hero { position: relative; width: 100%; padding: 88px 6% 82px; box-sizing: border-box; overflow: hidden; } /* ================================================= */ /* MAIN LAYOUT */ /* ================================================= */ .programme-hero > .e-con-inner { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 1500px !important; margin: 0 auto !important; gap: 64px !important; } /* ================================================= */ /* LEFT COLUMN */ /* ================================================= */ .programme-hero-left { width: 64% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; } /* ================================================= */ /* EYEBROW */ /* ================================================= */ .programme-hero-eyebrow { margin: 0 0 16px 0 !important; } .programme-hero-eyebrow .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.20em !important; text-transform: uppercase; color: #001B44 !important; } /* ================================================= */ /* MAIN TITLE */ /* ================================================= */ .programme-hero-title { width: 100% !important; margin: 0 !important; } .programme-hero-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: clamp(56px, 5vw, 82px) !important; font-weight: 400 !important; line-height: 0.98 !important; letter-spacing: -0.055em !important; color: #001B44 !important; } .programme-hero-title strong { font-weight: 800 !important; } /* ================================================= */ /* GOLD DIVIDER */ /* ================================================= */ .programme-hero-divider { width: 90px !important; margin: 26px 0 24px !important; } .programme-hero-divider .elementor-divider { padding: 0 !important; } .programme-hero-divider .elementor-divider-separator { width: 90px !important; border-top-width: 3px !important; border-top-color: #C9A85C !important; } /* ================================================= */ /* DESCRIPTION */ /* ================================================= */ .programme-hero-description { width: 90% !important; max-width: 790px; margin: 0 !important; } .programme-hero-description, .programme-hero-description p { font-family: "Manrope", sans-serif !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.72 !important; color: rgba(0, 27, 68, 0.80) !important; } .programme-hero-description p { margin: 0 !important; } /* ================================================= */ /* RIGHT COLUMN */ /* ================================================= */ .programme-hero-right { position: relative; width: 36% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; isolation: isolate; } /* ================================================= */ /* DECORATIVE RINGS */ /* ================================================= */ .programme-hero-right::before, .programme-hero-right::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0; } .programme-hero-right::before { width: 470px; height: 470px; border: 1px solid rgba(201, 168, 92, 0.28); } .programme-hero-right::after { width: 530px; height: 530px; border: 1px solid rgba(201, 168, 92, 0.13); } /* ================================================= */ /* HERO IMAGE */ /* ================================================= */ .programme-hero-image { position: relative; z-index: 2; width: min(410px, 100%) !important; margin: 0 auto !important; } .programme-hero-image .elementor-widget-container { width: 100% !important; aspect-ratio: 1 / 1; } .programme-hero-image img { display: block; width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1; object-fit: cover; object-position: center center; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 24px 60px rgba(0, 27, 68, 0.14); } /* ================================================= */ /* LAPTOP — UP TO 1366px */ /* ================================================= */ @media (max-width: 1366px) { .programme-hero { padding: 72px 5% 68px; } .programme-hero > .e-con-inner { gap: 46px !important; } .programme-hero-left { width: 60% !important; } .programme-hero-right { width: 40% !important; } .programme-hero-title .elementor-heading-title { font-size: clamp(44px, 4.2vw, 58px) !important; line-height: 1.01 !important; letter-spacing: -0.045em !important; } .programme-hero-description { width: 96% !important; } .programme-hero-description, .programme-hero-description p { font-size: 16px !important; line-height: 1.68 !important; } .programme-hero-image { width: 345px !important; } .programme-hero-right::before { width: 390px; height: 390px; } .programme-hero-right::after { width: 435px; height: 435px; } } /* ================================================= */ /* TABLET LANDSCAPE — UP TO 1200px */ /* ================================================= */ @media (max-width: 1200px) { .programme-hero { padding: 62px 5% 60px; } .programme-hero > .e-con-inner { gap: 34px !important; } .programme-hero-left { width: 55% !important; } .programme-hero-right { width: 45% !important; } .programme-hero-eyebrow { margin-bottom: 13px !important; } .programme-hero-eyebrow .elementor-heading-title { font-size: 11px !important; letter-spacing: 0.17em !important; } .programme-hero-title .elementor-heading-title { font-size: clamp(39px, 4vw, 48px) !important; line-height: 1.02 !important; letter-spacing: -0.042em !important; } .programme-hero-divider { width: 72px !important; margin: 21px 0 19px !important; } .programme-hero-divider .elementor-divider-separator { width: 72px !important; } .programme-hero-description { width: 100% !important; } .programme-hero-description, .programme-hero-description p { font-size: 14.5px !important; line-height: 1.62 !important; } .programme-hero-image { width: 285px !important; } .programme-hero-right::before { width: 325px; height: 325px; } .programme-hero-right::after { width: 365px; height: 365px; } } /* ================================================= */ /* TABLET PORTRAIT — UP TO 1024px */ /* ================================================= */ @media (max-width: 1024px) { .programme-hero { padding: 52px 5% 55px; } /* * Tablet παραμένει σε δύο στήλες. */ .programme-hero > .e-con-inner { flex-direction: row !important; align-items: center !important; gap: 26px !important; } .programme-hero-left { width: 58% !important; } .programme-hero-right { width: 42% !important; } .programme-hero-eyebrow { margin-bottom: 11px !important; } .programme-hero-eyebrow .elementor-heading-title { font-size: 10px !important; letter-spacing: 0.15em !important; } .programme-hero-title .elementor-heading-title { font-size: clamp(34px, 4.3vw, 43px) !important; line-height: 1.03 !important; letter-spacing: -0.04em !important; } .programme-hero-divider { width: 62px !important; margin: 18px 0 17px !important; } .programme-hero-divider .elementor-divider-separator { width: 62px !important; border-top-width: 2px !important; } .programme-hero-description { width: 100% !important; max-width: 100% !important; } .programme-hero-description, .programme-hero-description p { font-size: 13px !important; line-height: 1.55 !important; } .programme-hero-image { width: min(245px, 100%) !important; } .programme-hero-right::before { width: 280px; height: 280px; } .programme-hero-right::after { width: 315px; height: 315px; } } /* ================================================= */ /* MOBILE PORTRAIT — UP TO 767px */ /* ================================================= */ @media (max-width: 767px) { .programme-hero { padding: 46px 20px 52px; } /* * Μόνο στο mobile αλλάζει σε μία στήλη. */ .programme-hero > .e-con-inner { flex-direction: column !important; align-items: flex-start !important; gap: 42px !important; } .programme-hero-left, .programme-hero-right { width: 100% !important; } .programme-hero-eyebrow { margin-bottom: 12px !important; } .programme-hero-eyebrow .elementor-heading-title { font-size: 10px !important; letter-spacing: 0.16em !important; } .programme-hero-title .elementor-heading-title { font-size: clamp(36px, 10.5vw, 48px) !important; line-height: 1.02 !important; letter-spacing: -0.042em !important; } .programme-hero-divider { width: 65px !important; margin: 20px 0 18px !important; } .programme-hero-divider .elementor-divider-separator { width: 65px !important; } .programme-hero-description { width: 100% !important; max-width: 560px !important; } .programme-hero-description, .programme-hero-description p { font-size: 14px !important; line-height: 1.65 !important; } .programme-hero-right { min-height: 310px; } .programme-hero-image { width: min(275px, 74vw) !important; } .programme-hero-right::before { width: min(315px, 84vw); height: min(315px, 84vw); } .programme-hero-right::after { width: min(350px, 92vw); height: min(350px, 92vw); } } /* ================================================= */ /* SMALL MOBILE — UP TO 480px */ /* ================================================= */ @media (max-width: 480px) { .programme-hero { padding: 40px 18px 48px; } .programme-hero > .e-con-inner { gap: 36px !important; } .programme-hero-title .elementor-heading-title { font-size: clamp(34px, 10vw, 42px) !important; } .programme-hero-description, .programme-hero-description p { font-size: 13.5px !important; line-height: 1.62 !important; } .programme-hero-right { min-height: 275px; } .programme-hero-image { width: min(240px, 72vw) !important; } .programme-hero-right::before { width: min(275px, 82vw); height: min(275px, 82vw); } .programme-hero-right::after { width: min(305px, 90vw); height: min(305px, 90vw); } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e01608c *//* ========================================================= PROGRAMME NAVIGATION — VERSION 1 DESKTOP BAR + MOBILE RADIAL ORBIT ========================================================= */ html { scroll-behavior: smooth; } /* ========================================================= DESKTOP / BASE ========================================================= */ .programme-navigation { position: relative !important; width: min(92%, 1500px) !important; max-width: 1500px !important; margin: 0 auto 28px !important; padding: 8px !important; box-sizing: border-box !important; background: rgba(255,255,255,0.88) !important; border: 1px solid rgba(0,27,68,0.07) !important; border-radius: 17px !important; box-shadow: 0 14px 36px rgba(0,27,68,0.07) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden !important; z-index: 20; } .programme-navigation > .e-con-inner { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(7, minmax(0,1fr)) !important; gap: 4px !important; align-items: stretch !important; justify-items: stretch !important; } .programme-navigation .programme-nav-link { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .programme-navigation .programme-nav-link .elementor-widget-container { width: 100% !important; height: 100% !important; } .programme-navigation .programme-nav-link .elementor-button { position: relative !important; width: 100% !important; min-width: 0 !important; min-height: 54px !important; padding: 11px 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: transparent !important; border: none !important; border-radius: 11px !important; box-shadow: none !important; overflow: hidden !important; transition: background .28s ease, box-shadow .28s ease, transform .28s ease; } .programme-navigation .programme-nav-link .elementor-button-content-wrapper { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .programme-navigation .programme-nav-link .elementor-button-text { width: 100% !important; font-family: "Manrope", sans-serif !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.25 !important; text-align: center !important; color: #001B44 !important; white-space: normal !important; transition: color .28s ease; } /* GOLD LINE */ .programme-navigation .programme-nav-link .elementor-button::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 0; height: 3px; transform: translateX(-50%); background: #D6B56D; border-radius: 20px; transition: width .28s ease; } /* DESKTOP HOVER */ @media (hover:hover) { .programme-navigation .programme-nav-link .elementor-button:hover { background: linear-gradient( 135deg, #001B44 0%, #0B3268 100% ) !important; box-shadow: 0 8px 20px rgba(0,27,68,.14) !important; transform: translateY(-1px); } .programme-navigation .programme-nav-link .elementor-button:hover .elementor-button-text { color: #FFFFFF !important; } .programme-navigation .programme-nav-link .elementor-button:hover::after { width: 34px !important; } } /* NO ACTIVE */ .programme-navigation .programme-nav-link .elementor-button:focus, .programme-navigation .programme-nav-link .elementor-button:active { background: transparent !important; box-shadow: none !important; } .programme-navigation .programme-nav-link .elementor-button:focus .elementor-button-text, .programme-navigation .programme-nav-link .elementor-button:active .elementor-button-text { color: #001B44 !important; } /* ========================================================= LAPTOP ========================================================= */ @media (max-width:1366px) { .programme-navigation { width: 92% !important; padding: 7px !important; } .programme-navigation .programme-nav-link .elementor-button { min-height: 50px !important; padding: 9px 6px !important; } .programme-navigation .programme-nav-link .elementor-button-text { font-size: 11px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1024px) { .programme-navigation { width: 90% !important; padding: 7px !important; border-radius: 15px !important; } .programme-navigation > .e-con-inner { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 5px !important; } .programme-navigation .programme-nav-link .elementor-button { min-height: 48px !important; } .programme-navigation .programme-nav-link .elementor-button-text { font-size: 10.5px !important; } } /* ========================================================= PROGRAMME NAVIGATION — SAFE MOBILE VERSION No absolute positioning No radial layout ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------- WRAPPER ----------------------------------------- */ .programme-navigation-wrap { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; align-items: center !important; overflow: visible !important; } /* ----------------------------------------- MAIN NAVIGATION PANEL ----------------------------------------- */ .programme-navigation { position: relative !important; width: 100% !important; max-width: 380px !important; min-width: 0 !important; margin: 0 auto 24px !important; padding: 8px !important; box-sizing: border-box !important; background: rgba(255,255,255,0.92) !important; border: 1px solid rgba(0,27,68,0.08) !important; border-radius: 16px !important; box-shadow: 0 12px 30px rgba(0,27,68,0.08) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; } /* ----------------------------------------- INNER LAYOUT ----------------------------------------- */ .programme-navigation > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; align-items: stretch !important; justify-items: stretch !important; } /* ----------------------------------------- NAV ITEM ----------------------------------------- */ .programme-navigation .programme-nav-link { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; } /* ----------------------------------------- ELEMENTOR WIDGET CONTAINER ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-widget-container { width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------- BUTTON ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 7px 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: rgba(255,255,255,0.8) !important; border: 1px solid rgba(0,27,68,0.06) !important; border-radius: 10px !important; box-shadow: none !important; overflow: hidden !important; transform: none !important; } /* ----------------------------------------- CONTENT ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button-content-wrapper { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* ----------------------------------------- TEXT ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button-text { width: 100% !important; margin: 0 !important; font-family: "Manrope", sans-serif !important; font-size: 10px !important; font-weight: 650 !important; line-height: 1.2 !important; color: #001B44 !important; text-align: center !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } /* ----------------------------------------- GOLD INDICATOR ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; transform: translateX(-50%); border-radius: 10px; background: #D6B56D; } /* ----------------------------------------- LAST ITEM CENTERED ----------------------------------------- */ .programme-navigation .programme-nav-link:last-child { grid-column: 1 / -1 !important; width: calc(50% - 3px) !important; justify-self: center !important; } /* ----------------------------------------- NO ACTIVE STATE ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button:focus, .programme-navigation .programme-nav-link .elementor-button:active { background: rgba(255,255,255,0.8) !important; box-shadow: none !important; transform: none !important; } .programme-navigation .programme-nav-link .elementor-button:focus .elementor-button-text, .programme-navigation .programme-nav-link .elementor-button:active .elementor-button-text { color: #001B44 !important; } .programme-navigation .programme-nav-link .elementor-button:focus::after, .programme-navigation .programme-nav-link .elementor-button:active::after { width: 0 !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .programme-navigation-wrap { padding: 0 10px !important; } .programme-navigation { max-width: 350px !important; padding: 6px !important; } .programme-navigation > .e-con-inner { gap: 5px !important; } .programme-navigation .programme-nav-link .elementor-button { height: 46px !important; min-height: 46px !important; padding: 6px 4px !important; } .programme-navigation .programme-nav-link .elementor-button-text { font-size: 9.2px !important; } } /* ========================================================= ANCHORS ========================================================= */ #overview, #programme-scope, #programme-objectives, #learning-outcomes, #curriculum, #teaching-staff, #programme-resources { scroll-margin-top: 125px; } @media (max-width:1024px) { #overview, #programme-scope, #programme-objectives, #learning-outcomes, #curriculum, #teaching-staff, #programme-resources { scroll-margin-top: 100px; } } @media (max-width:767px) { #overview, #programme-scope, #programme-objectives, #learning-outcomes, #curriculum, #teaching-staff, #programme-resources { scroll-margin-top: 90px; } } /* ========================================================= PROGRAMME NAVIGATION — CLEAN MOBILE GRID 2 columns / white buttons / no white container background ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------- WRAPPER ----------------------------------------- */ .programme-navigation-wrap { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; align-items: center !important; } /* ----------------------------------------- MAIN NAVIGATION remove outer white panel ----------------------------------------- */ .programme-navigation { width: 100% !important; max-width: 390px !important; margin: 0 auto 26px !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; } /* ----------------------------------------- GRID ----------------------------------------- */ .programme-navigation > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch !important; justify-items: stretch !important; } /* ----------------------------------------- ITEMS ----------------------------------------- */ .programme-navigation .programme-nav-link { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; } .programme-navigation .programme-nav-link .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------- WHITE BUTTON ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button { width: 100% !important; min-width: 0 !important; min-height: 52px !important; height: 52px !important; margin: 0 !important; padding: 8px 7px !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; background: #FFFFFF !important; border: 1px solid rgba(0, 27, 68, 0.08) !important; border-radius: 13px !important; box-shadow: 0 7px 18px rgba(0, 27, 68, 0.06) !important; overflow: hidden !important; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important; } /* ----------------------------------------- CONTENT ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button-content-wrapper { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* ----------------------------------------- TEXT ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button-text { width: 100% !important; margin: 0 !important; font-family: "Manrope", sans-serif !important; font-size: 10px !important; font-weight: 650 !important; line-height: 1.2 !important; color: #001B44 !important; text-align: center !important; white-space: normal !important; } /* ----------------------------------------- GOLD LINE ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 0; height: 2px; transform: translateX(-50%); border-radius: 20px; background: #D6B56D; transition: width 0.25s ease; } /* ----------------------------------------- LAST ITEM — CENTERED ----------------------------------------- */ .programme-navigation .programme-nav-link:last-child { grid-column: 1 / -1 !important; width: calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; justify-self: center !important; } /* ----------------------------------------- TAP / FOCUS ----------------------------------------- */ .programme-navigation .programme-nav-link .elementor-button:focus, .programme-navigation .programme-nav-link .elementor-button:active { background: linear-gradient( 135deg, #001B44, #0B3268 ) !important; box-shadow: 0 9px 20px rgba(0, 27, 68, 0.14) !important; transform: translateY(-1px) !important; } .programme-navigation .programme-nav-link .elementor-button:focus .elementor-button-text, .programme-navigation .programme-nav-link .elementor-button:active .elementor-button-text { color: #FFFFFF !important; } .programme-navigation .programme-nav-link .elementor-button:focus::after, .programme-navigation .programme-nav-link .elementor-button:active::after { width: 28px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .programme-navigation-wrap { padding: 0 12px !important; } .programme-navigation { max-width: 350px !important; } .programme-navigation > .e-con-inner { gap: 8px !important; } .programme-navigation .programme-nav-link .elementor-button { height: 50px !important; min-height: 50px !important; padding: 7px 5px !important; } .programme-navigation .programme-nav-link .elementor-button-text { font-size: 9.3px !important; } .programme-navigation .programme-nav-link:last-child { width: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-db34d5c *//* ========================================================= */ /* PROGRAMME AT A GLANCE — COMPLETE RESPONSIVE CSS */ /* ========================================================= */ /* ========================================================= */ /* SECTION */ /* ========================================================= */ .programme-glance { position: relative; width: 88% !important; max-width: 1500px !important; margin: 0 auto !important; padding: 72px 0 82px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; } /* ========================================================= */ /* SECTION TITLE */ /* ========================================================= */ .programme-section-title { width: 100% !important; margin: 0 !important; } .programme-section-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 42px !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -0.035em !important; color: #001B44 !important; } /* ========================================================= */ /* GOLD DIVIDER */ /* ========================================================= */ .programme-section-divider { width: 68px !important; margin: 15px 0 18px !important; } .programme-section-divider .elementor-divider { padding: 0 !important; } .programme-section-divider .elementor-divider-separator { width: 68px !important; border-top-width: 3px !important; border-top-color: #C9A85C !important; } /* ========================================================= */ /* INTRO TEXT */ /* ========================================================= */ .programme-section-intro { width: 100% !important; max-width: 680px !important; margin: 0 !important; } .programme-section-intro, .programme-section-intro p { font-family: "Manrope", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.7 !important; color: rgba(0, 27, 68, 0.70) !important; } .programme-section-intro p { margin: 0 !important; } /* ========================================================= */ /* CARDS GRID */ /* ========================================================= */ .programme-glance-grid { width: 100% !important; margin-top: 34px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; } .programme-glance-grid > .e-con-inner { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= */ /* BASE CARD */ /* ========================================================= */ .programme-glance-card { position: relative; width: 100% !important; min-height: 225px; padding: 30px 38px !important; box-sizing: border-box; border-radius: 24px; overflow: hidden; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 0 !important; isolation: isolate; box-shadow: 0 16px 42px rgba(0, 27, 68, 0.10); transition: transform 0.35s ease, box-shadow 0.35s ease; } /* ========================================================= */ /* NAVY CARD */ /* ========================================================= */ .programme-glance-card-blue { background: linear-gradient( 145deg, #001B44 0%, #062957 48%, #0B3268 100% ) !important; } /* ========================================================= */ /* GOLD CARD */ /* ========================================================= */ .programme-glance-card-gold { background: linear-gradient( 145deg, #F8F1DF 0%, #E8D5A3 50%, #C9A85C 100% ) !important; } /* ========================================================= */ /* DECORATIVE CIRCLES */ /* ========================================================= */ .programme-glance-card::before { content: ""; position: absolute; width: 230px; height: 230px; left: -75px; top: -85px; border-radius: 50%; z-index: -1; pointer-events: none; } .programme-glance-card::after { content: ""; position: absolute; width: 165px; height: 165px; right: -40px; top: -50px; border-radius: 50%; z-index: -1; pointer-events: none; } .programme-glance-card-blue::before { border: 1px solid rgba(255, 255, 255, 0.12); } .programme-glance-card-blue::after { border: 1px solid rgba(214, 181, 109, 0.22); } .programme-glance-card-gold::before { border: 1px solid rgba(0, 27, 68, 0.10); } .programme-glance-card-gold::after { border: 1px solid rgba(255, 255, 255, 0.48); } /* ========================================================= */ /* CARD NUMBER */ /* ========================================================= */ .programme-glance-number { position: absolute !important; top: 25px; right: 31px; margin: 0 !important; z-index: 1; } .programme-glance-number .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 66px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.06em !important; } .programme-glance-card-blue .programme-glance-number .elementor-heading-title { color: rgba(255, 255, 255, 0.09) !important; } .programme-glance-card-gold .programme-glance-number .elementor-heading-title { color: rgba(0, 27, 68, 0.10) !important; } /* ========================================================= */ /* CARD LABEL */ /* ========================================================= */ .programme-glance-label { margin: 0 0 9px 0 !important; } .programme-glance-label .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.16em !important; text-transform: uppercase; } .programme-glance-card-blue .programme-glance-label .elementor-heading-title { color: #D6B56D !important; } .programme-glance-card-gold .programme-glance-label .elementor-heading-title { color: rgba(0, 27, 68, 0.70) !important; } /* ========================================================= */ /* MAIN VALUE */ /* ========================================================= */ .programme-glance-value { margin: 0 !important; width: 100% !important; } .programme-glance-value .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 36px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.035em !important; } .programme-glance-card-blue .programme-glance-value .elementor-heading-title { color: #FFFFFF !important; } .programme-glance-card-gold .programme-glance-value .elementor-heading-title { color: #001B44 !important; } /* ========================================================= */ /* HOVER */ /* ========================================================= */ @media (hover: hover) { .programme-glance-card:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(0, 27, 68, 0.16); } } /* ========================================================= */ /* LAPTOP — UP TO 1366px */ /* ========================================================= */ @media (max-width: 1366px) { .programme-glance { width: 90% !important; padding: 64px 0 72px !important; } .programme-section-title .elementor-heading-title { font-size: 37px !important; } .programme-section-intro, .programme-section-intro p { font-size: 15px !important; } .programme-glance-grid { margin-top: 30px !important; gap: 20px !important; } .programme-glance-grid > .e-con-inner { gap: 20px !important; } .programme-glance-card { min-height: 205px; padding: 27px 31px !important; } .programme-glance-number { top: 22px; right: 27px; } .programme-glance-number .elementor-heading-title { font-size: 56px !important; } .programme-glance-value .elementor-heading-title { font-size: 32px !important; } } /* ========================================================= */ /* TABLET LANDSCAPE — UP TO 1200px */ /* ========================================================= */ @media (max-width: 1200px) { .programme-glance { width: 90% !important; padding: 58px 0 66px !important; } .programme-section-title .elementor-heading-title { font-size: 34px !important; } .programme-section-divider { margin: 13px 0 16px !important; } .programme-glance-grid { margin-top: 28px !important; gap: 18px !important; } .programme-glance-grid > .e-con-inner { gap: 18px !important; } .programme-glance-card { min-height: 180px; padding: 24px 26px !important; border-radius: 20px; } .programme-glance-number { top: 19px; right: 23px; } .programme-glance-number .elementor-heading-title { font-size: 48px !important; } .programme-glance-label .elementor-heading-title { font-size: 10px !important; } .programme-glance-value .elementor-heading-title { font-size: 28px !important; } .programme-glance-card::before { width: 200px; height: 200px; } .programme-glance-card::after { width: 145px; height: 145px; } } /* ========================================================= */ /* TABLET PORTRAIT — UP TO 1024px */ /* ========================================================= */ @media (max-width: 1024px) { .programme-glance { width: 90% !important; padding: 52px 0 60px !important; } .programme-section-title .elementor-heading-title { font-size: 31px !important; } .programme-section-intro { max-width: 600px !important; } .programme-section-intro, .programme-section-intro p { font-size: 14px !important; line-height: 1.65 !important; } .programme-glance-grid, .programme-glance-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } .programme-glance-grid { margin-top: 26px !important; } .programme-glance-card { min-height: 160px; padding: 21px 23px !important; border-radius: 18px; } .programme-glance-number { top: 17px; right: 20px; } .programme-glance-number .elementor-heading-title { font-size: 42px !important; } .programme-glance-label { margin-bottom: 7px !important; } .programme-glance-label .elementor-heading-title { font-size: 9px !important; letter-spacing: 0.13em !important; } .programme-glance-value .elementor-heading-title { font-size: 24px !important; } .programme-glance-card::before { width: 170px; height: 170px; left: -60px; top: -65px; } .programme-glance-card::after { width: 120px; height: 120px; right: -30px; top: -35px; } } /* ========================================================= */ /* MOBILE — UP TO 767px */ /* ========================================================= */ @media (max-width: 767px) { .programme-glance { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 40px 28px 48px !important; box-sizing: border-box !important; overflow: hidden !important; } /* TITLE */ .programme-section-title { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-section-title .elementor-heading-title { font-size: 21px !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; white-space: nowrap !important; } /* DIVIDER */ .programme-section-divider { width: 54px !important; margin: 10px 0 14px !important; } .programme-section-divider .elementor-divider-separator { width: 54px !important; } /* INTRO */ .programme-section-intro { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-section-intro, .programme-section-intro p { width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: 13px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: break-word !important; } /* GRID */ .programme-glance-grid, .programme-glance-grid > .e-con-inner { width: 100% !important; max-width: 100% !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .programme-glance-grid { margin-top: 20px !important; } /* CARDS */ .programme-glance-card { width: 100% !important; max-width: 100% !important; min-height: 108px !important; padding: 16px 18px !important; box-sizing: border-box !important; border-radius: 17px !important; justify-content: flex-end !important; overflow: hidden !important; } /* NUMBER */ .programme-glance-number { top: 12px !important; right: 16px !important; } .programme-glance-number .elementor-heading-title { font-size: 30px !important; line-height: 1 !important; } /* LABEL */ .programme-glance-label { margin: 0 0 5px 0 !important; } .programme-glance-label .elementor-heading-title { font-size: 7.6px !important; line-height: 1.2 !important; letter-spacing: 0.13em !important; } /* VALUE */ .programme-glance-value { width: 100% !important; margin: 0 !important; } .programme-glance-value .elementor-heading-title { font-size: 20px !important; line-height: 1.08 !important; white-space: normal !important; } /* DECORATIVE CIRCLES */ .programme-glance-card::before { width: 125px !important; height: 125px !important; left: -46px !important; top: -52px !important; } .programme-glance-card::after { width: 86px !important; height: 86px !important; right: -18px !important; top: -22px !important; } } /* ========================================================= */ /* SMALL MOBILE — UP TO 480px */ /* ========================================================= */ @media (max-width: 480px) { .programme-glance { padding: 38px 24px 44px !important; } .programme-section-title .elementor-heading-title { font-size: 19px !important; letter-spacing: -0.02em !important; white-space: nowrap !important; } .programme-section-divider { width: 50px !important; margin: 9px 0 13px !important; } .programme-section-divider .elementor-divider-separator { width: 50px !important; } .programme-section-intro, .programme-section-intro p { font-size: 12.5px !important; line-height: 1.55 !important; } .programme-glance-grid { margin-top: 18px !important; } .programme-glance-grid, .programme-glance-grid > .e-con-inner { gap: 10px !important; } .programme-glance-card { min-height: 104px !important; padding: 15px 17px !important; } .programme-glance-number { top: 11px !important; right: 15px !important; } .programme-glance-number .elementor-heading-title { font-size: 28px !important; } .programme-glance-label .elementor-heading-title { font-size: 7.2px !important; } .programme-glance-value .elementor-heading-title { font-size: 19px !important; } } /* ========================================================= */ /* VERY SMALL MOBILE — UP TO 360px */ /* ========================================================= */ @media (max-width: 360px) { .programme-glance { padding: 34px 20px 42px !important; } .programme-section-title .elementor-heading-title { font-size: 17px !important; } .programme-section-intro, .programme-section-intro p { font-size: 12px !important; } .programme-glance-card { min-height: 100px !important; padding: 14px 16px !important; } .programme-glance-value .elementor-heading-title { font-size: 18px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-86a1e7c *//* ========================================================= BSC PROGRAMME OVERVIEW — COMPLETE STYLING ========================================================= */ /* ========================================================= SECTION ========================================================= */ .bsc-po-section { position: relative; width: 88% !important; max-width: 1500px !important; margin: 0 auto !important; padding: 72px 0 82px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; font-family: "Manrope", sans-serif !important; } /* ========================================================= EYEBROW ========================================================= */ .bsc-po-eyebrow { width: 100% !important; margin: 0 0 10px 0 !important; } .bsc-po-eyebrow, .bsc-po-eyebrow p, .bsc-po-eyebrow .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #C9A85C !important; } /* ========================================================= TITLE ========================================================= */ .bsc-po-title { width: 100% !important; margin: 0 !important; } .bsc-po-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 42px !important; font-weight: 800 !important; line-height: 1.12 !important; letter-spacing: -0.035em !important; color: #001B44 !important; } /* GOLD LINE UNDER TITLE */ .bsc-po-title::after { content: ""; display: block; width: 68px; height: 3px; margin: 15px 0 18px 0; background: #C9A85C; } /* ========================================================= INTRO ========================================================= */ .bsc-po-intro { width: 100% !important; max-width: 790px !important; margin: 0 0 38px 0 !important; } .bsc-po-intro, .bsc-po-intro p { font-family: "Manrope", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.7 !important; color: rgba(0, 27, 68, 0.70) !important; } .bsc-po-intro p { margin: 0 0 13px 0 !important; } .bsc-po-intro p:last-child { margin-bottom: 0 !important; } /* ========================================================= GRID ========================================================= */ .bsc-po-grid { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; margin: 0 !important; box-sizing: border-box !important; } /* Elementor nested container support */ .bsc-po-grid > .e-con-inner { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= CARD BASE ========================================================= */ .bsc-po-card { position: relative; width: 100% !important; min-height: 285px; padding: 34px 38px !important; box-sizing: border-box; border-radius: 24px; overflow: hidden; isolation: isolate; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 0 !important; box-shadow: 0 16px 42px rgba(0, 27, 68, 0.10); transition: transform 0.35s ease, box-shadow 0.35s ease; } /* ========================================================= DARK CARD ========================================================= */ .bsc-po-card-dark { background: linear-gradient( 145deg, #001B44 0%, #062957 48%, #0B3268 100% ) !important; color: #FFFFFF !important; } /* ========================================================= LIGHT CARD ========================================================= */ .bsc-po-card-light { background: linear-gradient( 145deg, #F8F1DF 0%, #E8D5A3 50%, #C9A85C 100% ) !important; color: #001B44 !important; } /* ========================================================= DECORATIVE CIRCLES ========================================================= */ .bsc-po-card::before { content: ""; position: absolute; width: 230px; height: 230px; left: -75px; top: -85px; border-radius: 50%; z-index: -1; pointer-events: none; } .bsc-po-card::after { content: ""; position: absolute; width: 165px; height: 165px; right: -40px; top: -50px; border-radius: 50%; z-index: -1; pointer-events: none; } .bsc-po-card-dark::before { border: 1px solid rgba(255, 255, 255, 0.12); } .bsc-po-card-dark::after { border: 1px solid rgba(214, 181, 109, 0.22); } .bsc-po-card-light::before { border: 1px solid rgba(0, 27, 68, 0.10); } .bsc-po-card-light::after { border: 1px solid rgba(255, 255, 255, 0.48); } /* ========================================================= LABEL ========================================================= */ .bsc-po-label { margin: 0 0 9px 0 !important; } .bsc-po-label, .bsc-po-label p, .bsc-po-label .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; } .bsc-po-card-dark .bsc-po-label, .bsc-po-card-dark .bsc-po-label p, .bsc-po-card-dark .bsc-po-label .elementor-heading-title { color: #D6B56D !important; } .bsc-po-card-light .bsc-po-label, .bsc-po-card-light .bsc-po-label p, .bsc-po-card-light .bsc-po-label .elementor-heading-title { color: rgba(0, 27, 68, 0.70) !important; } /* ========================================================= CARD TITLE ========================================================= */ .bsc-po-card-title { width: 100% !important; margin: 0 0 7px 0 !important; } .bsc-po-card-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 34px !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.035em !important; } .bsc-po-card-dark .bsc-po-card-title .elementor-heading-title { color: #FFFFFF !important; } .bsc-po-card-light .bsc-po-card-title .elementor-heading-title { color: #001B44 !important; } /* ========================================================= SUBTITLE ========================================================= */ .bsc-po-subtitle { margin: 0 0 15px 0 !important; } .bsc-po-subtitle, .bsc-po-subtitle p { font-family: "Manrope", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; } .bsc-po-card-dark .bsc-po-subtitle, .bsc-po-card-dark .bsc-po-subtitle p { color: #D6B56D !important; } .bsc-po-card-light .bsc-po-subtitle, .bsc-po-card-light .bsc-po-subtitle p { color: #8C681F !important; } /* ========================================================= DESCRIPTION ========================================================= */ .bsc-po-description { width: 100% !important; max-width: 500px !important; margin: 0 !important; } .bsc-po-description, .bsc-po-description p { font-family: "Manrope", sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.65 !important; } .bsc-po-description p { margin: 0 !important; } .bsc-po-card-dark .bsc-po-description, .bsc-po-card-dark .bsc-po-description p { color: rgba(255, 255, 255, 0.76) !important; } .bsc-po-card-light .bsc-po-description, .bsc-po-card-light .bsc-po-description p { color: rgba(0, 27, 68, 0.74) !important; } /* ========================================================= HOVER ========================================================= */ @media (hover: hover) { .bsc-po-card:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(0, 27, 68, 0.16); } } /* ========================================================= LINK ========================================================= */ .bsc-po-link { margin-top: 30px !important; } .bsc-po-link, .bsc-po-link a, .bsc-po-link .elementor-button { font-family: "Manrope", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #001B44 !important; text-decoration: none !important; } .bsc-po-link a, .bsc-po-link .elementor-button { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 8px 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; border-bottom: 1px solid rgba(0, 27, 68, 0.25) !important; box-shadow: none !important; transition: gap 0.3s ease, border-color 0.3s ease !important; } .bsc-po-link a:hover, .bsc-po-link .elementor-button:hover { gap: 15px !important; color: #001B44 !important; border-bottom-color: #C9A85C !important; } /* ========================================================= LAPTOP — UP TO 1366px ========================================================= */ @media (max-width: 1366px) { .bsc-po-section { width: 90% !important; padding: 64px 0 72px !important; } .bsc-po-title .elementor-heading-title { font-size: 37px !important; } .bsc-po-intro, .bsc-po-intro p { font-size: 15px !important; } .bsc-po-intro { margin-bottom: 34px !important; } .bsc-po-grid, .bsc-po-grid > .e-con-inner { gap: 20px !important; } .bsc-po-card { min-height: 260px; padding: 30px 31px !important; } .bsc-po-card-title .elementor-heading-title { font-size: 31px !important; } .bsc-po-description, .bsc-po-description p { font-size: 13.5px !important; } } /* ========================================================= TABLET LANDSCAPE — UP TO 1200px ========================================================= */ @media (max-width: 1200px) { .bsc-po-section { width: 90% !important; padding: 58px 0 66px !important; } .bsc-po-title .elementor-heading-title { font-size: 34px !important; } .bsc-po-title::after { margin: 13px 0 16px 0; } .bsc-po-intro { margin-bottom: 30px !important; } .bsc-po-grid, .bsc-po-grid > .e-con-inner { gap: 18px !important; } .bsc-po-card { min-height: 245px; padding: 27px 26px !important; border-radius: 20px; } .bsc-po-card-title .elementor-heading-title { font-size: 28px !important; } .bsc-po-label, .bsc-po-label p, .bsc-po-label .elementor-heading-title { font-size: 10px !important; } .bsc-po-subtitle, .bsc-po-subtitle p { font-size: 12px !important; } .bsc-po-description, .bsc-po-description p { font-size: 13px !important; } .bsc-po-card::before { width: 200px; height: 200px; } .bsc-po-card::after { width: 145px; height: 145px; } } /* ========================================================= TABLET PORTRAIT — UP TO 1024px ========================================================= */ @media (max-width: 1024px) { .bsc-po-section { width: 90% !important; padding: 52px 0 60px !important; } .bsc-po-title .elementor-heading-title { font-size: 31px !important; } .bsc-po-intro { max-width: 680px !important; margin-bottom: 28px !important; } .bsc-po-intro, .bsc-po-intro p { font-size: 14px !important; line-height: 1.65 !important; } .bsc-po-grid, .bsc-po-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } .bsc-po-card { min-height: 235px; padding: 24px 23px !important; border-radius: 18px; } .bsc-po-card-title .elementor-heading-title { font-size: 24px !important; } .bsc-po-label, .bsc-po-label p, .bsc-po-label .elementor-heading-title { font-size: 9px !important; letter-spacing: 0.13em !important; } .bsc-po-subtitle, .bsc-po-subtitle p { font-size: 11px !important; margin-bottom: 11px !important; } .bsc-po-description, .bsc-po-description p { font-size: 12px !important; line-height: 1.55 !important; } .bsc-po-card::before { width: 170px; height: 170px; left: -60px; top: -65px; } .bsc-po-card::after { width: 120px; height: 120px; right: -30px; top: -35px; } } /* ========================================================= MOBILE — UP TO 767px ========================================================= */ @media (max-width: 767px) { .bsc-po-section { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 40px 28px 48px !important; box-sizing: border-box !important; overflow: hidden !important; } /* EYEBROW */ .bsc-po-eyebrow { margin-bottom: 7px !important; } .bsc-po-eyebrow, .bsc-po-eyebrow p, .bsc-po-eyebrow .elementor-heading-title { font-size: 8px !important; letter-spacing: 0.14em !important; } /* TITLE */ .bsc-po-title { width: 100% !important; } .bsc-po-title .elementor-heading-title { font-size: 21px !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; white-space: normal !important; } .bsc-po-title::after { width: 54px; height: 3px; margin: 10px 0 14px; } /* INTRO */ .bsc-po-intro { width: 100% !important; max-width: 100% !important; margin: 0 0 24px 0 !important; } .bsc-po-intro, .bsc-po-intro p { width: 100% !important; max-width: 100% !important; font-size: 13px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: break-word !important; } .bsc-po-intro p { margin-bottom: 10px !important; } /* GRID */ .bsc-po-grid, .bsc-po-grid > .e-con-inner { width: 100% !important; max-width: 100% !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } /* CARDS */ .bsc-po-card { width: 100% !important; max-width: 100% !important; min-height: 190px !important; padding: 22px 18px !important; box-sizing: border-box !important; border-radius: 17px !important; overflow: hidden !important; } /* LABEL */ .bsc-po-label { margin: 0 0 5px 0 !important; } .bsc-po-label, .bsc-po-label p, .bsc-po-label .elementor-heading-title { font-size: 7.6px !important; line-height: 1.2 !important; letter-spacing: 0.13em !important; } /* TITLE */ .bsc-po-card-title { margin: 0 0 5px 0 !important; } .bsc-po-card-title .elementor-heading-title { font-size: 20px !important; line-height: 1.08 !important; } /* SUBTITLE */ .bsc-po-subtitle { margin: 0 0 9px 0 !important; } .bsc-po-subtitle, .bsc-po-subtitle p { font-size: 9px !important; line-height: 1.35 !important; } /* DESCRIPTION */ .bsc-po-description { width: 100% !important; max-width: 100% !important; } .bsc-po-description, .bsc-po-description p { font-size: 11px !important; line-height: 1.5 !important; } /* DECORATION */ .bsc-po-card::before { width: 125px !important; height: 125px !important; left: -46px !important; top: -52px !important; } .bsc-po-card::after { width: 86px !important; height: 86px !important; right: -18px !important; top: -22px !important; } /* LINK */ .bsc-po-link { margin-top: 22px !important; } .bsc-po-link, .bsc-po-link a, .bsc-po-link .elementor-button { font-size: 12px !important; } } /* ========================================================= SMALL MOBILE — UP TO 480px ========================================================= */ @media (max-width: 480px) { .bsc-po-section { padding: 38px 24px 44px !important; } .bsc-po-title .elementor-heading-title { font-size: 19px !important; } .bsc-po-title::after { width: 50px; margin: 9px 0 13px; } .bsc-po-intro, .bsc-po-intro p { font-size: 12.5px !important; line-height: 1.55 !important; } .bsc-po-grid, .bsc-po-grid > .e-con-inner { gap: 10px !important; } .bsc-po-card { min-height: 180px !important; padding: 20px 17px !important; } .bsc-po-card-title .elementor-heading-title { font-size: 19px !important; } .bsc-po-label, .bsc-po-label p, .bsc-po-label .elementor-heading-title { font-size: 7.2px !important; } .bsc-po-subtitle, .bsc-po-subtitle p { font-size: 8.5px !important; } .bsc-po-description, .bsc-po-description p { font-size: 10.5px !important; } } /* ========================================================= VERY SMALL MOBILE — UP TO 360px ========================================================= */ @media (max-width: 360px) { .bsc-po-section { padding: 34px 20px 42px !important; } .bsc-po-title .elementor-heading-title { font-size: 17px !important; } .bsc-po-intro, .bsc-po-intro p { font-size: 12px !important; } .bsc-po-card { min-height: 175px !important; padding: 19px 16px !important; } .bsc-po-card-title .elementor-heading-title { font-size: 18px !important; } .bsc-po-description, .bsc-po-description p { font-size: 10px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f650aba *//* ========================================================= */ /* PROGRAMME OVERVIEW / SCOPE — COMPLETE RESPONSIVE CSS */ /* ========================================================= */ /* ========================================================= */ /* SECTION */ /* ========================================================= */ .programme-overview { position: relative; width: 88% !important; max-width: 1500px !important; margin: 0 auto !important; padding: 95px 0 !important; box-sizing: border-box; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 85px !important; } /* ========================================================= */ /* LEFT CONTENT */ /* ========================================================= */ .programme-overview-content { width: 55% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } /* ========================================================= */ /* EYEBROW */ /* ========================================================= */ .programme-overview-eyebrow { margin: 0 0 14px 0 !important; } .programme-overview-eyebrow .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: #C9A85C !important; } /* ========================================================= */ /* TITLE */ /* ========================================================= */ .programme-overview-title { width: 100% !important; margin: 0 !important; } .programme-overview-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 46px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.04em !important; color: #001B44 !important; } /* ========================================================= */ /* DIVIDER */ /* ========================================================= */ .programme-overview-divider { width: 72px !important; margin: 22px 0 26px !important; } .programme-overview-divider .elementor-divider { padding: 0 !important; } .programme-overview-divider .elementor-divider-separator { width: 72px !important; border-top-width: 3px !important; border-top-color: #C9A85C !important; } /* ========================================================= */ /* BODY TEXT */ /* ========================================================= */ .programme-overview-text { width: 100% !important; max-width: 760px !important; margin: 0 !important; } .programme-overview-text, .programme-overview-text p { font-family: "Manrope", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.78 !important; color: rgba(0, 27, 68, 0.76) !important; } .programme-overview-text p { margin: 0 0 18px 0 !important; } .programme-overview-text p:last-child { margin-bottom: 0 !important; } /* ========================================================= */ /* RIGHT VISUAL PANEL */ /* ========================================================= */ .programme-overview-visual { position: relative; width: 45% !important; min-width: 0 !important; padding: 48px 45px !important; box-sizing: border-box; border-radius: 26px; overflow: hidden; display: flex !important; flex-direction: column !important; align-items: flex-start !important; background: radial-gradient( circle at 90% 5%, rgba(214, 181, 109, 0.18), transparent 34% ), linear-gradient( 145deg, #001B44 0%, #062957 52%, #0B3268 100% ) !important; box-shadow: 0 22px 55px rgba(0, 27, 68, 0.14); isolation: isolate; } /* ========================================================= */ /* SUBTLE GRID */ /* ========================================================= */ .programme-overview-visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,0.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.045) 1px, transparent 1px ); background-size: 38px 38px; opacity: 0.55; pointer-events: none; z-index: -1; } /* ========================================================= */ /* DECORATIVE CIRCLE */ /* ========================================================= */ .programme-overview-visual::after { content: ""; position: absolute; width: 300px; height: 300px; right: -150px; top: -150px; border-radius: 50%; border: 1px solid rgba(214,181,109,0.22); pointer-events: none; z-index: -1; } /* ========================================================= */ /* VISUAL LABEL */ /* ========================================================= */ .programme-overview-visual-label { margin: 0 0 26px 0 !important; } .programme-overview-visual-label .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: #D6B56D !important; } /* ========================================================= */ /* CORE AREAS */ /* ========================================================= */ .programme-overview-areas { width: 100% !important; margin: 0 !important; } .programme-area-item { width: 100%; display: flex; align-items: center; gap: 18px; padding: 17px 0; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.12); } .programme-area-item:first-child { padding-top: 0; } .programme-area-item:last-child { border-bottom: 0; padding-bottom: 0; } .programme-area-item span { flex: 0 0 32px; font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #D6B56D; } .programme-area-item strong { font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; color: #FFFFFF; } /* ========================================================= */ /* LAPTOP — UP TO 1366px */ /* ========================================================= */ @media (max-width: 1366px) { .programme-overview { width: 90% !important; padding: 78px 0 !important; gap: 60px !important; } .programme-overview-content { width: 56% !important; } .programme-overview-visual { width: 44% !important; padding: 40px 38px !important; } .programme-overview-title .elementor-heading-title { font-size: 39px !important; } .programme-overview-text, .programme-overview-text p { font-size: 15px !important; } .programme-area-item { padding: 14px 0; } .programme-area-item strong { font-size: 14px; } } /* ========================================================= */ /* TABLET LANDSCAPE — UP TO 1200px */ /* ========================================================= */ @media (max-width: 1200px) { .programme-overview { padding: 68px 0 !important; gap: 42px !important; } .programme-overview-content { width: 55% !important; } .programme-overview-visual { width: 45% !important; padding: 34px 32px !important; border-radius: 22px; } .programme-overview-title .elementor-heading-title { font-size: 34px !important; } .programme-overview-text, .programme-overview-text p { font-size: 14px !important; line-height: 1.7 !important; } .programme-overview-visual-label { margin-bottom: 20px !important; } .programme-area-item { gap: 13px; padding: 12px 0; } .programme-area-item strong { font-size: 13px; } } /* ========================================================= */ /* TABLET PORTRAIT — UP TO 1024px */ /* ========================================================= */ @media (max-width: 1024px) { .programme-overview { width: 90% !important; padding: 60px 0 !important; gap: 32px !important; align-items: flex-start !important; } .programme-overview-content { width: 54% !important; } .programme-overview-visual { width: 46% !important; padding: 28px 26px !important; border-radius: 20px; } .programme-overview-eyebrow .elementor-heading-title { font-size: 10px !important; } .programme-overview-title .elementor-heading-title { font-size: 30px !important; } .programme-overview-divider { width: 58px !important; margin: 17px 0 20px !important; } .programme-overview-divider .elementor-divider-separator { width: 58px !important; } .programme-overview-text, .programme-overview-text p { font-size: 13px !important; line-height: 1.65 !important; } .programme-overview-text p { margin-bottom: 13px !important; } .programme-area-item { gap: 10px; padding: 10px 0; } .programme-area-item span { flex-basis: 25px; font-size: 9px; } .programme-area-item strong { font-size: 12px; } } /* ========================================================= */ /* MOBILE — UP TO 767px */ /* Matches Programme at a Glance alignment */ /* ========================================================= */ @media (max-width: 767px) { .programme-overview { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 40px 28px 48px !important; box-sizing: border-box !important; flex-direction: column !important; align-items: stretch !important; gap: 26px !important; overflow: hidden !important; } /* ----------------------------------------- CONTENT ----------------------------------------- */ .programme-overview-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* ----------------------------------------- EYEBROW ----------------------------------------- */ .programme-overview-eyebrow { margin: 0 0 10px 0 !important; } .programme-overview-eyebrow .elementor-heading-title { font-size: 9px !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; } /* ----------------------------------------- TITLE Same visual rhythm as Programme at a Glance ----------------------------------------- */ .programme-overview-title { width: 100% !important; margin: 0 !important; } .programme-overview-title .elementor-heading-title { font-size: 21px !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; white-space: normal !important; } /* ----------------------------------------- DIVIDER ----------------------------------------- */ .programme-overview-divider { width: 54px !important; margin: 10px 0 14px !important; } .programme-overview-divider .elementor-divider-separator { width: 54px !important; } /* ----------------------------------------- TEXT ----------------------------------------- */ .programme-overview-text { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-overview-text, .programme-overview-text p { width: 100% !important; max-width: 100% !important; font-size: 13px !important; line-height: 1.58 !important; white-space: normal !important; overflow-wrap: break-word !important; } .programme-overview-text p { margin: 0 0 14px 0 !important; } .programme-overview-text p:last-child { margin-bottom: 0 !important; } /* ----------------------------------------- VISUAL PANEL ----------------------------------------- */ .programme-overview-visual { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 22px 18px !important; box-sizing: border-box !important; border-radius: 17px !important; overflow: hidden !important; } .programme-overview-visual-label { margin: 0 0 14px 0 !important; } .programme-overview-visual-label .elementor-heading-title { font-size: 8px !important; line-height: 1.2 !important; letter-spacing: 0.15em !important; } /* ----------------------------------------- CORE AREAS ----------------------------------------- */ .programme-overview-areas { width: 100% !important; margin: 0 !important; } .programme-area-item { width: 100% !important; gap: 10px !important; padding: 10px 0 !important; align-items: flex-start !important; } .programme-area-item:first-child { padding-top: 0 !important; } .programme-area-item:last-child { padding-bottom: 0 !important; } .programme-area-item span { flex: 0 0 23px !important; font-size: 8px !important; line-height: 1.35 !important; padding-top: 2px; } .programme-area-item strong { flex: 1 1 auto; min-width: 0; font-size: 11px !important; line-height: 1.35 !important; white-space: normal !important; overflow-wrap: break-word !important; } /* ----------------------------------------- MOBILE DECORATION ----------------------------------------- */ .programme-overview-visual::before { background-size: 30px 30px; } .programme-overview-visual::after { width: 170px; height: 170px; right: -90px; top: -90px; } } /* ========================================================= */ /* SMALL MOBILE — UP TO 480px */ /* ========================================================= */ @media (max-width: 480px) { .programme-overview { padding: 38px 24px 44px !important; gap: 22px !important; } .programme-overview-eyebrow .elementor-heading-title { font-size: 8.5px !important; } .programme-overview-title .elementor-heading-title { font-size: 19px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; } .programme-overview-divider { width: 50px !important; margin: 9px 0 13px !important; } .programme-overview-divider .elementor-divider-separator { width: 50px !important; } .programme-overview-text, .programme-overview-text p { font-size: 12.5px !important; line-height: 1.55 !important; } .programme-overview-text p { margin-bottom: 12px !important; } .programme-overview-visual { padding: 20px 16px !important; border-radius: 16px !important; } .programme-area-item { gap: 8px !important; padding: 9px 0 !important; } .programme-area-item span { flex-basis: 21px !important; font-size: 7.5px !important; } .programme-area-item strong { font-size: 10.5px !important; } } /* ========================================================= */ /* VERY SMALL MOBILE — UP TO 360px */ /* ========================================================= */ @media (max-width: 360px) { .programme-overview { padding: 34px 20px 42px !important; } .programme-overview-title .elementor-heading-title { font-size: 17px !important; } .programme-overview-text, .programme-overview-text p { font-size: 12px !important; } .programme-overview-visual { padding: 18px 14px !important; } .programme-area-item strong { font-size: 10px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-cce83d2 *//* ========================================================= */ /* PROGRAMME OBJECTIVES — COMPLETE RESPONSIVE CSS */ /* ========================================================= */ /* ========================================================= */ /* SECTION */ /* ========================================================= */ .programme-objectives { position: relative; width: 88% !important; max-width: 1500px !important; margin: 0 auto !important; padding: 82px 0 90px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; } /* ========================================================= */ /* EYEBROW */ /* ========================================================= */ .programme-objectives-eyebrow { margin: 0 0 14px 0 !important; } .programme-objectives-eyebrow .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: #C9A85C !important; } /* ========================================================= */ /* TITLE */ /* ========================================================= */ .programme-objectives-title { width: 100% !important; margin: 0 !important; } .programme-objectives-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 46px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.04em !important; color: #001B44 !important; } /* ========================================================= */ /* DIVIDER */ /* ========================================================= */ .programme-objectives-divider { width: 72px !important; margin: 20px 0 24px !important; } .programme-objectives-divider .elementor-divider { padding: 0 !important; } .programme-objectives-divider .elementor-divider-separator { width: 72px !important; border-top-width: 3px !important; border-top-color: #C9A85C !important; } /* ========================================================= */ /* INTRO */ /* ========================================================= */ .programme-objectives-intro { width: 100% !important; max-width: 820px !important; margin: 0 !important; } .programme-objectives-intro, .programme-objectives-intro p { font-family: "Manrope", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.7 !important; color: rgba(0, 27, 68, 0.74) !important; } .programme-objectives-intro p { margin: 0 !important; } /* ========================================================= */ /* OBJECTIVES GRID */ /* ========================================================= */ .programme-objectives-list { width: 100% !important; margin-top: 42px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px !important; } .programme-objectives-list > .e-con-inner { width: 100% !important; max-width: 100% !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 22px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= */ /* OBJECTIVE CARD */ /* ========================================================= */ .programme-objective-item { position: relative; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 285px; padding: 34px 28px 30px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; background: rgba(255, 255, 255, 0.93) !important; border: 1px solid rgba(0, 27, 68, 0.08); border-radius: 22px; box-shadow: 0 14px 36px rgba(0, 27, 68, 0.07); overflow: hidden; isolation: isolate; transition: transform 0.32s ease, box-shadow 0.32s ease; } /* subtle circle */ .programme-objective-item::before { content: ""; position: absolute; width: 150px; height: 150px; right: -74px; top: -73px; border-radius: 50%; border: 1px solid rgba(0, 27, 68, 0.07); pointer-events: none; } /* top accent */ .programme-objective-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: #C9A85C; pointer-events: none; } /* Alternate navy accent */ .programme-objective-item:nth-child(even)::after { background: #001B44; } /* ========================================================= */ /* NUMBER */ /* ========================================================= */ .programme-objective-number { width: 100% !important; margin: 0 0 13px 0 !important; } .programme-objective-number .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 36px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.045em !important; color: rgba(201, 168, 92, 0.34) !important; } .programme-objective-item:nth-child(even) .programme-objective-number .elementor-heading-title { color: rgba(0, 27, 68, 0.16) !important; } /* ========================================================= */ /* CARD TITLE */ /* ========================================================= */ .programme-objective-item-title { width: 100% !important; margin: 0 0 16px 0 !important; } .programme-objective-item-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.16 !important; letter-spacing: -0.025em !important; color: #001B44 !important; white-space: normal !important; } /* ========================================================= */ /* CARD TEXT */ /* ========================================================= */ .programme-objective-item-text { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-objective-item-text, .programme-objective-item-text p { width: 100% !important; max-width: 100% !important; font-family: "Manrope", sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.65 !important; color: rgba(0, 27, 68, 0.72) !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } .programme-objective-item-text p { margin: 0 !important; } /* ========================================================= */ /* HOVER */ /* ========================================================= */ @media (hover: hover) { .programme-objective-item:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0, 27, 68, 0.12); } } /* ========================================================= */ /* LAPTOP — UP TO 1366px */ /* ========================================================= */ @media (max-width: 1366px) { .programme-objectives { width: 90% !important; padding: 72px 0 80px !important; } .programme-objectives-title .elementor-heading-title { font-size: 39px !important; } .programme-objectives-intro, .programme-objectives-intro p { font-size: 15px !important; } .programme-objectives-list, .programme-objectives-list > .e-con-inner { gap: 18px !important; } .programme-objective-item { min-height: 265px; padding: 30px 24px 26px !important; } .programme-objective-number .elementor-heading-title { font-size: 32px !important; } .programme-objective-item-title .elementor-heading-title { font-size: 21px !important; } .programme-objective-item-text, .programme-objective-item-text p { font-size: 13px !important; } } /* ========================================================= */ /* TABLET LANDSCAPE — UP TO 1200px */ /* ========================================================= */ @media (max-width: 1200px) { .programme-objectives { padding: 64px 0 72px !important; } .programme-objectives-title .elementor-heading-title { font-size: 34px !important; } .programme-objectives-list, .programme-objectives-list > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; } .programme-objectives-list { margin-top: 34px !important; } .programme-objective-item { min-height: 230px; padding: 27px 24px 24px !important; border-radius: 20px; } .programme-objective-item-title .elementor-heading-title { font-size: 20px !important; } } /* ========================================================= */ /* TABLET PORTRAIT — UP TO 1024px */ /* ========================================================= */ @media (max-width: 1024px) { .programme-objectives { width: 90% !important; padding: 56px 0 64px !important; } .programme-objectives-eyebrow .elementor-heading-title { font-size: 10px !important; } .programme-objectives-title .elementor-heading-title { font-size: 30px !important; } .programme-objectives-divider { width: 58px !important; margin: 16px 0 18px !important; } .programme-objectives-divider .elementor-divider-separator { width: 58px !important; } .programme-objectives-intro, .programme-objectives-intro p { font-size: 13px !important; line-height: 1.65 !important; } .programme-objectives-list, .programme-objectives-list > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } .programme-objective-item { min-height: 215px; padding: 24px 21px 22px !important; } .programme-objective-number .elementor-heading-title { font-size: 29px !important; } .programme-objective-item-title .elementor-heading-title { font-size: 18px !important; } .programme-objective-item-text, .programme-objective-item-text p { font-size: 12.5px !important; } } /* ========================================================= */ /* MOBILE — UP TO 767px */ /* MATCHES PREVIOUS SECTIONS */ /* ========================================================= */ @media (max-width: 767px) { .programme-objectives { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 40px 28px 48px !important; box-sizing: border-box !important; overflow: hidden !important; } /* EYEBROW */ .programme-objectives-eyebrow { width: 100% !important; margin: 0 0 10px 0 !important; } .programme-objectives-eyebrow .elementor-heading-title { font-size: 8.5px !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; white-space: normal !important; } /* TITLE */ .programme-objectives-title { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-objectives-title .elementor-heading-title { font-size: 21px !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; white-space: normal !important; overflow-wrap: normal !important; } /* DIVIDER */ .programme-objectives-divider { width: 54px !important; margin: 10px 0 14px !important; } .programme-objectives-divider .elementor-divider-separator { width: 54px !important; } /* INTRO */ .programme-objectives-intro { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } .programme-objectives-intro, .programme-objectives-intro p { width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: 13px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* GRID */ .programme-objectives-list, .programme-objectives-list > .e-con-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } .programme-objectives-list { margin-top: 22px !important; } /* CARD */ .programme-objective-item { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 18px 18px 19px !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 16px !important; overflow: hidden !important; } /* NUMBER */ .programme-objective-number { width: 100% !important; margin: 0 0 8px 0 !important; } .programme-objective-number .elementor-heading-title { font-size: 25px !important; line-height: 1 !important; } /* CARD TITLE */ .programme-objective-item-title { width: 100% !important; max-width: 100% !important; margin: 0 0 9px 0 !important; } .programme-objective-item-title .elementor-heading-title { width: 100% !important; max-width: 100% !important; font-size: 16px !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* CARD TEXT */ .programme-objective-item-text { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } .programme-objective-item-text, .programme-objective-item-text p { width: 100% !important; max-width: 100% !important; font-size: 11.5px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; margin: 0 !important; } /* CIRCLE */ .programme-objective-item::before { width: 100px; height: 100px; right: -48px; top: -48px; } /* TOP BAR */ .programme-objective-item::after { height: 3px; } } /* ========================================================= */ /* SMALL MOBILE — UP TO 480px */ /* ========================================================= */ @media (max-width: 480px) { .programme-objectives { padding: 38px 24px 44px !important; } .programme-objectives-title .elementor-heading-title { font-size: 19px !important; } .programme-objectives-divider { width: 50px !important; margin: 9px 0 13px !important; } .programme-objectives-divider .elementor-divider-separator { width: 50px !important; } .programme-objectives-intro, .programme-objectives-intro p { font-size: 12.5px !important; line-height: 1.55 !important; } .programme-objectives-list { margin-top: 20px !important; } .programme-objectives-list, .programme-objectives-list > .e-con-inner { gap: 10px !important; } .programme-objective-item { padding: 17px 16px 18px !important; border-radius: 15px !important; } .programme-objective-number .elementor-heading-title { font-size: 23px !important; } .programme-objective-item-title .elementor-heading-title { font-size: 15px !important; } .programme-objective-item-text, .programme-objective-item-text p { font-size: 11px !important; line-height: 1.5 !important; } } /* ========================================================= */ /* VERY SMALL MOBILE — UP TO 360px */ /* ========================================================= */ @media (max-width: 360px) { .programme-objectives { padding: 34px 20px 42px !important; } .programme-objectives-title .elementor-heading-title { font-size: 17px !important; } .programme-objectives-intro, .programme-objectives-intro p { font-size: 12px !important; } .programme-objective-item { padding: 15px 14px 16px !important; } .programme-objective-item-title .elementor-heading-title { font-size: 14px !important; } .programme-objective-item-text, .programme-objective-item-text p { font-size: 10.5px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-506d7ea *//* ========================================================= */ /* LEARNING OUTCOMES — COMPLETE RESPONSIVE CSS */ /* ========================================================= */ /* ========================================================= */ /* SECTION */ /* ========================================================= */ .programme-outcomes { position: relative; width: 88% !important; max-width: 1500px !important; margin: 0 auto !important; padding: 82px 0 92px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; } /* ========================================================= */ /* EYEBROW */ /* ========================================================= */ .programme-outcomes-eyebrow { width: 100% !important; margin: 0 0 12px 0 !important; } .programme-outcomes-eyebrow .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: #C9A85C !important; } /* ========================================================= */ /* TITLE */ /* ========================================================= */ .programme-outcomes-title { width: 100% !important; margin: 0 !important; } .programme-outcomes-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 46px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.04em !important; color: #001B44 !important; } /* ========================================================= */ /* DIVIDER */ /* ========================================================= */ .programme-outcomes-divider { width: 72px !important; margin: 20px 0 22px !important; } .programme-outcomes-divider .elementor-divider { padding: 0 !important; } .programme-outcomes-divider .elementor-divider-separator { width: 72px !important; border-top-width: 3px !important; border-top-color: #C9A85C !important; } /* ========================================================= */ /* INTRO */ /* ========================================================= */ .programme-outcomes-intro { width: 100% !important; max-width: 820px !important; margin: 0 !important; } .programme-outcomes-intro, .programme-outcomes-intro p { font-family: "Manrope", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.72 !important; color: rgba(0, 27, 68, 0.72) !important; } .programme-outcomes-intro p { margin: 0 !important; } /* ========================================================= */ /* CONTENT WRAPPER */ /* ========================================================= */ .programme-outcomes-content { position: relative; width: 100% !important; margin: 42px 0 0 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 18px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .programme-outcomes-content > .e-con-inner { width: 100% !important; max-width: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= */ /* PANEL */ /* ========================================================= */ .programme-outcome-column { position: relative; width: 94% !important; max-width: none !important; min-height: 220px; padding: 34px 40px 32px 145px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; overflow: hidden; border: 1px solid rgba(0, 27, 68, 0.10) !important; border-radius: 22px !important; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.91) 62%, rgba(248, 245, 236, 0.92) 100% ) !important; box-shadow: 0 14px 38px rgba(0, 27, 68, 0.065); isolation: isolate; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* ========================================================= */ /* ALTERNATING POSITION */ /* ========================================================= */ .programme-outcome-column:nth-child(odd) { align-self: flex-start !important; } .programme-outcome-column:nth-child(even) { align-self: flex-end !important; } /* ========================================================= */ /* BACKGROUND VARIANTS */ /* ========================================================= */ .programme-outcome-knowledge { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 65%, rgba(240, 244, 249, 0.88) 100% ) !important; } .programme-outcome-skills { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 248, 237, 0.94) 64%, rgba(240, 219, 163, 0.25) 100% ) !important; } .programme-outcome-competences { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 65%, rgba(240, 244, 249, 0.88) 100% ) !important; } /* ========================================================= */ /* LEFT ACCENT */ /* ========================================================= */ .programme-outcome-column::before { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: linear-gradient( 180deg, #001B44 0%, #315B8E 100% ); z-index: 3; } .programme-outcome-skills::before { background: linear-gradient( 180deg, #A98533 0%, #D6B56D 100% ); } /* ========================================================= */ /* DECORATIVE CIRCLE */ /* ========================================================= */ .programme-outcome-column::after { content: ""; position: absolute; width: 210px; height: 210px; right: -85px; top: -95px; border-radius: 50%; border: 1px solid rgba(0, 27, 68, 0.075); box-shadow: 0 0 0 32px rgba(0, 27, 68, 0.014); pointer-events: none; z-index: -1; } .programme-outcome-skills::after { border-color: rgba(169, 133, 51, 0.13); box-shadow: 0 0 0 32px rgba(214, 181, 109, 0.022); } /* ========================================================= */ /* NUMBER */ /* ========================================================= */ .programme-outcome-number { position: absolute !important; left: 40px; top: 50%; transform: translateY(-50%); width: auto !important; margin: 0 !important; z-index: 2; } .programme-outcome-number .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 66px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.06em !important; color: rgba(0, 27, 68, 0.11) !important; } .programme-outcome-skills .programme-outcome-number .elementor-heading-title { color: rgba(169, 133, 51, 0.25) !important; } /* ========================================================= */ /* CATEGORY */ /* ========================================================= */ .programme-outcome-category { position: relative; width: 100% !important; margin: 0 0 7px 0 !important; z-index: 2; } .programme-outcome-category .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: #C9A85C !important; } .programme-outcome-knowledge .programme-outcome-category .elementor-heading-title, .programme-outcome-competences .programme-outcome-category .elementor-heading-title { color: #315B8E !important; } /* ========================================================= */ /* PANEL HEADING */ /* ========================================================= */ .programme-outcome-heading { position: relative; width: 100% !important; margin: 0 0 16px 0 !important; z-index: 2; } .programme-outcome-heading .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.18 !important; letter-spacing: -0.03em !important; color: #001B44 !important; } /* ========================================================= */ /* LIST */ /* ========================================================= */ .programme-outcome-list { position: relative; width: 100% !important; margin: 0 !important; z-index: 2; } .programme-outcome-list ul { width: 100%; margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 34px; row-gap: 0; } .programme-outcome-list li { position: relative; margin: 0 !important; padding: 9px 0 9px 18px; box-sizing: border-box; font-family: "Manrope", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.55 !important; color: rgba(0, 27, 68, 0.70) !important; border-bottom: 1px solid rgba(0, 27, 68, 0.07); } .programme-outcome-list li:nth-last-child(-n+2) { border-bottom: 0; } /* BULLET */ .programme-outcome-list li::before { content: ""; position: absolute; left: 0; top: 17px; width: 5px; height: 5px; border-radius: 50%; background: #C9A85C; } .programme-outcome-knowledge .programme-outcome-list li::before, .programme-outcome-competences .programme-outcome-list li::before { background: #315B8E; } /* ========================================================= */ /* HOVER */ /* ========================================================= */ @media (hover: hover) { .programme-outcome-column:hover { transform: translateY(-5px); border-color: rgba(0, 27, 68, 0.16) !important; box-shadow: 0 22px 50px rgba(0, 27, 68, 0.10); } } /* ========================================================= */ /* LAPTOP — UP TO 1366px */ /* ========================================================= */ @media (max-width: 1366px) { .programme-outcomes { width: 90% !important; padding: 72px 0 82px !important; } .programme-outcomes-title .elementor-heading-title { font-size: 39px !important; } .programme-outcomes-intro, .programme-outcomes-intro p { font-size: 15px !important; } .programme-outcome-column { width: 96% !important; min-height: 210px; padding: 30px 32px 28px 120px !important; } .programme-outcome-number { left: 30px; } .programme-outcome-number .elementor-heading-title { font-size: 54px !important; } .programme-outcome-heading .elementor-heading-title { font-size: 21px !important; } .programme-outcome-list li { font-size: 12.5px !important; } } /* ========================================================= */ /* TABLET LANDSCAPE — UP TO 1200px */ /* ========================================================= */ @media (max-width: 1200px) { .programme-outcomes { padding: 62px 0 70px !important; } .programme-outcomes-title .elementor-heading-title { font-size: 34px !important; } .programme-outcome-column { width: 97% !important; min-height: 205px; padding: 27px 26px 25px 100px !important; } .programme-outcome-number { left: 25px; } .programme-outcome-number .elementor-heading-title { font-size: 46px !important; } .programme-outcome-heading .elementor-heading-title { font-size: 19px !important; } .programme-outcome-list ul { column-gap: 22px; } .programme-outcome-list li { font-size: 12px !important; } } /* ========================================================= */ /* TABLET PORTRAIT — UP TO 1024px */ /* ========================================================= */ @media (max-width: 1024px) { .programme-outcomes { width: 90% !important; padding: 56px 0 64px !important; } .programme-outcomes-eyebrow .elementor-heading-title { font-size: 10px !important; } .programme-outcomes-title .elementor-heading-title { font-size: 30px !important; } .programme-outcomes-intro, .programme-outcomes-intro p { font-size: 13px !important; line-height: 1.65 !important; } .programme-outcomes-content { margin-top: 30px !important; gap: 15px !important; } .programme-outcomes-content > .e-con-inner { gap: 15px !important; } .programme-outcome-column, .programme-outcome-column:nth-child(odd), .programme-outcome-column:nth-child(even) { width: 100% !important; align-self: stretch !important; min-height: auto; padding: 25px 24px 24px 86px !important; } .programme-outcome-number { left: 22px; } .programme-outcome-number .elementor-heading-title { font-size: 40px !important; } .programme-outcome-heading .elementor-heading-title { font-size: 18px !important; } .programme-outcome-list ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .programme-outcome-list li { font-size: 12px !important; } } /* ========================================================= */ /* MOBILE — UP TO 767px */ /* SAME ALIGNMENT SYSTEM AS PREVIOUS SECTIONS */ /* ========================================================= */ @media (max-width: 767px) { .programme-outcomes { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 40px 28px 48px !important; box-sizing: border-box !important; overflow: hidden !important; } /* EYEBROW */ .programme-outcomes-eyebrow { width: 100% !important; margin: 0 0 10px 0 !important; } .programme-outcomes-eyebrow .elementor-heading-title { font-size: 8.5px !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; } /* TITLE */ .programme-outcomes-title { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-outcomes-title .elementor-heading-title { font-size: 21px !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; white-space: normal !important; overflow-wrap: break-word !important; } /* DIVIDER */ .programme-outcomes-divider { width: 54px !important; margin: 10px 0 14px !important; } .programme-outcomes-divider .elementor-divider-separator { width: 54px !important; } /* INTRO */ .programme-outcomes-intro { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-outcomes-intro, .programme-outcomes-intro p { width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: 13px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } /* WRAPPER */ .programme-outcomes-content { width: 100% !important; max-width: 100% !important; margin-top: 22px !important; gap: 12px !important; box-sizing: border-box !important; } .programme-outcomes-content > .e-con-inner { width: 100% !important; max-width: 100% !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } /* PANELS */ .programme-outcome-column, .programme-outcome-column:nth-child(odd), .programme-outcome-column:nth-child(even) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 18px 16px 18px !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 16px !important; align-self: stretch !important; overflow: hidden !important; } /* NUMBER */ .programme-outcome-number { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; margin: 0 0 9px 0 !important; } .programme-outcome-number .elementor-heading-title { font-size: 25px !important; } /* CATEGORY */ .programme-outcome-category { width: 100% !important; margin: 0 0 5px 0 !important; } .programme-outcome-category .elementor-heading-title { font-size: 7.5px !important; line-height: 1.2 !important; letter-spacing: 0.15em !important; } /* HEADING */ .programme-outcome-heading { width: 100% !important; max-width: 100% !important; margin: 0 0 10px 0 !important; } .programme-outcome-heading .elementor-heading-title { width: 100% !important; max-width: 100% !important; font-size: 15px !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; white-space: normal !important; overflow-wrap: break-word !important; } /* LIST */ .programme-outcome-list { width: 100% !important; max-width: 100% !important; } .programme-outcome-list ul { width: 100% !important; grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; } .programme-outcome-list li { width: 100% !important; max-width: 100% !important; min-width: 0 !important; font-size: 11px !important; line-height: 1.5 !important; padding: 8px 0 8px 16px !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; border-bottom: 1px solid rgba(0, 27, 68, 0.07); } .programme-outcome-list li:nth-last-child(-n+2) { border-bottom: 1px solid rgba(0, 27, 68, 0.07); } .programme-outcome-list li:last-child { border-bottom: 0; } .programme-outcome-list li::before { width: 5px; height: 5px; top: 14px; } /* DECORATION */ .programme-outcome-column::after { width: 110px; height: 110px; right: -52px; top: -52px; box-shadow: 0 0 0 18px rgba(0, 27, 68, 0.014); } .programme-outcome-column::before { width: 4px; } } /* ========================================================= */ /* SMALL MOBILE — UP TO 480px */ /* ========================================================= */ @media (max-width: 480px) { .programme-outcomes { padding: 38px 24px 44px !important; } .programme-outcomes-title .elementor-heading-title { font-size: 19px !important; } .programme-outcomes-divider { width: 50px !important; margin: 9px 0 13px !important; } .programme-outcomes-divider .elementor-divider-separator { width: 50px !important; } .programme-outcomes-intro, .programme-outcomes-intro p { font-size: 12.5px !important; line-height: 1.55 !important; } .programme-outcomes-content { margin-top: 20px !important; } .programme-outcome-column, .programme-outcome-column:nth-child(odd), .programme-outcome-column:nth-child(even) { padding: 16px 15px 17px !important; border-radius: 15px !important; } .programme-outcome-number .elementor-heading-title { font-size: 23px !important; } .programme-outcome-heading .elementor-heading-title { font-size: 14.5px !important; } .programme-outcome-list li { font-size: 10.5px !important; line-height: 1.48 !important; padding: 7px 0 7px 15px !important; } .programme-outcome-list li::before { top: 12px; } } /* ========================================================= */ /* VERY SMALL MOBILE — UP TO 360px */ /* ========================================================= */ @media (max-width: 360px) { .programme-outcomes { padding: 34px 20px 42px !important; } .programme-outcomes-title .elementor-heading-title { font-size: 17px !important; } .programme-outcomes-intro, .programme-outcomes-intro p { font-size: 12px !important; } .programme-outcome-column, .programme-outcome-column:nth-child(odd), .programme-outcome-column:nth-child(even) { padding: 15px 14px 16px !important; } .programme-outcome-heading .elementor-heading-title { font-size: 14px !important; } .programme-outcome-list li { font-size: 10px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bb5faec *//* ========================================================= */ /* CURRICULUM — COMPLETE RESPONSIVE HEADER */ /* ========================================================= */ /* ========================================================= */ /* SECTION */ /* ========================================================= */ .programme-curriculum-header { position: relative; width: 88% !important; max-width: 1500px !important; margin: 0 auto !important; padding: 82px 0 34px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; } /* ========================================================= */ /* EYEBROW */ /* ========================================================= */ .programme-curriculum-eyebrow { width: 100% !important; margin: 0 0 12px 0 !important; } .programme-curriculum-eyebrow .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: #C9A85C !important; } /* ========================================================= */ /* TITLE */ /* ========================================================= */ .programme-curriculum-title { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-curriculum-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 46px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.04em !important; color: #001B44 !important; white-space: normal !important; } /* ========================================================= */ /* DIVIDER */ /* ========================================================= */ .programme-curriculum-divider { width: 72px !important; margin: 20px 0 22px !important; } .programme-curriculum-divider .elementor-divider { padding: 0 !important; } .programme-curriculum-divider .elementor-divider-separator { width: 72px !important; border-top-width: 3px !important; border-top-color: #C9A85C !important; } /* ========================================================= */ /* INTRO */ /* ========================================================= */ .programme-curriculum-intro { width: 100% !important; max-width: 780px !important; margin: 0 !important; } .programme-curriculum-intro, .programme-curriculum-intro p { width: 100% !important; max-width: 100% !important; font-family: "Manrope", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.72 !important; color: rgba(0, 27, 68, 0.72) !important; white-space: normal !important; } .programme-curriculum-intro p { margin: 0 !important; } /* ========================================================= */ /* LAPTOP — UP TO 1366px */ /* ========================================================= */ @media (max-width: 1366px) { .programme-curriculum-header { width: 90% !important; padding: 72px 0 32px !important; } .programme-curriculum-title .elementor-heading-title { font-size: 39px !important; } .programme-curriculum-intro, .programme-curriculum-intro p { font-size: 15px !important; } } /* ========================================================= */ /* TABLET LANDSCAPE — UP TO 1200px */ /* ========================================================= */ @media (max-width: 1200px) { .programme-curriculum-header { padding: 62px 0 30px !important; } .programme-curriculum-title .elementor-heading-title { font-size: 34px !important; } .programme-curriculum-divider { width: 64px !important; margin: 17px 0 19px !important; } .programme-curriculum-divider .elementor-divider-separator { width: 64px !important; } } /* ========================================================= */ /* TABLET PORTRAIT — UP TO 1024px */ /* ========================================================= */ @media (max-width: 1024px) { .programme-curriculum-header { width: 90% !important; padding: 56px 0 28px !important; } .programme-curriculum-eyebrow .elementor-heading-title { font-size: 10px !important; } .programme-curriculum-title .elementor-heading-title { font-size: 30px !important; } .programme-curriculum-intro { max-width: 650px !important; } .programme-curriculum-intro, .programme-curriculum-intro p { font-size: 13px !important; line-height: 1.65 !important; } } /* ========================================================= */ /* MOBILE — UP TO 767px */ /* SAME ALIGNMENT AS PREVIOUS SECTIONS */ /* ========================================================= */ @media (max-width: 767px) { .programme-curriculum-header { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 40px 28px 24px !important; box-sizing: border-box !important; overflow: hidden !important; } /* EYEBROW */ .programme-curriculum-eyebrow { width: 100% !important; margin: 0 0 10px 0 !important; } .programme-curriculum-eyebrow .elementor-heading-title { font-size: 8.5px !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; white-space: normal !important; } /* TITLE */ .programme-curriculum-title { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-curriculum-title .elementor-heading-title { font-size: 21px !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; white-space: normal !important; overflow-wrap: break-word !important; } /* DIVIDER */ .programme-curriculum-divider { width: 54px !important; margin: 10px 0 14px !important; } .programme-curriculum-divider .elementor-divider-separator { width: 54px !important; } /* INTRO */ .programme-curriculum-intro { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-curriculum-intro, .programme-curriculum-intro p { width: 100% !important; max-width: 100% !important; margin: 0 !important; font-size: 13px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; } } /* ========================================================= */ /* SMALL MOBILE — UP TO 480px */ /* ========================================================= */ @media (max-width: 480px) { .programme-curriculum-header { padding: 38px 24px 22px !important; } .programme-curriculum-title .elementor-heading-title { font-size: 19px !important; } .programme-curriculum-divider { width: 50px !important; margin: 9px 0 13px !important; } .programme-curriculum-divider .elementor-divider-separator { width: 50px !important; } .programme-curriculum-intro, .programme-curriculum-intro p { font-size: 12.5px !important; line-height: 1.55 !important; } } /* ========================================================= */ /* VERY SMALL MOBILE — UP TO 360px */ /* ========================================================= */ @media (max-width: 360px) { .programme-curriculum-header { padding: 34px 20px 20px !important; } .programme-curriculum-title .elementor-heading-title { font-size: 17px !important; } .programme-curriculum-intro, .programme-curriculum-intro p { font-size: 12px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3c195b1 *//* ============================= */ /* SEMESTER BUTTONS GRID 4 + 4 */ /* ============================= */ /*.semester-tabs {*/ /* display: grid !important;*/ /* grid-template-columns: repeat(4, minmax(0, 1fr)) !important;*/ /* gap: 18px !important;*/ /* align-items: stretch !important;*/ /*}*/ /* κάθε κουμπί να γεμίζει το κελί του grid */ /*.semester-tab,*/ /*.semester-tab .elementor-widget-container,*/ /*.semester-tab .elementor-button-wrapper,*/ /*.semester-tab .elementor-button {*/ /* width: 100% !important;*/ /*}*/ /* button look */ /*.semester-tab .elementor-button {*/ /* position: relative !important;*/ /* overflow: hidden !important;*/ /* min-height: 58px;*/ /* background: transparent !important;*/ /* color: #001B44 !important;*/ /* border: 1.5px solid transparent !important;*/ /* border-radius: 9px !important;*/ /* padding: 14px 18px !important;*/ /* font-family: "Manrope", sans-serif !important;*/ /* font-size: 18px !important;*/ /* font-weight: 800 !important;*/ /* line-height: 1.1 !important;*/ /* text-align: center !important;*/ /* box-shadow: none !important;*/ /* transition:*/ /* background-color 0.28s ease,*/ /* color 0.28s ease,*/ /* border-color 0.28s ease,*/ /* transform 0.28s ease,*/ /* box-shadow 0.28s ease !important;*/ /*}*/ /* κίτρινη γραμμή */ /*.semester-tab .elementor-button::after {*/ /* content: "";*/ /* position: absolute;*/ /* left: 50%;*/ /* bottom: 9px;*/ /* width: 0;*/ /* height: 3px;*/ /* background: #F4C400;*/ /* border-radius: 999px;*/ /* transform: translateX(-50%);*/ /* transition: width 0.28s ease;*/ /*}*/ /* hover */ /*.semester-tab .elementor-button:hover {*/ /* background: rgba(0, 27, 68, 0.08) !important;*/ /* color: #001B44 !important;*/ /* border-color: rgba(0, 27, 68, 0.18) !important;*/ /* transform: translateY(-2px);*/ /*}*/ /*.semester-tab .elementor-button:hover::after {*/ /* width: 34px;*/ /*}*/ /* active */ /*.semester-tab.active .elementor-button {*/ /* background: #001B44 !important;*/ /* color: #ffffff !important;*/ /* border-color: #001B44 !important;*/ /* box-shadow: 0 10px 24px rgba(0, 27, 68, 0.24) !important;*/ /* transform: translateY(-2px);*/ /*}*/ /*.semester-tab.active .elementor-button::after {*/ /* width: 42px;*/ /*}*/ /* text πάνω από τη γραμμή */ /*.semester-tab .elementor-button-text {*/ /* position: relative;*/ /* z-index: 2;*/ /*}*/ /* tablet: 2 + 2 + 2 + 2 */ /*@media (max-width: 1024px) {*/ /* .semester-tabs {*/ /* grid-template-columns: repeat(2, minmax(0, 1fr)) !important;*/ /* }*/ /*}*/ /* mobile: 1 ανά σειρά */ /*@media (max-width: 767px) {*/ /* .semester-tabs {*/ /* grid-template-columns: 1fr !important;*/ /* gap: 12px !important;*/ /* }*/ /* .semester-tab .elementor-button {*/ /* min-height: 54px;*/ /* font-size: 16px !important;*/ /* padding: 13px 18px !important;*/ /* }*/ /*}*/ /* ============================= */ /* SEMESTER LOOP PANELS */ /* ============================= */ /*.semester-panel {*/ /* display: none !important;*/ /* opacity: 0;*/ /* transform: translateY(12px);*/ /*}*/ /*.semester-panel.active {*/ /* display: block !important;*/ /* opacity: 1;*/ /* transform: translateY(0);*/ /* animation: semesterFadeIn 0.35s ease;*/ /*}*/ /*@keyframes semesterFadeIn {*/ /* from {*/ /* opacity: 0;*/ /* transform: translateY(12px);*/ /* }*/ /* to {*/ /* opacity: 1;*/ /* transform: translateY(0);*/ /* }*/ /*}*/ /* ============================= */ /* TABLET - SEMESTER TABS 4 + 4 */ /* up to 1024px */ /* ============================= */ /*@media (max-width: 1024px) and (min-width: 768px) {*/ /* .semester-tabs {*/ /* grid-template-columns: repeat(4, minmax(0, 1fr)) !important;*/ /* gap: 10px !important;*/ /* align-items: stretch !important;*/ /* }*/ /* .semester-tab .elementor-button {*/ /* min-height: 46px !important;*/ /* padding: 9px 8px !important;*/ /* font-size: 13px !important;*/ /* font-weight: 800 !important;*/ /* line-height: 1.05 !important;*/ /* border-radius: 8px !important;*/ /* }*/ /* .semester-tab .elementor-button::after {*/ /* bottom: 6px !important;*/ /* height: 2px !important;*/ /* }*/ /* .semester-tab .elementor-button:hover::after {*/ /* width: 24px !important;*/ /* }*/ /* .semester-tab.active .elementor-button {*/ /* box-shadow: 0 7px 16px rgba(0, 27, 68, 0.20) !important;*/ /* transform: translateY(-1px) !important;*/ /* }*/ /* .semester-tab.active .elementor-button::after {*/ /* width: 30px !important;*/ /* }*/ /*}*/ /* ============================= */ /* MOBILE - SEMESTER TABS 2 COLUMNS */ /* up to 767px */ /* ============================= */ /*@media (max-width: 767px) {*/ /* .semester-tabs {*/ /* grid-template-columns: repeat(2, minmax(0, 1fr)) !important;*/ /* gap: 8px !important;*/ /* align-items: stretch !important;*/ /* }*/ /* .semester-tab .elementor-button {*/ /* min-height: 42px !important;*/ /* padding: 9px 6px !important;*/ /* font-size: 12.5px !important;*/ /* font-weight: 800 !important;*/ /* line-height: 1.05 !important;*/ /* border-radius: 8px !important;*/ /* }*/ /* .semester-tab .elementor-button::after {*/ /* bottom: 6px !important;*/ /* height: 2px !important;*/ /* }*/ /* .semester-tab .elementor-button:hover {*/ /* transform: translateY(-1px) !important;*/ /* }*/ /* .semester-tab .elementor-button:hover::after {*/ /* width: 22px !important;*/ /* }*/ /* .semester-tab.active .elementor-button {*/ /* transform: translateY(-1px) !important;*/ /* box-shadow: 0 7px 16px rgba(0, 27, 68, 0.20) !important;*/ /* }*/ /* .semester-tab.active .elementor-button::after {*/ /* width: 28px !important;*/ /* }*/ /*}*//* ================================================= */ /* SEMESTER TABS - TECH GLASS STYLE */ /* OUTER CONTAINER CUSTOM CSS */ /* ================================================= */ /* ================================================= */ /* DESKTOP - SEMESTER GRID 4 + 4 */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; align-items: stretch !important; } /* ================================================= */ /* BUTTONS FILL GRID CELLS */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab, .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-widget-container, .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button-wrapper, .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button { width: 100% !important; } /* ================================================= */ /* BUTTON BASE */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button { position: relative !important; overflow: hidden !important; min-height: 58px; padding: 14px 18px !important; /* LIGHT TECH GLASS */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.88) 0%, rgba(244, 250, 255, 0.76) 52%, rgba(225, 241, 252, 0.66) 100% ) !important; color: #003B68 !important; border: 1px solid rgba(78, 203, 255, 0.28) !important; border-radius: 14px !important; font-family: "Manrope", sans-serif !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.1 !important; text-align: center !important; box-shadow: 0 7px 18px rgba(0, 27, 68, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.32s ease, color 0.28s ease, border-color 0.28s ease, transform 0.28s ease, box-shadow 0.32s ease !important; } /* ================================================= */ /* CYAN LIQUID GLOW */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button::before { content: ""; position: absolute; width: 120px; height: 120px; top: -82px; right: -58px; border-radius: 50%; background: radial-gradient( circle, rgba(79, 209, 255, 0.34) 0%, rgba(44, 158, 212, 0.11) 42%, transparent 72% ); opacity: 0; filter: blur(2px); transition: opacity 0.35s ease, transform 0.4s ease; pointer-events: none; } /* ================================================= */ /* METALLIC GOLD UNDERLINE */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 0; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, #A97808 0%, #D4AF37 24%, #F4C400 50%, #FFE88A 72%, #C89413 100% ); box-shadow: 0 0 8px rgba(244, 196, 0, 0.24); transform: translateX(-50%); transition: width 0.28s ease, box-shadow 0.28s ease; } /* ================================================= */ /* BUTTON HOVER */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button:hover { background: linear-gradient( 135deg, rgba(237, 249, 255, 0.98) 0%, rgba(216, 240, 253, 0.82) 100% ) !important; color: #003B68 !important; border-color: rgba(79, 209, 255, 0.56) !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 27, 68, 0.11), 0 0 18px rgba(79, 209, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important; } /* SHOW CYAN GLOW ON HOVER */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button:hover::before { opacity: 1; transform: scale(1.15); } /* SHOW GOLD LINE ON HOVER */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button:hover::after { width: 34px; box-shadow: 0 0 11px rgba(244, 196, 0, 0.36); } /* ================================================= */ /* ACTIVE SEMESTER */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab.active .elementor-button { background: linear-gradient( 135deg, #001B44 0%, #003A65 48%, #075A83 100% ) !important; color: #ffffff !important; border: 1px solid rgba(79, 209, 255, 0.58) !important; box-shadow: 0 12px 28px rgba(0, 27, 68, 0.28), 0 0 22px rgba(54, 186, 240, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; transform: translateY(-2px); } /* ================================================= */ /* ACTIVE CYAN GLOW */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab.active .elementor-button::before { opacity: 1; background: radial-gradient( circle, rgba(107, 224, 255, 0.32) 0%, rgba(34, 151, 212, 0.12) 44%, transparent 72% ); } /* ================================================= */ /* ACTIVE GOLD LINE */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab.active .elementor-button::after { width: 42px; background: linear-gradient( 90deg, #A97808 0%, #D4AF37 24%, #F4C400 50%, #FFE88A 72%, #C89413 100% ); box-shadow: 0 0 12px rgba(244, 196, 0, 0.44); } /* ================================================= */ /* BUTTON TEXT */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button-text { position: relative; z-index: 3; } /* ================================================= */ /* SEMESTER LOOP PANELS */ /* ORIGINAL FUNCTIONALITY */ /* ================================================= */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-panel { display: none !important; opacity: 0; transform: translateY(12px); } .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-panel.active { display: block !important; opacity: 1; transform: translateY(0); animation: semesterFadeIn 0.35s ease; } /* ================================================= */ /* PANEL ANIMATION */ /* ================================================= */ @keyframes semesterFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ================================================= */ /* TABLET */ /* 768px - 1024px */ /* SAME ORIGINAL FUNCTIONALITY: 4 + 4 */ /* ================================================= */ @media (max-width: 1024px) and (min-width: 768px) { .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; align-items: stretch !important; } /* BUTTON SIZE */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button { min-height: 46px !important; padding: 9px 8px !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.05 !important; border-radius: 8px !important; } /* SMALLER CYAN GLOW */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button::before { width: 85px !important; height: 85px !important; top: -60px !important; right: -42px !important; } /* GOLD LINE */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button::after { bottom: 6px !important; height: 2px !important; } /* HOVER */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button:hover { transform: translateY(-1px) !important; } .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button:hover::after { width: 24px !important; } /* ACTIVE */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab.active .elementor-button { transform: translateY(-1px) !important; box-shadow: 0 7px 16px rgba(0, 27, 68, 0.20), 0 0 14px rgba(54, 186, 240, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; } .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab.active .elementor-button::after { width: 30px !important; } } /* ================================================= */ /* MOBILE */ /* UP TO 767px */ /* SAME ORIGINAL FUNCTIONALITY: 2 COLUMNS */ /* ================================================= */ @media (max-width: 767px) { .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; align-items: stretch !important; } /* ENSURE BUTTONS FIT GRID */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab, .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-widget-container, .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button-wrapper, .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button { width: 100% !important; min-width: 0 !important; } /* BUTTON SIZE */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button { min-height: 42px !important; padding: 9px 6px !important; font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.05 !important; border-radius: 8px !important; } /* SMALL MOBILE GLOW */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button::before { width: 75px !important; height: 75px !important; top: -52px !important; right: -38px !important; } /* GOLD LINE */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button::after { bottom: 6px !important; height: 2px !important; } /* HOVER */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button:hover { transform: translateY(-1px) !important; } .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab .elementor-button:hover::after { width: 22px !important; } /* ACTIVE */ .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab.active .elementor-button { transform: translateY(-1px) !important; box-shadow: 0 7px 16px rgba(0, 27, 68, 0.20), 0 0 12px rgba(54, 186, 240, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; } .elementor-1911 .elementor-element.elementor-element-3c195b1 .semester-tab.active .elementor-button::after { width: 28px !important; } } /* ============================= */ /* SEMESTER LOOP PANELS */ /* ============================= */ .semester-panel { display: none !important; opacity: 0; transform: translateY(12px); } .semester-panel.active { display: block !important; opacity: 1; transform: translateY(0); animation: semesterFadeIn 0.35s ease; } @keyframes semesterFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-71abedd *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-96edd65 *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-c2f1f27 *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-5d7addc *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-5df1f25 *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-f48eed0 *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-639ed4f *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-93104ae *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-5df8fa0 *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-c53481f *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-675a7ab *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for loop-grid, class: .elementor-element-b97e5a3 *//* ============================= */ /* STAFF LOOP GRID PAGINATION */ /* πιο εντυπωσιακό style */ /* ============================= */ .staff-loop-grid .elementor-pagination { width: 100%; margin-top: 55px; padding: 24px 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(135deg, #001B44 0%, #00285F 55%, #003B73 100%); border: 1px solid rgba(244, 244, 244, 0.12); box-shadow: 0 14px 34px rgba(0, 27, 68, 0.18); font-family: 'Manrope', sans-serif; } /* Κοινό style για links / current */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; color: #F4F4F4; font-size: 20px; font-weight: 700; line-height: 1; text-decoration: none !important; border-radius: 10px; border: 1px solid transparent; transition: all 0.3s ease; box-shadow: none !important; } /* underline animation on hover */ .staff-loop-grid .elementor-pagination a::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 0; height: 3px; background: #FFCC00; border-radius: 20px; transition: width 0.28s ease; } /* hover */ .staff-loop-grid .elementor-pagination a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .staff-loop-grid .elementor-pagination a:hover::after { width: 60%; } /* current page */ .staff-loop-grid .elementor-pagination .current { background: #F4F4F4; color: #001B44; border-color: #F4F4F4; font-weight: 800; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } /* χρυσή μικρή γραμμή στο active */ .staff-loop-grid .elementor-pagination .current::after { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); width: 16px; height: 3px; background: #FFCC00; border-radius: 20px; } /* Previous / Next / Last */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 16px; min-width: auto; font-weight: 800; } /* αν το theme βγάζει και "last" σαν απλό link */ .staff-loop-grid .elementor-pagination a:last-child { font-weight: 800; } /* αποσιωπητικά */ .staff-loop-grid .elementor-pagination .dots { color: rgba(244, 244, 244, 0.8); min-width: auto; padding: 0 6px; background: transparent; } /* mobile */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { margin-top: 35px; padding: 18px 14px; gap: 10px; } .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span { min-width: 38px; height: 38px; font-size: 17px; padding: 0 10px; } .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { padding: 0 12px; } } /* ============================= */ /* CURRENT PAGE - clean active box */ /* remove yellow underline only from selected page */ /* ============================= */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; } /* Κρατάμε το active σαν καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 42px !important; height: 42px !important; padding: 0 12px !important; line-height: 42px !important; text-align: center !important; box-sizing: border-box !important; font-weight: 800 !important; } /* ============================= */ /* TABLET PORTRAIT - up to 1024px */ /* Compact pagination in one line */ /* ============================= */ @media (min-width: 768px) and (max-width: 1024px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 20px 22px !important; gap: 14px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Βασικό reset σε όλα */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 10px !important; overflow: hidden !important; } /* Previous / Next */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { min-width: 78px !important; height: 36px !important; padding: 0 12px !important; font-size: 14px !important; line-height: 1 !important; } /* Active page - καθαρό λευκό κουτί */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 52px !important; height: 44px !important; padding: 0 14px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 28px !important; height: 36px !important; padding: 0 6px !important; font-size: 14px !important; line-height: 1 !important; } /* Hover underline - σωστά μέσα στο κουτί */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 6px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 46% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } } /* ============================= */ /* MOBILE PORTRAIT - έως 767px */ /* Pagination σε μία γραμμή χωρίς να βγαίνει εκτός */ /* ============================= */ @media (max-width: 767px) { .staff-loop-grid .elementor-pagination { width: 100% !important; max-width: 100% !important; padding: 16px 8px !important; gap: 5px !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: hidden !important; overflow-y: hidden !important; box-sizing: border-box !important; } /* Όλα τα pagination items */ .staff-loop-grid .elementor-pagination a, .staff-loop-grid .elementor-pagination span, .staff-loop-grid .elementor-pagination .page-numbers { position: relative !important; width: auto !important; min-width: 22px !important; height: 26px !important; padding: 0 5px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; border-radius: 7px !important; overflow: hidden !important; } /* Previous / Next στο mobile γίνονται μικρά βελάκια */ .staff-loop-grid .elementor-pagination .prev, .staff-loop-grid .elementor-pagination .next { width: 24px !important; min-width: 24px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .staff-loop-grid .elementor-pagination .prev::before { content: "‹"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } .staff-loop-grid .elementor-pagination .next::before { content: "›"; font-size: 16px !important; font-weight: 900 !important; line-height: 1 !important; color: #F4F4F4; } /* Active page */ .staff-loop-grid .elementor-pagination .current, .staff-loop-grid .elementor-pagination .page-numbers.current { min-width: 34px !important; height: 32px !important; padding: 0 8px !important; background: #F4F4F4 !important; color: #001B44 !important; border-color: #F4F4F4 !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; box-sizing: border-box !important; overflow: hidden !important; } /* Dots */ .staff-loop-grid .elementor-pagination .dots { min-width: 16px !important; height: 26px !important; padding: 0 2px !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Hover underline */ .staff-loop-grid .elementor-pagination a::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 4px !important; transform: translateX(-50%) !important; width: 0 !important; height: 2px !important; background: #FFCC00 !important; border-radius: 20px !important; transition: width 0.28s ease !important; pointer-events: none !important; } .staff-loop-grid .elementor-pagination a:hover::after { width: 42% !important; } /* Δεν θέλουμε underline στο selected */ .staff-loop-grid .elementor-pagination .current::after, .staff-loop-grid .elementor-pagination .page-numbers.current::after { display: none !important; content: none !important; width: 0 !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-70bb383 *//* ========================================================= */ /* TEACHING STAFF — FINAL CLEAN VERSION */ /* BASED ON ORIGINAL WORKING COMPONENT */ /* STAFF CARDS / LOOP GRID ARE NOT STYLED HERE */ /* ========================================================= */ /* ========================================================= */ /* MAIN SECTION */ /* ========================================================= */ .programme-staff { position: relative; width: 88% !important; max-width: 1500px !important; margin: 0 auto !important; padding: 82px 0 92px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; overflow: visible !important; } /* ========================================================= */ /* EYEBROW */ /* ========================================================= */ .programme-staff-eyebrow { width: 100% !important; margin: 0 0 12px 0 !important; } .programme-staff-eyebrow .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: #C9A85C !important; } /* ========================================================= */ /* TITLE */ /* ========================================================= */ .programme-staff-title { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .programme-staff-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 46px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.04em !important; color: #001B44 !important; } /* ========================================================= */ /* DIVIDER */ /* ========================================================= */ .programme-staff-divider { width: 72px !important; margin: 20px 0 22px !important; } .programme-staff-divider .elementor-divider { padding: 0 !important; } .programme-staff-divider .elementor-divider-separator { width: 72px !important; border-top-width: 3px !important; border-top-color: #C9A85C !important; } /* ========================================================= */ /* INTRO */ /* ========================================================= */ .programme-staff-intro { width: 100% !important; max-width: 820px !important; margin: 0 !important; } .programme-staff-intro, .programme-staff-intro p { font-family: "Manrope", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.72 !important; color: rgba(0, 27, 68, 0.72) !important; } .programme-staff-intro p { margin: 0 !important; } /* ========================================================= */ /* HTML WIDGET */ /* ESSENTIAL FOR THE ORIGINAL COMPONENT */ /* ========================================================= */ .programme-staff .elementor-widget-html { width: 100% !important; max-width: none !important; align-self: stretch !important; } .programme-staff .elementor-widget-html > .elementor-widget-container { width: 100% !important; max-width: none !important; } /* ========================================================= */ /* STAFF NAVIGATION */ /* ========================================================= */ .programme-staff-nav { position: relative; width: 100% !important; max-width: none !important; margin: 38px 0 0 0 !important; padding: 7px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch !important; gap: 7px !important; border: 1px solid rgba(0, 27, 68, 0.08); border-radius: 18px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 10px 28px rgba(0, 27, 68, 0.055); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ========================================================= */ /* NAV BUTTON */ /* ========================================================= */ .staff-nav-item { position: relative; width: 100%; min-width: 0; min-height: 62px; margin: 0; padding: 11px 12px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: 13px; background: transparent; box-shadow: none; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 700; line-height: 1.25; color: rgba(0, 27, 68, 0.72); text-align: center; white-space: normal; cursor: pointer; transition: background 0.30s ease, color 0.30s ease, border-color 0.30s ease, box-shadow 0.30s ease, transform 0.30s ease; } /* ========================================================= */ /* DESKTOP SEPARATORS */ /* ========================================================= */ .staff-nav-item:not(:last-child)::after { content: ""; position: absolute; right: -4px; top: 22%; width: 1px; height: 56%; background: rgba(0, 27, 68, 0.08); transition: opacity 0.25s ease; } /* ========================================================= */ /* HOVER */ /* ========================================================= */ @media (hover: hover) { .staff-nav-item:not(.active):hover { background: rgba(0, 27, 68, 0.045); color: #001B44; } } /* ========================================================= */ /* ACTIVE TAB */ /* ========================================================= */ .staff-nav-item.active { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.10); background: linear-gradient( 135deg, #001B44 0%, #0B3268 100% ); box-shadow: 0 9px 22px rgba(0, 27, 68, 0.17); transform: translateY(-1px); } /* GOLD ACTIVE INDICATOR */ .staff-nav-item.active::before { content: ""; position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); width: 32px; height: 2px; border-radius: 50px; background: linear-gradient( 90deg, #A98533 0%, #F0DBA3 50%, #C9A85C 100% ); box-shadow: 0 0 7px rgba(214, 181, 109, 0.35); } .staff-nav-item.active::after { opacity: 0; } /* ========================================================= */ /* STAFF PANELS */ /* ONLY FUNCTIONAL WRAPPER RULES */ /* STAFF CARDS ARE NOT TOUCHED */ /* ========================================================= */ .staff-panel { position: relative; width: 100% !important; max-width: none !important; margin: 38px 0 0 0 !important; padding: 0 !important; box-sizing: border-box; } /* ========================================================= */ /* REMOVE CATEGORY LABEL */ /* ========================================================= */ .staff-panel::before, .staff-professors::before, .staff-associate::before, .staff-assistant::before, .staff-laboratory::before, .staff-external::before { content: none !important; display: none !important; } /* ========================================================= */ /* PANEL VISIBILITY */ /* REQUIRED BY YOUR JAVASCRIPT */ /* ========================================================= */ .staff-panel.staff-hidden { display: none !important; } .staff-panel.staff-active { display: flex !important; width: 100% !important; animation: staffPanelIn 0.42s ease both; } .staff-panel.staff-active.e-con { display: flex !important; } /* ONLY DIRECT OUTER WRAPPER */ .staff-panel > .e-con-inner { width: 100% !important; max-width: none !important; } /* ========================================================= */ /* PANEL ANIMATION */ /* ========================================================= */ @keyframes staffPanelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= */ /* LAPTOP — UP TO 1366px */ /* ========================================================= */ @media (max-width: 1366px) { .programme-staff { width: 90% !important; padding: 72px 0 82px !important; } .programme-staff-title .elementor-heading-title { font-size: 39px !important; } .programme-staff-intro, .programme-staff-intro p { font-size: 15px !important; } .programme-staff-nav { margin-top: 34px !important; padding: 7px !important; gap: 6px !important; border-radius: 17px; } .staff-nav-item { min-height: 58px; padding: 10px 10px; font-size: 11.5px; } .staff-panel { margin-top: 34px !important; } } /* ========================================================= */ /* TABLET LANDSCAPE — UP TO 1200px */ /* ========================================================= */ @media (max-width: 1200px) { .programme-staff { padding: 62px 0 70px !important; } .programme-staff-title .elementor-heading-title { font-size: 34px !important; } .programme-staff-divider { width: 64px !important; margin: 17px 0 19px !important; } .programme-staff-divider .elementor-divider-separator { width: 64px !important; } /* 3 + 2 */ .programme-staff-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px !important; } .staff-nav-item { grid-column: span 2; min-height: 56px; font-size: 11px; } .staff-nav-item:nth-child(4) { grid-column: 2 / span 2; } .staff-nav-item:nth-child(5) { grid-column: 4 / span 2; } .staff-nav-item::after { display: none; } } /* ========================================================= */ /* TABLET PORTRAIT — UP TO 1024px */ /* ========================================================= */ @media (max-width: 1024px) { .programme-staff { width: 90% !important; padding: 56px 0 64px !important; } .programme-staff-eyebrow .elementor-heading-title { font-size: 10px !important; } .programme-staff-title .elementor-heading-title { font-size: 30px !important; } .programme-staff-intro { max-width: 650px !important; } .programme-staff-intro, .programme-staff-intro p { font-size: 13px !important; line-height: 1.65 !important; } .programme-staff-nav { margin-top: 28px !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; } .staff-nav-item, .staff-nav-item:nth-child(4), .staff-nav-item:nth-child(5) { grid-column: auto; min-height: 54px; } .staff-nav-item:last-child { grid-column: 1 / -1; } .staff-panel { margin-top: 28px !important; } } /* ========================================================= */ /* MOBILE — UP TO 767px */ /* ORIGINAL FUNCTIONAL SWIPE NAVIGATION */ /* ========================================================= */ @media (max-width: 767px) { /* SECTION */ .programme-staff { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 40px 28px 48px !important; box-sizing: border-box !important; overflow: visible !important; } /* EYEBROW */ .programme-staff-eyebrow { margin: 0 0 10px 0 !important; } .programme-staff-eyebrow .elementor-heading-title { font-size: 8.5px !important; line-height: 1.2 !important; letter-spacing: 0.16em !important; } /* TITLE */ .programme-staff-title .elementor-heading-title { font-size: 21px !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; white-space: normal !important; } /* DIVIDER */ .programme-staff-divider { width: 54px !important; margin: 10px 0 14px !important; } .programme-staff-divider .elementor-divider-separator { width: 54px !important; } /* INTRO */ .programme-staff-intro { width: 100% !important; max-width: 100% !important; } .programme-staff-intro, .programme-staff-intro p { font-size: 13px !important; line-height: 1.55 !important; white-space: normal !important; overflow-wrap: break-word !important; } /* ===================================================== */ /* MOBILE NAVIGATION */ /* KEEP ORIGINAL HORIZONTAL SWIPE FUNCTIONALITY */ /* ===================================================== */ .programme-staff-nav { width: calc(100% + 28px) !important; max-width: none !important; margin: 22px -28px 0 0 !important; padding: 4px 28px 10px 0 !important; display: flex !important; flex-wrap: nowrap !important; align-items: stretch; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; } .programme-staff-nav::-webkit-scrollbar { display: none; } .staff-nav-item, .staff-nav-item:nth-child(4), .staff-nav-item:nth-child(5), .staff-nav-item:last-child { flex: 0 0 auto; width: auto; min-width: 150px; min-height: 50px; padding: 9px 13px; grid-column: auto; border: 1px solid rgba(0, 27, 68, 0.09); border-radius: 12px; background: rgba(255, 255, 255, 0.84); color: rgba(0, 27, 68, 0.74); font-size: 10px; line-height: 1.2; text-align: center; scroll-snap-align: start; } .staff-nav-item.active { color: #FFFFFF; border-color: transparent; background: linear-gradient( 135deg, #001B44 0%, #0B3268 100% ); box-shadow: 0 8px 18px rgba(0, 27, 68, 0.16); } .staff-nav-item.active::before { width: 28px; height: 2px; bottom: 6px; } .staff-nav-item::after { display: none; } /* ONLY PANEL SPACING */ .staff-panel { margin-top: 22px !important; } } /* ========================================================= */ /* SMALL MOBILE — UP TO 480px */ /* ========================================================= */ @media (max-width: 480px) { .programme-staff { padding: 38px 24px 44px !important; } .programme-staff-title .elementor-heading-title { font-size: 19px !important; } .programme-staff-divider { width: 50px !important; margin: 9px 0 13px !important; } .programme-staff-divider .elementor-divider-separator { width: 50px !important; } .programme-staff-intro, .programme-staff-intro p { font-size: 12.5px !important; line-height: 1.55 !important; } .programme-staff-nav { width: calc(100% + 24px) !important; margin-right: -24px !important; padding-right: 24px !important; } .staff-nav-item, .staff-nav-item:nth-child(4), .staff-nav-item:nth-child(5), .staff-nav-item:last-child { min-width: 142px; min-height: 48px; padding: 8px 12px; font-size: 9.5px; } .staff-panel { margin-top: 20px !important; } } /* ========================================================= */ /* VERY SMALL MOBILE — UP TO 360px */ /* ========================================================= */ @media (max-width: 360px) { .programme-staff { padding: 34px 20px 42px !important; } .programme-staff-title .elementor-heading-title { font-size: 17px !important; } .programme-staff-intro, .programme-staff-intro p { font-size: 12px !important; } .programme-staff-nav { width: calc(100% + 20px) !important; margin-right: -20px !important; padding-right: 20px !important; } .staff-nav-item, .staff-nav-item:nth-child(4), .staff-nav-item:nth-child(5), .staff-nav-item:last-child { min-width: 136px; font-size: 9px; } } /* ========================================== PROGRAMME STAFF — MOBILE NAV FIX ========================================== */ @media (max-width: 767px) { /* Navigation wrapper */ .programme-staff .programme-staff-nav { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; margin: 24px 0 0 !important; padding: 6px !important; gap: 8px !important; overflow: visible !important; border: 1px solid rgba(0, 27, 68, 0.08) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.60) !important; box-shadow: 0 8px 25px rgba(0, 27, 68, 0.05) !important; box-sizing: border-box !important; } /* Navigation buttons */ .programme-staff .programme-staff-nav .staff-nav-item, .programme-staff .programme-staff-nav .staff-nav-item:nth-child(4), .programme-staff .programme-staff-nav .staff-nav-item:nth-child(5), .programme-staff .programme-staff-nav .staff-nav-item:last-child { grid-column: auto !important; width: 100% !important; min-width: 0 !important; min-height: 52px !important; margin: 0 !important; padding: 11px 8px !important; border-radius: 11px !important; border: 1px solid rgba(0, 27, 68, 0.08) !important; background: #FFFFFF !important; color: #001B44 !important; font-family: "Manrope", sans-serif !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: center !important; white-space: normal !important; box-shadow: none !important; transform: none !important; scroll-snap-align: none !important; box-sizing: border-box !important; } /* Last button — full width */ .programme-staff .programme-staff-nav .staff-nav-item:last-child { grid-column: 1 / -1 !important; } /* Selected category */ .programme-staff .programme-staff-nav .staff-nav-item.active { color: #FFFFFF !important; background: linear-gradient( 135deg, #001B44 0%, #0B3268 100% ) !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(0, 27, 68, 0.15) !important; } /* Gold indicator */ .programme-staff .programme-staff-nav .staff-nav-item.active::before { width: 28px !important; height: 2px !important; bottom: 6px !important; } /* Remove separators */ .programme-staff .programme-staff-nav .staff-nav-item::after { display: none !important; } /* Hover only on supported devices */ @media (hover: hover) { .programme-staff .programme-staff-nav .staff-nav-item:not(.active):hover { background: #F4F0E6 !important; color: #001B44 !important; } } } @media (max-width: 360px) { .programme-staff .programme-staff-nav .staff-nav-item { font-size: 9.5px !important; padding: 10px 6px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-037ca4d *//* ========================================================= PROGRAMME RESOURCES — NOTEBOOK DOCUMENT STYLE ========================================================= */ /* ========================================================= MAIN SECTION ========================================================= */ .programme-resources { position: relative; width: 88% !important; max-width: 1500px !important; margin: 0 auto !important; padding: 82px 0 92px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; font-family: "Manrope", sans-serif !important; } /* ========================================================= EYEBROW ========================================================= */ .programme-resources-eyebrow { width: 100% !important; margin: 0 0 12px 0 !important; } .programme-resources-eyebrow .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #C9A85C !important; } /* ========================================================= TITLE ========================================================= */ .programme-resources-title { width: 100% !important; margin: 0 !important; } .programme-resources-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 46px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -0.04em !important; color: #001B44 !important; } /* ========================================================= DIVIDER ========================================================= */ .programme-resources-divider { width: 72px !important; margin: 20px 0 22px !important; } .programme-resources-divider .elementor-divider { padding: 0 !important; } .programme-resources-divider .elementor-divider-separator { width: 72px !important; border-top-width: 3px !important; border-top-color: #C9A85C !important; } /* ========================================================= INTRO ========================================================= */ .programme-resources-intro { width: 100% !important; max-width: 780px !important; margin: 0 !important; } .programme-resources-intro, .programme-resources-intro p { font-family: "Manrope", sans-serif !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.72 !important; color: rgba(0, 27, 68, 0.72) !important; } .programme-resources-intro p { margin: 0 !important; } /* ========================================================= GRID ========================================================= */ .programme-resources-grid { position: relative; width: 100% !important; margin: 42px 0 0 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; box-sizing: border-box !important; } .programme-resources-grid > .e-con-inner { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= DOCUMENT CARD ========================================================= */ .resource-card { position: relative; width: 100% !important; max-width: 100% !important; min-height: 245px; margin: 0 !important; padding: 40px 76px 38px 118px !important; box-sizing: border-box; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; overflow: hidden; border: 1px solid rgba(0, 27, 68, 0.08); border-radius: 7px 22px 22px 7px; background-color: #FFFDF7 !important; background-image: linear-gradient( to bottom, rgba(0, 27, 68, 0.027) 1px, transparent 1px ), linear-gradient( 135deg, #FFFDF8 0%, #FBF8EF 100% ) !important; background-size: 100% 29px, 100% 100% !important; box-shadow: 0 14px 34px rgba(0, 27, 68, 0.07), 0 3px 8px rgba(0, 27, 68, 0.035); isolation: isolate; cursor: pointer; transition: transform 0.38s cubic-bezier(.2,.8,.2,1), box-shadow 0.38s ease, border-color 0.38s ease; } /* ========================================================= INNER PAPER EDGE ========================================================= */ .resource-card { outline: 1px solid rgba(255,255,255,0.75); outline-offset: -7px; } /* ========================================================= SPIRAL STRIP ========================================================= */ .resource-card::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 100%; z-index: 4; background: linear-gradient( 180deg, #001B44 0%, #062957 55%, #0B3268 100% ); pointer-events: none; } /* GOLD SPIRAL VERSION */ .resource-card-02::before, .resource-card-04::before { background: linear-gradient( 180deg, #A98533 0%, #C9A85C 55%, #D6B56D 100% ); } /* ========================================================= SPIRAL RINGS ========================================================= */ .resource-card { background-repeat: repeat-y, no-repeat !important; } .resource-card .resource-number::before { content: ""; position: absolute; left: -96px; top: -92px; width: 24px; height: 210px; pointer-events: none; background: radial-gradient( circle at center, #ffffff 0 4px, rgba(0, 27, 68, 0.14) 4.5px 6px, transparent 6.5px ); background-size: 24px 26px; background-repeat: repeat-y; z-index: 8; } /* ========================================================= FOLDED CORNER ========================================================= */ .resource-card::after { content: "↗"; position: absolute; top: 0; right: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; padding: 0 0 14px 14px; box-sizing: border-box; background: linear-gradient( 225deg, #ECE8DB 0%, #F6F1E6 47%, transparent 48%, transparent 100% ); font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; color: rgba(0, 27, 68, 0.55); border-radius: 0 20px 0 12px; box-shadow: -5px 5px 11px rgba(0, 27, 68, 0.04); z-index: 8; pointer-events: none; transition: width 0.35s ease, height 0.35s ease, background 0.35s ease, color 0.35s ease, transform 0.35s ease; } /* ========================================================= CONTENT ========================================================= */ .resource-card > * { position: relative; z-index: 3; } /* ========================================================= NUMBER ========================================================= */ .resource-number { position: absolute !important; left: 54px; top: 35px; transform: none !important; margin: 0 !important; width: auto !important; z-index: 3; } .resource-number .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 48px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.05em !important; color: rgba(0, 27, 68, 0.075) !important; } .resource-card-02 .resource-number .elementor-heading-title, .resource-card-04 .resource-number .elementor-heading-title { color: rgba(169, 133, 51, 0.17) !important; } /* ========================================================= TITLE ========================================================= */ .resource-title { width: 100% !important; max-width: 520px !important; margin: 0 0 11px 0 !important; padding-right: 12px !important; } .resource-title .elementor-heading-title { font-family: "Manrope", sans-serif !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.025em !important; color: #001B44 !important; transition: color 0.3s ease; } /* ========================================================= DESCRIPTION ========================================================= */ .resource-description { width: 100% !important; max-width: 520px !important; margin: 0 !important; } .resource-description, .resource-description p { font-family: "Manrope", sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.62 !important; color: rgba(0, 27, 68, 0.65) !important; } .resource-description p { margin: 0 !important; } /* ========================================================= SUBTLE PAPER GLOW ========================================================= */ .resource-card { background-blend-mode: multiply, normal; } /* ========================================================= HOVER ========================================================= */ @media (hover: hover) { .resource-card:hover { transform: translateY(-7px) rotate(-0.25deg); border-color: rgba(201, 168, 92, 0.26); box-shadow: 0 26px 52px rgba(0, 27, 68, 0.13), 0 8px 18px rgba(0, 27, 68, 0.045); } .resource-card:hover .resource-title .elementor-heading-title { color: #0B3268 !important; } /* Fold becomes more arrow-like */ .resource-card:hover::after { width: 72px; height: 72px; background: linear-gradient( 225deg, #001B44 0%, #0B3268 48%, transparent 49%, transparent 100% ); color: #FFFFFF; transform: translate(-2px, 2px); box-shadow: -7px 7px 16px rgba(0, 27, 68, 0.10); } /* tiny motion in text */ .resource-card:hover .resource-title { transform: translateX(3px); transition: transform 0.3s ease; } .resource-card:hover .resource-description { transform: translateX(2px); transition: transform 0.3s ease; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1366px) { .programme-resources { width: 90% !important; padding: 72px 0 82px !important; } .programme-resources-title .elementor-heading-title { font-size: 39px !important; } .programme-resources-intro, .programme-resources-intro p { font-size: 15px !important; } .programme-resources-grid, .programme-resources-grid > .e-con-inner { gap: 20px !important; } .resource-card { min-height: 225px; padding: 36px 70px 34px 106px !important; } .resource-number { left: 50px; } .resource-number .elementor-heading-title { font-size: 44px !important; } .resource-title .elementor-heading-title { font-size: 20px !important; } } /* ========================================================= TABLET LANDSCAPE ========================================================= */ @media (max-width: 1200px) { .programme-resources { padding: 62px 0 70px !important; } .programme-resources-title .elementor-heading-title { font-size: 34px !important; } .programme-resources-grid, .programme-resources-grid > .e-con-inner { gap: 16px !important; } .resource-card { min-height: 215px; padding: 32px 64px 30px 98px !important; } .resource-card::before { width: 28px; } .resource-number { left: 46px; } .resource-number .elementor-heading-title { font-size: 40px !important; } .resource-title .elementor-heading-title { font-size: 18px !important; } .resource-description, .resource-description p { font-size: 13px !important; } } /* ========================================================= TABLET PORTRAIT ========================================================= */ @media (max-width: 1024px) { .programme-resources { width: 90% !important; padding: 56px 0 64px !important; } .programme-resources-title .elementor-heading-title { font-size: 30px !important; } .programme-resources-intro, .programme-resources-intro p { font-size: 13px !important; } .programme-resources-grid, .programme-resources-grid > .e-con-inner { gap: 14px !important; } .resource-card { min-height: 205px; padding: 30px 58px 28px 88px !important; border-radius: 6px 18px 18px 6px; } .resource-card::before { width: 25px; } .resource-number { left: 41px; } .resource-number .elementor-heading-title { font-size: 36px !important; } .resource-title .elementor-heading-title { font-size: 17px !important; } .resource-description, .resource-description p { font-size: 12px !important; } .resource-card::after { width: 54px; height: 54px; font-size: 14px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .programme-resources { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 40px 28px 48px !important; box-sizing: border-box !important; overflow: hidden !important; } /* EYEBROW */ .programme-resources-eyebrow { margin: 0 0 10px 0 !important; } .programme-resources-eyebrow .elementor-heading-title { font-size: 8.5px !important; } /* TITLE */ .programme-resources-title .elementor-heading-title { font-size: 21px !important; line-height: 1.15 !important; } /* DIVIDER */ .programme-resources-divider { width: 54px !important; margin: 10px 0 14px !important; } .programme-resources-divider .elementor-divider-separator { width: 54px !important; } /* INTRO */ .programme-resources-intro { width: 100% !important; max-width: 100% !important; } .programme-resources-intro, .programme-resources-intro p { font-size: 13px !important; line-height: 1.55 !important; } /* GRID */ .programme-resources-grid, .programme-resources-grid > .e-con-inner { width: 100% !important; grid-template-columns: 1fr !important; gap: 14px !important; } .programme-resources-grid { margin-top: 24px !important; } /* CARD */ .resource-card { min-height: 170px !important; padding: 28px 48px 24px 70px !important; border-radius: 5px 15px 15px 5px !important; background-size: 100% 25px, 100% 100% !important; } /* SPINE */ .resource-card::before { width: 20px !important; } /* NUMBER */ .resource-number { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; margin: 0 0 14px 0 !important; } .resource-number .elementor-heading-title { font-size: 24px !important; } /* SPIRAL */ .resource-card .resource-number::before { left: -62px; top: -29px; width: 18px; height: 150px; background-size: 18px 22px; } /* TITLE */ .resource-title { margin: 0 0 7px 0 !important; padding: 0 !important; } .resource-title .elementor-heading-title { font-size: 15px !important; line-height: 1.2 !important; } /* DESCRIPTION */ .resource-description, .resource-description p { font-size: 11px !important; line-height: 1.5 !important; } /* FOLDED CORNER */ .resource-card::after { width: 46px !important; height: 46px !important; font-size: 12px !important; border-radius: 0 14px 0 9px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .programme-resources { padding: 38px 24px 44px !important; } .programme-resources-title .elementor-heading-title { font-size: 19px !important; } .programme-resources-intro, .programme-resources-intro p { font-size: 12.5px !important; } .resource-card { min-height: 165px !important; padding: 26px 44px 22px 65px !important; } .resource-title .elementor-heading-title { font-size: 14.5px !important; } .resource-description, .resource-description p { font-size: 10.8px !important; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 360px) { .programme-resources { padding: 34px 20px 42px !important; } .programme-resources-title .elementor-heading-title { font-size: 17px !important; } .programme-resources-intro, .programme-resources-intro p { font-size: 12px !important; } .resource-card { padding: 24px 40px 20px 60px !important; } .resource-title .elementor-heading-title { font-size: 14px !important; } .resource-description, .resource-description p { font-size: 10.5px !important; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-f7f1e9d *//* ========================================================= */ /* PROGRAMME — GLOSSY BACK TO TOP BUTTON */ /* ========================================================= */ .programme-back-top { position: fixed; right: 26px; bottom: 28px; width: 58px; height: 58px; padding: 0 !important; display: flex; align-items: center; justify-content: center; border: 3px solid #001B44; border-radius: 50%; background: radial-gradient( circle at 35% 25%, #F0DBA3 0%, #D6B56D 32%, #C9A85C 68%, #A98533 100% ); box-shadow: 0 10px 24px rgba(0, 27, 68, 0.20), inset 0 0 0 2px rgba(255,255,255,0.32), inset 0 -8px 15px rgba(0,27,68,0.10); appearance: none; -webkit-appearance: none; cursor: pointer; text-decoration: none !important; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.94); pointer-events: none; z-index: 999; overflow: hidden; transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* REMOVE ANY UNDERLINE */ .programme-back-top, .programme-back-top:hover, .programme-back-top:focus, .programme-back-top:active, .programme-back-top * { text-decoration: none !important; } /* ========================================================= */ /* VISIBLE */ /* ========================================================= */ .programme-back-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } /* ========================================================= */ /* GLOSS EFFECT */ /* ========================================================= */ .programme-back-top::before { content: ""; position: absolute; width: 78%; height: 45%; left: 11%; top: 7%; border-radius: 50% 50% 45% 45%; background: linear-gradient( 180deg, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.22) 55%, rgba(255,255,255,0) 100% ); transform: rotate(-7deg); pointer-events: none; z-index: 1; } /* ========================================================= */ /* ARROW */ /* ========================================================= */ .programme-back-top-icon { position: relative; width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; color: #001B44; z-index: 2; transition: transform 0.28s ease, color 0.28s ease; } .programme-back-top-icon svg { width: 100%; height: 100%; display: block; } /* ========================================================= */ /* REMOVE OLD BOTTOM LINE COMPLETELY */ /* ========================================================= */ .programme-back-top::after { content: none !important; display: none !important; } /* ========================================================= */ /* HOVER */ /* ========================================================= */ @media (hover: hover) { .programme-back-top:hover { transform: translateY(-3px) scale(1.04); border-color: #0B3268; box-shadow: 0 14px 30px rgba(0, 27, 68, 0.26), inset 0 0 0 2px rgba(255,255,255,0.38), inset 0 -8px 15px rgba(0,27,68,0.12); } .programme-back-top:hover .programme-back-top-icon { transform: translateY(-2px); color: #0B3268; } } /* ========================================================= */ /* ACTIVE */ /* ========================================================= */ .programme-back-top:active { transform: scale(0.96); } /* ========================================================= */ /* FOCUS */ /* ========================================================= */ .programme-back-top:focus { outline: none !important; } .programme-back-top:focus-visible { outline: none !important; box-shadow: 0 0 0 4px rgba(54, 186, 240, 0.18), 0 12px 28px rgba(0, 27, 68, 0.22); } /* ========================================================= */ /* TABLET */ /* ========================================================= */ @media (max-width: 1024px) { .programme-back-top { right: 22px; width: 54px; height: 54px; border-width: 3px; } .programme-back-top-icon { width: 29px; height: 29px; } } /* ========================================================= */ /* MOBILE */ /* ========================================================= */ @media (max-width: 767px) { .programme-back-top { right: 16px; width: 48px; height: 48px; border-width: 2px; box-shadow: 0 8px 20px rgba(0, 27, 68, 0.19), inset 0 0 0 1px rgba(255,255,255,0.34), inset 0 -6px 12px rgba(0,27,68,0.10); } .programme-back-top-icon { width: 26px; height: 26px; } } /* ========================================================= */ /* VERY SMALL MOBILE */ /* ========================================================= */ @media (max-width: 360px) { .programme-back-top { right: 12px; width: 45px; height: 45px; } .programme-back-top-icon { width: 24px; height: 24px; } } .programme-back-top-icon { width: 32px; height: 32px; } .programme-back-top-icon svg { width: 100%; height: 100%; display: block; } @media (max-width: 767px) { .programme-back-top-icon { width: 27px; height: 27px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d5ad59b *//* ================================================= */ /* PROGRAMME PAGE — GLOBAL BACKGROUND */ /* ================================================= */ .programme-page { position: relative; width: 100%; box-sizing: border-box; background: radial-gradient( circle at 12% 14%, rgba(214, 181, 109, 0.14) 0%, rgba(214, 181, 109, 0.05) 22%, transparent 45% ), radial-gradient( circle at 88% 38%, rgba(201, 168, 92, 0.16) 0%, rgba(214, 181, 109, 0.05) 26%, transparent 50% ), radial-gradient( circle at 78% 82%, rgba(0, 27, 68, 0.055) 0%, rgba(0, 27, 68, 0.018) 26%, transparent 50% ), linear-gradient( 145deg, #FFFFFF 0%, #FBF8EF 42%, #F4E8C9 72%, #EFE0B8 100% ); overflow: hidden; } /* ================================================= */ /* SUBTLE BACKGROUND GRID */ /* ================================================= */ .programme-page::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(0, 27, 68, 0.022) 1px, transparent 1px ), linear-gradient( 90deg, rgba(0, 27, 68, 0.022) 1px, transparent 1px ); background-size: 52px 52px; opacity: 0.50; pointer-events: none; z-index: 0; } /* ================================================= */ /* LARGE AMBIENT GOLD GLOW */ /* ================================================= */ .programme-page::after { content: ""; position: absolute; width: 650px; height: 650px; right: -300px; top: 280px; border-radius: 50%; background: radial-gradient( circle, rgba(214, 181, 109, 0.18) 0%, rgba(214, 181, 109, 0.07) 34%, transparent 70% ); filter: blur(12px); pointer-events: none; z-index: 0; } /* ================================================= */ /* KEEP PAGE CONTENT ABOVE BACKGROUND */ /* ================================================= */ .programme-page > * { position: relative; z-index: 2; } /* ================================================= */ /* TABLET */ /* ================================================= */ @media (max-width: 1024px) { .programme-page::before { background-size: 46px 46px; } .programme-page::after { width: 500px; height: 500px; right: -260px; } } /* ================================================= */ /* MOBILE */ /* ================================================= */ @media (max-width: 767px) { .programme-page::before { background-size: 38px 38px; opacity: 0.42; } .programme-page::after { width: 360px; height: 360px; right: -220px; top: 220px; opacity: 0.75; } }/* End custom CSS */