.homepage .frame-233 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 1rem 1.25rem;
  position: sticky;
  top: 0;
  background-color: #f5f5f7;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--collection-1-neutral-border);
  box-sizing: border-box;
  z-index: 1000;
}

@media (min-width: 769px) {
  .homepage .frame-233 { padding: 1.5rem 3.125rem; }
}

@media (max-width: 768px) {
  .homepage .frame-233 { padding: 0.75rem 1rem; position: relative; background-color: #f8f9fa; }
}

@media (max-width: 768px) {
  .homepage .frame-233 { position: relative; }
}

.homepage .frame-234 { display: flex; width: 100%; align-items: center; justify-content: space-between; position: relative; flex: 0 0 auto; }
@media (max-width: 1280px) { .homepage .frame-234 { flex-direction: column; gap: 1rem; align-items: stretch; } }
@media (max-width: 768px) { .homepage .frame-234 { flex-direction: row; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; } }

.homepage .frame-235 { display: flex; align-items: center; gap: 1rem; position: relative; flex: 0 0 auto; }
@media (min-width: 769px) { .homepage .frame-235 { gap: 3.75rem; } }
@media (min-width: 769px) and (max-width: 1180px) {
  .homepage .frame-233 { padding: 1.25rem 1rem; position: fixed;}
  .homepage .frame-235 { gap: 1.5rem; }
  .homepage .search-7 { max-width: 20rem; column-gap: 0.5rem; padding: 0.875rem 1rem; padding-right: calc(0.875rem + var(--parcours-width, 180px) + 10px); }
  .homepage .frame-237 { max-width: 130px; }
  .homepage .frame-234{
    gap: 16px;
  }
  .homepage .search-7{
    max-width: 16rem;
  }
  .homepage .user-menu-trigger, .user-menu-trigger{
    min-width: 170px;
  }
  .homepage {
    margin-top: 2.8rem;
  }
}
/* @media (max-width: 1180px) { */
  .homepage .frame-233 {  position: fixed;}
  .homepage {
    margin-top: 2.8rem;
  }
  #category-header {
    margin-top: 5.8rem;
  }
  #section-hero {
    margin-top: 3.5rem;
  }
  .topPage{
    margin-top: 3.6rem;
  }
  #contact-page {
    margin-top: 8rem;
  }
  .user-panel-container{
    margin-top: 5rem;
  }
  
@media (min-width: 769px) and (max-width: 1280px) {
  .user-panel-container {
    margin-top: 11rem;
  }
  .upcd-page-container {
    margin-top: 7rem;
  }
}

/* 1280px breakpoint - Certificate Details */
@media (max-width: 1280px) {
  .upcd-page-container {
    margin-top: 7rem;
  }
}

/* 1024px breakpoint - Certificate Details */
@media (min-width: 769px) and (max-width: 1024px) {
  .upcd-page-container {
    margin-top: 12rem !important;
  }
}

/* 992px breakpoint - Certificate Details */
@media (max-width: 992px) {
  .upcd-page-container {
    margin-top: 7rem;
  }
}

  .nos-detail-page{
    margin-top: 4rem;
  }
  .module-detail-page{
    margin-top: 6rem;
  }
  .review-page{
    margin-top: 7rem;
  }
  .coach-ia-container{
    margin-top: 5rem;
  }
  .upcd-page-container{
    margin-top: 7rem;
  }
/* } */

@media (max-width: 768px) {
  .upcd-page-container{
    margin-top: 4rem;
  }
  .homepage {
    margin-top: 2rem;
  }
  #contact-page {
    margin-top: 6rem;
  }
  .topPage{
    margin-top: 2.1rem;
  }
  #section-hero {
    margin-top: 2.1rem;
  }
  #category-header {
    margin-top: 3.8rem;
  }
  .nos-detail-page{
    margin-top: 4rem;
  }
  .module-detail-page{
    margin-top: 4rem;
  }
  .coach-ia-container{
    margin-top: 2rem;
  }
}
@media (max-width: 1280px) { .homepage .frame-235 { flex-direction: column; gap: 1rem; width: 100%; } }
@media (max-width: 768px) { .homepage .frame-235 { flex-direction: row; gap: 1rem; align-items: center; justify-content: space-between; width: 100%; } }

.homepage .tuty-logo { display: flex; align-items: center; }
.homepage .tuty-logo svg { height: 32px; width: auto; flex-shrink: 0; }
@media (max-width: 768px) { .homepage .tuty-logo svg { height: 28px; } }
@media (max-width: 768px) { .homepage .tuty-logo { order: 1; } .homepage .tuty-logo svg { height: 24px; } }

