/*
Theme Name: TheGem Elementor Child
Description: Multi-Purpose Wordpress Theme
Author: Codex Themes.
Theme URI: http://codex-themes.com/thegem/
Author URI: http://codex-themes.com/thegem/
Template: thegem-elementor
Version: 1.0
Tags: one-column, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, full-width-template, theme-options, translation-ready, dark, light
License: GNU General Public License
License URI: license.txt
*/
@media (max-width: 767px) {
    body:not(.home) #site-header > .header-wrapper:not(.header-sticky-template) {
        position: absolute;
    }
}

@media (max-width: 991px) {
    .mobile-menu-full-height {
        min-height: 100dvh !important;
        background-color: #1b1714 !important;
    }
}

/*home page headerremove bg color*/
/* Transparent 2ο row του header μόνο στην αρχική */
/* Χωρίς background στο 2ο row του header, μόνο στη Home */
body.home .elementor-23 .elementor-element.elementor-element-7c97e87,
body.home .elementor-23 .elementor-element.elementor-element-7c97e87:not(.elementor-motion-effects-element-type-background),
body.home .elementor-23 .elementor-element.elementor-element-7c97e87 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background: transparent !important;
}


/*SERVICE PAGE*/
.service-card {
    min-height: 100vh;
    scroll-margin-top: 220px;
}

:root {
    --services-gap: 0px;
    --services-sticky-top: 0px;
}

html {
    scroll-behavior: smooth;
}

.services-menu {
    position: relative;
    z-index: 100;
}

.services-stack,
.services-stack > .e-con-inner {
    position: relative;
    overflow: visible !important;
}

.services-stack .elementor-widget-menu-anchor {
    width: 100%;
    height: 0 !important;
/*     min-height: 0 !important; */
    margin: 0 !important;
    padding: 0 !important;
}

.services-stack .elementor-menu-anchor {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    scroll-margin-top: var(--services-sticky-top);
}

.services-stack .service-card {
    position: sticky !important;
    top: var(
        --card-sticky-top,
        var(--services-sticky-top)
    ) !important;

    width: 100%;
    height: auto !important;
/*     min-height: 0 !important; */

    margin: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
    flex-shrink: 0;
}

.services-menu a.active-service-menu {
    position: relative;
    color: #c49a50 !important;
}

.services-menu a.active-service-menu::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    background-color: currentColor;
}

@media (max-width: 1024px) {
    .services-stack .service-card {
/*         position: relative !important; */
        top: auto !important;
        z-index: auto !important;
    }
}

.service-card-image a,
.service-card-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================================
   PORTFOLIO CARDS — always-visible caption
   Title + category shown permanently in a blurred rounded pill
   at the bottom-left of each card; the pill lifts on hover.
   Applies to every TheGem portfolio grid (.portfolio-item),
   incl. the Projects archive and any "related projects" grids.
   High-specificity selectors + !important are required to beat
   TheGem's own hover-overlay rules.
   ============================================================ */

/* Clip the hover zoom without rounding the mosaic images */
.portfolio-item .image {
    overflow: hidden !important;
}
.portfolio-item .image .image-inner img {
    transition: transform .6s ease !important;
    will-change: transform;
}
.portfolio-item:hover .image .image-inner img {
    transform: scale(1.03) !important;
}

/* Neutralise the hover-only dark overlay + expanding circle,
   but keep the full-card click link active */
.portfolio-item .image .overlay {
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
}
.portfolio-item .image .overlay::before,
.portfolio-item .image .overlay::after,
.portfolio-item .image .overlay .overlay-circle {
    display: none !important;
}
.portfolio-item .image .overlay .portfolio-item-link.self-link {
    z-index: 3 !important; /* above the pill: the whole card stays clickable */
}

/* The always-visible blurred pill (full ancestor chain to win the cascade) */
.portfolio-item .image .overlay .links-wrapper .links .caption {
    position: absolute !important;
    left: 18px !important;
    right: auto !important;
    bottom: 18px !important;
    top: auto !important;
    z-index: 2 !important;
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    max-width: calc(100% - 36px) !important;
    margin: 0 !important;
    padding: 11px 18px !important;
    border-radius: 14px !important;
    background: rgba(27, 23, 20, 0.42) !important;
    -webkit-backdrop-filter: blur(12px) saturate(115%) !important;
    backdrop-filter: blur(12px) saturate(115%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease !important;
    pointer-events: none !important; /* clicks fall through to the card link */
    text-align: left !important;
    vertical-align: baseline !important;
}

/* Hide the empty description row */
.portfolio-item .image .overlay .caption .top-info,
.portfolio-item .image .overlay .caption .description {
    display: none !important;
}

/* Title */
.portfolio-item .image .overlay .caption .title {
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}
.portfolio-item .image .overlay .caption .title .title-h5 {
    display: block !important;
    color: #ffffff !important;
    font-family: "Manrope", sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Category */
.portfolio-item .image .overlay .caption .info {
    margin: 3px 0 0 !important;
    padding: 0 !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}
.portfolio-item .image .overlay .caption .info .set {
    margin: 0 !important;
    padding: 0 !important;
}
.portfolio-item .image .overlay .caption .info .additional-meta {
    color: #ECCB94 !important;
    font-family: "Manrope", sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    cursor: default !important;
    border: 0 !important;
    background: none !important;
}

/* The lift on hover */
.portfolio-item:hover .image .overlay .links-wrapper .links .caption {
    transform: translateY(-8px) !important;
    background: rgba(27, 23, 20, 0.52) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.30) !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .portfolio-item .image .image-inner img,
    .portfolio-item .image .overlay .links-wrapper .links .caption {
        transition: none !important;
    }
    .portfolio-item:hover .image .image-inner img,
    .portfolio-item:hover .image .overlay .links-wrapper .links .caption {
        transform: none !important;
    }
}



.thegem-heading .gold {
    color: #EBCB93!important;
}

@media (min-width: 767px) {
.menu_desk_trans nav {
    background: #20202075;
    border-radius: 10px;
    padding: 10px 15px;
    border: 1px solid #bababa80;
    backdrop-filter: blur(10px);
    width: auto;
} 
}

/* @media (max-width: 767px) {
    .menu_desk_trans nav.menu_desk_trans {margin: 0!important;} 
} */




/* ============================================================
   TO ERGASTIRI
   MOTORIZED & SMART SYSTEMS VIDEO CARDS
============================================================ */


/* ============================================================
   CARD IMAGE
============================================================ */

.service_box_video .service-card-image {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}


/* Make sure the Elementor/TheGem image behaves correctly */
.service_box_video .service-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Subtle dark overlay */
.service_box_video .service-card-image::after {
    content: "";
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: rgba(0, 0, 0, 0.10);

    transition: background 0.25s ease;
}


.service_box_video .service-card-image:hover::after {
    background: rgba(0, 0, 0, 0.20);
}



/* ============================================================
   PLAY BUTTON
============================================================ */

.ww-service-video-play {
    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 64px;
    height: 64px;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.18);

    pointer-events: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* Triangle */
.ww-service-video-play::before {
    content: "";

    width: 0;
    height: 0;

    margin-left: 4px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #b87512;
}


/* Hover */
.service_box_video .service-card-image:hover .ww-service-video-play {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    background: #fff;

    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.24);
}



/* ============================================================
   KEYBOARD FOCUS
============================================================ */

.service_box_video .service-card-image:focus {
    outline: none;
}


.service_box_video .service-card-image:focus-visible {
    outline: 2px solid #b87512;
    outline-offset: 3px;
}



/* ============================================================
   VIDEO MODAL

   IMPORTANT:
   display:none guarantees that no hidden video/player
   can appear at the bottom of the page.
============================================================ */

.ww-service-video-modal {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    background: rgba(0, 0, 0, 0.90);

    padding: 50px;

    align-items: center;
    justify-content: center;
}


/* Only exists visually while open */
.ww-service-video-modal.is-open {
    display: flex;
}



/* ============================================================
   MODAL INNER
============================================================ */

.ww-service-video-modal-inner {
    position: relative;

    width: min(1100px, 92vw);

    max-width: 1100px;
    max-height: calc(100vh - 100px);

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}



/* ============================================================
   ACTUAL VIDEO
============================================================ */

.ww-service-video-player {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: calc(100vh - 100px);

    margin: 0 auto;

    object-fit: contain;

    background: #000;

    box-sizing: border-box;
}



/* ============================================================
   CLOSE BUTTON
============================================================ */

.ww-service-video-close {
    position: absolute;

    top: -48px;
    right: 0;

    z-index: 10;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;

    font-size: 40px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


.ww-service-video-close:hover {
    opacity: 0.75;
}


.ww-service-video-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}



/* ============================================================
   EVERYTHING INSIDE MODAL USES BORDER-BOX
============================================================ */

.ww-service-video-modal,
.ww-service-video-modal * {
    box-sizing: border-box;
}



/* ============================================================
   TABLET / MOBILE
============================================================ */

@media (max-width: 767px) {

    /* Play button */
    .ww-service-video-play {
        width: 54px;
        height: 54px;
    }


    .ww-service-video-play::before {
        margin-left: 3px;

        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 13px;
    }


    /* Popup uses actual dynamic mobile viewport */
    .ww-service-video-modal {
        width: 100vw;

        height: 100vh;
        height: 100dvh;

        padding:
            max(65px, env(safe-area-inset-top))
            15px
            max(25px, env(safe-area-inset-bottom));

        overflow: hidden;
    }


    .ww-service-video-modal-inner {
        width: 100%;

        max-width: 100%;

        max-height:
            calc(100vh - 100px);

        max-height:
            calc(100dvh - 100px);
    }


    /*
     * Works for both portrait and landscape videos.
     */
    .ww-service-video-player {
        width: auto;
        height: auto;

        max-width: 100%;

        max-height:
            calc(100vh - 100px);

        max-height:
            calc(100dvh - 100px);

        object-fit: contain;
    }


    /*
     * Fixed close button means it cannot disappear
     * outside the video bounds.
     */
    .ww-service-video-close {
        position: fixed;

        top:
            max(12px, env(safe-area-inset-top));

        right:
            max(12px, env(safe-area-inset-right));

        width: 48px;
        height: 48px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 40px;
    }

}



/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width: 380px) {

    .ww-service-video-play {
        width: 48px;
        height: 48px;
    }


    .ww-service-video-play::before {
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 12px;
    }

}