.elementor-kit-9{--e-global-color-primary:#FF813D;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"ABC";--e-global-typography-primary-font-size:1.2vw;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:1.2em;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-page-transition-entrance-animation:e-page-transition-slide-out-up;--e-page-transition-animation-duration:1500ms;--e-preloader-animation-duration:3000ms;--e-preloader-delay:400ms;--e-preloader-color:#FFF;--e-preloader-size:20px;}.elementor-kit-9 e-page-transition{background-color:#C63B1D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0vw;}.elementor-element{--widgets-spacing:0vw 0vw;--widgets-spacing-row:0vw;--widgets-spacing-column:0vw;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}.elementor-kit-9{--e-page-transition-entrance-animation:e-page-transition-slide-out-up;}}
/* Start custom CSS *//* =========================================================
   OFF COURSE — COMPLETE WORKING VERSION
   ORIGINAL SLIDER LAYOUT + PAGINATION
   + NO-SCROLL VIEWPORT FIX

   PASTE THIS ENTIRE CODE INTO:
   SLIDER WIDGET > ADVANCED > CUSTOM CSS
   ========================================================= */


/* =========================================================
   0. PAGE / VIEWPORT LOCK
   ========================================================= */

/*
   IMPORTANT:
   This is the ONLY page-level intervention.

   It stops Chrome / Firefox / Safari from scrolling
   without changing Elementor's internal layout,
   positioning or centering.
*/

html,
body {
    margin: 0 !important;
    padding: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow-x: hidden !important;
    overflow-y: hidden !important;

    overscroll-behavior: none !important;
}


/*
   WordPress adds margin-top to <html> when the
   admin toolbar is visible.

   That can make a 100% / 100vh page taller than
   the browser viewport and create scrolling.
*/

html {
    margin-top: 0 !important;
}


/*
   Use the actual browser viewport as the page height.

   100vh = fallback
   100svh = safe mobile viewport
   100dvh = actual dynamic visible viewport
*/

body {
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;

    min-height: 0 !important;
    max-height: 100dvh !important;

    overflow: hidden !important;
}


/*
   Hide scrollbar rendering.
*/

html,
body {
    scrollbar-width: none !important;
}


html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
}


/*
   Keep the WordPress admin bar as an overlay.

   It must NOT add extra height to the page.
*/

#wpadminbar {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    margin: 0 !important;

    z-index: 9999999 !important;
}


/* =========================================================
   1. SWIPER / SLIDE STRUCTURE
   ========================================================= */

.elementor-kit-9 .swiper {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    cursor: default !important;
}


.elementor-kit-9 .swiper-wrapper {
    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    pointer-events: none;

    -webkit-user-select: none;
    user-select: none;
}


/* =========================================================
   2. SLIDES
   ========================================================= */

.elementor-kit-9 .swiper-slide {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    -webkit-user-drag: none;
    user-drag: none;

    -webkit-user-select: none;
    user-select: none;

    cursor: default !important;
}


/* =========================================================
   3. TRUE HORIZONTAL + VERTICAL CENTERING
   ========================================================= */

.elementor-kit-9 .swiper-slide-inner {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}


/* =========================================================
   4. ELEMENTOR SLIDE CONTENT
   ========================================================= */

.elementor-kit-9 .elementor-slide-content {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    width: auto !important;
    max-width: 90vw !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
}


/* Remove Elementor spacing that can shift the centre */

