.elementor-9 .elementor-element.elementor-element-4a50df6{--display:flex;--min-height:100vh;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-a44580f{width:100%;max-width:100%;text-align:center;}.elementor-9 .elementor-element.elementor-element-a44580f.elementor-element{--align-self:center;--order:-99999 /* order start hack */;}.elementor-9 .elementor-element.elementor-element-a44580f .elementor-heading-title{font-family:"Secular One", Sans-serif;font-size:14vw;font-weight:300;letter-spacing:1rem;-webkit-text-stroke-width:5px;stroke-width:5px;-webkit-text-stroke-color:var( --e-global-color-4b6415d );stroke:var( --e-global-color-4b6415d );color:#6EC1E400;}.elementor-9 .elementor-element.elementor-element-8b025cd{width:100%;max-width:100%;text-align:center;}.elementor-9 .elementor-element.elementor-element-8b025cd.elementor-element{--align-self:center;--order:-99999 /* order start hack */;}.elementor-9 .elementor-element.elementor-element-8b025cd .elementor-heading-title{font-family:"Secular One", Sans-serif;font-size:14vw;font-weight:300;letter-spacing:1rem;-webkit-text-stroke-width:5px;stroke-width:5px;-webkit-text-stroke-color:var( --e-global-color-4357613 );stroke:var( --e-global-color-4357613 );color:#6EC1E400;}.elementor-9 .elementor-element.elementor-element-8fcd9b7{width:100%;max-width:100%;text-align:center;}.elementor-9 .elementor-element.elementor-element-8fcd9b7.elementor-element{--align-self:center;--order:-99999 /* order start hack */;}.elementor-9 .elementor-element.elementor-element-8fcd9b7 .elementor-heading-title{font-family:"Secular One", Sans-serif;font-size:14vw;font-weight:300;letter-spacing:1rem;-webkit-text-stroke-width:5px;stroke-width:5px;-webkit-text-stroke-color:#E4B721;stroke:#E4B721;color:#6EC1E400;}.elementor-9 .elementor-element.elementor-element-289c023{width:100%;max-width:100%;text-align:center;}.elementor-9 .elementor-element.elementor-element-289c023.elementor-element{--align-self:center;--order:-99999 /* order start hack */;}.elementor-9 .elementor-element.elementor-element-289c023 .elementor-heading-title{font-family:"Secular One", Sans-serif;font-size:14vw;font-weight:300;letter-spacing:1rem;-webkit-text-stroke-width:5px;stroke-width:5px;-webkit-text-stroke-color:var( --e-global-color-e5de535 );stroke:var( --e-global-color-e5de535 );color:#6EC1E400;}.elementor-9 .elementor-element.elementor-element-803513a{--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;--z-index:0;}.elementor-9 .elementor-element.elementor-element-803513a:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-803513a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;}.elementor-9 .elementor-element.elementor-element-e60907c > .elementor-widget-container{background-color:#02010100;}.elementor-9 .elementor-element.elementor-element-c1ba2f7 > .elementor-widget-container{background-color:#02010100;}.elementor-9 .elementor-element.elementor-element-205d112 > .elementor-widget-container{background-color:#02010100;}.elementor-9 .elementor-element.elementor-element-acd2114 > .elementor-widget-container{background-color:#02010100;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-9 .elementor-element.elementor-element-a44580f{width:100%;max-width:100%;text-align:center;}.elementor-9 .elementor-element.elementor-element-a44580f > .elementor-widget-container{padding:10vw 0vw 0vw 0vw;}.elementor-9 .elementor-element.elementor-element-a44580f.elementor-element{--order:-99999 /* order start hack */;}.elementor-9 .elementor-element.elementor-element-a44580f .elementor-heading-title{font-size:11vw;line-height:0px;}.elementor-9 .elementor-element.elementor-element-8b025cd{width:100%;max-width:100%;text-align:center;}.elementor-9 .elementor-element.elementor-element-8b025cd > .elementor-widget-container{padding:10vw 0vw 0vw 0vw;}.elementor-9 .elementor-element.elementor-element-8b025cd.elementor-element{--order:-99999 /* order start hack */;}.elementor-9 .elementor-element.elementor-element-8b025cd .elementor-heading-title{font-size:11vw;line-height:0px;}.elementor-9 .elementor-element.elementor-element-8fcd9b7{width:100%;max-width:100%;text-align:center;}.elementor-9 .elementor-element.elementor-element-8fcd9b7 > .elementor-widget-container{padding:10vw 0vw 0vw 0vw;}.elementor-9 .elementor-element.elementor-element-8fcd9b7.elementor-element{--order:-99999 /* order start hack */;}.elementor-9 .elementor-element.elementor-element-8fcd9b7 .elementor-heading-title{font-size:11vw;}.elementor-9 .elementor-element.elementor-element-289c023{width:100%;max-width:100%;text-align:center;}.elementor-9 .elementor-element.elementor-element-289c023 > .elementor-widget-container{padding:10vw 0vw 0vw 0vw;}.elementor-9 .elementor-element.elementor-element-289c023.elementor-element{--order:-99999 /* order start hack */;}.elementor-9 .elementor-element.elementor-element-289c023 .elementor-heading-title{font-size:11vw;}}@media(max-width:767px){.elementor-9 .elementor-element.elementor-element-a44580f > .elementor-widget-container{padding:010vw 0vw 0vw 0vw;}.elementor-9 .elementor-element.elementor-element-a44580f .elementor-heading-title{font-size:8vw;}.elementor-9 .elementor-element.elementor-element-8b025cd > .elementor-widget-container{padding:10vw 0vw 0vw 0vw;}.elementor-9 .elementor-element.elementor-element-8b025cd .elementor-heading-title{font-size:8vw;}.elementor-9 .elementor-element.elementor-element-8fcd9b7 > .elementor-widget-container{padding:10vw 0vw 0vw 0vw;}.elementor-9 .elementor-element.elementor-element-8fcd9b7 .elementor-heading-title{font-size:8vw;}.elementor-9 .elementor-element.elementor-element-289c023 > .elementor-widget-container{padding:010vw 0vw 0vw 0vw;}.elementor-9 .elementor-element.elementor-element-289c023 .elementor-heading-title{font-size:8vw;}}/* Start custom CSS for html, class: .elementor-element-a68e5ae */@media (max-width: 1024px) {
  #logo {
    display: none !important; /* hide desktop logo */
  }
  #mobile-logo {
    display: flex !important; /* ensure mobile logo is visible */
  }
}



