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

:root{
    --colorBg : #fff;
    --colorSec : #F6F6F6;
    --colorText: #C32C38;
    --colorRed : #B13435;

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

    --singleWidth : 900px;
    --pageWidth : 777px;
    --innerWidth : 700px;
    --boxWidth: 950px;

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

    --leftSpace: clamp(2rem, 6vw, 110px); 

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

@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: "Manrope", sans-serif;
    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;
    font-weight: 400;
    font-style: normal;
    color: #FFFBDD;
}

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

/* 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;
}

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

/* animations */

.bowl .box-icon img{
    animation-name: shake;
    animation-duration: 2s;
    animation-iteration-count: infinite;    
}
.gym .box-icon img{
    animation-name: shake-2;
    animation-duration: 4s;
    animation-iteration-count: infinite; 
    transform-origin: bottom;   
}

@keyframes shake {
    0%   {transform: rotate(0g);}
    15%  {transform: rotate(5deg);}
    30%  {transform: rotate(-5deg);}
    45%  {transform: rotate(5deg);}
    60%  {transform: rotate(0);}
    100% {transform: rotate(0);}
}

@keyframes shake-2 {
    0%   {transform: rotate(0g);}
    15%  {transform: rotate(2deg);}
    30%  {transform: rotate(-2deg);}
    45%  {transform: rotate(2deg);}
    60%  {transform: rotate(0);}
    100% {transform: rotate(0);}
}

.bike .box-icon img{
    animation-name: bike;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
@keyframes bike {
    0%  {opacity: 1; transform: translateX(-220px);}
    70% {transform: translateX(0);}
    90%{opacity: 1; transform: translateX(0);}
    95%{ opacity: 0; transform: translateX(0);}
    100%{ opacity: 0; transform: translateX(-220px);}
}

.watch .box-icon img{
    animation-name: watch;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}
@keyframes watch {
    0%  {opacity: 1; transform: translateX(-220px);}
    70% {transform: translateX(0);}
    90%{opacity: 1; transform: translateX(0);}
    95%{ opacity: 0; transform: translateX(0);}
    100%{ opacity: 0; transform: translateX(-220px);}
}

.sleep .box-icon img{
    animation-name: sleep;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
@keyframes sleep {
    0%  {transform: translate(0, 0);}
    10%  {transform: translate(0, 0);}
    50%  {transform: translate(0, -50px);}
    90%  {transform: translate(0, 0);}
    100%  {transform: translateY(0, 0);}
}

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