.elementor-10584 .elementor-element.elementor-element-1e5a73e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:20px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-10584 .elementor-element.elementor-element-bd04829{text-align:center;}.elementor-10584 .elementor-element.elementor-element-bd04829 .elementor-heading-title{font-family:"Cera Pro", Sans-serif;color:#222222;}.elementor-10584 .elementor-element.elementor-element-264df4f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10584 .elementor-element.elementor-element-e0417af > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-10584 .elementor-element.elementor-element-e0417af{text-align:justify;font-family:"Cera Pro", Sans-serif;font-size:18px;}.elementor-10584 .elementor-element.elementor-element-3a27a8a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-10584 .elementor-element.elementor-element-264df4f{--content-width:800px;}}@media(max-width:1024px){.elementor-10584 .elementor-element.elementor-element-bd04829 > .elementor-widget-container{margin:20px 0px 40px 0px;}}@media(max-width:767px){.elementor-10584 .elementor-element.elementor-element-1e5a73e{--margin-top:30px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-10584 .elementor-element.elementor-element-bd04829 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-10584 .elementor-element.elementor-element-e0417af > .elementor-widget-container{margin:20px 0px 0px 0px;padding:0px 10px 0px 10px;}}/* Start custom CSS for heading, class: .elementor-element-bd04829 */.rotate-left{
  display: inline-block; 
  background-color: #c72127;
  color: #fff;
  padding: 10px 14px;
  font-size: 3.8rem;
  margin:10px;
}

.rotate-left {
  transform: rotate(-4deg);
}

.title {
  position: relative;
  display: inline-block;
}

.title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px; /* απόσταση από το κείμενο */
  width: 100%;
  height: 2px;
  background: #000;
  transform: rotate(-2deg); /* μικρή κλίση */
  transform-origin: left;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-18d887b */.periodcal-app {
  max-width: 900px;
  margin: auto;
  font-family: system-ui;
  text-align: center;
}

/* HEADER */
.periodcal-header h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.periodcal-header p {
  color: #666;
  margin-bottom: 30px;
}

/* STAGE */
.periodcal-stage {
  position: relative;
  height: 500px;
  perspective: 1200px;
}

/* STACK */
.periodcal-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

/* CARDS */
.periodcal-card {
  position: absolute;
  width: 100%;
  max-width: 500px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  opacity: 0;
  transition: all 0.5s ease;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  cursor: pointer;
}

.periodcal-card img {
  width: 100%;
  display: block;
}

/* ACTIVE */
.periodcal-card.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 5;
}

/* BACK LAYERS */
.periodcal-card.next {
  transform: translate(-40%, -45%) scale(0.9);
  opacity: 0.5;
  z-index: 4;
}

.periodcal-card.next2 {
  transform: translate(-30%, -40%) scale(0.8);
  opacity: 0.3;
  z-index: 3;
}

/* NAV BASE */
.periodcal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;

 width: 72px;
  height: 72px;
  border-radius: 50%;

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);

  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 10px 30px rgba(0,0,0,0.15);

  transition: all 0.25s ease;
}

.periodcal-prev { left: 10px; }
.periodcal-next { right: 10px; }

/* SVG */
.periodcal-nav svg {
  width: 30px;
  height: 30px;
  stroke: #c61b1a;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition: all 0.25s ease;
}

/* HOVER */
.periodcal-nav:hover {
  transform: translateY(-50%) scale(1.08);
  background: #c61b1a;
}

.periodcal-nav:hover svg {
  stroke: #fff;
}

/* ACTIVE (click feedback) */
.periodcal-nav:active {
  transform: translateY(-50%) scale(0.96);
}

.periodcal-nav.prev { left: -20px; }
.periodcal-nav.next { right: -20px; }

/* YEARS */
.periodcal-years {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.periodcal-years span {
  padding: 6px 12px;
  border-radius: 20px;
  background: #eee;
  cursor: pointer;
}

.periodcal-years .active {
  background: #c61b1a;
  color: #fff;
}

/* CTA */
.periodcal-actions {
  margin-top: 20px;
}

.periodcal-download {
  background: #c61b1a;
  color: #fff;
  padding: 12px 25px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}

/* MODAL */
.periodcal-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
}


/* IMAGE */
.periodcal-modal-img {
  width: 50vw;
  height: auto;
  max-height: 80vh;

  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  object-fit: contain;
}
.periodcal-modal.active {
  display: flex;
}

.periodcal-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

/* RESPONSIVE */
@media(max-width:768px){
  .periodcal-stage {
    height: 350px;
  }

  .periodcal-nav.prev { left: 0; }
  .periodcal-nav.next { right: 0; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Cera Pro';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://digital.web2social.gr/wp-content/uploads/2026/02/CeraPro-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Cera Pro';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://digital.web2social.gr/wp-content/uploads/2026/02/CeraPro-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */