.elementor-kit-5{--e-global-color-primary:#05354C;--e-global-color-secondary:#1B6E6C;--e-global-color-text:#273437;--e-global-color-accent:#D4AF37;--e-global-color-9a46fa5:#F6F6F6;--e-global-color-3bcb9c8:#D4D4D4;--e-global-color-529f83b:#33B0AC;--e-global-color-387a628:#947922;--e-global-typography-primary-font-family:"Carlito";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Carlito";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Helvetica";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Helvetica";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#2C4A96;color:#E7E6E6;border-style:none;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:#6A94D6;color:#0E0D0D;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:#1B6E6C;}.elementor-kit-5 h1{color:#05354C;font-size:48px;font-weight:700;}.elementor-kit-5 h2{color:var( --e-global-color-secondary );font-size:36px;font-weight:600;}.elementor-kit-5 h3{color:var( --e-global-color-text );}.elementor-kit-5 h4{color:var( --e-global-color-text );font-size:24px;font-weight:500;}.elementor-kit-5 h5{color:var( --e-global-color-text );font-size:24px;font-weight:500;}.elementor-kit-5 h6{color:var( --e-global-color-text );font-family:"Carlito", Sans-serif;font-size:20px;font-weight:500;}.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);}@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 *//* Shared easing */
:root{
  --pf-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Text block (icon + title + desc wrapper) moves */
.pf-card_text{
  transform: translateY(0);
  transition: transform 1.1s var(--pf-ease);
  will-change: transform;
}

/* Description: hidden + slightly lowered so it "travels" in/out */
.pf-card_desc{
  opacity: 0;
  max-height: 0;
  overflow: hidden;

  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0 !important;

  transform: translateY(10px);

  transition:
    max-height 1.25s var(--pf-ease),
    opacity .8s ease,
    transform .8s var(--pf-ease),
    margin-top .8s var(--pf-ease);

  will-change: max-height, opacity, transform;
}

/* CTA: grows on hover AND eases back */
.pf-card_cta{
  transform: scale(1);
  transform-origin: left center;
  transition: transform .65s var(--pf-ease);
  will-change: transform;
}

/* Hover */
.pf-card:hover .pf-card_text{
  transform: translateY(-10px); /* your tuned value */
}

.pf-card:hover .pf-card_desc{
  opacity: 1;
  max-height: 220px;          /* visible height before scrolling */
  transform: translateY(0);
  margin-top: 10px !important;

  overflow-y: auto;           /* <-- this enables scrolling */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;         /* space so text doesn't sit under scrollbar */
}

.pf-card:hover .pf-card_cta{
  transform: scale(1.06);
}

/* Mobile: always expanded (no hover) */
@media (max-width: 767px){
  .pf-card_text,
  .pf-card_cta{
    transform: none !important;
  }

  .pf-card_desc{
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    margin-top: 10px !important;
    transition: none !important;
  }
}

/* trying to fix bottom card not displaying on mobile */
@media (max-width: 767px){
  .pf-grid{
    grid-template-rows: unset !important; /* removes the fixed “Rows: 1” behavior */
    grid-auto-rows: auto !important;      /* creates as many rows as needed */
    overflow: visible !important;
    padding-bottom: 120px;                /* extra space so next section can’t cover last card */
  }
}

/* Make the CTA ("Explore" + icon) white when the card is hovered */
.pf-card:hover .pf-card_cta,
.pf-card:hover .pf-card_cta a,
.pf-card:hover .pf-card_cta span{
  color: #fff !important;
}

/* If the icon is an SVG */
.pf-card:hover .pf-card_cta svg,
.pf-card:hover .pf-card_cta svg *{
  fill: #fff !important;
  stroke: #fff !important;
}

/* Slanted left edge instead of circular */
.teal-slab{
  border-radius: 0 !important;
  overflow: hidden; /* keeps the cut clean */
  -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
          clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
}

/* Gold slab: mirrored slant (top shorter, bottom longer) */
.gold-slab{
  border-radius: 0 !important;
  overflow: hidden; /* keeps the cut clean */

  -webkit-clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
}

/* Optional: tweak slant for smaller screens (less aggressive) */
@media (max-width: 1024px){
  .gold-slab{
    -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
  }
}

@media (max-width: 767px){
  .gold-slab{
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}/* End custom CSS */