/* Body Padding Adjustment */
body.engagement-models {
  padding-top: 186px;
}

.frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  align-items: center;
  gap: 120px;
  padding: 0 24px 80px;
}

.frame .div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

/* Row with Gap */
.frame .div-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  width: 100%;
  max-width: 1320px;
}

/* Column Wrapper */
.frame .div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  margin-bottom: 20px;
}

/* Column with Gap */
.frame .div-wrapper-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 53px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

/* Main Heading */
.frame .how-we-engage-with {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  font-size: 80px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .how-we-engage-with .text-wrapper {
  color: #010136;
}

.frame .how-we-engage-with .span {
  color: #ed354f;
}

/* Introduction Paragraph */
.frame .every-business {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  color: #000000;
  font-size: 28px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .every-business .text-wrapper-2 {
  font-weight: var(--font-medium);
}

.frame .every-business .text-wrapper-3 {
  font-weight: var(--font-light);
}

.frame .every-business .text-wrapper-4 {
  font-weight: var(--font-light);
  font-size: 24px;
  padding-top: 38px;
  display: block;
}

/* Category Navigation Buttons */
.frame .div-3 {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  width: auto; /* Allow specific widths */
  height: 64px;
  position: relative;
  background-color: #ffffff;
  border-radius: var(--shape-corner-full);
  overflow: hidden;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-align: left;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  isolation: isolate;
}

.frame .div-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #e5234c;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  border-radius: var(--shape-corner-full);
}

.frame .div-3:hover::before,
.frame .div-3.active::before {
  width: var(--btn-hover-width, 100%);
}

.frame .div-3:hover {
  transform: translateY(-2px);
}

/* .frame .div-3:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
} */

.frame .div-3:active {
  transform: translateY(0);
}

.frame .div-3:nth-child(1) {
  width: 223px;
}

.frame .div-3:nth-child(2) {
  width: 236px;
}

.frame .div-3:nth-child(3) {
  width: 577px;
}

.frame .div-3:nth-child(4) {
  width: 278px;
}

.frame .div-3:nth-child(5) {
  width: 163px;
}

/* Button Animated Background - Hidden rectangles */
.frame .rectangle {
  display: none;
}

/* Button Icon Container */
.frame .frame-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  left: 0;
  z-index: 2;
  flex-shrink: 0;
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.frame .icon-arrow-forward-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: #e5234c;
  color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s ease;
  position: relative;
  z-index: 2;
  padding: 10px;
}

.frame .div-3:hover .frame-wrapper,
.frame .div-3.active .frame-wrapper {
  left: calc(100% - 74px);
}

.frame .div-3:hover .icon-arrow-forward-wrapper,
.frame .div-3.active .icon-arrow-forward-wrapper {
  background: transparent;
}

.frame .icon-arrow-forward {
  position: relative;
  width: 30px;
  height: 30px;
  aspect-ratio: 1;
  filter: brightness(0) invert(1);
}

.frame .div-3:hover .icon-arrow-forward,
.frame .div-3.active .icon-arrow-forward {
  filter: brightness(0) invert(1);
}

/* Button Text Container */
.frame .div-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  z-index: 2;
  padding-left: 20px;
  padding-right: 20px;
}

.frame .product-engineering {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  color: #010136;
  font-size: 36px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
  transition:
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s ease;
  z-index: 2;
}

.frame .div-3:hover .product-engineering,
.frame .div-3.active .product-engineering {
  color: #ffffff !important;
  transform: translateX(-64px);
}

/* Article Section */
.frame .div-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

/* Article Content Row */
.frame .div-6 {
  display: flex;
  align-items: flex-end;
  gap: 30px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

/* Image Container */
.frame .side-view-of-girl-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
}

.frame .side-view-of-girl {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 694px;
  flex-grow: 1;
  object-fit: cover;
}

.frame .side-view-of-girl-2 {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 694px;
  flex-grow: 1;
  object-fit: cover;
}

/* Text Content Container */
.frame .div-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* gap: 20px; */
  position: relative;
  flex: 1;
  flex-grow: 1;
}

