.elementor-kit-9{--e-global-color-primary:#008CAE;--e-global-color-secondary:#282828;--e-global-color-text:#555555;--e-global-color-accent:#C70606;--e-global-color-35c909c:#282828;--e-global-color-549c241:#A09F9F;--e-global-color-2692e67:#C70606;--e-global-color-d14b35f:#DAA520;--e-global-color-8fdaded:#282828B5;--e-global-color-b1bf0d5:#FFFFFFB5;--e-global-color-5e8a482:#DAA520CC;--e-global-color-d74cf8e:#C70606BF;--e-global-color-45e7904:#0089AAD4;--e-global-color-5984505:#A09F9FB8;--e-global-color-38769db:#28282836;--e-global-typography-primary-font-family:"Dosis";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Dosis";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Dosis";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Dosis";--e-global-typography-accent-font-weight:500;--e-global-typography-c9c8503-font-family:"Convergence";--e-global-typography-c9c8503-font-size:19px;--e-global-typography-c9c8503-font-weight:400;--e-global-typography-c9c8503-line-height:30px;--e-global-typography-0725fdb-font-family:"Convergence";--e-global-typography-0725fdb-font-size:32px;--e-global-typography-0725fdb-font-weight:700;--e-global-typography-0725fdb-line-height:52px;--e-global-typography-161ee49-font-family:"Cantata One";--e-global-typography-161ee49-font-weight:700;--e-global-typography-d411d80-font-family:"Cantata One";--e-global-typography-d411d80-font-size:14px;--e-global-typography-d411d80-font-weight:700;--e-global-typography-d411d80-text-transform:uppercase;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.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 *//* Applies to all uploaded SVG icons with this class */
.custom-icon {
  width: 50px; /* adjust size */
  height: auto;
  filter: drop-shadow(1px 1px 2px #DAA520CC);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}

.custom-icon:hover {
  filter: drop-shadow(0 0 8px #DAA520CC) drop-shadow(0 0 12px #DAA520CC);
}

/* Container holds both images; required for absolute positioning on desktop */
.hero-images {
  position: relative;
  min-height: 600px;           /* reserve space so images don’t overlap content */
}

/* Base image styling (desktop) */
.hero-img {
  width: 400px;
  height: 600px;
  object-fit: cover;           /* clean cropping without distortion */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;                  /* keep images above background */
}

/* Second image variant: offset down & pinned to the right */
.hero-img.hero-img--right {
  top: 140px;                  /* vertical offset */
  right: 0;                    /* pin to right side of container */
  left: auto;                  /* cancel base left:0 */
  height: 550px;               /* matches your original second image height */
  z-index: 2;                  /* sit above the first if they overlap */
}

/* Responsive: stack images and make them fluid below 991px */
@media (max-width: 991px) {
  .hero-images {
    min-height: auto;
    display: grid;             /* simple vertical stack */
    gap: 16px;
  }

  .hero-img,
  .hero-img.hero-img--right {
    position: relative;        /* participate in normal document flow */
    width: 100%;
    height: 300px;             /* consistent mobile height */
    top: auto;
    left: auto;
    right: auto;
  }
}


/* Rotated heading with animated stroke and fill */
.data-text {
    position: absolute;
    left: -240px !important;
    transform: rotate(270deg); /* use transform for wider browser support */
    top: 290px !important;
    z-index: 10;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .data-text {
        position: relative;
        top: unset;
        left: unset;
        transform: rotate(0);
    }
}

/* Heading text styling */
.data-text {
    text-transform: uppercase;
    color: transparent !important;
    -webkit-text-stroke: 1px #DAA520; /* goldenrod outline */
    position: relative; /* required for pseudo-element positioning */
    display: inline-block;
    line-height: 1; /* keeps pseudo overlay aligned */
}

/* Animated fill effect */
.data-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: #DAA520; /* goldenrod fill */
    overflow: hidden;
    width: 100%;
    transition: all 2s ease-out 0s;
    animation: about-text 2s ease-in-out 1s forwards infinite alternate-reverse;
}

/* Keyframes for animated fill */
@keyframes about-text {
    0% { width: 0; }
    100% { width: 100%; }
}/* End custom CSS */