/* @import url('./fonts.css'); */

:root{
    --colorBg : #000;
    /* --colorSec : #F6F6F6; */
    --colorText: #FF5800;
    /* --colorRed : #B13435; */

    --wrapperWidth : 1920px;
    --wrapperWidthMd : 1530px;
    --wrapperWidthSm : 1334px;
    --wrapperWidthLg : 1842px;
    --wrapperWidthXs : 1192px;
    --wrapperText : 1480px;

    --padding: 68px;
    --mobilePadding : 18px;

    --radius : 50px;

    /* filters */
    --filterRed : invert(22%) sepia(48%) saturate(3559%) hue-rotate(336deg) brightness(96%) contrast(91%);
}

@media screen and (max-width: 1680px) {
    :root{
        --padding : 3rem;
    }
}
@media screen and (max-width: 1420px) {
    :root{
        --padding : 2rem;
        --radius : 40px;
    }
}
@media screen and (max-width: 1020px) {
    :root{
        --padding : 1.5rem;
        --radius : 30px;
    }

}

@media screen and (max-width: 780px) {
    :root{
        --padding : 1rem;
    }
}
@media screen and (max-width: 680px) {
    :root{
        --radius : 25px;
    }
}
@media screen and (max-width: 520px) {
    :root{
        --padding : var(--mobilePadding);
    }
}
body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote, figure{
    margin:0;
    padding:0;
    font-weight: normal;
}

h1, h2, h3, h4, h5, h6{
    text-wrap: balance;
}

p, li{
    text-wrap: pretty;
}

body{
    font-family: "Jura", sans-serif;
    position: relative;
    max-width: 100dvw;
    margin:0 auto;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--colorText);
    background-color: var(--colorBg);
}

.header-font{
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;
}

img{
    max-width: 100%;
    height: auto;
    display: block;
}

a{
    text-decoration: none;
    color: inherit;
}

/* ul, ol{
    list-style: none;
} */

ul.flex > li:last-of-type{
    margin-right: 0!important;
}
ul.flex.col > li:last-of-type{
    margin-bottom: 0!important;
}
ul.flex.border > li{
    border-right: 1px solid #000;
}
ul.flex.border > li:last-of-type{
    border-right: 0!important;
}
ul.flex.col.border > li{
    border-bottom: 1px solid #000;;
}
ul.flex.col.border > li:last-of-type{
    border-bottom: 0!important;
}

input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
    outline: none;
    background-color: transparent;
}

.hidden{display: none;}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

address{
    font-style: normal;
}
address > span{
    display: block;
}