.homepage .mobile-actions { display: none; align-items: center; gap: 1rem; }
@media (max-width: 768px) { .homepage .mobile-actions { display: flex; } }
.homepage .mobile-search-icon { width: 20px; height: 20px; cursor: pointer; opacity: 0.8; }

/* Mobile hamburger menu */
.homepage .mobile-menu-toggle { display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; background: none; border: none; }
.homepage .mobile-menu-toggle span { width: 18px; height: 2px; background: #0078f8; margin: 3px 0; transition: 0.3s; border-radius: 1px; }
.homepage .mobile-menu-toggle.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
.homepage .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.homepage .mobile-menu-toggle.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }
@media (max-width: 768px) { .homepage .mobile-menu-toggle { display: flex; } }

.homepage .frame-17 { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; flex: 1; width: 100%; min-width: 0; }
@media (max-width: 768px) {
  .homepage .frame-17.mobile-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background-color: #f5f5f7; flex-direction: column; padding: 1rem; border-top: 1px solid var(--collection-1-neutral-border); box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 999; }
  .homepage .tab-horizontal-9 { padding: 0.75rem 0; border-bottom: 1px solid var(--collection-1-neutral-border); }
  .homepage .tab-horizontal-9:last-child { border-bottom: none; }
  .homepage .tab-horizontal-10 { font-size: 16px; font-weight: 400; color: var(--collection-1-neutral-second-text); }
}
.homepage .tab-horizontal-9 { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 12px 0px; position: relative; flex: 0 0 auto; }
.homepage .tab-horizontal-10 { position: relative; width: fit-content; margin-top: -2px; font-family: 'Lato', sans-serif; font-weight: 400; color: var(--collection-1-neutral-second-text); font-size: 16px; letter-spacing: 0; line-height: 24px; white-space: nowrap; }

