body {
  background-color: #18191d;
  color: #ffffff; }
  body .main-header--wrapper {
    background-color: #18191d;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 150px;
    border-bottom: 1px solid #ffffff;
    display: flex;
    align-items: center;
    padding: 0 40px;
    gap: 30px; }
    body .main-header--wrapper #spoons-logo--link {
      display: flex;
      align-items: center; }
    body .main-header--wrapper #spoons-logo {
      max-height: 120px; }
    body .main-header--wrapper #spoons-playstore--link {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #ffffff;
      text-decoration: none;
      font-size: 14px;
      opacity: 0.7;
      transition: opacity 0.2s; }
      body .main-header--wrapper #spoons-playstore--link:hover {
        opacity: 1;
        color: #368bc8; }
  body .main-page--wrapper {
    margin-top: 150px; }

.main-page--wrapper[data-page=index] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 80px; }
  .main-page--wrapper[data-page=index] .spoons-logo--wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
    .main-page--wrapper[data-page=index] .spoons-logo--wrapper img {
      height: 350px; }
    .main-page--wrapper[data-page=index] .spoons-logo--wrapper .logo-text--wrapper {
      font-size: 40px; }
  .main-page--wrapper[data-page=index] .dev-team--wrapper {
    display: flex;
    gap: 60px;
    margin-top: 80px;
    align-items: stretch; }
    .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper {
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 16px;
      padding: 40px 30px;
      width: 460px; }
      .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-photo--wrapper {
        display: flex;
        align-items: center;
        justify-content: center; }
        .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-photo--wrapper img {
          width: 180px;
          height: 180px;
          border-radius: 50%;
          object-fit: cover;
          box-shadow: 0 0 0 4px #368bc8, 0 0 0 8px rgba(123, 110, 246, 0.2); }
      .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-name--wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        margin-top: 24px; }
        .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-name--wrapper p {
          margin-bottom: 0; }
      .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-linkedin--wrapper {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 4px; }
        .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-linkedin--wrapper a {
          display: flex;
          align-items: center;
          gap: 6px;
          color: #5ea2d3;
          text-decoration: none;
          font-size: 13px;
          opacity: 0.75;
          transition: opacity 0.2s; }
          .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-linkedin--wrapper a:hover {
            opacity: 1; }
      .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-block {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 10px;
        margin-top: 28px; }
        .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-block .dev-block--title {
          font-size: 15px;
          text-transform: uppercase;
          letter-spacing: 2.5px;
          color: rgba(255, 255, 255, 0.65);
          border-bottom: 1px solid rgba(255, 255, 255, 0.12);
          width: 100%;
          text-align: center;
          padding-bottom: 10px;
          margin-bottom: 18px; }
          .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-block .dev-block--title p {
            margin-bottom: 0; }
        .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-block .dev-block--content {
          font-size: 18px;
          width: 100%;
          color: rgba(255, 255, 255, 0.8); }
          .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-block .dev-block--content p {
            line-height: 1.75;
            margin: 0; }
      .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-abilities--content {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        width: 100%; }
        .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper .dev-abilities--content .tech-badge {
          display: inline-block;
          background-color: #2b6fa0;
          border: 1px solid #368bc8;
          color: #ffffff;
          padding: 5px 14px;
          border-radius: 999px;
          font-size: 14px;
          white-space: nowrap; }
  .main-page--wrapper[data-page=index] .dev-why-spoons--wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 80px;
    width: calc(460px * 2 + 60px);
    max-width: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 40px 60px; }
    .main-page--wrapper[data-page=index] .dev-why-spoons--wrapper .dev-why-spoons--title {
      font-size: 24px;
      text-transform: uppercase;
      letter-spacing: 2.5px;
      color: rgba(255, 255, 255, 0.65);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      width: 100%;
      text-align: center;
      padding-bottom: 10px;
      margin-bottom: 18px; }
      .main-page--wrapper[data-page=index] .dev-why-spoons--wrapper .dev-why-spoons--title p {
        margin-bottom: 0; }
    .main-page--wrapper[data-page=index] .dev-why-spoons--wrapper .dev-why-spoons--content {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.8); }
      .main-page--wrapper[data-page=index] .dev-why-spoons--wrapper .dev-why-spoons--content p {
        line-height: 1.75;
        margin: 0;
        text-align: center; }

@media (max-width: 1100px) {
  .main-page--wrapper[data-page=index] .dev-team--wrapper {
    flex-direction: column;
    align-items: center; }
  .main-page--wrapper[data-page=index] .dev-why-spoons--wrapper {
    width: 460px;
    margin: 60px 20px 0;
    padding: 30px 30px; } }
@media (max-width: 600px) {
  .main-page--wrapper[data-page=index] .spoons-logo--wrapper img {
    height: 220px; }
  .main-page--wrapper[data-page=index] .spoons-logo--wrapper .logo-text--wrapper {
    font-size: 26px; }
  .main-page--wrapper[data-page=index] .dev-team--wrapper .dev--wrapper {
    width: 90vw;
    padding: 30px 20px; }
  .main-page--wrapper[data-page=index] .dev-why-spoons--wrapper {
    width: 90vw;
    padding: 30px 20px;
    box-sizing: border-box; } }