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

:root{
    --colorBg : #fff;
    --colorSec : #FFEEEF;
    --colorText: #000;
    --colorRed : #EF100D;

    --wrapperWidth : 1768px;
    --wrapperWidthSm : 1334px;
    --wrapperWidthLg : 1842px;
    --wrapperWidthXs : 1192px;
    --wrapperText : 1480px;

    --padding: 3rem;
    --mobilePadding : 24px;


    /* filters */
    --filterPink : brightness(0) saturate(100%) invert(85%) sepia(11%) saturate(559%) hue-rotate(309deg) brightness(107%) contrast(111%);
    --filterRed: brightness(0) saturate(100%) invert(11%) sepia(97%) saturate(7315%) hue-rotate(1deg) brightness(109%) contrast(90%);
}

@media screen and (max-width: 1420px) {
    :root{
        --padding : 2rem;
    }
}
@media screen and (max-width: 1080px) {
    :root{
        --leftSpace : 2rem;
    }
}
@media screen and (max-width: 680px) {
    :root{
        --padding : var(--mobilePadding);
        --leftSpace : 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: "Geologica", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;   
    position: relative;
    max-width: 100dvw;
    margin:0 auto;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    /* color: var(--colorText); */
    /* background-color: var(--colorBg);
    color: var(--colorText); */
    font-optical-sizing: auto;
    color: var(--colorRed);
}

.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;
}

.full-h{
    min-height: 100dvh;
}
.auto{margin-inline : auto;}

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

/* 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: 3rem; 
    max-width: var(--wrapperWidth);
}
.wrapper.wide{
    margin-inline: auto;
    padding-inline: 4rem 5rem; 
    max-width: 1920px;
}

.wrapper.text-wrapper{max-width: 919px;}
.wrapper.text-wrapper.sm{max-width: 845px;}


.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: 1720px) { 
    .wrapper.wide{padding-inline: 3rem;}
}
@media screen and (max-width: 1450px) { 
    .wrapper.wide,
    .wrapper.pd-rl,
    .wrapper{padding-inline: 2rem;}
}
@media screen and (max-width: 680px) { 
    .wrapper.pd-rl{padding-inline: 1.5rem; }
    .wrapper.wide,
    .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;
    text-align: center;
    font-weight: 700;
    color: var(--colorRed);
}

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


.section-header{font-size: 55px;}
.section-header.lg{font-size: 60px;}
.section-header.xl{font-size: 80px;}
.section-header.md{font-size: 50px;}
.section-header.sm{font-size: 40px;}


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


@media screen and (max-width: 1320px) { 
    .section-header{font-size: 50px;}
}
@media screen and (max-width: 1020px) { 
    .section-header{font-size: 45px;}
}
@media screen and (max-width: 780px) { 
    .section-header{font-size: 40px;}
}
@media screen and (max-width: 520px) { 
    .section-header{font-size: 35px;}
}

/* bubbles */

.bubble{
    position: absolute;
    z-index: -1;
    filter: var(--filterPink);
}
.bubble > img{
    width: 100%;;
}

/* anim op */

.anim-op{
    opacity: 0;
    transform: translateX(-100%);
    transition: all .3s;
}
.anim-op.on{
    opacity: 1;
    transform: translateX(0);
}
@media screen and (max-width: 1420px) { 
    .anim-op{
        transform: translateX(-50%);
    }
}