/* Aeonik Pro Essential Light - greek_latin */
@font-face {
    font-display: swap;
    font-family: 'Aeonikpro';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/aeonikpro-light.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Aeonik Pro Essential Light Italic - greek_latin */
@font-face {
    font-display: swap;
    font-family: 'Aeonikpro';
    font-style: italic;
    font-weight: 300;
    src: url('./fonts/aeonikpro-light.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Aeonik Pro Essential Regular - greek_latin */
@font-face {
    font-display: swap;
    font-family: 'Aeonikpro';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/aeonikpro-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Aeonik Pro Essential Regular Italic - greek_latin */
@font-face {
    font-display: swap;
    font-family: 'Aeonikpro';
    font-style: italic;
    font-weight: 400;
    src: url('./fonts/aeonikpro-regularitalic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Aeonik Pro Essential Semibold - greek_latin */
@font-face {
    font-display: swap;
    font-family: 'Aeonikpro';
    font-style: normal;
    font-weight: 600;
    src: url('./fonts/aeonikpro-semibold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Aeonik Pro Essential Semibold Italic - greek_latin */
@font-face {
    font-display: swap;
    font-family: 'Aeonikpro';
    font-style: italic;
    font-weight: 600;
    src: url('./fonts/aeonikpro-semibolditalic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*{margin: 0px;padding: 0px;box-sizing: border-box;}
html,body{width: 100%;margin: 0px;padding: 0px;font-family: 'Aeonikpro';background-color: var(--white-color);}

:root{
    --background-color:#ECEBE4;
    --white-color: #fff;
    --black-color: #000;
    --hover-color: #85806D;
    --text-color: #58533D;
}

h1{font-size: 42px;line-height: 42px;font-weight: 500;}
h2{font-size: 38px;line-height: 38px;font-weight: 500;}
h3{font-size: 32px;line-height: 32px;font-weight: 400;}
h4{font-size: 24px;line-height: 28px;font-weight: 500;}


/*Code for all page starts*/
#menu-inside{position: relative;max-width: 400px;margin: auto;height: 100vh;background-color: var(--background-color);display: flex;flex-direction: column;justify-content: space-between;gap: 100px;overflow-x: hidden;overflow-y: auto;}

.pagewrap{width: 100%;position: relative;padding: 0px 20px;}

.noscroll{overflow: hidden;}

.event-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
    max-height: 6em; /* περίπου 3 σειρές, εξαρτάται από το line-height */
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.event-content.expanded {
    -webkit-line-clamp: unset;
    max-height: none;
}

.offer-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s ease;
    max-height: 6em; /* περίπου 3 σειρές, εξαρτάται από το line-height */
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.offer-content.expanded {
    -webkit-line-clamp: unset;
    max-height: none;
}

.read-more-btn {
    width: fit-content;margin-left: 20px;
    margin-top: 10px;
    background: #333;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
}

/*Code for all page ends*/


/*Header code starts*/
header{position: relative;z-index: 10;padding-top: 30px;}
header .grid-2-elements{width: 100%;position: relative;display:grid;grid-template-columns: 0.7fr 1fr;gap: 20px;}
header .logo{position: relative;}
header .logo a{display: block;}
header .logo img{width: 120px;}
.header-content{position: relative;display: flex;flex-direction: column;gap: 0px;align-items: end;color: var(--hover-color);z-index: 3;transition: 0.2s ease;}
.header-content .button{width: 35px;height: 35px;display: flex;flex-direction: column;gap: 5px;align-items: center;justify-content: center;cursor: pointer;transition: 0.2s ease;z-index: 2;}
.header-content .button span{width: 30px;height: 2px;background-color: var(--text-color);transition: 0.2s ease;}

header.open .header-content .button span:nth-child(1){transform: translateY(5px) translateX(0) rotate(-45deg);transition: 0.2s ease;}
header.open .header-content .button span:nth-child(2){display: none;}
header.open .header-content .button span:nth-child(3){transform: translateY(-2px) translateX(0) rotate(45deg);transition: 0.2s ease;}

.icon-background{position: absolute;z-index: 1;right: -118px;top: -8%;}
.icon-background img{width: 300px;max-width: 100%;}

.home .icon-background{display: none;}
/*Header code ends*/


/*Homepage code starts*/
.menu-elements{width: 100%;position: relative;}
.menu-element{padding-bottom: 15px;}
.menu-element-title{cursor: pointer;}
.menu-element.active .menu-element-title h2{width: fit-content;border-bottom: 2px solid var(--black-color);}
.menu-element-title a{color: var(--black-color);text-decoration: none;}
.menu-element-content{width: 100%;overflow: hidden;display: none;}
.menu-element.active .menu-element-content{display: block;}
.menu-element{display: none;}
.menu-element:has(a){display: block;}
.menu-element-content ul{list-style: none;/*overflow: scroll;max-height: 300px;*/}
.menu-element-content ul li{padding-bottom: 15px;}
.menu-element-content ul li:nth-child(1){padding-top: 15px;}
.menu-element-content ul li a{position: relative;width: fit-content;font-size: 32px;line-height: 32px;color: var(--hover-color);text-decoration: none;transition: 0.2s ease;}
.menu-element-content ul li a:after{content: '';width: 0px;position: absolute;bottom: 0px;left: 0px;height: 2px;background-color: var(--hover-color);transition: 0.3s ease;}
.menu-element-content ul li a:hover:after{width: 100%;transition: 0.3s ease;}

.content-menu{padding-top: 40px;}
#contentpage{position: relative;z-index: 2;}
#contentpage .menu-content-element{position: relative;padding: 20px 0px;}
#contentpage .menu-content-element p{font-size: 24px;line-height: 32px;font-weight: 300;padding-bottom: 15px;color: var(--text-color);}
#contentpage .menu-content-element-top{padding: 20px 0px;}
#contentpage .menu-content-element-top p{font-size: 12px;line-height: 20px;padding-bottom: 0px;}
#contentpage .menu-content-element  h1,
#contentpage .menu-content-element  h2,
#contentpage .menu-content-element  h3,
#contentpage .menu-content-element  h4,
#contentpage .menu-content-element  h5{padding-top: 20px;color: var(--text-color);}

#contentpage .menu-content-element  h1:nth-child(1),
#contentpage .menu-content-element  h2:nth-child(1),
#contentpage .menu-content-element  h3:nth-child(1),
#contentpage .menu-content-element  h4:nth-child(1),
#contentpage .menu-content-element  h5:nth-child(1),
#contentpage .menu-content-element  h6:nth-child(1){padding-top: 0px;color: var(--text-color);}

.archive-events-content{width: 100%;position: relative;padding-top: 40px;display: flex;flex-direction: column;gap: 40px;z-index: 4;}
.archive-events-content .event-element{display: flex;flex-direction: column;gap: 15px;}
.event-element .event-top-informations{width: 100%;position: relative;padding: 0px 20px;display: flex;justify-content: space-between;gap: 20px;color: var(--hover-color);}
.event-element .event-top-informations p{color: var(--hover-color);font-size: 24px;line-height: 24px;font-weight: 300;}
.event-element .date-element{display: flex;align-items: end;}
.event-element .date-element h2{font-weight: 300;text-align: right;}
.event-element .event-image{width: 100%;position: relative;}
.event-element .event-image .hero-image{width: 100%;height: 100%;}
.event-element .event-image .swiper-slide, .event-element .event-image{width: 100%;height: 320px;overflow: hidden;}
.event-element .event-image .swiper-slide img, .event-element .event-image img{width: 100%;height: 100%;object-fit: cover;}
.event-element .event-content{width: 100%;position: relative;padding: 0px 20px;}
.event-element .event-content p{font-size: 20px;line-height: 28px;color: var(--hover-color);}
.mySwiper .swiper-button-next:after,
.mySwiper .swiper-button-prev:after{font-size: 20px;color: var(--white-color);}
.mySwiper .swiper-pagination .swiper-pagination-bullet-active{color: var(--white-color);background: var(--white-color);}

.archive-offers-content{width: 100%;position: relative;padding-top: 40px;display: flex;flex-direction: column;gap: 40px;z-index: 4;}
.archive-offers-content .offer-element{display: flex;flex-direction: column;gap: 15px;}
.offer-element .offer-top-informations{width: 100%;position: relative;padding: 0px 20px;display: flex;justify-content: space-between;gap: 20px;color: var(--hover-color);}
.offer-element .offer-top-informations p{color: var(--hover-color);font-size: 24px;line-height: 24px;font-weight: 300;}
.offer-element .date-element{display: flex;align-items: end;}
.offer-element .date-element h2{font-weight: 300;text-align: right;}
.offer-element .offer-image{width: 100%;position: relative;}
.offer-element .offer-image .swiper-slide, .offer-element .offer-image{width: 100%;height: 320px;overflow: hidden;}
.offer-element .offer-image .swiper-slide img, .offer-element .offer-image img{width: 100%;height: 100%;object-fit: cover;}
.offer-element .offer-content{width: 100%;position: relative;padding: 0px 20px;}
.offer-element .offer-content p{font-size: 20px;line-height: 28px;color: var(--hover-color);}
.mySwiper .swiper-button-next:after,
.mySwiper .swiper-button-prev:after{font-size: 20px;color: var(--white-color);}
.mySwiper .swiper-pagination .swiper-pagination-bullet-active{color: var(--white-color);background: var(--white-color);}

.home .fb-single-informations{display: none;}
.home .archive-events-informations{display: none;}
.home .service-single-informations{display: none;}

.single-fb .fb-single-informations{display: flex;flex-direction: column;align-items: end;}
.single-fb .archive-events-informations{display: none;}
.single-fb .service-single-informations{display: none;}

.single-services .fb-single-informations{display: none;}
.single-services .archive-events-informations{display: none;}
.single-services .service-single-informations{display: flex;flex-direction: column;align-items: end;}

.post-type-archive-events .fb-single-informations{display: none;}
.post-type-archive-events .archive-events-informations{display: flex;}
.post-type-archive-events .service-single-informations{display: none;}
/*Homepage code ends*/


/*Footer code starts*/
footer{width: 100%;position: relative;}
footer img{width: 100%;}
/*Footer code ends*/


/*Overlay code starts*/
#overlay{width: 372px;max-width: 100%;height: 500px;position: absolute;z-index: 9;background-color: var(--white-color);padding: 90px 10px 10px 10px;border-radius: 12px;top: 14px;right: 14px;opacity: 0;visibility: hidden;}
#overlay.open{opacity: 1;visibility: visible;}
#overlay .overlay-inside{width: 100%;height: 100%;overflow: auto;display: flex;flex-direction: column;gap: 30px;align-items: start;}


#overlay .menu-element-title{text-align: left;}

@media screen and (max-width:600px) and (min-width:453px){
    #overlay{position: fixed;width: 95%;}
}
@media screen and (max-width:452px) and (min-width:200px){
    #overlay{position: fixed;width: 95%;right: 10px;}
}
/*Overlay code ends*/


@media screen and (max-width:600px) and (min-width:200px){
    #menu-inside{max-width: 100%;width: 100%;height: auto;}

}
@media screen and (max-width:700px) and (min-width:200px){
    #menu-inside{height: auto;}
}