.pi-container {
    margin: 0; /* Remove margin from inner container */
    max-width: none; /* Remove max-width from inner container */
  }
  
  /* Rich Text Section for Expand Cards */
  .phi-agency-statement_wrapper-expand-card-rich-text {
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 40px;
  }
  
  .phi-agency-statement_wrapper-expand-card-rich-text h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    color: #000000;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
  }
  
  .pi-dark-mode .phi-agency-statement_wrapper-expand-card-rich-text h1 {
    color: #ffffff;
  }
  
  .phi-agency-statement_wrapper-expand-card-rich-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333333;
    margin: 0;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .pi-dark-mode .phi-agency-statement_wrapper-expand-card-rich-text p {
    color: #E0E0E0;
  }
  
  @media (min-width: 768px) {
    .phi-agency-statement_wrapper-expand-card-rich-text {
     
      margin-bottom: 60px;
    }
    
    .phi-agency-statement_wrapper-expand-card-rich-text h1 {
      font-size: 38px;
    }
    
    .phi-agency-statement_wrapper-expand-card-rich-text p {
      font-size: 18px;
      line-height: 1.7;
    }
  }
  
  @media (min-width: 1024px) {
    .phi-agency-statement_wrapper-expand-card-rich-text {
      padding: 0px 0px;
    }
    
    .phi-agency-statement_wrapper-expand-card-rich-text h1 {
      font-size: 44px;
      margin-bottom: 20px;
    }
    
    .phi-agency-statement_wrapper-expand-card-rich-text p {
      font-size: 19px;
      line-height: 1.75;
      max-width: 900px;
    }
  }
  
  
  
  
  /* Mobile-first base styles */
  .container-content_wrapper { 
      display: flex;
      width: 100%;
      height: 280px;
      gap: 4px; 
      align-items: stretch;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding-top: 0.3rem;
  }

  
  
  .container-content_wrapper::-webkit-scrollbar {
      display: none;
  }
  
  .pi-container {
      display: grid;
      grid-template-columns: 1fr;
      gap: .5rem;
  }
  
  /* Base expand card styles - Mobile first */
  .phi--expand-card {
      position: relative;
      cursor: pointer;
      border-radius: 29px;
      overflow: hidden;
      transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
      flex-shrink: 0;
      min-width: 50px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }
  
  /* Card variants - Only background colors */
  .phi--expand-card--strategic {
      background: linear-gradient(145deg, #4dd0c7 0%, #36a69c 100%);
      flex-basis: 200px;
  }
  
  .phi--expand-card--advertising {
      background: #1a4d42;
  }
  
  .phi--expand-card--audience {
      background: linear-gradient(180deg, #00e5a0 0%, #00cc8f 100%);
  }
  
  .phi--expand-card--conversion {
    background: linear-gradient(145deg, #4dd0c7 0%, #85fff5 100%);
      backdrop-filter: blur(25px);
      border: 1px solid rgba(255,255,255,0.35); 
      flex-basis: 180px;
      box-shadow: 
          0 8px 32px rgba(0, 0, 0, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  
  .phi--expand-card--automation {
      background: #1a4d42;
  }
  
  .phi--expand-card--funnel {
      background: linear-gradient(180deg, #00e5a0 0%, #00cc8f 100%);
  }
  
  /* Active state - Mobile first */
  .phi--expand-card.active {
      flex-grow: 1;
  }
  
  .phi--expand-card:not(.active) {
      flex-basis: 15%;
  }
  
  /* Card elements - Mobile first */
  .phi--expand-card__bg-image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: none;
  }
  
  .phi--expand-card.active .phi--expand-card__bg-image {
      display: block;
  }
  
  .phi--expand-card__bg-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
  }
  
  .phi--expand-card__number {
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: #000000;
      transition: all 0.5s ease;
      z-index: 2;
  }
  
  .phi--expand-card.active .phi--expand-card__number {
      right: 9px;
      border: none;
      backdrop-filter: none;
      position: absolute;
      width: 34px;
      height: 34px;
      left: 17px;
      bottom: 10px;
      font-family: Poppins;
      font-weight: 500;
      font-size: 21px;
      line-height: 131%;
      letter-spacing: 0;
      text-align: center;
  }
  
  
  
  .phi--expand-card__content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 16px;
      display: flex;
      flex-direction: column;
      z-index: 2;
  }
  
  /* Collapsed and expanded states */
  .phi--expand-card__collapsed {
      opacity: 1;
      transition: opacity 0.4s ease;
  }
  
  .phi--expand-card__expanded {
      opacity: 0;
      transform: translateX(-20px);
      transition: all 0.5s ease;
  }
  
  .phi--expand-card.active .phi--expand-card__collapsed {
      opacity: 0;
  }
  
  .phi--expand-card.active .phi--expand-card__expanded {
      opacity: 1;
      transform: translateX(0);
      transition-delay: 0.2s;
  }
  
  /* Vertical label for collapsed state - Mobile first */
  .phi--expand-card__vertical-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-52%, -61%) rotate(180deg);
    font-size: 11px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.5px;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}


  
  /* Tags - Mobile first */
  .phi--expand-card__tags {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 0.8rem;
      row-gap: 0.5rem;
      margin-bottom: 12px;
      position: relative;
  }
  
  
  .phi--tag {
     
      backdrop-filter: blur(20px);
      border: 1px solid #fff;
      border-radius: 10px;
      padding: 4px 8px;
      color: white;
      font-size: 8px;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
      position: relative;
  }
  
  .phi--tag:nth-child(even)::after {
      content: '';
      position: absolute;
      top: 53%;
      left: -8px;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
      z-index: 10;
      box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
  }
  
  /* Title and description - Mobile first */
  .phi--expand-card__title {
      color: white;
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -0.5px;
      line-height: 104%;
  }
  
  .phi--expand-card__description {
      color: rgba(255, 255, 255, 0.9);
      font-size: 10px;
      line-height: 1.3;
      font-weight: 500;
      margin-bottom: auto;
      letter-spacing: 0;
  }
  
  /* Button - Mobile first */
  .phi--expand-card__button {
      margin-top: auto;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 18px;
      padding: 8px 14px;
      color: rgba(45, 90, 79, 0.9);
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
      display: flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      box-shadow: 
          0 4px 16px rgba(0, 0, 0, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.3);
      position: relative;
      overflow: hidden;
  }
  
  .phi--expand-card__button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s ease;
  }
  
  
  @media screen and (min-width:750px) {
  
    .phi--expand-card.active .phi--expand-card__number {
      right: 20px;
      top: auto;
      border: none;
      backdrop-filter: none;
      position: absolute;
      width: 67px;
      height: 67px;
      left: 0;
      bottom: 0px;
      font-family: Poppins;
      font-weight: 500;
      font-size: 28px;
      line-height: 131%;
      letter-spacing: 0;
      text-align: center;
  }
  
  
    
  }
  
  
  
  /* Special styling for conversion card */
  
  
  
  
  
  
  
  
  
  /* Number positioning for different card types */
  .phi--expand-card--conversion .phi--expand-card__number {
      bottom: 0px;
   
  }
  
  .phi--expand-card--advertising .phi--expand-card__number,
  .phi--expand-card--audience .phi--expand-card__number,
  .phi--expand-card--automation .phi--expand-card__number,
  .phi--expand-card--funnel .phi--expand-card__number {
      right: 20px;
  
  }
  
  /* Special mobile styling for conversion card */
  .phi--expand-card--conversion.active .phi--expand-card__content {
      background: #FFFFFF52;
      border-radius: 20px;
      margin: 1rem;
  }
  
  
  
  /* Desktop styles - Only min-width: 750px */
  @media (min-width: 750px) {
      .container-content_wrapper { 
          height: 580px;
          gap: 6px;
          overflow-x: visible;
      }
      
      .pi-container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: .5rem;
      }
      
      .phi--expand-card {
          border-radius: 68px;
          flex-basis: 75px;
          min-width: 75px;
      }
      
      .phi--expand-card--strategic {
          flex-basis: 340px;
      }
      
      .phi--expand-card--conversion {
          flex-basis: 300px;
      }
      
      .phi--expand-card.active {
          flex-basis: 66%;
      }
      
      .phi--expand-card:not(.active) {
          flex-basis: 16%;
      }
  
      .phi--expand-card__number {
      position: absolute;
      transform: translateY(-50%);
      width: 67px;
      height: 67px;
      right: 20px;
      bottom: 0px;
      font-family: Poppins;
      font-weight: 500;
      font-size: 28px;
      line-height: 131%;
      letter-spacing: 0;
      text-align: center;
  }
  
  
  
      
      .phi--expand-card.active .phi--expand-card__number {
        font-size: 28px;
      }
  
      .phi--expand-card.active .phi--expand-card__number {
       left: 53px;
       right: auto;
      }
      
      .phi--expand-card__content {
          padding: 18px;
          padding-top: 47px;
      }
      
  .phi--expand-card__vertical-label {
      font-family: Poppins;
      font-weight: 500;
      font-size: 26px;
      line-height: 129%;
      letter-spacing: 0;
      text-align: center;
      position: absolute;
      top: 47%;
  }
  
  
      
      .phi--expand-card__tags {
          column-gap: 1.4rem;
          margin-bottom: 20px;
      }
      
      .phi--tag {
      padding: 3px 15px;
      font-size: 12px;
      border-radius: 16px;
  }
  
      
      .phi--tag:nth-child(even)::after {
          left: -17px;
          width: 16px;
          height: 16px;
      }
      
      .phi--expand-card__title {
      margin-bottom: 10px;
      font-family: Poppins;
      font-weight: 500;
      font-size: 40px;
      line-height: 104%;
      margin-top: 5rem;
      letter-spacing: 0;
  }
  
  
  .phi--expand-card__description {
      font-family: Poppins;
      font-weight: 500;
      font-size: 14px;
      line-height: 104%;
      letter-spacing: 0;
  }
  
      
      .phi--expand-card__button {
          padding: 12px 20px;
          font-size: 13px;
          border-radius: 24px;
          gap: 8px;
      }
      
      .phi--expand-card--conversion.active .phi--expand-card__content {
      background: #FFFFFF52;
      opacity: 1;
      margin: 2rem;
      border-radius: 66px;
  }
  
  }
  
  