html {
    scroll-behavior: smooth;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

/*  κεντράρισμα εικόνας*/
.img-center{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}

/* borde radius */

.radius{
    border-radius: var(--radius);
    overflow: hidden;
}

/* full absolute */

.abs{
    position: absolute;
    left: 0; top: 0;
    width : 100%; height: 100%;
}

/*  containers */

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex.col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.flex.centered{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.flex.col-2 > div{
    width: 50%;
}


/* layout */

.wrapper{
    margin-inline: auto;
    padding-inline: var(--padding); 
    max-width: var(--wrapperWidth);
}

.wrapper.xl{max-width: 1920px;}
.wrapper.lg{max-width: var(--wrapperWidthLg);}
.wrapper.ml{max-width: var(--wrapperWidthMl);}
.wrapper.md{max-width: var(--wrapperWidthMd)}
.wrapper.sm{max-width: var(--wrapperWidthSm);}
.wrapper.xs{max-width: var(--wrapperWidthXs);}

.wrapper.pd-rl{padding-inline: 2.5rem 3.5rem; }

@media screen and (max-width: 680px) { 
    .wrapper.pd-rl{padding-inline: 1.5rem; }
    .wrapper{padding-inline: var(--mobilePadding);}
}

@media screen and (max-width: 520px) { 
    .wrapper.mob-sm{padding-inline: 1rem;}
}

/* headers */

.section-header{
    position: relative;
    opacity: 0;
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.section-header.on{
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

.section-header.ln{
    border-bottom:  1px solid;
}

.section-header > h2{
    font-weight: 200;
}
/* .section-header > :is(h2, div){
    max-width: 677px;
} */

.section-header.flex{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 42px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.section-header.flex.end{
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}
.section-header.center{
    text-align: center;
}

.section-header h2{font-size: 100px;}
.section-header h2.lg{font-size: 70px;}
.section-header h2.xl{font-size: 80px;}
.section-header h2.md{font-size: 40px;}
.section-header h2.sm{font-size: 30px;}

.section-header h2.bd{font-weight: 500;}


.section-header h3{
    font-size: 50px;
    line-height: 72px;
}


.section-header .header-lead{
    font-size: 18px;
    line-height: 33px;
    margin-top: 11px;   
    width: 100%; 
}

.section-header.cntr{text-align: center;}

.section-header h2 span{
    display: block;
}


@media screen and (max-width: 1420px) { 
    .section-header h2{font-size: 80px;}
}
@media screen and (max-width: 1020px) { 
    .section-header h2{font-size: 70px;}
}
@media screen and (max-width: 620px) { 
    .section-header h2{font-size: 50px;}
}

/* card */

.card{
    display: flex;
    gap: 84px;
    align-items: center;
}

.card--image{
    border-radius: 50%;
    overflow: hidden;
    width: 240px;
    aspect-ratio: 1;
    flex-shrink: 0;
}

.card--title{
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 30px;
}

.card--more{
    font-size: 17px;
    letter-spacing: -.34px;
    line-height: 30px;
    text-decoration: underline;
    color: #6C2500;
    margin-right: 76px;
}

@media screen and (max-width: 1380px) { 
    .card{ gap: 4rem;}
    .card--image{
        width: 200px;
    }
    .card--more{
        margin-right: 2rem;
    }
}
@media screen and (max-width: 1080px) { 
    .card{ gap: 3rem;}
    .card--image{
        width: 180px;
    }
    .card--more{
        margin-right: 1rem;
    }
}

@media screen and (max-width: 820px) {
    .card{ gap: 2rem;}
    .card--image{
        width: 150px;
    }
    .card--title{
        font-size: 20px;
        line-height: 25px;
        letter-spacing: -.4px;
    }
    .card--more{
        display: none;
    }
    
} 
@media screen and (max-width: 620px) { 
    .card{ gap: 1.5rem;}
    .card--image{
        width: 110px;
    }
}
@media screen and (max-width: 480px) { 
    .card{ gap: 18px;}
}

/* animations */

.anim{
    opacity: 0;
    transform: translateY(5rem);
    transition: all .3s;
}
.anim.on{
    opacity: 1;
    transform: translateY(0);
}

/* dots */

.dot{
    background-color: #E5E5E5;
    width: 51px;
    height: 51px;
    border: 1px solid #ED632B;
    position: absolute;
    border-radius: 50%;
    z-index: 5;
}

.dot.tp{top: 0;}
.dot.bt{bottom: 0;}
.dot.lf{left: 0;}
.dot.rg{right: 0;}
.dot.tp.rg{transform: translate(50%, -50%);}
.dot.tp.lf{transform: translate(-50%, -50%);}
.dot.bt.lf{transform: translate(-50%, 50%);}
.dot.bt.rg{transform: translate(50%, 50%);}



.dot:after{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--colorText);
    border-radius: 50%;
    transition: all .3s;
}

.dot.on:after{
    width: 26px;
    height: 26px;
}

@media screen and (max-width: 820px) { 
    .dot{
        width: 38px; height: 38px;
    }
    .dot.on:after{
        width: 24px; height: 24px;
    }
}

/* line grid */

.line-grid{
    position: relative;
}

.line-grid-wrapper{
    position: absolute;
    left: 50%; top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    max-width: var(--wrapperWidthMd);
}

.line-grid-wrapper.top{border-top: 1px solid var(--colorText);}
.line-grid-wrapper.left{border-left: 1px solid var(--colorText);}
.line-grid-wrapper.right{border-right: 1px solid var(--colorText);}
.line-grid-wrapper.bottom{border-bottom: 1px solid var(--colorText);}

.line-track::before,
.line-track::after{
    content: "";
    position: absolute;
    background-color: var(--colorText);
    border-radius: 50px;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.line-track.track-left::before{
    --top: 0px;
    --bottom: 25px;
    width: 11px;
    height: 191px;
    left: -6px;
    animation-name: leftCar;
}
.line-track.track-right::before{
    --top: 0px;
    --bottom: 25px;
    width: 11px;
    height: 191px;
    right: -6px;
    animation-name: leftCar;
}
.line-track.track-bottom::after{
    --trackSize : 500px;
    --right: 25px;
    width: var(--trackSize);
    height: 11px;
    bottom: -6px;
    animation-name: bottomCar;
}
.line-track.track-bottom.bottom-reverse::after{
    animation-name: bottomCarRev;
}
.line-track.track-top::after{
    --trackSize : 500px;
    --right: 25px;
    width: var(--trackSize);
    height: 11px;
    top: -6px;
    animation-name: bottomCar;
}
.line-track.track-top.bottom-reverse::after{
    animation-name: bottomCarRev;
}


@keyframes leftCar{
    0% {height: 0; bottom: calc(100% + var(--top));}
    15% {height: 191px; bottom: calc(100% + var(--top) - 191px);}
    85%  {height: 191px; bottom: var(--bottom);}
    100%{ height: 0; bottom: var(--bottom);}
}
@keyframes bottomCar{
    0% {width: 0; right: calc(100% - var(--right));}
    25% {width: var(--trackSize); right: calc(100% - var(--trackSize));}
    75% {width: var(--trackSize); right: var(--right);}
    100%{ width: 0; right: var(--right);}
}
@keyframes bottomCarRev{
    0% {width: 0; right: var(--right);}
    25% {width: var(--trackSize); right: var(--right);}
    75% {width: var(--trackSize); right: calc(100% - var(--right) - var(--trackSize));}
    100%{ width: 0; right: calc(100% - var(--right));}
}

@media screen and (max-width: 1750px) {
    .line-grid-wrapper{
        width: calc(100vw - 10rem);
        margin-inline: auto;
    }
}
@media screen and (max-width: 1020px) {
    .line-grid-wrapper{
        width: calc(100vw - 8rem);
    }
    .line-track.track-bottom::after{
        --trackSize : 300px;
    }
}
@media screen and (max-width: 820px) {
    .line-grid-wrapper{
        width: calc(100vw - 6rem);
    }
    .line-track.track-bottom::after{
        --trackSize : 200px;
    }
    .line-track.track-left::before{
        --bottom: 18px;
    }
    .line-track.track-right::before{
        --bottom: 0px;
    }
    .line-track.track-top::after,
    .line-track.track-bottom::after{
        --right: 18px;
    }

}
@media screen and (max-width: 620px) {
    .line-grid-wrapper{
        width: calc(100vw - 4rem);
    }
    .line-track.track-bottom::after{
        --trackSize : 120px;
    }
}


/* sensors */

.dot-sensors-grid{
    position: absolute;
    left: 0; top: 0;
    width: 100%; 
    height: 100%;
    /* background-color: rgba(255, 255, 255, 0.2); */
    pointer-events: none;
}

.dot-sensors-grid> div{ flex :1;}