/* Category Title - Blue */
.frame .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  color: #0a203f;
  font-size: 80px;
  letter-spacing: 0;
  line-height: normal;
}

/* Category Title - Red */
.frame .text-wrapper-9 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  color: #e5234c;
  font-size: 80px;
  letter-spacing: 0;
  line-height: normal;
}

/* Category Title - Blue (Smaller) */
.frame .text-wrapper-10 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  color: #0a203f;
  font-size: 72px;
  letter-spacing: 0;
  line-height: normal;
}

/* Subsection Container */
.frame .div-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .div-8 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.frame .div-8 li {
  margin: 0;
}

/* Subsection Heading */
.frame .text-wrapper-6 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-medium);
  color: #000000;
  font-size: 32px;
  letter-spacing: 0;
  line-height: normal;
}

/* List Item Row */
.frame .div-9 {
  align-items: flex-start;
  gap: 5px;
  align-self: stretch;
  width: 100%;
  display: flex;
  position: relative;
}

/* Bullet Icon Container */
.frame .img-wrapper {
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  position: relative;
  background-color: #ffffff;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.frame .img {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0;
}

/* List Item Text */
.frame .text-wrapper-7 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-light);
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-8 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-light);
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .p {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-light);
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-11 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--font-primary);
  font-weight: var(--font-light);
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
}

/* Expand Button Container */
.frame .frame-wrapper-2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

