/* Target the active list item and its link */
.active a {
    color: var(--theme-color) ;
   
    position: relative;
}


/* Hover effect for consistency */
li a:hover {
    color: var(--theme-color);
    transition: all 0.3s ease;
}
.shape2 {
  /* Box Styling */
  display: flex;
  flex-direction: column;   /* Stacks GYM & PLAY vertically */
  justify-content: center;  /* Centers vertically */
  align-items: center;      /* Centers horizontally */
  
  /* Dimensions & Shape */
  width: 250px;             /* Adjust based on your needs */
  height: 250px;            /* Keeps it a square like the image */
  background-color: #ec4899; /* The pink color from your image */
  border-radius: 20px;      /* Rounded corners */
  
  /* Text Styling */
  color: #4b2c20;           /* Dark brown color from your image */
  text-align: center;
}
.shape2 h2 {
  margin: 0;                /* Removes default browser spacing */
  /*font-family: sans-serif;*/
  font-weight: 800;
  line-height: 1.1;         /* Keeps the lines close together */
  font-size: 2.5rem;        /* Adjust size as needed */
}
.shape2 {
  /* Layout: Centers everything inside the box */
  display: flex;
  flex-direction: column;    /* Stacks Icon on top of Text */
  justify-content: center;   /* Vertical center */
  align-items: center;       /* Horizontal center */
  gap: 10px;                 /* Space between icon and text */

  /* Box Design */
  width: 280px;              /* Adjust size to fit icon + text */
  height: 280px; 
  background-color: #ec4899;  /* Pink background */
  border-radius: 30px;       /* Smooth rounded corners */
  padding: 20px;
  box-sizing: border-box;    /* Ensures padding doesn't break the size */
}

.shape2 img {
  width: 104px;               /* Adjust icon size */
  height: auto;
  display: block;
}

.btn-wrapper {
    margin: 5px 0px; /* Space below the button */
  
    text-align: center;   /* Centers the button if it's display: inline-block */
}

.btn-wrapper a{
    padding: 15px 25px!important;
    text-decoration: none;
}


/* Targets the link inside the active list item */
li.active a {
    color:var(--theme-color)!important; /* Fun Orange color */
    font-weight: 600; /* Makes it slightly bolder */
}








.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list,.slick-slider{position:relative;display:block}.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-list,.slick-slider .slick-track{transform:translateZ(0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:""}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}