.elementor-19145 .elementor-element.elementor-element-9bfd10b{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:32px 32px;--row-gap:32px;--column-gap:32px;--grid-auto-flow:row;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:56px;--padding-bottom:88px;--padding-left:0px;--padding-right:0px;}.elementor-19145 .elementor-element.elementor-element-53f3bec{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;grid-column:span 2;}.elementor-19145 .elementor-element.elementor-element-9f0f32d{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:88px;--padding-bottom:88px;--padding-left:0px;--padding-right:0px;}.elementor-19145 .elementor-element.elementor-element-f994aa5{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:88px;--padding-bottom:88px;--padding-left:0px;--padding-right:0px;}@media(max-width:1080px){.elementor-19145 .elementor-element.elementor-element-9bfd10b{--grid-auto-flow:row;}}@media(max-width:720px){.elementor-19145 .elementor-element.elementor-element-9bfd10b{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS *//* ==================================================================
   IDILKA - /pos-dialegw-maxilari/
   Styles for the parts Kostas builds in Elementor: headings, leads,
   step pills, hero. The 16 HTML widgets do NOT need this - they carry
   their own CSS.

   How to use: put the class name in the widget's
   Advanced > CSS Classes field. Nothing else.

   Colours come from the Global Colors, with the correct hex as a
   fallback, so the page follows the Kit on its own.
   ================================================================== */

/* --- eyebrow, the small line above the H1 -------------------------- */
.idl-g-eyebrow,
.idl-g-eyebrow p {
  font-family: Geologica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--e-global-color-6faf197, #6E8F63);
  margin: 0;
}

/* --- H1, once per page --------------------------------------------- */
.idl-g-h1 .elementor-heading-title,
.idl-g-h1 h1 {
  font-family: Geologica, sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: var(--e-global-color-primary, #20362A);
  margin: 0;
}

/* --- H2, the title of every section -------------------------------- */
.idl-g-h2 .elementor-heading-title,
.idl-g-h2 h2,
.idl-g-h2 h3 {
  font-family: Geologica, sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--e-global-color-primary, #20362A);
  margin: 0;
  max-width: 24ch;
}

/* --- sub-heading inside a section ---------------------------------- */
.idl-g-sub .elementor-heading-title,
.idl-g-sub h3,
.idl-g-sub h4 {
  font-family: Geologica, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--e-global-color-primary, #20362A);
  margin: 0;
}

/* --- lead paragraph, under every H2 -------------------------------- */
.idl-g-lead,
.idl-g-lead p {
  font-family: Geologica, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--e-global-color-secondary, #5A5F58);
  margin: 0;
  max-width: 66ch;
}

/* --- the step pill, "Bhma 1" --------------------------------------- */
.idl-g-step,
.idl-g-step p {
  font-family: Geologica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--e-global-color-accent, #4E8C5A);
  margin: 0;
}
.idl-g-step p {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px !important;
  background: #fff;
  border: 1px solid rgba(78, 140, 90, .2);
}

/* --- vertical rhythm inside a section ------------------------------
   The gap between the step pill, the H2, the lead and the widget.
   Elementor's own Gap stays at 0 so these numbers are the only ones
   in play, and they cannot fight each other.                          */
.idl-g-step  { margin-bottom: 20px !important; }
.idl-g-h2    { margin-bottom: 16px !important; }
.idl-g-h1    { margin-bottom: 22px !important; }
.idl-g-eyebrow { margin-bottom: 20px !important; }
.idl-g-lead  { margin-bottom: 44px !important; }
.idl-g-sub   { margin-bottom: 22px !important; }

/* --- the two hero buttons ------------------------------------------
   Put idl-g-btn on the primary and idl-g-btn2 on the secondary.

   WHY !important HERE. Elementor writes its per-element button rules as
   .elementor-17920 .elementor-element.elementor-element-236ad71
   .elementor-button - four classes. No sensible class chain beats that,
   and it emits border-style:none whether you touch the Style tab or not.
   So the properties Elementor controls per element are forced here. That
   is the deal this class makes: you never open the Style tab, and the CSS
   always wins.                                                          */

.elementor-widget.idl-g-btn .elementor-button,
.elementor-widget.idl-g-btn2 .elementor-button {
  font-family: Geologica, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 17px 30px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  border-style: solid !important;
  transition: background .25s cubic-bezier(.16, 1, .3, 1), border-color .25s, color .25s;
}
.elementor-widget.idl-g-btn .elementor-button {
  background: var(--e-global-color-accent, #4E8C5A) !important;
  border-color: var(--e-global-color-accent, #4E8C5A) !important;
  color: #fff !important;
}
.elementor-widget.idl-g-btn .elementor-button:hover {
  background: var(--e-global-color-a7b471f, #3C6F48) !important;
  border-color: var(--e-global-color-a7b471f, #3C6F48) !important;
  color: #fff !important;
}
.elementor-widget.idl-g-btn2 .elementor-button {
  background: transparent !important;
  border-color: rgba(32, 54, 42, .22) !important;
  color: var(--e-global-color-primary, #20362A) !important;
}
.elementor-widget.idl-g-btn2 .elementor-button:hover {
  background: var(--e-global-color-1f1ab16, #F4F7F2) !important;
  border-color: var(--e-global-color-accent, #4E8C5A) !important;
  color: var(--e-global-color-primary, #20362A) !important;
}
.elementor-widget.idl-g-btn .elementor-button:active,
.elementor-widget.idl-g-btn2 .elementor-button:active { transform: translateY(1px); }

/* --- the hero image ------------------------------------------------- */
.elementor-widget.idl-g-heroimg img {
  border-radius: 28px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* --- mobile, at your real breakpoint of 720 ------------------------- */
@media (max-width: 720px) {
  .idl-g-lead, .idl-g-lead p { font-size: 16px; }
  .idl-g-lead { margin-bottom: 30px !important; }
  .elementor-widget.idl-g-heroimg img { aspect-ratio: 16 / 9; }
  .elementor-widget.idl-g-btn .elementor-button,
  .elementor-widget.idl-g-btn2 .elementor-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-widget.idl-g-btn .elementor-button,
  .elementor-widget.idl-g-btn2 .elementor-button { transition: none; }
}

/* --- make a child span the whole width of a Grid container ----------
   When a section container is set to Grid, EVERY direct child takes one
   cell - including the block that holds the heading and the lead. That
   squeezes the title into a third of the width and pushes the cards out
   of line. Put idl-g-full on the heading block and it spans every column
   instead. Works whatever the column count is.                        */
.elementor-widget.idl-g-full,
.e-con.idl-g-full,
.idl-g-full { grid-column: 1 / -1; }

/* the measuring diagram, placed as a real Elementor Image widget so the picture
   is chosen in the media library and no upload path can go stale. It sits in
   the LEFT cell of a two-column grid, the three definitions in the right cell,
   so it needs no bottom margin until the grid stacks at 1080. */
.elementor-widget.idl-g-diagram {
  margin-bottom: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 24px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid rgba(32, 54, 42, .08);
}
.elementor-widget.idl-g-diagram .elementor-widget-container { width: 100%; }
.elementor-widget.idl-g-diagram img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1080px) {
  .elementor-widget.idl-g-diagram { margin-bottom: 16px; height: auto; }
}
@media (max-width: 720px) {
  .elementor-widget.idl-g-diagram { padding: 14px; }
}

/* audit-fix 29/09 phones: small texts 13px, sizes only */
@media (max-width:767px){
.elementor-element-460491a p,.elementor-element-4b15b71 p.msm-cs__rl,.elementor-element-4b15b71 span.msm-cs__tag{font-size:13px !important}
}/* End custom CSS */