#logo {
  height: 100vh;
  width: auto;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: relative;
  z-index: 1;
}

#logo svg {
  height: 100%;
  width: auto;
  max-width: 100vw;
  transform-origin: top center;
  overflow: visible;
  filter: drop-shadow(0 0 50px rgba(0, 0, 0, 0.5)); /* for hardcourt blue */

}


/* OUTLINE PATHS ONLY (Not the filled shapes!) */
#GrasscourtOutline,
#HardcourtOutline,
#ClaycourtOutline,
#BallOutline {
  stroke: #ffffff;
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 1077;
  stroke-dashoffset: 1077;
  transition: stroke 0.3s ease, stroke-dashoffset 1s ease, filter 0.3s ease;
  pointer-events: all;
}

/* HOVER EFFECTS FOR OUTLINES */
#GrasscourtOutline:hover {
  stroke: #004d2e;
  filter: drop-shadow(0 0 8px #000);
  animation: drawOutline 0.5s ease-out forwards;
  cursor: pointer
}


#ClaycourtOutline:hover {
  stroke: #993312;
  filter: drop-shadow(0 0 8px #000);
  animation: drawOutline 0.5s ease-out forwards;
  cursor: pointer
}

#HardcourtOutline:hover {
  stroke: #1a254d;
  filter: drop-shadow(0 0 8px #000);
  animation: drawOutline 0.5s ease-out forwards;
  cursor: pointer
}

#BallOutline {
  stroke: #ffffff;
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 1077;
  stroke-dashoffset: 1077;
  transition: stroke 0.3s ease, stroke-dashoffset 1s ease, filter 0.3s ease;
  pointer-events: none; /* initially disabled */
}

/* Enable hover only when active-hover is present */
#BallOutline.active-hover:hover {
  stroke: #E4B721;
  filter: drop-shadow(0 0 8px #000);
  animation: drawOutline 0.5s ease-out forwards;
  cursor: pointer;
}

/* FLY-IN ANIMATION */
#Ball {
  transform: translateX(100vw);
  opacity: 0;
  animation: flyIn 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
}

/* C SHAPE – FLY-IN AND SINGLE PULSE */
#CShape {
  transform: translateX(100vw);
  opacity: 0;
  animation: 
    flyIn 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s  forwards,
    pulse 1s ease-in-out 2s forwards;
  transform-origin: center;
}

/* T SHAPE – PULSE ONCE AFTER BALL LANDS */
#TOnly {
  animation: pulse 1s ease-in-out 2s forwards;
  transform-origin: center;
}

/* OUTLINE DRAW KEYFRAMES */
@keyframes drawOutline {
  from {
    stroke-dashoffset: 1077;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* FLY-IN FROM RIGHT */
@keyframes flyIn {
  from {
    transform: translateX(100vw);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* SUBTLE GLOW PULSE */
@keyframes pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
  50% {
    transform: scale(1.03);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4a50df6 */.elementor-9 .elementor-element.elementor-element-4a50df6 {
  position: relative;
}

/* Each slice stays in its vertical slot */
.slice1, .slice2, .slice3, .slice4 {
  position: absolute;
  width: 100%;
  height: 25vh;
  overflow: hidden; /* ✅ hide overflow inside the slice */
  pointer-events: none;
  z-index: 0;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* Positioning each slice */
.slice1 { top: 0vh; }
.slice2 { top: 25vh; }
.slice3 { top: 50vh; }
.slice4 { top: 75vh; }

.slice1 .elementor-heading-title,
.slice2 .elementor-heading-title,
.slice3 .elementor-heading-title,
.slice4 .elementor-heading-title {
  font-size: clamp(8vw, 11vw, 13vw) !important;
  white-space: nowrap;
  line-height: 1;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e60907c *//* Hide HTML widgets used only for scripts */
.zero-space {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  display: block !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c1ba2f7 *//* Hide HTML widgets used only for scripts */
.zero-space {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  display: block !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-205d112 *//* Hide HTML widgets used only for scripts */
.zero-space {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  display: block !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-803513a *//* Hide HTML widgets used only for scripts */
.zero-space {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  display: block !important;
}

/* somewhere in your Custom CSS */
..elementor-9 .elementor-element.elementor-element-803513a .elementor-heading-title {
  /* make fades smooth */
  transition: opacity 1s ease-in-out;
}



html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

  /* Fade and “dim” the headings by default */
  .elementor-heading-title {
    opacity: 0.6;
    transition: 
      opacity 0.3s ease-in-out,
      color   0.3s ease-in-out;
  }

  /* When you’ve programmatically highlighted one, boost it */
  .elementor-heading-title.highlighted {
    opacity: 1;
  }/* End custom CSS */