@media screen and (max-width: 750px) {

.phi--expand-card__number {
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #000000;
    transition: all 0.5s ease;
    z-index: 2;
    position: absolute;
    bottom: 8px;
    width: 40px;
    height: 39px;
    /* Center horizontally */
    left: 50%;
    transform: translateX(-50%);
    right: auto;
}
  
  
  .container-content_wrapper {
    
      justify-content: center;
  }
  
  
  
  
  }
  
  
  @media screen and (min-width:750px) {
  
    .phi--expand-card.phi--expand-card--conversion.active .phi--expand-card__number {
      left: 76px;
      top: 72px;
  }
  
  
  .phi--expand-card--conversion.active .phi--expand-card__content {
      border: 1px solid #fff;
  }
  
    
  }
  
  .phi-agency-statement_wrapper-expand-card  .phi-card-expand__button {
      position: absolute;
      z-index: 1;
      bottom: 63px;
      right: 23px;
  }
  
  .phi-agency-statement_wrapper-expand-card .phi-card-expand__button {
      display: none;
  }
  
  .phi-agency-statement_wrapper-expand-card .phi--expand-card.active .phi-card-expand__button {
   display: flex;
  
  }  
  
  .phi--expand-card.active[data-design="design2"]  .phi--expand-card__content {
    opacity: 1;
    margin: 2rem;
    border-radius: 66px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px); 
}
  
  
  a.phi-hero-marketing__button-arrow {
      display: flex;
      align-items: center;
      background: #000;
      border-radius: 32px;
      padding: 11px 12px;
  }
  

  
  .phi-agency-statement_wrapper-expand-card .phi--expand-card.active .phi-card-expand__button {
      display: flex;
      z-index: 4;
  }
  
  
  .phi-card-expand__button span {
      color: #000;
      background: #fff;
      border-radius: 84px;
      padding: 15px 42px;
      font-family: Poppins;
      font-weight: 500;
      font-size: 13.74px;
      display: flex;
      line-height: 120%;
      letter-spacing: 0%;
      text-align: center;
      align-items: center;
  }
  
  .phi-card__expanded-arrow {
      display: flex;
      align-items: center;
      border-radius: 32px;
      background: #fff;
      padding: 6px 7px;
  }
  
  .phi--expand-card.active[data-design="design2"] .phi--expand-card__number {
    z-index: 4;
  }

  @media (min-width: 750px) {
      .phi--expand-card.active[data-design="design2"] .phi--expand-card__number {
          left: 34px;
      }
   
      .phi--expand-card.active[data-design="design2"] .phi--expand-card__number {
          right: 20px;
          border: none;
          backdrop-filter: none;
          position: absolute;
          width: 67px;
          height: 67px;
          bottom: 0px;
          font-family: Poppins;
          font-weight: 500;
          line-height: 131%;
          letter-spacing: 0;
          text-align: center;
          top: 71px;
      }
  
  
  
  
  }
  
@media screen and (max-width: 750px) {
    /* Number is already centered with left: 50% and transform: translateX(-50%) from above */
  
      .phi--expand-card.active[data-design="design2"]  .phi--expand-card__content {
          margin: 1.2rem;
          border-radius: 17px;
          border: 1px solid #fff;
      }
  
      .phi-card-expand__button svg {
      height: 20px;
  }
  .phi-agency-statement_wrapper-expand-card  .phi-card-expand__button {
      bottom: 31px;
      right: 20px;
  }
  
  .phi-card-expand__button span {
      
      padding: 11px 28px;
      font-size: 8.74px;
  
      
  }
  
  .phi--tag {
    padding: 4px 5px;
  }
  
  .phi--expand-card__content {
     
      padding: 16px 12px;
      padding-left: 7px;
      padding-right: 10px;
      
  }
  
.phi--expand-card.active .phi--expand-card__number {
    font-size: 18px;
}

.phi--expand-card__content {
    align-items: center;
    justify-content: center;
}

.phi--expand-card.active .phi--expand-card__number {
    bottom: 8px;
    top: auto;
    left: 15px;
    transform: translateX(0);
    right: auto;
}

.phi--expand-card.active[data-design="design2"] .phi--expand-card__number {
    bottom: 15px;
    top: 21px;
    left: 24px;
    transform: translateX(0);
    right: 21px;
}


  
  }    
 
  /* End of services-expand-card.css */