.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* hidden state: no height, no padding, no margin */
.main-container-1,
.main-container-2,
.main-container-3,
.main-container-4 {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  transition: max-height 360ms cubic-bezier(.2,.9,.2,1),
              opacity 260ms ease,
              padding 300ms cubic-bezier(.2,.9,.2,1),
              margin 300ms cubic-bezier(.2,.9,.2,1);
  will-change: max-height, opacity, padding, margin;
}

/* visible state: restores padding/margin and allows height */
.main-container-1.show,
.main-container-2.show,
.main-container-3.show,
.main-container-4.show {
  opacity: 1;
  max-height: 3500px;      /* adjust if your content is taller */
  padding-top: 12px;       /* same as inner padding from previous example */
  padding-bottom: 12px;
  margin-top: 16px;
}

.my-card1,
.my-card2,
.my-card3,
.my-card4 {
  overflow: hidden;
  background-size: 100% !important;
  background-position: center !important;
  transition: 
    background-size 0.6s ease,
    height 0.6s cubic-bezier(.2,.9,.2,1),
    max-height 0.6s cubic-bezier(.2,.9,.2,1),
    padding 0.6s cubic-bezier(.2,.9,.2,1),
    margin 0.6s cubic-bezier(.2,.9,.2,1);
}

/* hover background zoom */
.my-card1:hover,
.my-card2:hover,
.my-card3:hover,
.my-card4:hover {
  background-size: 130% !important; /* zoom level */
}


/* -------------------------
   Cards parent (wrapper)
   ------------------------- */
.cards-row {
  position: relative; /* parent of the four cards */
}

/* -------------------------
   Full-width containers (hidden by default)
   Collapses without leaving gap (padding/margin animated)
   ------------------------- */
.full-width-1,
.full-width-2,
.full-width-3,
.full-width-4 {
  width: 100%;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  transition: max-height 420ms cubic-bezier(.2,.9,.2,1),
              opacity 280ms ease,
              padding 320ms cubic-bezier(.2,.9,.2,1),
              margin 320ms cubic-bezier(.2,.9,.2,1);
  will-change: max-height, opacity, padding, margin;
}

/* visible state (JS toggles .show) */
.full-width-1.show,
.full-width-2.show,
.full-width-3.show,
.full-width-4.show {
  opacity: 1;
  max-height: 4600px;    /* large enough for content — adjust if needed */
  padding-top: 28px;
  padding-bottom: 28px;
  margin-top: 24px;      /* small gap between cards row and revealed area */
}

/* optional styling for the inner content area */
.full-width-1 > .inner,
.full-width-2 > .inner,
.full-width-3 > .inner,
.full-width-4 > .inner {
  margin: 0 auto;
  max-width: 1200px; /* content width */
  box-sizing: border-box;
}

/* -------------------------
   Keep compatibility with background zoom + grow-on-hover rules
   Make sure we include both transitions so nothing gets overridden.
   ------------------------- */
.my-card1,
.my-card2,
.my-card3,
.my-card4 {
  overflow: hidden;
  background-size: 100% !important;
  background-position: center !important;
  transition:
    background-size 0.6s ease,
    padding 0.6s cubic-bezier(.2,.9,.2,1),
    margin 0.6s cubic-bezier(.2,.9,.2,1),
    max-height 0.6s cubic-bezier(.2,.9,.2,1);
}

/* background zoom */
.my-card1:hover,
.my-card2:hover,
.my-card3:hover,
.my-card4:hover {
  background-size: 130% !important;
}

/* example: previous grow-on-hover behavior (no-content-scaling approach)
   adjust values if you use different growth technique (padding/margin or scaleY).
   If you already have custom styling for growth, keep that existing code.
*/
.my-card1:hover, .my-card2:hover, .my-card3:hover, .my-card4:hover {
  padding-top: 80px;   /* keeps bottom in place; adjust to taste */
  margin-top: -80px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
  z-index: 20;
}

/* ensure the buttons (which appear on hover) are above the background */
.my-card1 .hover-button1,
.my-card2 .hover-button2,
.my-card3 .hover-button3,
.my-card4 .hover-button4 {
  position: absolute;
  bottom: 18px;
  left: 20px;
  z-index: 50;
}

/* small mobile safety: reduce card growth on small screens */
@media (max-width: 767px) {
  .my-card1:hover, .my-card2:hover, .my-card3:hover, .my-card4:hover {
    padding-top: 36px;
    margin-top: -36px;
  }
}
/* ===== Make .selected animate the same as hover ===== */

/* Ensure padding/margin/box-shadow transitions apply when .selected is added/removed */
.my-card1.selected,
.my-card2.selected,
.my-card3.selected,
.my-card4.selected {
  /* same visual final values you already use */
  padding-top: 80px;
  margin-top: -80px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.28);
  z-index: 40;

  /* IMPORTANT: explicitly declare the same transitions so change is animated */
  transition: 
    background-size 0.6s ease,
    padding 0.6s cubic-bezier(.2,.9,.2,1),
    margin 0.6s cubic-bezier(.2,.9,.2,1),
    box-shadow 0.6s cubic-bezier(.2,.9,.2,1);
  will-change: padding, margin, box-shadow, background-size;
}

/* Also explicitly define transitions on the base card .elementor-kit-6 to be safe */
.my-card1,
.my-card2,
.my-card3,
.my-card4 {
  transition: 
    background-size 0.6s ease,
    padding 0.6s cubic-bezier(.2,.9,.2,1),
    margin 0.6s cubic-bezier(.2,.9,.2,1),
    box-shadow 0.6s cubic-bezier(.2,.9,.2,1);
  will-change: background-size, padding, margin, box-shadow;
}

/* Optional: make sure hover still works when a card is not selected */
.my-card1:not(.selected):hover,
.my-card2:not(.selected):hover,
.my-card3:not(.selected):hover,
.my-card4:not(.selected):hover {
  /* keep your hover values (no change) */
  padding-top: 80px;
  margin-top: -80px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.25);
}/* End custom CSS */