.elementor-6867 .elementor-element.elementor-element-12c5e74{--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-6867 .elementor-element.elementor-element-83f5ca4{text-align:center;}.elementor-6867 .elementor-element.elementor-element-83f5ca4 .elementor-heading-title{font-family:"Cera Pro", Sans-serif;color:#222222;}.elementor-6867 .elementor-element.elementor-element-001834e{--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:0px;--margin-left:0px;--margin-right:0px;}.elementor-6867 .elementor-element.elementor-element-d94f354{text-align:center;font-family:"Cera Pro", Sans-serif;font-size:18px;}.elementor-6867 .elementor-element.elementor-element-a9f3057{--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(max-width:1024px){.elementor-6867 .elementor-element.elementor-element-83f5ca4 > .elementor-widget-container{margin:180px 0px 0px 0px;}}@media(max-width:767px){.elementor-6867 .elementor-element.elementor-element-12c5e74{--margin-top:130px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6867 .elementor-element.elementor-element-83f5ca4 > .elementor-widget-container{margin:0px 0px 0px 0px;}}/* Start custom CSS for heading, class: .elementor-element-83f5ca4 */.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-57efd86 *//* =========================
   BASE
========================= */
.menarche-tool {
  font-family: 'Caveat', cursive;
  max-width: 100%;
  margin: 0 auto;
  min-height: 850px;
}

.intro {
  text-align: center;
  margin-bottom: 40px;
}

/* =========================
   BOOK
========================= */
.book {
  perspective: 2000px;
  position: relative;
}

.book-stage {
  position: relative;
 
  background: #E5D7E2;
   overflow: visible;
}

/* container */
.flip-page {
  position: relative;
  width: 100%;
  min-height: 850px;
  perspective: 2000px;
}

/* faces */
.flip-face {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;

  transition: 
    transform 1s cubic-bezier(.77,0,.18,1),
    opacity 0.6s ease;

  transform-origin: left;
}

/* FRONT */
.flip-face.front {
  z-index: 2;
  transform: rotateY(0deg);
  opacity: 1;
}

/* BACK */
.flip-face.back {
  transform: rotateY(180deg);
  opacity: 0;
  z-index: 1;
}

/* FLIPPED STATE */
.flip-page.flipped .front {
  transform: rotateY(-180deg);
  opacity: 0;
}

.flip-page.flipped .back {
  transform: rotateY(0deg);
  opacity: 1;
  z-index: 3;
}

/* =========================
   PAGE CONTENT (SCRAPBOOK)
========================= */
.pageins-inner {
  background: #E5D7E2;
  padding: 40px;
  border-radius: 12px;
min-height: 850px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.2),
    inset 0 0 30px rgba(0,0,0,0.03);
}

/* =========================
   GRID
========================= */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 20px;
  min-height:850px;
}

/* =========================
   NOTE
========================= */
.note {
  position: relative;
  background: #fffef8;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;

  box-shadow: 0 10px 25px rgba(0,0,0,0.1);

  align-self: start;
  transition: transform 0.3s ease;

  /* ✨ notebook lines */
  background-image:
    linear-gradient(to bottom, transparent 27px, rgba(0,0,0,0.08) 28px),
    linear-gradient(to right, rgba(255,0,0,0.15) 0px, rgba(255,0,0,0.15) 2px, transparent 2px);

  background-size:
    100% 28px,   /* horizontal lines */
    100% 100%;   /* vertical margin */

  background-position:
    0 0,
    40px 0;      /* 👈 margin θέση */

  padding-left: 55px; /* 👈 για να μην γράφει πάνω στη margin */
}
.note-header {
  padding: 20px 20px 10px 0;
  font-weight: 600;
  line-height: 1.4;
}
.note:hover {
  transform: scale(1.02);
}
.note-body {
  padding: 0 20px 0 0;

  line-height: 28px; /* 👈 match με grid */
  font-size: 15px;
}
/* =========================
   WASHI TAPE
========================= */
.note::before {
  content:"";
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);

  width:70px;
  height:18px;

  background: rgba(173,216,230,0.6);

  border-radius:4px;

  box-shadow:
    0 2px 6px rgba(0,0,0,0.2),
    inset 0 0 6px rgba(255,255,255,0.4);
}
.note::after {
  content:"";
  position:absolute;
  inset:0;

  background: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 3px 3px;

  pointer-events:none;
  opacity: 0.4;
}
/* =========================
   HEADER
========================= */
.note-header {
  padding: 20px;
}

/* =========================
   BODY (COLLAPSE SYSTEM)
========================= */
.note-body {
  height: 0;
  overflow: hidden;
  padding: 0 20px;

  opacity: 0;
  visibility: hidden;

  transition:
    height 0.4s ease,
    opacity 0.2s ease;
}

/* OPEN STATE */
.note.open .note-body {
  opacity: 1;
  visibility: visible;
  padding: 20px;
}

/* =========================
   NAV
========================= */
.nav {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;
}

/* 🔥 FIX: δίνουμε ύψος στο 3D container */
.flip-page {
  min-height: 850px;
}

/* 🔥 FIX: τα faces να γεμίζουν σωστά */
.flip-face {
  height: 100%;
}

.menarche-tool {
  transform: translateZ(0);
}

/* 🔴 BREAK ELEMENTOR STACKING */
.book,
.book-stage,
.flip-page {
  transform-style: preserve-3d;
  transform: translateZ(0);
}

/* 🔴 FORCE GPU LAYER */
.flip-face {
  transform: translateZ(0);
}
.flip-face.back {
  transform: rotateY(180deg) translateZ(1px);
}

.prev {
  left: 20px;
  right: auto;
}

.next {
  right: 20px;
}
.flip-page .prev {
  opacity: 0 !important;
  pointer-events: none !important;
}

.flip-page.flipped .prev {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.flip-page.flipped .next {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 600px) {

.notes-grid {
  
  min-height:1250px;
}
}

.hfirst{text-align:center;background: rgb(125, 152, 206);
    color: #fff;
    padding: 5px;
    margin: 20px auto;
    width: fit-content;font-family:'Cera Pro';font-weight:400;}
    .hsec{text-align:center;background: #C72126;
    color: #fff;
    padding: 5px;
    margin: 20px auto;
    width: fit-content;font-family:'Cera Pro';font-weight:400;}
    
    .note-header h3{font-family: 'Cera Pro';
    font-weight: 600;font-size:18px;color: #222;}/* 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 */