.about-page #hero.about-hero > .container {
            position: absolute;
            z-index: 10;
            top: calc(50% - 50px) !important;
            bottom: auto !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            display: flex;
            align-items: center; /* better for vertical centering */
          }
          .about-page .about-hero-top {
            text-align: left !important;
            padding: 0 !important;
          }
          .about-page .about-hero-title {
            color: #111827 !important;
            text-align: left !important;
            font-size: clamp(32px, 3.5vw, 54px) !important;
            font-weight: 700 !important;
            line-height: 1.15 !important;
          }
          .about-page .about-hero-desc {
            color: #4B5563 !important;
            text-align: left !important;
            margin: 16px 0 32px 0 !important;
            max-width: 600px;
            font-size: clamp(14px, 1vw, 16px) !important;
            line-height: 1.7 !important;
          }
          .about-btn-dark.hero-btn-primary {
            background-color: #111827;
            color: #ffffff !important;
          }
          .about-btn-dark.hero-btn-primary:hover {
            background-color: #000000;
          }
          .about-btn-light.hero-btn-secondary {
            background-color: #F5F6F8;
            border: 1px solid #18181b;
            color: #111827 !important;
          }
          .about-btn-light.hero-btn-secondary:hover {
            background-color: #e4e4e7;
            border-color: #000;
          }
          @media (min-width: 1600px) {
            .about-page #hero.about-hero > .container {
              max-width: 1400px;
            }
          }
          @media (min-width: 1920px) {
            .about-page #hero.about-hero > .container {
              max-width: 1600px;
            }
          }
          @media (min-width: 2560px) {
            .about-page #hero.about-hero > .container {
              max-width: 2000px;
            }
          }
          @media (max-width: 767.98px) {
            .about-page #hero.about-hero {
              min-height: auto !important;
              display: block !important;
              padding-top: 0 !important;
              position: relative !important;
            }
            .about-page #hero.about-hero > .container {
              position: absolute !important;
              top: 40px !important;
              left: 50% !important;
              transform: translateX(-50%) !important;
              padding: 0 24px !important;
              margin-top: 0 !important;
              width: 100% !important;
              z-index: 10 !important;
            }
            .about-page .about-hero-image {
              position: relative !important;
              height: auto !important;
              margin-top: 0 !important;
              width: 100% !important;
            }
            .about-hero-image picture {
              display: block;
              width: 100%;
              height: auto;
            }
            .about-hero-image picture img {
              width: 100%;
              height: auto;
              display: block;
              object-fit: contain;
              object-position: center top;
            }
            .about-page .about-hero-title {
              font-size: 28px !important;
              text-align: center !important;
              margin-bottom: 8px !important;
            }
            .about-page .about-hero-desc {
              font-size: 14px !important;
              text-align: center !important;
              margin: 12px auto 14px auto !important;
              max-width: 100% !important;
            }
            .about-page .about-hero-actions {
              justify-content: center !important;
              margin-top: 0 !important;
              gap: 12px !important;
            }
            .about-page .about-btn-dark,
            .about-page .about-btn-light {
              font-size: 16px !important;
              padding: 12px 24px !important;
            }
            .about-page #why-we-exist h3 {
              margin-bottom: 17px !important;
            }
            .about-hardware-layout {
              gap: 22px !important;
              margin-bottom: 32px !important;
            }
            .about-quote-card {
              padding: 14px 20px !important;
            }
            .about-quote-card p {
              margin: 0 !important;
            }
            .about-page #why-we-exist {
              padding-top: 56px !important;
            }
            .about-page #why-we-exist .container > div.resp-grid-stack:nth-child(2) {
              gap: 10px !important;
            }
            .about-page #why-we-exist .container > div.resp-grid-stack:nth-child(2) > div:nth-child(2) {
              padding-top: 0 !important;
            }
            .comparison-cards-container {
              display: flex !important;
              flex-direction: column !important;
              gap: 24px !important;
            }
            .comparison-cards-container .resp-grid-stack-card {
              display: flex !important;
              flex-direction: column !important;
              gap: 16px !important;
            }
            .comparison-cards-divider {
              width: 100%;
              height: 1px;
              background: #E5E7EB;
            }
            .about-page #why-we-exist img[alt="Comu Logo"] {
              height: 30px !important;
            }
          }
          @media (min-width: 901px) {
            .comparison-cards-container {
              display: grid;
              grid-template-columns: 1fr auto 1fr;
              gap: 24px;
              align-items: stretch;
            }
            .comparison-cards-divider {
              width: 1px;
              height: auto;
              background: #E5E7EB;
              align-self: stretch;
            }
          }