/* Expand Button */
.frame .icon-arrow-forward-wrapper-2 {
  width: 69.28px;
  height: 69.28px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  background-color: #e5234c;
  border-radius: var(--shape-corner-full);
  transform: rotate(-90deg);
  aspect-ratio: 1;
  display: flex;
  position: relative;
  cursor: pointer;
  border: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.frame .icon-arrow-forward-wrapper-2:hover {
  background-color: #c91e42;
  transform: rotate(-90deg) scale(1.05);
}

/* .frame .icon-arrow-forward-wrapper-2:focus {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
} */

.frame .icon-arrow-forward-wrapper-2:active {
  transform: rotate(-90deg) scale(0.98);
}

.frame .icon-arrow-forward-2 {
  position: relative;
  width: 36px;
  height: 36px;
  transform: rotate(90deg);
  aspect-ratio: 1;
}

/* Responsive Design */
@media (max-width: 1440px) {
  .frame .how-we-engage-with,
  .frame .text-wrapper-5,
  .frame .text-wrapper-9 {
    font-size: 64px;
  }
}

@media (max-width: 1200px) {
  .frame {
    max-width: 100%;
    padding: 60px 20px;
    gap: 80px;
  }

  .frame .how-we-engage-with {
    font-size: 60px;
  }

  .frame .every-business {
    font-size: 24px;
  }

  .frame .every-business .text-wrapper-4 {
    font-size: 20px;
  }

  .frame .product-engineering {
    font-size: 28px;
  }

  .frame .text-wrapper-5,
  .frame .text-wrapper-9 {
    font-size: 60px;
  }

  .frame .text-wrapper-10 {
    font-size: 54px;
  }

  .frame .text-wrapper-6 {
    font-size: 28px;
  }

  .frame .text-wrapper-7,
  .frame .text-wrapper-8,
  .frame .p,
  .frame .text-wrapper-11 {
    font-size: 20px;
  }

  .frame .side-view-of-girl,
  .frame .side-view-of-girl-2 {
    max-width: 500px;
  }
}

/* Responsive */
@media (max-width: 992px) {
  body.engagement-models {
    padding-top: 85px;
  }

  .engagement-card .container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .frame {
    padding: 0 24px;
    gap: 30px;
    margin-bottom: 50px;
  }

  .frame .div {
    gap: 15px;
  }

  .frame .div-2 {
    gap: 15px;
  }

  .frame .how-we-engage-with {
    font-size: 40px;
    font-weight: var(--font-semibold);
  }

  .frame .every-business {
    font-size: 16px;
    font-weight: var(--font-light);
  }

  /* Upper paragraph - Semibold 20 */
  .frame .every-business .text-wrapper-2 {
    font-size: 16px;
    font-weight: var(--font-semibold);
  }

  /* Lower paragraph - Light 16 */
  .frame .every-business .text-wrapper-4 {
    font-size: 16px;
    font-weight: var(--font-light);
    padding-top: 20px;
  }

  .frame .div-6 {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  /* Ensure image appears first (above title) on mobile */
  .frame .side-view-of-girl-wrapper {
    order: -1;
  }

  .frame .div-7 {
    order: 1;
  }

  .frame .side-view-of-girl,
  .frame .side-view-of-girl-2 {
    max-width: 100%;
    width: 100%;
  }

  .frame .product-engineering {
    font-size: 24px;
  }

  /* Mobile Service Buttons Redesign */
  .frame nav.div-2 {
    gap: 15px;
    width: 100%;
    align-items: stretch;
  }

  .frame .div-3 {
    height: 49px;
    padding: 0;
    border-radius: 30px;
    background-color: #e5234c;
    width: 100% !important;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: center;
    transition: none !important;
    display: flex !important;
  }

  /* Override specific nth-child widths */
  .frame .div-3:nth-child(1),
  .frame .div-3:nth-child(2),
  .frame .div-3:nth-child(3),
  .frame .div-3:nth-child(4),
  .frame .div-3:nth-child(5) {
    width: 100% !important;
  }

  .frame .div-3::before {
    display: none;
  }

  .frame .div-3 .product-engineering {
    color: #ffffff;
    font-size: 16px;
    transform: none !important;
    padding-left: 20px;
  }

  .frame .div-3:hover .product-engineering {
    color: #ffffff !important;
    transform: none !important;
  }

  /* Reset hover animations/positions */
  .frame .div-3 .frame-wrapper,
  .frame .div-3:hover .frame-wrapper {
    position: static;
    transition: none;
    left: auto;
    padding-right: 20px;
    order: unset;
  }

  .frame .div-3 .frame-wrapper {
    order: unset;
  }

  .frame .icon-arrow-forward-wrapper {
    width: 24px;
    height: 24px;
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  .frame .icon-arrow-forward {
    width: 24px;
    height: 24px;
  }

  .frame .div-4 {
    padding: 0;
    order: unset;
    text-align: left;
    align-items: flex-start;
    display: flex !important;
    justify-content: flex-end !important; /* Because row-reverse, flex-end is left */
    flex: 1; /* Take up space to push arrow */
  }

  /* Hide expand arrows on mobile */
  .frame .frame-wrapper-2,
  .frame .icon-arrow-forward-wrapper-2 {
    display: none;
  }

  /* Specific Adjustments for Scroll Behavior on Mobile */
  #startup-section,
  #scaleup-section,
  #institutional-section,
  #enterprises-section,
  #sme-section {
    scroll-margin-top: -120px;
  }

  /* Section Headers - 32px Semibold */
  .frame .text-wrapper-5,
  .frame .text-wrapper-9,
  .frame .text-wrapper-10 {
    font-size: 32px;
    font-weight: var(--font-semibold);
  }

  /* Subsection Headers - 20px Medium */
  .frame .text-wrapper-6 {
    font-size: 20px;
    font-weight: var(--font-medium);
  }

  /* List Items - 16px Light */
  .frame .text-wrapper-7,
  .frame .text-wrapper-8,
  .frame .p,
  .frame .text-wrapper-11 {
    font-size: 16px;
    font-weight: var(--font-light);
  }

  .frame .div-3 {
    padding: 10px;
    width: 100%; /* Full width for touch targets */
    justify-content: flex-start;
  }

  .frame .icon-arrow-forward {
    width: 24px;
    height: 24px;
  }
}

/* Responsive */
@media (max-width: 992px) {
  body.engagement-models {
    padding-top: 85px;
  }

  .engagement-card .container {
    grid-template-columns: 1fr;
  }
}

/* Extend Institutional Section Width to Right */
@media (min-width: 1200px) {
  #institutional-section .div-6 {
    width: calc(100% + 80px);
  }
}