/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


@font-face {
    font-family: 'Cervanttis';
    src: url('fonts/Cervanttis.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Improves loading performance */
}



/* Βασικές ρυθμίσεις του SVG */
  .animsvg {
    /*width: 500px;  Ρύθμισε το μέγεθος που θες */
    height: auto;
  }

  /* Ρυθμίσεις για τα μονοπάτια (paths) */
  .animsvg path {
    /* Ορίζουμε το μήκος της παύλας. 
       Εδώ βάζουμε 2500 που είναι αρκετό για να καλύψει 
       το μήκος της μεγαλύτερης γραμμής στο viewBox 650x650.
    */
    stroke-dasharray: 2500; 
    stroke-dashoffset: 2500; /* Αρχικά κρυμμένο */
    
    /* Η κίνηση */
    animation: draw 5s ease-in-out infinite alternate;
  }

  /* Προαιρετικό: Καθυστέρηση για κάθε γραμμή ξεχωριστά 
     ώστε να ζωγραφίζονται η μία μετά την άλλη */
  .animsvg path:nth-child(1) { animation-delay: 0s; }
  .animsvg path:nth-child(2) { animation-delay: 0.5s; }
  .animsvg path:nth-child(3) { animation-delay: 1s; }
  .animsvg path:nth-child(4) { animation-delay: 1.5s; }
  .animsvg path:nth-child(5) { animation-delay: 2s; }

  /* Το Keyframe της κίνησης */
  @keyframes draw {
    to {
      stroke-dashoffset: 0; /* Εμφάνιση της γραμμής */
    }
  }


/**** Single Post ****/

h2.wp-block-heading, .elementor-widget-theme-post-content h2 {
  font-size: 25px; 
  margin-block-start: 10px;
  margin-block-end: 10px;
  margin-top: 25px;
}


h4.wp-block-heading, .elementor-widget-theme-post-content h4 {
  text-align: right;
  rotate: 2deg;
  font-family: 'Cervanttis';
  font-size: 38px; 
 
}


ol.wp-block-list li,  .elementor-widget-theme-post-content ol li{
  padding-left: 10px;
  padding-top: 10px;
}

ol.wp-block-list, .elementor-widget-theme-post-content ol {
  /* 1. Remove default numbering */
  list-style: none;
  /* 2. Initialize the counter (named 'my-counter' here) */
  counter-reset: my-counter;
  padding: 10px 10px 10px 0;
  border-left: 1px dashed blue;
  background: #E3E3E3;
}

ol.wp-block-list li, .elementor-widget-theme-post-content ol li  {
  /* 3. Increment the counter for every list item */
  counter-increment: my-counter;
  margin-bottom: 10px;
  display: flex; /* Helps align the number and text nicely */
  flex-direction: column;
  align-items: flex-start;
  padding-left: 50px;

  }



ol.wp-block-list li::before, .elementor-widget-theme-post-content ol li:before {
  margin-left: -75px;
  margin-bottom: -30px;
  /* 4. Display the counter value */
  content: counter(my-counter);
  
  /* 5. Style the "marker" however you want */
  background-color: #007bff;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  
  /* Size and Shape */
  width: 40px;
  height: 40px;
  border-radius: 50%; /* Makes it a circle */
  
  /* Centering the number inside the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Spacing between the number and the text */
  margin-right: 20px;
  flex-shrink: 0; /* Prevents the circle from squishing if text is long */
}


.wp-block-table  th, .elementor-widget-theme-post-content table th {
  background: #E3E3E3;
}

.wp-block-table thead, .elementor-widget-theme-post-content table thead{
  border: none;
}



.moving .elementor-divider-separator {
    width: 0;
    transition: width 2.2s cubic-bezier(0.42, 0, 0.58, 1);
}

.moving.is-visible .elementor-divider-separator {
    width: 200px;
}


/* 1. Set the initial state for all dividers */
.elementor-widget-divider .elementor-divider-separator {
    width: 0 !important; /* Force start at 0 */
    transition: width 1.5s ease-out;
}

/* 2. Define the 'active' state when they enter the viewport */
.elementor-widget-divider.animated .elementor-divider-separator {
    width: 200px !important; /* This will fill the container width set in Elementor */
}


.cn-close-icon {display:none !important;}