.elementor-kit-9 .elementor-slide-heading,
.elementor-kit-9 .elementor-slide-description {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   5. OPTIONAL EXACT CENTRE CLASS

   Add class:
   oc-center

   to anything that must sit exactly in the centre.
   ========================================================= */

.elementor-kit-9 .oc-center {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    margin: 0 !important;

    z-index: 10 !important;
}


/* =========================================================
   6. PAGINATION CONTAINER
   ========================================================= */

.elementor-kit-9 .swiper-pagination {
    counter-reset: slide;

    /*
       Fixed to the browser viewport.
    */

    position: fixed !important;

    left: 50% !important;
    right: auto !important;

    top: auto !important;
    bottom: 5dvh !important;

    transform: translateX(-50%) !important;

    width: max-content !important;
    max-width: 94vw !important;

    height: auto !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    opacity: 1 !important;
    visibility: visible !important;

    overflow: visible !important;

    /*
       IMPORTANT:
       High enough to stay above slides,
       LOW enough to stay below popups.
    */

    z-index: 20 !important;

    pointer-events: auto !important;
}


/* =========================================================
   7. REMOVE DEFAULT SWIPER DOTS
   ========================================================= */

.elementor-kit-9 .swiper-pagination-bullet {
    position: relative !important;

    display: block !important;

    flex: 0 0 auto !important;

    width: 3.5dvh !important;
    height: 3.5dvh !important;

    margin: 0 1.1dvh !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    opacity: 1 !important;

    overflow: visible !important;

    pointer-events: auto !important;
}


/* =========================================================
   8. PAGINATION NUMBER
   ========================================================= */

.elementor-kit-9 .swiper-pagination-bullet::before {
    content: counter(slide) !important;
    counter-increment: slide;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "abc", sans-serif !important;

    font-size: 3.5dvh !important;
    font-weight: 500 !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    color: #F3C9AE !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 2 !important;

    pointer-events: none !important;
}


/* =========================================================
   9. ACTIVE NUMBER
   ========================================================= */

.elementor-kit-9 .swiper-pagination-bullet-active::before {
    color: #F28C1B !important;
}


/* =========================================================
   10. IMAGES
   ========================================================= */

.elementor-kit-9 .swiper-slide img {
    -webkit-user-drag: none;
    user-drag: none;

    -webkit-user-select: none;
    user-select: none;
}


/* =========================================================
   11. NAVIGATION INTERACTION
   ========================================================= */

.elementor-kit-9 .swiper-pagination,
.elementor-kit-9 .swiper-pagination-bullet,
.elementor-kit-9 .swiper-button-prev,
.elementor-kit-9 .swiper-button-next {
    pointer-events: auto !important;
}


/* Keep slider arrows above the slides but below popups */

.elementor-kit-9 .swiper-button-prev,
.elementor-kit-9 .swiper-button-next {
    z-index: 20 !important;
}


/* =========================================================
   12. LAPTOP / SMALL DESKTOP
   ========================================================= */

@media (min-width: 768px) and (max-width: 1366px) {

    .elementor-kit-9 .swiper-pagination {
        bottom: 4.5dvh !important;
    }


    .elementor-kit-9 .swiper-pagination-bullet {
        width: 3.2dvh !important;
        height: 3.2dvh !important;

        margin: 0 0.9dvh !important;
    }


    .elementor-kit-9 .swiper-pagination-bullet::before {
        font-size: 3.2dvh !important;
    }


    .elementor-kit-9 .elementor-slide-content {
        max-width: 90vw !important;
    }
}


/* =========================================================
   13. MOBILE / IPHONE
   ========================================================= */

@media (max-width: 767px) {

    /*
       Keep page locked to Safari's current
       visible viewport.
    */

    body {
        height: 100vh !important;
        height: 100svh !important;
        height: 100dvh !important;

        max-height: 100dvh !important;

        overflow: hidden !important;
    }


    .elementor-kit-9 .swiper-pagination {
        bottom: 5dvh !important;

        width: max-content !important;
        max-width: 94vw !important;

        flex-wrap: nowrap !important;
    }


    .elementor-kit-9 .swiper-pagination-bullet {
        width: 5dvh !important;
        height: 5dvh !important;

        margin: 0 !important;
    }


    .elementor-kit-9 .swiper-pagination-bullet::before {
        font-size: 2.8dvh !important;

        top: 50% !important;
        left: 50% !important;

        transform: translate(-50%, -50%) !important;
    }


    .elementor-kit-9 .elementor-slide-content {
        max-width: 90vw !important;
    }
}


/* =========================================================
   14. IPHONE / SAFARI SAFE AREA
   ========================================================= */

@supports (bottom: env(safe-area-inset-bottom)) {

    .elementor-kit-9 .swiper-pagination {
        bottom: max(
            5dvh,
            calc(env(safe-area-inset-bottom, 0px) + 1dvh)
        ) !important;
    }
}


/* =========================================================
   15. VERY SHORT DESKTOP / LAPTOP SCREENS
   ========================================================= */

@media (max-height: 700px) and (min-width: 768px) {

    .elementor-kit-9 .swiper-pagination {
        bottom: 3.5dvh !important;
    }


    .elementor-kit-9 .swiper-pagination-bullet {
        width: 3dvh !important;
        height: 3dvh !important;

        margin: 0 0.8dvh !important;
    }


    .elementor-kit-9 .swiper-pagination-bullet::before {
        font-size: 3dvh !important;
    }
}


/* =========================================================
   16. ELEMENTOR POPUP / MODAL PRIORITY
   ========================================================= */

/*
   Popups must ALWAYS sit above:
   - pagination
   - slider arrows
   - slides
   - fixed website UI
*/

body .elementor-popup-modal,
body .dialog-widget,
body .dialog-type-lightbox {
    z-index: 999999 !important;
}


/*
   Popup content itself stays above its overlay.
*/

body .elementor-popup-modal .dialog-widget-content,
body .dialog-widget-content {
    position: relative !important;

    z-index: 2 !important;
}


/*
   Popup background overlay.
*/

body .elementor-popup-modal .dialog-lightbox-widget-content,
body .dialog-widget-overlay {
    z-index: 1 !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'ABC';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://offcourse.gr/wp-content/uploads/2026/03/ABCOracleGreek-Bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */