@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap);:root{--website_dark_grey:#363636;--website_light_grey:#f1f1f1;--accent:#00a650;--light_green:#cceddc}body,html{scroll-behavior:smooth;scroll-padding-top:100px}body{font-family:"Manrope",sans-serif;background:#f6f6f6}.hero-overlay{&:before{
        content: "";
        width: 100%;
        height: 30%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(180deg,transparent 0%,rgba(0 0 0/25%),black 100%);
    }
    &:after{
        content: "";
        width: 100%;
        height: 20%;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(0deg,transparent 0%,black 100%);
    }
}.main-cta{display:inline-flex;align-items:center;gap:1rem;border-width:1px;border-style:solid;border-color:#000;padding:.8rem 1rem;overflow:hidden;transition:all .3s ease-out;position:relative;border-radius:60px;z-index:1;&:before{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0;
        background: var(--accent);
        transition: all 0.3s ease-out;
        z-index: -1;
    }

    &:hover{

        border-color: transparent !important;
        color: white;
        &:before{
            height: 100%;
        }
    }

    span{
        transform: rotate(-45deg);
        line-height: 0;
    }
}.main-cta.light{color:#fff;border-color:#fff;&:before{
        background: white;
    }

    &:hover{
        color: var(--accent);
    }
}.menu-trigger{display:flex;flex-direction:column;justify-content:center;padding-inline:1.7rem;width:100px;text-align:center;color:#fff;border-left: 1px solid rgb(255 255 255/40%);transition:all .3s ease-out;border-right:1px solid transparent;&:hover{
        background: var(--accent);
        border-color: rgb(255 255 255/40%);
    }
    
    p{
        font-size: 0.8rem;
        text-transform: uppercase;
        margin-bottom: 0.3rem;
    }

    span{
        display: block;
        border-bottom: 1px solid #ffffff6e;
        width: 100%;
        transition: all 0.3s ease-out;
    }
}.header-sticky{.menu-trigger{
        border-color: rgb(0 0 0 /10%);
        color: black;

        span{
          border-color: rgb(0 0 0 /40%);  
        }

        &:hover{
            color: white;

            span{
                border-color: rgb(255 255 255/40%);
            }
        }
    }
}.header-cta{position:relative;z-index:1;&:before{
         content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0;
        background: var(--website_dark_grey);
        transition: all 0.3s ease-out;
        z-index: -1;
    }

    &:hover{
        &:before{
            height: 100%;
        }
    }
}.section-title{p{
        color: var(--accent);
        text-transform: uppercase;
        font-size: 19px;
        letter-spacing: 0.4rem;
    }
    h2{
        font-size: 2.2rem;
        font-weight: 500;
        width: min(100%,800px);
        line-height: 1.2;
    }
}.brands-list{> div{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    img{
        max-width: 150px;
        max-height: 57px;
        object-fit: contain;
        object-position: center;
        display: block;
        margin: 0 auto;
        transition: all 0.3s ease-out;

        &:hover{
            transform: scale(1.06);
        }
    }

    img.large{
        max-width: 100%;
    }
}.brand-category{display:none}.brands-tabs{button{
        &:hover{
            img{
                filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(215deg) brightness(107%) contrast(101%);
            }
        }
    }

    .active{
        background: var(--accent);
        color: white;
            img{
                filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(215deg) brightness(107%) contrast(101%);
            }
        
    }
}.positions-list{&:hover{
        li{
            &:after{
                opacity: 0;
            }
        }
    }


   
    li{ 

        position: relative;
    
    > a{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5rem;
        padding-block: 2rem;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease-out;
        border-radius: 2rem;
        overflow: hidden;

        

        &:before{
            content: "";
            background: var(--accent);
            z-index: -1;
            width: 100%;
            height: 0;
            bottom: 0;
            left: 0;
            position: absolute;
            transition: all 0.3s ease-out;
        }

        &:hover{
            padding-inline: 2rem;
            color: white;

            span{
                color: white;
            }

            &:before{
                height: 100%;
                top: 0;
            }

        }

       
    }

     &:after{
            content: "";
            width: 100%;
            height: 1px;
            background: rgb(0 0 0 /10%);
            position: absolute;
            left: 0;
            width: 100%;
            bottom: 0;
            transition: all 0.3s ease-out;
        }

        &:hover{

            &:after{
                opacity: 0;
            }
        }

    }
    .section-label{
       color: var(--accent);
       padding: 1rem;
    }
    h3{
        font-size: 2rem;
    }
    span{
        margin-left: auto;
        color: var(--accent);
        font-weight: 500;
        transition: all 0.3s ease-out;
    }
}.positions-list.short-list{li > a{
        gap:1rem;
        padding-inline: 1rem;
    }

    h3{
        font-size: 1.425rem;
    }

    .section-brand{
        width: 80px;
        height: 80px;
    }
}.story-desc{display:none}.story-desc-trigger{display:inline-flex;align-items:center;gap:.5rem}.story-desc-trigger.open{span{
        transform: rotate(180deg);
    }
}.features-images{img{
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left;
        
        opacity: 0;
        transition: all 0.3s ease-out;
    }

    img.active{
        opacity: 1;
    }
}.story-slider li>div{position:relative;&:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg,black,transparent);
        z-index: 2;
    }
}.story-boxes{.article-body{

        &:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200%;
        background: linear-gradient(0deg,black,transparent);
        z-index: -1;
    }
    }
}.menu-component{position:fixed;inset:0;padding:1.5rem;background: rgb(0 0 0 /60%);backdrop-filter:blur(5px);z-index:99999;opacity:0;pointer-events:none;.menu-body{
        background: var(--accent);
        height: 100%;
        width: min(100%,900px);
        overflow: auto;
        padding: 3rem;
        position: relative;
        transform: scaleX(0);
    transform-origin: left;
    }
}.main-menu{a{
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        position: relative;
        transform: translateX(-40px);
        opacity: 0;
        &:after{
            content: url('https://career.kosmocar.gr/wp-content/uploads/2025/11/arrow-forward-outline.svg');
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 0;
            transform: rotate(-45deg);
            flex-shrink: 0;
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7478%) hue-rotate(115deg) brightness(98%) contrast(107%);
        }

        &:before{
            content: "";
            height: 2px;
            background: white;
            transition: all 0.3s ease-out;
            width: 0;
            position: absolute;
            bottom: -3px;
            left: 0;
        }

        &:hover{
            &:before{
               width: calc(100% - 46px);
            }
        }
    }
}.section-brand{width:80px;height:80px;border-radius:100%;border:1px solid rgb(0 0 0 /10%);display:flex;align-items:center;justify-content:center;background:#fff;flex-shrink:0;img{
        max-width: 50%;
        max-height: 50%;
    }
}.content-boxes{counter-reset:content-boxes;> div{
        position: relative;
        counter-increment: content-boxes;

        &::before{
         /*   content: '0'counter(content-boxes)'.';*/
            position: absolute;
            top: 2rem;
            right: 2rem;
            color: white;
        }
    }
}.headline{position:relative;height:2em;overflow:hidden}.word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);visibility:hidden}.value-box{position:absolute;inset:0;align-content:flex-end;display:none;ul{
        display: grid;
        gap: 1rem;

        li{
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        li:before{
            content: url('https://career.kosmocar.gr/wp-content/uploads/2025/12/checkmark-outline.svg');
            display: inline-block;
            width: 20px;
            flex-shrink: 0;
            
        }
    }

    h3{
        position: absolute;
        bottom: 1.5rem;
        left: 1rem;
        font-size: 4rem;
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        max-height: 80%;
        font-weight: 900;
        font-family: sans-serif;
        line-height: 1;
    }
}.value-box.active{display:block}.values li.active{border-left-color:#fff!important;padding-left:1rem;span{
        transform: none !important;
        opacity: 1 !important;
    }
}.tabs-nav{margin-bottom:2rem;button{
        opacity: 0.6;
        position: relative;
        transition: all 0.3s ease-out;

        &:hover{
            opacity: 1;
        }

        &:before{
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            background: var(--accent);
            width: 100%;
            height: 0.2rem;
            opacity: 0;
        }
    }

    button.active{
        opacity: 1;
        font-weight: 600;

        &:before{
            opacity: 1;
        }
    }
}.tab-list-content{ul{
        display: grid;
        gap: 0.8rem;
        overflow: auto;
        max-height: 600px;

        li{
            button{
                 position: relative;
                 opacity: 0.6;
                 transition: all 0.3s ease-out;
                 
                 &:before{
                    content: "";
                    width: 0%;
                    height: 1px;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    background: white;
                    transition: all 0.3s ease-out;
                    
                }

                &:hover{

                    opacity: 1;

                    &:before{
                        width: 100%;
                        left: 0;
                    }
                }
            }
        }

        li.active-content{
            button{
                opacity: 1;

                &:before{
                    width: 100%;
                }
            }
        }
    }
}.tabs-component > div:has(.tab-content){position:relative}.tab-content{h2{
        img{
            position: absolute;
            top: -1px;
            right: -1px;
            background: #f6f6f6;
            border-top-right-radius: 0.75rem;
            border-bottom-left-radius: 0.75rem;
            padding: 1rem;
            height: 95px;
        }
    }
}@media (max-width:1280px){.section-title h2{font-size:2.5rem}.value-box{padding-right:2rem;padding-left:2rem;ul{
            gap: 0.4rem;
        }

        h3{
            position: static;
            font-size: 1.7rem;
            writing-mode: unset;
            transform: none;
            margin-bottom: 1rem;
        }
    }}.accordion-title{border-radius:.5rem;padding:1rem;padding-right:3rem;border:1px solid #e5e5e5;width:100%;line-height:1.1;text-align:left;position:relative;font-weight:500;transition:all .3s ease-out;&::after{
        content: url('https://career.kosmocar.gr/wp-content/uploads/2025/12/chevron-down-outline.svg');
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        line-height: 0;   
    }
}.active.accordion-title{background:var(--accent)!important;color:#fff;border-color:var(--accent);&:before{
        color: white !important;
    }

    &:after{
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(93deg) brightness(101%) contrast(105%);
        transform: translateY(-50%) rotate(180deg);
    }
    
}.accordion-content{display:none;padding:1rem;margin-top:.5rem;h3{
        font-weight: 600;
    }

    li{
        display: flex;
        gap: 0.5rem;
        
    }    
    li:before{
            content: url('https://career.kosmocar.gr/wp-content/uploads/2025/12/checkmark-outline.svg');
            display: inline-block;
            width: 20px;
            flex-shrink: 0;
            line-height: 0;
            margin-top: 4px;
        }
}.desktop-accordion{counter-reset:accordion;.accordion{
        counter-increment: accordion;
    }

    .accordion-title{
        border:none;
        border-bottom: 1px solid #e5e5e5;
        border-radius: 0;
        font-size: 1.425rem;

        &:before{
            content: counter(accordion)'.';
            margin-right: 1rem;
            color: var(--accent);
            transition: all 0.3s ease-out;
        }
    }

    .accordion-content{
        h3{
            font-size: 1.225rem;
        }
    }

    .active .accordion-title{
        &:before{
                color: white;
            }
    }
}.content-boxes{ul{
        display: grid;
        gap:1rem;

        li{
            display: flex;
            gap: 1rem;

            span{
                flex-shrink: 0;
            }
        }
    }
}.dark-image{img{
        filter: brightness(0) saturate(100%) invert(0%) sepia(22%) saturate(544%) hue-rotate(118deg) brightness(102%) contrast(104%);
    }
}.process-container{counter-reset:process;section{
        counter-increment: process;
        position: relative;

        h2:before{
            content: '0'counter(process)'.';
            margin-right: 0.7rem;
            color: black;
        }

        
    }


}.contact-form{input{
        width: 100%;
        border-radius: 60px;
        min-height: 45px;
        padding-inline: 1.4rem;
        background: white;
        font-weight: 600;
        font-size: 0.9rem;
    }
    label{
        font-size: 0.9rem;
        display: block;
        margin-bottom: 0.6rem;
        font-weight: 600;
    }
    textarea{
        width: 100%;
        border-radius: 1.5rem;
        padding: 1.4rem;
        background: white;
        font-weight: 600;
        font-size: 0.9rem;
    }
}.numbers{> div{
        position: relative;
        z-index: 1;
        transition: all 0.3s ease-out;

        span,p{
            transition: all 0.3s ease-out;
        }

        &:before{
            content: "";
            background: var(--accent);
            position: absolute;
            top: 0;
            height: 0px;
            left: 0;
            width: 100%;
            z-index: -1;
            transition: all 0.3s ease-out;
            border-radius: 1rem;
        }

        &:hover{
            &:before{
                height: 100%;
            }

            span,p{
                color: white !important;    
            }
            color: white;
        }
    }

    &:hover{
        > div{
            border-color: transparent !important;
        }
    }
}.inactive{opacity:.5;pointer-events:none}.white-image{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(93deg) brightness(101%) contrast(105%)}.flip-card{position:relative;width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d}.fliping-cards>div:hover .flip-card{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}.swap-icon{position:absolute;bottom:0;right:0;width:50px;aspect-ratio: 1/1;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-size:1.5rem;border-top-left-radius:.75rem;border-bottom-right-radius:.75rem}.flip-card-front{background:color-mix(in srgb,var(--website_dark_grey) 70%,transparent);color:#fff;padding:2rem;border-radius:.75rem}.flip-card-back{transform:rotateY(180deg);background:#fff;padding:2rem;border-radius:.75rem;font-size:1.1rem;box-shadow: 0 4px 6px rgb(0 0 0 /10%)}.job-filters{select{
        border: 1px solid black;
        padding:0.9rem;
        background: transparent;
        appearance: base-select;
        transition: all 0.3s ease-out;
    }
    select::picker-icon{
        content: url(https://career.kosmocar.gr/wp-content/uploads/2025/12/chevron-down-outline.svg);
        width: 14px;
        height: 14px;
        display: inline-block;
        
    }
    option{
        transition: all 0.3s ease-out;
    }
    option:checked{
        background: var(--accent);
        color: white;
    }

    select:open{
        border: 1px solid black;
        background: white;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-color: transparent;
    }

}.generic-tabs-nav{button{
        position: relative;

        &:before{
            content: "";
            position: absolute;
            left: 0;
            bottom: -1px;
            height: 3px;
            background: var(--accent);
            width: 0;
            transition: all 0.3s ease-out;
        }

        &:hover{
            &:before{
                width: 100%;
            }
        }
    }

    button.active{
        &:before{
            width: 100%;
        }

        h3{
            color: var(--accent);
        }
    }
}.more-info-trigger{display:flex;align-items:center;gap:.5rem;font-weight:500;&:hover{
        p{
            text-decoration: underline;
        }
    }
}.more-info-trigger.opened{span{
        transform: rotate(180deg);
    }
}.more-info-content{display:none}.card-content{display:none}.location-tabs{button{
        position: relative;
        padding-bottom: 1rem;
        &:before{
            content: "";
            height: 3px;
            width: 100%;
            position: absolute;
            bottom: -1px;
            left: 0;
            transition: all 0.3s ease-out;
            background: white;
            opacity: 0;
        }

        &:hover{
            &:before{
                opacity: 1;
            }
        }
    }
    button.active{
        &:before{
            opacity: 1;
        }
    }
}.location-tab{max-height:calc(100% - 115px);overflow-y:auto;display:none}@media (max-width:620px){.section-title h2{font-size:2rem}.main-menu{a{
            justify-content: space-between;
            display: flex;

            &:before{
                display: none;
            }
        }
    }.menu-component{padding:.8rem}.location-tabs{button{
            padding-top: 0.6rem;

            &:before{
                bottom: auto;
                top: 0;
            }
        }
    }.location-tab{max-height:calc(100% - 175px)}.hero-overlay{&:after{
        height: 35%;
    }
    }.accordion-content{> div{
            grid-template-columns: 1fr;
            row-gap: 1rem;
        }
    }}@media (max-width:1024px){.story-content-image{position:relative;&:before{
            content: "";
            background: linear-gradient(0deg,#e5e5e5,transparent);
            position: absolute;
            inset: 0;
        }
    }}.general-slider{.splide__pagination{
        position: static;
        margin-top: 2rem;

        .splide__pagination__page.is-active{
            box-shadow: inset 0 0 0 2px var(--accent);
        }
    }
}#map .gm-ui-hover-effect{position:absolute!important;top:0;right:0}#map .gm-style-iw-c{padding:20px!important;max-height:none!important;font-family:"Manrope",sans-serif!important}#map .gm-style-iw-d{padding:0!important;overflow:unset!important;max-height:none!important}.format-text{a{
        text-decoration: underline;
    }
    ul{
        list-style: disc;
        list-style-position: inside;
    }
    ol{
        list-style: decimal;
        list-style-position: inside;

    }
}.green-image{filter:brightness(0) saturate(100%) invert(38%) sepia(58%) saturate(3682%) hue-rotate(132deg) brightness(98%) contrast(102%)}.grid-list{div:hover{
        img{
            filter: brightness(0) saturate(100%) invert(97%) sepia(0%) saturate(233%) hue-rotate(139deg) brightness(119%) contrast(100%);
        }
    }
}