.elementor-6059 .elementor-element.elementor-element-d56fc21{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-6059 .elementor-element.elementor-element-599dc47{text-align:center;}.elementor-6059 .elementor-element.elementor-element-599dc47 .elementor-heading-title{font-family:"Cera Pro", Sans-serif;color:#222222;}.elementor-6059 .elementor-element.elementor-element-3a91b9b{--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-6059 .elementor-element.elementor-element-ebc77b4{font-family:"Cera Pro", Sans-serif;font-size:1.4rem;}.elementor-6059 .elementor-element.elementor-element-ebc77b4 > .elementor-widget-container{margin:30px 0px 30px 0px;}.elementor-6059 .elementor-element.elementor-element-899da79{--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:10px;--margin-bottom:150px;--margin-left:0px;--margin-right:0px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-6059 .elementor-element.elementor-element-3a91b9b{--content-width:1200px;}}@media(max-width:1024px){.elementor-6059 .elementor-element.elementor-element-d56fc21{--margin-top:10px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;}.elementor-6059 .elementor-element.elementor-element-599dc47 > .elementor-widget-container{margin:180px 0px 0px 0px;}.elementor-6059 .elementor-element.elementor-element-ebc77b4{font-size:1.3rem;}.elementor-6059 .elementor-element.elementor-element-ebc77b4 > .elementor-widget-container{margin:30px 20px 30px 20px;}}@media(max-width:767px){.elementor-6059 .elementor-element.elementor-element-d56fc21{--margin-top:10px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;}.elementor-6059 .elementor-element.elementor-element-599dc47 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-6059 .elementor-element.elementor-element-ebc77b4{font-size:14px;}.elementor-6059 .elementor-element.elementor-element-ebc77b4 > .elementor-widget-container{margin:30px 10px 30px 10px;}}/* Start custom CSS for heading, class: .elementor-element-599dc47 */.elementor-6059 .elementor-element.elementor-element-599dc47 .rotate-left,
.elementor-6059 .elementor-element.elementor-element-599dc47 .rotate-right {
  display: inline-block; 
  background-color: #c72127;
  color: #fff;
  padding: clamp(8px, 1vw, 14px) clamp(10px, 1.2vw, 16px);
  font-size: clamp(1.6rem, 4vw, 3.8rem); /* 🔥 responsive font */
  line-height: 1.2;
}

.elementor-6059 .elementor-element.elementor-element-599dc47 .rotate-left {
  transform: rotate(-4deg);
  margin-bottom: clamp(20px, 4vw, 40px);
}

.elementor-6059 .elementor-element.elementor-element-599dc47 .rotate-right {
  transform: rotate(3deg);
  position: relative;
}

/* underline */
.elementor-6059 .elementor-element.elementor-element-599dc47 .rotate-right::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.5em; /* 🔥 σχετικό με font-size */
  width: 60%;
  height: 2px;
  background: black;
transform-origin: left;
  transform: rotate(-3deg); /* 🔥 σωστό centering */

}

/* Tablet */
@media (max-width: 1024px) {
  .elementor-6059 .elementor-element.elementor-element-599dc47 .rotate-right::after {
    width: 70%;
    height: 2px;
    
  }
  
      .elementor-6059 .elementor-element.elementor-element-599dc47 > .elementor-widget-container {
        margin: 20px 0px 0px 0px;
    }
}

/* Mobile */
@media (max-width: 767px) {
  .elementor-6059 .elementor-element.elementor-element-599dc47 .rotate-left,
  .elementor-6059 .elementor-element.elementor-element-599dc47 .rotate-right {
    font-size: clamp(1.4rem, 6vw, 2rem);
    padding: 8px 10px;
  }

  .elementor-6059 .elementor-element.elementor-element-599dc47 .rotate-right::after {
    width: 80%;
    height: 2px;
    bottom: -0.6em;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e285ffe */.cycle-image-wrapper{
max-width:800px;
margin:auto;
text-align:center;
}

.cycle-image{
position:relative;
}

.cycle-img{
width:100%;
height:auto;
}

/* labels */

.cycle-label{

position:absolute;

background:white;
border:2px solid #c72127;
color:#c72127;;
padding:8px 12px;
border-radius:20px;

font-weight:600;
cursor:pointer;

transition:.2s;
}

.cycle-label:hover{
background:#c72127;
color:white;
}

/* positions πάνω στην εικόνα */

.label1{
top:20%;
left:-2%;
}

.label2{
top:100%;
left:45%;
}

.label3{
top:75%;
left:84%;
}

/* content */

#cycle-content{

margin-top:20px;

padding:20px;

border-radius:10px;

background:#f7f7f7;

line-height:1.6;

min-height:80px;
}



.cycle-result.active{
display:block;
}

/* header */

.phase-header{

background:#fff;

padding:40px;

text-align:center;

}

.phase-header p{margin-top: 30px;font-size:18px;font-family:'Cera Pro', sans-serif;}
.phase-title{

display:inline-block;

background:#d21e26;

color:white;

padding:10px 20px;

font-size:34px;

font-weight:700;

transform:rotate(-3deg);

}

.phase-days{

display:inline-block;

background:white;

border:3px solid #333;

padding:10px 16px;

margin-left:20px;

font-weight:700;

}

/* red content */



.phase-content h3{

margin-top:20px;

font-size:24px;
color:#fff;
font-family:'Cera Pro', sans-serif;
}
.phase-content p{

margin-top:20px;

font-size:18px;
color:#fff;
font-family:'Cera Pro', sans-serif;
}

 .phase-content li{

font-size:18px;
color:#fff;
font-family:'Cera Pro', sans-serif;
}
/* active button */

.cycle-label.active{
background:#c72127;
color:white;
}

/* reveal animation */

.cycle-result{
max-width:1200px;
margin:150px auto;

opacity:0;
transform:translateY(40px);

display:none;

transition:.4s;



}

.cycle-result.active{
display:block;
opacity:1;
transform:none;

 --mask:
    radial-gradient(62.5px at 50% calc(100% - 87.5px),#000 99%,#0000 101%) calc(50% - 100px) 0/200px 100%,
    radial-gradient(62.5px at 50% calc(100% + 37.5px),#0000 99%,#000 101%) 50% calc(100% - 50px)/200px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);

}

.phase-content{
background:#d32027;
color:white;
padding:40px;
line-height:1.7;
padding-bottom: 100px;
position:relative;
overflow:hidden;
}

/* wave bottom */

.phase-content::after{

content:"";

position:absolute;
left:0;
bottom:-1px;

width:100%;
height:60px;

}

/* =========================
   BUBBLE BUTTONS
========================= */
.cycle-label {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: none;

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

  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;

  cursor: pointer;

  color: #fff;
  background: linear-gradient(145deg, #e53935, #b71c1c);

  box-shadow:
    0 6px 15px rgba(0,0,0,0.2),
    inset 0 2px 4px rgba(255,255,255,0.3);

  transition: all 0.2s ease;
}

/* hover */
.cycle-label:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 12px 25px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(255,255,255,0.4);
}

/* click */
.cycle-label:active {
  transform: scale(0.95);
}

/* μικρή διαφοροποίηση */
.label1 { background: linear-gradient(145deg, #757575, #424242); }
.label2 { background: linear-gradient(145deg, #e53935, #b71c1c); }
.label3 { background: linear-gradient(145deg, #ef9a9a, #e57373); color:#5a0000; }

/* mobile */
@media(max-width:768px){
  .cycle-label {
    width: 65px;
    height: 65px;
    font-size: 11px;
  }
 
  .label2 {
    top: 74%;
    left: 49%;
}
.label1 {
    top: 20%;
    left: 5%;
}
}


/* mobile */
@media(max-width:480px){
  .cycle-label {
   
    font-size: 9px;
  }
 
 .label2 {
        top: 72%;
        left: 49%;
    }
.label1 {
    top: 8%;
    left: 5%;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ca32e9e */.cycle-wrapper{
display:flex;
justify-content:center;
align-items:center;
padding:40px 0;
}

.cycle{
position:relative;
width:420px;
height:420px;
border-radius:50%;
border:6px solid #f3d6dc;
}

.phase{
position:absolute;
width:150px;
padding:10px;
border-radius:40px;
border:none;
background:#c72127;
color:#fff;
cursor:pointer;
font-weight:600;
transition:0.3s;
}

.phase:hover{
transform:scale(1.05);
background:#a91b20;
}

/* positions */

.phase1{
top:40px;
left:50%;
transform:translateX(-50%);
}

.phase2{
right:-20px;
top:50%;
transform:translateY(-50%);
}

.phase3{
left:-20px;
top:50%;
transform:translateY(-50%);
}

.cycle-center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:220px;
text-align:center;
font-size:14px;
line-height:1.5;
}

/* mobile */

@media(max-width:600px){

.cycle{
width:300px;
height:300px;
}

.phase{
width:120px;
font-size:13px;
}

.cycle-center{
width:170px;
}

}/* 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://uat-ygeiakaihygieiniperiodou.paidikaipsihikiigeia.gov.gr/wp-content/uploads/2026/02/CeraPro-Regular-1.ttf') format('truetype');
}
@font-face {
	font-family: 'Cera Pro';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://uat-ygeiakaihygieiniperiodou.paidikaipsihikiigeia.gov.gr/wp-content/uploads/2026/02/CeraPro-Bold.woff2') format('truetype');
}
/* End Custom Fonts CSS */