/* Actions row */
.homepage .frame-236 { display: flex; height: auto; align-items: center; gap: 0.5rem; position: relative; flex: 0 0 auto; }
@media (min-width: 769px) { .homepage .frame-236 { height: 3.19rem; gap: 1rem; } }
@media (max-width: 1280px) { .homepage .frame-236 { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } }
@media (max-width: 768px) {
  .homepage .frame-236 { display: none; }
  .homepage .frame-236.mobile-visible { display: flex; flex-direction: column; width: 100%; gap: 0.75rem; margin-top: 1rem; }
  .homepage .mobile-nav-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; background: transparent; }
  .homepage .mobile-nav-link { padding: 12px 8px; font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 500; color: #1a1a1a; text-decoration: none; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; text-align: center; background: white; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border: 1px solid #f0f0f0; }
  .homepage .mobile-nav-link:active,
  .homepage .mobile-nav-link:hover { background: linear-gradient(191deg, rgba(0, 120, 248, 0.05) 0%, rgba(9, 65, 235, 0.05) 100%); color: #0078F8; border-color: #0078F8; }
}

/* Search area */
.homepage .search-7 { display: grid; grid-template-columns: auto 1fr; width: 100%; max-width: 24rem; height: 3.125rem; align-items: center; column-gap: 0.625rem; padding: 0.97rem 1rem; padding-right: calc(1rem + var(--parcours-width, 200px) + 12px); position: relative; background-color: #ffffff; border-radius: 25px; border: 1px solid #e5e5e5; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: visible; }
@media (max-width: 1280px) { .homepage .search-7 { max-width: 100%; min-width: 15rem; } }
@media (max-width: 768px) { .homepage .search-7 { min-width: 12rem; height: 2.75rem; padding: 0.75rem; } }
.homepage .search-8 { position: relative; width: 24px; height: 24px; margin-top: -2.5px; margin-bottom: -2.5px; }
.homepage .text-6 { display: flex; flex-direction: column; align-items: flex-start; position: relative; flex: 1; flex-grow: 1; margin-top: -2.5px; margin-bottom: -2.5px; }
.homepage .input { position: relative; align-self: stretch; margin-top: -1px; opacity: 0.5; font-family: var(--subheader-16-regular-font-family); font-weight: var(--subheader-16-regular-font-weight); color: var(--collection-1-neutral-disable-duplicate); font-size: var(--subheader-16-regular-font-size); letter-spacing: var(--subheader-16-regular-letter-spacing); line-height: var(--subheader-16-regular-line-height); font-style: var(--subheader-16-regular-font-style); background: transparent; border: none; padding: 0; }
.homepage .input:focus,
.homepage .input:focus-visible,
.homepage .input:hover { outline: none; box-shadow: none; border: none; }

/* Parcours pill */
.homepage .frame-237 { height: 39px; gap: 8px; padding: 8px 12px; border-radius: 30px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: inline-flex; align-items: center; position: relative; justify-self: end; margin-right: 8px; background-color: #ffffff; border: 1px solid #e5e5e5; cursor: pointer; transition: all 0.2s ease; width: 50%; max-width: 150px; white-space: nowrap; flex: 0 0 auto; z-index: 2; }
.homepage .frame-237:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.homepage .text-wrapper-81 { width: fit-content; font-family: var(--body-small-body-sm-semi-bold-font-family); font-weight: var(--body-small-body-sm-semi-bold-font-weight); color: var(--global-tokens-colors-neutral-700); font-size: var(--body-small-body-sm-semi-bold-font-size); line-height: var(--body-small-body-sm-semi-bold-line-height); white-space: nowrap; position: relative; letter-spacing: var(--body-small-body-sm-semi-bold-letter-spacing); font-style: var(--body-small-body-sm-semi-bold-font-style); }
.homepage .chevron-down-7 { position: relative; width: 24px; height: 24px; margin-top: -0.5px; margin-bottom: -0.5px; transition: transform 0.2s ease; }
.homepage .dropdown-container { position: absolute; }
.homepage .dropdown-trigger { display: flex; align-items: center; gap: 10px; width: 100%; }
.homepage .dropdown-menu { position: absolute; top: 100%; right: 0; left: auto; background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.25s ease; margin-top: 4px; overflow: hidden; }
.homepage .dropdown-container.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.homepage .dropdown-container.active .chevron-down-7 { transform: rotate(180deg); }
.homepage .dropdown-item { padding: 12px 16px; font-family: var(--body-small-body-sm-semi-bold-font-family); font-weight: var(--body-small-body-sm-semi-bold-font-weight); color: var(--global-tokens-colors-neutral-700); font-size: var(--body-small-body-sm-semi-bold-font-size); line-height: var(--body-small-body-sm-semi-bold-line-height); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; border-bottom: 1px solid #f5f5f5; }
.homepage .dropdown-item:last-child { border-bottom: none; }
.homepage .dropdown-item:hover { background-color: #f8f9fa; color: var(--global-tokens-colors-primary-600); }
.homepage .dropdown-item.selected { background-color: var(--global-tokens-colors-primary-50); color: var(--global-tokens-colors-primary-600); font-weight: 600; }
.homepage .dropdown-trigger .text-wrapper-81 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1280px) {
  .homepage .dropdown-menu { width: 100% !important; left: 50%; right: auto; width: 90vw; max-width: 320px; transform: translate(-50%, -10px); }
  .homepage .dropdown-container.active .dropdown-menu { transform: translate(-50%, 0); }
}

/* Buttons on the right */
.homepage .button-19 { all: unset; box-sizing: border-box; display: flex; width: 100%; height: 50px; align-items: center; justify-content: center; gap: 20px; padding: 14px; position: relative; border-radius: 50px; border: none; background-color: #ffffff; cursor: pointer; transition: all 0.2s ease; text-decoration: none !important; }
.homepage .button-19:hover { background-color: #f8f9ff; }
.homepage .button-19:active { transform: scale(0.98); }
.homepage .button-19::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 50px; background: linear-gradient(191deg, rgba(0, 120, 248, 1) 0%, rgba(9, 65, 235, 1) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 1; pointer-events: none; }
.homepage .button-20 { position: relative; flex: 1; background: linear-gradient(191deg, rgba(0, 120, 248, 1) 0%, rgba(9, 65, 235, 1) 100%); -webkit-background-clip: text !important; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; font-family: var(--body-semibold-text3-font-family); font-weight: var(--body-semibold-text3-font-weight); color: transparent; font-size: var(--body-semibold-text3-font-size); text-align: center; letter-spacing: var(--body-semibold-text3-letter-spacing); line-height: var(--body-semibold-text3-line-height); font-style: var(--body-semibold-text3-font-style); }

/* Icon button at right */
.homepage .icon-light-wrapper { margin-left: 8px; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 12px; position: relative; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(191deg, rgba(0, 120, 248, 1) 0%, rgba(9, 65, 235, 1) 100%); width: 48px; height: 48px; }
@media (max-width: 768px) { .homepage .icon-light-wrapper { width: 36px; height: 36px; padding: 6px; flex-shrink: 0; } }
.homepage .img-2 { position: relative; width: 24px; height: 24px; }

@media (min-width: 769px) and (max-width: 1180px) {
  .homepage .search-7{
    max-width: 16rem;
  }
}