.elementor-kit-9{--e-global-color-primary:#151515;--e-global-color-secondary:#145AAD;--e-global-color-text:#201F1F;--e-global-color-accent:#3AB82D;--e-global-color-fcc4b6f:#F1F7F0;--e-global-color-59e70aa:#FFFFFF;--e-global-typography-primary-font-family:"Akshar";--e-global-typography-primary-font-size:18px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.2px;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-secondary-font-family:"Akshar";--e-global-typography-secondary-font-size:16px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:0px;--e-global-typography-text-font-family:"Akshar";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:0px;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Akshar";--e-global-typography-accent-font-weight:600;background-color:#FFF9EE;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 a{color:var( --e-global-color-accent );}.elementor-kit-9 h2{font-family:"Euclid Circular A", Sans-serif;font-weight:600;}.elementor-kit-9 h4{font-family:"Euclid Circular A", Sans-serif;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1200px){.elementor-kit-9 h2{font-size:26px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-9 h2{font-size:22px;}.elementor-kit-9 h4{font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Layout for the two panels (optional; remove if you don't want side-by-side) */
.reveal-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Panel base */
.reveal-panel {
  position: relative;               /* anchor for absolute children if you add any later */
  border: 1px solid #e5e7eb;        /* light border */
  border-radius: 0px;
  padding: 16px 18px;
  cursor: pointer;
  overflow: hidden;                 /* hides the body when collapsed */
  background: #fff;
  transition: box-shadow 0.2s ease;
}
.reveal-panel:hover { box-shadow: 0 6px 20px rgba(0,0,0,.06); }

/* Title stays visible always */
.reveal-panel .rp-title {
  margin: 0;
  line-height: 5;
}

/* Body is hidden when collapsed */
.reveal-panel .rp-body {
  max-height: 0;                    /* collapse height */
  overflow: hidden;
  opacity: 0;                       /* fade hidden */
  transform: translateY(-0.25rem);  /* slight slide-up hidden state */
  transition:
    max-height 0.5s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
  will-change: max-height, opacity, transform;
  margin-top: 10px;                 /* space below title (reveals when open) */
}

/* Expanded state */
.reveal-panel.active .rp-body {
  max-height: 1000px;               /* large enough for your longest text */
  opacity: 1;
  transform: translateY(0);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .reveal-panel .rp-body { transition: none; }
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
  .reveal-group { grid-template-columns: 1fr; }
}
/* prevent equal-height stretching from parent (grid or flex) */
.reveal-panel { 
  align-self: flex-start;  /* works for both flex & grid parents */
}

/* if you used the optional .reveal-group wrapper */
.reveal-group {
  align-items: flex-start; /* don't stretch children to same height */
}

/* (optional) safety: never force a fixed height on panels */
.reveal-panel { height: auto; min-height: 0; }
/* 1) Make sure title/body are in normal flow */
.reveal-panel .rp-title,
.reveal-panel .rp-body,
.reveal-panel .rp-body * {
  position: static;          /* undo any absolute positioning */
  white-space: normal;       /* allow wrapping */
  flex: none;                /* don't let flex squash text */
}

/* 2) Keep title & arrow from overlapping (if you used the CSS arrow) */
.reveal-panel .rp-title { 
  padding-right: 28px;       /* space for the arrow pseudo-element */
}

/* If you used an Icon widget as the arrow: */
.reveal-panel .rp-titlebar { display: flex; align-items: center; gap: .5rem; }
.reveal-panel .rp-titlebar .rp-title { flex: 1 1 auto; min-width: 0; }
.reveal-panel .rp-titlebar .rp-arrow { flex: 0 0 auto; }

/* 3) Ensure body flows normally and has spacing */
.reveal-panel .rp-body {
  display: block;            /* not flex */
  line-height: 1.5;
}
.reveal-panel .rp-body > :where(p, ul, ol) { margin: 0 0 .75rem; }
.reveal-panel .rp-body > :last-child { margin-bottom: 0; }/* End custom CSS */