@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Shared / base styles extracted from the original profile page.
   This keeps header/nav + global layout consistent across pages,
   while allowing each page to load its own dedicated CSS. */

.navbar-logo-left {
  width: 100% !important;
}
.navbar-logo-left-container {
  position: relative !important;
  z-index: 100 !important;
  background-color: #fff !important;
  height: 80px !important;
  border-bottom: 1px solid #EAECF0 !important;
}
.shadow-three {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.container {
  max-width: 1248px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100% !important;
  height: 100% !important;
}
.navbar-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 100% !important;
}
.navbar-brand {
  display: inline-block !important;
}
.navbar-brand img {
  height: 38px !important;
  width: auto !important;
}
.nav-menu-wrapper {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}
.nav-menu-two {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 8px !important;
}
.list-item {
  margin-right: 24px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
}
.list-item.use-cases {
  margin-right: 0px !important;
}
.nav-link {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0px !important;
  gap: 8px !important;
  height: 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #475467 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.nav-link:hover {
  color: #2337E0 !important;
  text-decoration: none !important;
}
.nav-link-accent {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 18px !important;
  gap: 8px !important;
  height: 44px !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #475467 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  border-radius: 8px !important;
}
.nav-link-accent:hover {
  color: #2337E0 !important;
  text-decoration: none !important;
}
.button-primary {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 18px !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 92px !important;
  height: 44px !important;
  background: #2337E0 !important;
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  transition: background-color 0.2s !important;
}
.button-primary:hover {
  background-color: #1A2BC8 !important;
  color: #fff !important;
  text-decoration: none !important;
}
.menu-button {
  display: none !important;
  padding: 10px !important;
  cursor: pointer !important;
}
.light-menu {
  position: relative !important;
  width: 24px !important;
  height: 20px !important;
}
.light-menu:before,
.light-menu:after,
.light-menu span {
  position: absolute !important;
  left: 0 !important;
  width: 24px !important;
  height: 2px !important;
  background-color: #1a1a1a !important;
  transition: transform 0.3s, opacity 0.3s !important;
}
.light-menu:before,
.light-menu:after {
  content: '' !important;
}
.light-menu:before {
  top: 0 !important;
}
.light-menu span {
  top: 9px !important;
}
.light-menu:after {
  bottom: 0 !important;
}
.navigation-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 0px !important;
  gap: 8px !important;
}
.mobile-margin-top-10 {
  margin-top: 0 !important;
}
@media screen and (max-width: 991px) {
  .menu-button {
    display: block !important;
  }
  .nav-menu-wrapper {
    position: fixed !important;
    top: 70px !important;
    right: -100% !important;
    width: 300px !important;
    height: calc(100vh - 70px) !important;
    padding: 20px !important;
    background-color: #fff !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    transition: right 0.3s ease-out !important;
    overflow-y: auto !important;
    z-index: 1001 !important;
  }
  .nav-menu-wrapper.open {
    right: 0 !important;
  }
  .nav-menu-two {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  .list-item {
    margin-right: 0 !important;
    margin-bottom: 15px !important;
    width: 100% !important;
  }
  .mobile-margin-top-10 {
    margin-top: 10px !important;
    width: 100% !important;
  }
  .button-primary {
    width: 100% !important;
    display: flex !important;
    text-align: center !important;
  }
}
.dropdown-icon {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 4px !important;
}
.dropdown-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: #475467 !important;
  transition: fill 0.2s, transform 0.2s !important;
}
.nav-link:hover .dropdown-icon svg {
  fill: #2337E0 !important;
}

body {
  font-family: 'Inter', sans-serif !important;
  background: #F8F9FA !important;
}

.product-wrapper {
  padding-top: 50px;
  padding-bottom: 40px;
  position: relative;
  z-index: 3;
}

.product-container {
  background: #F8F9FA;
  padding-top: 2rem;
  padding-bottom: 2rem;
}