/* Shared layout for phones and tablets. Loaded last so it overrides the desktop sheets. */

.logo-container-parent .logo-container {
  width: auto !important;
  flex-direction: row !important;
  align-items: center !important;
}

.logo-container-parent .logo-container > a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px;
}

/* Cover the gap above and beside the floating nav so scrolling cards
   cannot show through it. The page behind this bar is the same black. */
.platform-detailed .header-parent {
  top: 0;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px 100px 8px;
  box-sizing: border-box;
  background-color: #0a0a0a;
}

.platform-detailed .logo-container-parent {
  background-color: #121212 !important;
  backdrop-filter: none;
}

@media screen and (max-width: 1200px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .home-page,
  .platform-detailed,
  .main,
  .content,
  .hero-content-wrapper,
  .features-content-wrapper,
  .features-content,
  .customers-content-wrapper,
  .container-wrapper,
  .contact-form,
  .blog-container,
  .services-intro,
  .expectation,
  .footer,
  .footer-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .top-content,
  .header-parent,
  header.top-content.header-parent {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .platform-detailed .header-parent {
    padding: 12px 16px 0;
    background-color: #0a0a0a;
  }

  .logo-container-parent {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 12px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    box-sizing: border-box;
  }

  .navbar,
  .links-wrapper,
  .links,
  .nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: auto !important;
    max-width: 100%;
    gap: 8px 16px;
  }

  .auth-buttons,
  .sign-in-parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .fpt-software-logo {
    height: 28px;
    width: auto;
  }

  .logo-container a img:first-of-type {
    width: 132px;
    height: auto;
  }

  .home-page .content,
  .platform-detailed > .main > .content {
    padding: 188px 24px 64px !important;
  }

  .services-intro {
    padding: 188px 20px 32px !important;
  }

  h1,
  h2,
  section {
    scroll-margin-top: 180px;
  }

  .our-services-parent,
  .feature-container,
  .expectation-content,
  .sent-state-parent,
  .form-container,
  .company-logos,
  .slogan-parent,
  .tab-content,
  .use-case-parent,
  .image-6347438-parent,
  .welcome-to-nightwolf {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .blog-container {
    padding: 0 20px 48px !important;
  }

  .hero-content-wrapper {
    font-size: clamp(36px, 5vw, 56px);
    padding: 128px 20px 0;
  }

  .all-in-one-solution-for-container {
    line-height: 1.15;
  }

  .hero-cta,
  .buttons1,
  .cta-buttons-parent {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }

  .our-services,
  .title-first-blog {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.2;
  }

  .images-and-description,
  .images-and-description1 {
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 100%;
    padding: 20px !important;
    gap: 16px !important;
  }

  .customer-dashboard,
  .first-blog,
  .tester-features {
    width: 100%;
  }

  .customer-dashboard,
  .first-blog,
  .blog-posts,
  .footer-content {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: auto !important;
  }

  .fade-in-left,
  .fade-in-right {
    transform: none !important;
  }

  .customer-dashboard > .border-linear,
  .images-and-description,
  .images-and-description1 {
    flex-shrink: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .management-features,
  .management-features1,
  .management-features2,
  .images-and-description {
    overflow: hidden;
  }

  .content-first-blog,
  .content-sub-blog {
    width: 100% !important;
  }

  .tester-features {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .dashboard {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
  }

  .image-6347447-icon,
  .features-content-child,
  .image-blog {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .image-blog {
    max-height: 280px;
    object-fit: cover;
  }

  .benefits {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin: 16px 0 !important;
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
  }

  .first-shape-icon,
  .second-shape-icon,
  .platform-detailed-child,
  .platform-detailed-item,
  .image-6347438-icon,
  .mask-group-icon4 {
    display: none !important;
  }

  .image-6347440-icon1 {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    height: auto;
  }

  .tab-label,
  .tab-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }

  .tab-label label,
  label[for^="tabToggle"] {
    width: auto;
    min-width: 72px;
    margin-right: 0;
    padding: 10px 14px;
  }

  .content-item {
    flex-wrap: wrap;
    align-items: flex-start;
    box-sizing: border-box;
  }

  .title-container {
    flex: 1 1 180px;
    min-width: 0;
  }

  .published-title a,
  .published-subtitle {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .tag-and-arrow {
    width: auto;
    margin-left: auto;
    flex-shrink: 0;
  }

  .form-input,
  .request-support,
  .frequency-quest {
    width: 100% !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box;
  }

  .form-input-container,
  .form-content,
  .frame-form {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  .request-support {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .req-sup-container {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .form-input .frame-wrapper3 {
    width: 100%;
    align-items: center;
    padding: 24px 0 8px;
  }

  .form-content {
    width: 100% !important;
    margin: 40px auto !important;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .sent-state {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
    padding: 32px 20px 28px !important;
    box-sizing: border-box;
  }

  .frame-child124 {
    display: none !important;
  }

  .get-in-touch-parent {
    width: 100% !important;
    max-width: 100%;
    padding: 0 !important;
  }

  .frame-form {
    gap: 20px !important;
  }

  .footer1,
  .legal-links,
  .privacy-policy {
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100%;
    box-sizing: border-box;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px;
    text-align: center;
  }

  .frame-parent12,
  .demo,
  .description {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  .step-content,
  .placeholder,
  .component-2,
  .component-3 {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .component-2,
  .component-3,
  .process-steps {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .item-sub-blog {
    align-items: flex-start;
  }

  .image-sub-blog {
    width: 120px;
    min-width: 120px;
    height: auto;
  }

  .swiper,
  .swiper-container {
    max-width: 100%;
    overflow: hidden;
  }
}

@media screen and (max-width: 700px) {
  .logo-container a img:first-of-type {
    width: 108px;
  }

  .fpt-software-logo {
    height: 22px;
  }

  .navbar,
  .links,
  .nav-links,
  .links-wrapper {
    gap: 6px 12px;
    font-size: 14px;
  }

  .hero-content-wrapper {
    font-size: 34px;
    padding-top: 200px;
  }

  .services-intro,
  .home-page .content,
  .platform-detailed > .main > .content {
    padding-top: 200px !important;
  }

  .hero-cta,
  .buttons1 {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-cta .buttons,
  .hero-content .buttons {
    width: 100%;
    justify-content: center;
  }

  .request-a-demo,
  .request-a-demo1,
  .read-the-platform {
    width: auto;
    min-width: 0;
    white-space: normal;
  }

  .home-page .content,
  .platform-detailed > .main > .content,
  .service-page .content {
    padding: 128px 16px 48px !important;
  }

  .blog-container {
    padding: 0 16px 40px !important;
  }

  .tester-features {
    grid-template-columns: 1fr !important;
  }

  .row-info,
  .name-fields,
  .name-fields1 {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .input-container,
  .project-details,
  .input,
  .tell-us-more {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  .content-item {
    gap: 12px;
    padding: 16px;
  }

  .point-item {
    width: 56px;
    height: 56px;
  }

  .point {
    font-size: 22px;
    line-height: 1.2;
  }

  .published-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .published-subtitle {
    font-size: 13px;
    line-height: 1.4;
  }

  .title-blog {
    font-size: 20px;
    line-height: 1.3;
  }

  .customers-content-wrapper,
  .container-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.collapse-tab > .tab,
.collapse-tab > .content {
  box-sizing: border-box;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.collapse-tab > .tab {
  padding-right: 48px !important;
}

.collapse-tab > .content {
  padding-left: 25px !important;
  padding-right: 25px !important;
}

.collapse-tab > .content {
  display: block !important;
  flex: none !important;
  gap: 0 !important;
  padding-top: 4px !important;
  padding-bottom: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.collapse-tab > .content p {
  white-space: pre-line !important;
  margin: 0 !important;
}