/*General section*/

html {
  font-size: 16px;
}


body {
  font-family: "Poppins";
}

h1 {
  font-size: 3.052rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -1%;
}

h2 {
  font-size: 2.441rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -1%;
}

h3 {
  font-size: 1.953rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -1%;
}

h4 {
  font-size: 1.563rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -1%;
}

h5, h6 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -1%;
}

p {
  font-size: 1em;
  line-height: 1.5;
}


@media screen and (max-width: 1024px) {

  html {
    font-size: 14px;
  }

  h1 {
    font-size: 2.441rem;
    line-height: 1.3;
  }
  
  h2 {
    font-size: 1.953rem;
    line-height: 1.3;
  }
  
  h3 {
    font-size: 1.563rem;
    line-height: 1.3;
  }
  
  h4 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  
  h5, h6 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
}


/*Navbar section*/

.navbar {
  margin: 24px 0px 24px 0px;
}

.nav-link {
  color: #808080;
  margin-left: 12px;
  margin-right: 12px;
}

.nav-item a:focus {
  color: #000;
}

.btn-primary {
  width: 124px;
  height: 44px;
  background-color: #1089D4;
}

/*Hero section*/
.banner__left-col-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner__right-col-wrapper {
  display: flex;
  justify-content: flex-end;
}

.banner__right-col-wrapper img {
  max-width: 100%;
}

.banner__heading {
  font-weight: 700;
  letter-spacing: -1%;
  margin-bottom: 20px;
}

.banner__subheading {
  font-size: 1.25rem;
  line-height: 32px;
  margin-bottom: 40px;
}

.banner__btn-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.banner__btn-group a {
  text-decoration: none;
}

.play-btn {
  margin-left: 24px;
  display: flex;
  align-items: center;
}

.play-btn__text {
  margin-bottom: 0px;
  margin-left: 8px;
}


/*Partner Logo section*/
.partners {
  padding: 40px 0px 40px 0px;
}

.partners__text {
  text-align: center;
  margin-bottom: 28px;
  font-weight: 500;
  color: #808080;
}

.partners__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.partners__logo {
  margin: 20px 20px 20px 20px;
}

/*Value (Features and benefits) section*/
.value {
  padding: 60px 0px 60px 0px;
}

.value-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.value-heading {
  max-width: 50%;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
}

.value-subheading {
  width: 40%;
  text-align: center;
  margin-bottom: 60px;
}

.value-image {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.value-image img {
  max-width: 100%;
}



.feature {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.feature h3 {
  font-size: 1.5625rem;
  margin-bottom: 20px;
}

.feature p {
  margin-bottom: 40px;
}

.feature-point-wrapper {
  display: flex;
  justify-content: space-between;
}

.feature-point {
  width: 45%;
}

.feature-point img {
  margin-bottom: 20px;
}

.feature-point h4 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -1%;
}


/*CTA section*/
.cta {
  padding-top: 60px;
  padding-bottom: 60px;
}

.cta-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.cta__heading {
  width: 60%;
  text-align: center;
  margin-bottom: 20px;
}

.cta__subheading {
  text-align: center;
  max-width: 45%;
  margin-bottom: 20px;
}


/*How it works section*/

.hiw {
  padding: 60px 0px 60px 0px;
}

.hiw-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hiw__heading {
  width: 50%;
  text-align: center;
  margin-bottom: 20px;
}

.hiw__subheading {
  width: 40%;
  text-align: center;
  margin-bottom: 40px;
}

.hiw-point {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 40px; 
  width: 100%;
}

.hiw-point img {
  margin-bottom: 20px;
}

.hiw-point h2 {
  font-size: 1.5625rem;
  margin-bottom: 20px;
  width: 50%;
}

.hiw-point p {
  width: 60%;
}

.hiw-point h2, .hiw-point p {
  text-align: center;
}


/*Pricing*/
.pricing {
  margin-top: 60px;
  margin-bottom: 60px;
}

.pricing__heading {
  text-align: center;
  margin-bottom: 20px;
}

.pricing-card-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.pricing-card {
  width: 360px;
  height: auto;
  border: 1px solid #808080;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}

.pricing-card__tag {
  align-self: flex-end;
  margin-bottom: 40px;
}

.pricing-card__amount {
  align-self: flex-start;
  margin-bottom: 20px;
}

.pricing-card hr {
  width: 100%;
  height: 1px;
  margin: 0px 0px 20px 0px;
}

.pricing-card .btn-primary {
  align-self: flex-end;
  width: 100%;
  margin-top: 60px;
}



/*FAQs*/
.faq {
  padding: 60px 0px 60px 0px;
}

.faq__heading {
  text-align: center;
  margin-bottom: 20px;
}

.faq__subheading {
  text-align: center;
  margin-bottom: 40px;
}

.btn-link {
  text-decoration: none;
  color: #000;
}


/*Footer*/
.footer {
  padding: 60px 0px 0px 0px;
}

.footer__image {
  margin-bottom: 20px;
}

.footer__paragraph {
  margin-bottom: 20px;
}

.footer__heading {
  font-size: 20px;
  font-weight: 500;
}

.footer__list li {
  list-style: none;
}

.footer__list li a {
  text-decoration: none;
  color: #000;
}

/*Copyright*/
.copyright {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* .copyright-left {

} */

.copyright-right {
  display: flex;
  justify-content: space-between;
}

.copyright-right p {
  margin-left: 20px;
  margin-right: 20px;
}





@media (max-width: 1400px) {

  /* Section side padding */
  .banner,
  .value,
  .hiw,
  .faq,
  .cta {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Hero stays centered */
  .banner__heading,
  .banner__subheading {
    text-align: center;
  }

  /* Content headings + text left-aligned */
  .value-heading,
  .hiw__heading,
  .faq__heading,
  .value-subheading,
  .hiw__subheading {
    text-align: left;
  }

  /* Value section */
  .value {
    padding-bottom: 24px;
  }

  .value-subheading {
    width: 100%;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* How it works section */
  .hiw {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .hiw__heading {
    margin-top: 0;
    margin-bottom: 8px;
  }

  .hiw__subheading {
    margin-bottom: 16px;
  }

  .hiw img {
    max-width: 100%;
    height: auto;
    margin: 0 auto 24px auto;
    display: block;
  }

  .hiw .row {
    margin-bottom: 0;
  }

  /* FAQ */
  .faq {
    padding-top: 24px;
  }

  .faq__heading {
    margin-top: 0;
    margin-bottom: 12px;
  }

  /* Footer alignment */
  .footer {
    text-align: center;
  }

  .footer__heading {
    text-align: center;
  }

  .footer__list {
    padding-left: 0;
  }

  .footer__list li {
    text-align: center;
    margin-bottom: 8px;
  }

  .footer__list li a {
    display: inline-block;
  }

}



/* FOOTER: tablet + small desktop (768px – 1199.98px) */
@media (min-width: 768px) and (max-width: 1199.98px) {

  .footer .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .footer [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: center;
  }

  .footer__heading {
    margin: 0 0 12px 0;
    white-space: nowrap;
  }

  .footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer__list li {
    margin-bottom: 8px;
  }
}

/* As Featured In section start */
.featured-press-section {
  padding: 70px 12px 60px 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.featured-press-wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 42px 34px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 28px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.featured-press-text {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 34px auto;
}

.featured-press-label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(16, 137, 212, 0.1);
  color: #1089D4;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.featured-press-text h2 {
  margin-bottom: 12px;
  color: #111827;
  font-size: 34px;
  font-weight: 800;
}

.featured-press-text p {
  margin: 0 auto;
  color: #6b7280;
  font-size: 17px;
  line-height: 1.6;
}

.featured-press-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.press-card {
  min-height: 92px;
  padding: 18px 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.press-card:hover {
  transform: translateY(-5px);
  background: #ffffff;
  border-color: rgba(16, 137, 212, 0.35);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  color: #1089D4;
}

.bbc-card {
  background: #111111;
  border-color: #111111;
}

.bbc-card:hover {
  background: #000000;
  border-color: #000000;
}

.bbc-logo {
  display: flex;
  gap: 5px;
}

.bbc-logo span {
  background: #ffffff;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: 800;
  padding: 6px 8px;
  line-height: 1;
  letter-spacing: 1px;
}

@media (max-width: 991.98px) {
  .featured-press-section {
    padding: 54px 12px 44px 12px;
  }

  .featured-press-wrapper {
    padding: 34px 24px;
    border-radius: 22px;
  }

  .featured-press-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-press-text h2 {
    font-size: 29px;
  }
}

@media (max-width: 575.98px) {
  .featured-press-wrapper {
    padding: 30px 18px;
  }

  .featured-press-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .press-card {
    min-height: 78px;
  }

  .featured-press-text h2 {
    font-size: 26px;
  }

  .featured-press-text p {
    font-size: 15px;
  }
}
/* As Featured In section end */

/* FINAL hero top alignment fix start */
.banner {
  padding-top: 55px !important;
}

.banner .row {
  align-items: flex-start !important;
}

.banner__left-col-wrapper {
  height: auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding-top: 55px !important;
}

.banner__right-col-wrapper {
  height: auto !important;
  min-height: 0 !important;
  align-items: flex-start !important;
}

.banner__heading {
  margin-top: 0 !important;
}

@media (max-width: 767.98px) {
  .banner__left-col-wrapper {
    padding-top: 0 !important;
    text-align: center;
  }

  .banner__heading,
  .banner__subheading {
    text-align: center !important;
  }

  .banner__btn-group {
    justify-content: center !important;
  }
  
}
/* Final polished hero section start */
.banner {
  padding: 55px 12px 65px 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.banner .container {
  max-width: 1180px;
}

.banner .row {
  align-items: center !important;
}

.banner__left-col-wrapper {
  height: auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding: 18px 10px 38px 0 !important;
  transform: translateY(-18px);
}

.banner__heading {
  max-width: 560px;
  margin-top: 0 !important;
  margin-bottom: 22px;
  color: #111827;
  font-size: 48px;
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.banner__subheading {
  max-width: 610px;
  margin-bottom: 34px;
  color: #374151;
  font-size: 18px;
  line-height: 1.65;
}

.banner__btn-group {
  justify-content: flex-start;
  margin-bottom: 0;
}

.banner__btn-group .btn-primary {
  width: auto;
  min-width: 132px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  background-color: #1089D4;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(16, 137, 212, 0.22);
}

.banner__right-col-wrapper {
  height: auto !important;
  min-height: 0 !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 14px;
  box-shadow: none !important;
}

.banner__right-col-wrapper img {
  width: 100% !important;
  max-width: 530px !important;
  max-height: 430px !important;
  height: auto !important;
  display: block;
  object-fit: cover !important;
  border-radius: 14px;
}

@media (max-width: 1400px) {
  .banner__heading,
  .banner__subheading {
    text-align: left !important;
  }
}

@media (max-width: 991.98px) {
  .banner {
    padding: 40px 12px 50px 12px !important;
  }

  .banner__left-col-wrapper {
    padding: 10px 0 28px 0 !important;
    transform: translateY(-8px);
  }

  .banner__heading {
    font-size: 40px;
  }

  .banner__right-col-wrapper img {
    max-height: 380px !important;
  }
}

@media (max-width: 767.98px) {
  .banner__left-col-wrapper {
    text-align: center;
    transform: none;
  }

  .banner__heading,
  .banner__subheading {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }

  .banner__btn-group {
    justify-content: center !important;
  }

  .banner__right-col-wrapper {
    padding: 5px;
    border-radius: 18px;
  }

  .banner__right-col-wrapper img {
    max-height: 330px !important;
    border-radius: 12px;
  }
}

/* ================================
   HoloLab Robot Control Rebrand
   Add at bottom of css/index.css
================================ */

/* General page feel */
body {
  background: #f8fafc;
  color: #111827;
}

/* Banner / hero */
.banner {
  background: linear-gradient(135deg, #07111f 0%, #0f172a 55%, #111827 100%);
  padding: 90px 0;
  color: #ffffff;
}

.banner__heading {
  color: #ffffff;
  font-weight: 800;
  line-height: 1.1;
}

.banner__subheading {
  color: #d1d5db;
  font-size: 18px;
  line-height: 1.7;
  max-width: 560px;
}

.banner__right-col-wrapper img {
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

/* Buttons */
.btn-primary {
  background: #00bcd4 !important;
  border-color: #00bcd4 !important;
  color: #06111f !important;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 28px;
}

.btn-primary:hover {
  background: #22d3ee !important;
  border-color: #22d3ee !important;
  color: #06111f !important;
}

/* Featured press */
.featured-press-section {
  background: #ffffff;
  padding: 45px 0;
  border-bottom: 1px solid #e5e7eb;
}

.featured-press-text h2 {
  color: #6b7280;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 25px;
}

.press-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px;
  transition: 0.25s ease;
}

.press-card:hover {
  transform: translateY(-4px);
  border-color: #00bcd4;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
}

/* Main value section */
.value {
  background: #ffffff;
  padding: 80px 0;
}

.value-heading,
.hiw__heading,
.faq__heading {
  color: #0f172a;
  font-weight: 800;
}

.value-subheading,
.hiw__subheading {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.8;
}

/* Feature blocks */
.feature {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.feature h3 {
  color: #0f172a;
  font-weight: 800;
  margin-bottom: 18px;
}

.feature p {
  color: #4b5563;
  line-height: 1.8;
}

.feature-point {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px;
  margin-top: 18px;
}

.feature-point h4 {
  color: #0f172a;
  font-weight: 700;
}

.feature-point p {
  color: #6b7280;
}

.feature-point img {
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
}

.value-image img {
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
}

/* How it works */
.hiw {
  background: #0f172a;
  color: #ffffff;
  padding: 85px 0;
}

.hiw__heading {
  color: #ffffff;
}

.hiw__subheading {
  color: #cbd5e1;
}

.hiw-wrapper img {
  max-width: 100%;
  border-radius: 18px;
  margin: 25px 0;
}

.hiw-point {
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 25px;
  min-height: 230px;
  transition: 0.25s ease;
}

.hiw-point:hover {
  transform: translateY(-4px);
  border-color: #00bcd4;
  box-shadow: 0 20px 45px rgba(0, 188, 212, 0.12);
}

.hiw-point h2 {
  color: #ffffff;
  font-weight: 700;
  font-size: 22px;
}

.hiw-point p {
  color: #cbd5e1;
  line-height: 1.7;
}

.hiw-point img {
  width: 34px;
  height: 34px;
  margin-bottom: 15px;
}

/* FAQ */
.faq {
  background: #f8fafc;
  padding: 80px 0;
}

.faq__heading {
  text-align: center;
  margin-bottom: 35px;
}

.accordion-item {
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.accordion-button {
  font-weight: 700;
  color: #0f172a;
}

.accordion-button:not(.collapsed) {
  background: #e0f7fb;
  color: #0f172a;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: #00bcd4;
}

.accordion-body {
  color: #4b5563;
  line-height: 1.8;
}

/* Contact form inside FAQ */
.contact input,
.contact textarea {
  border-radius: 10px;
  border: 1px solid #d1d5db;
}

.contact input:focus,
.contact textarea:focus {
  border-color: #00bcd4;
  box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.15);
}

/* Mobile fixes */
@media (max-width: 768px) {
  .banner {
    padding: 60px 0;
    text-align: center;
  }

  .banner__subheading {
    margin-left: auto;
    margin-right: auto;
  }

  .feature {
    padding: 25px;
    margin-top: 25px;
  }

  .value-image {
    margin-bottom: 25px;
  }

  .hiw-point {
    min-height: auto;
  }

  .faq .col-8 {
    width: 100%;
  }
}


/* ================================
   Fix header button + footer/newsletter
================================ */

/* Top right Get Started button */
.header .btn,
.navbar .btn,
.menu .btn,
.menu-wrapper .btn,
.nav-btn,
a[href="/login.php"] button,
a[href="login.php"] button {
  background: #12c7dc !important;
  color: #06111f !important;
  border: none !important;
  border-radius: 8px !important;
  min-width: 135px !important;
  height: 48px !important;
  padding: 0 22px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.header .btn:hover,
.navbar .btn:hover,
.menu .btn:hover,
.menu-wrapper .btn:hover,
.nav-btn:hover,
a[href="/login.php"] button:hover,
a[href="login.php"] button:hover {
  background: #22d3ee !important;
  color: #06111f !important;
}

/* Footer / newsletter dark robot-control theme */
footer,
.footer,
.footer-section {
  background: #07111f !important;
  color: #ffffff !important;
  padding-top: 70px !important;
}

footer p,
footer span,
footer li,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
.footer p,
.footer span,
.footer li,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5 {
  color: #ffffff !important;
}

footer a,
.footer a {
  color: #22d3ee !important;
}

footer input,
.footer input,
.newsletter input {
  background: #ffffff !important;
  color: #06111f !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  height: 44px !important;
}

footer button,
.footer button,
.newsletter button {
  background: #12c7dc !important;
  color: #06111f !important;
  border: none !important;
  border-radius: 8px !important;
  height: 44px !important;
  padding: 0 24px !important;
  font-weight: 800 !important;
}

/* Footer headings */
footer h2,
.footer h2 {
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* Bottom copyright row */
.footer-bottom,
.copyright,
footer .border-top {
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  color: #cbd5e1 !important;
}
/* Final polished hero section end */

/* Compact How It Works alignment fixes */

.value {
  padding-top: 45px !important;
  padding-bottom: 45px !important;
}

.value .container {
  max-width: 1180px !important;
}

.value-text {
  text-align: center;
  margin-bottom: 20px !important;
}

.value-text img {
  max-width: 760px;
  width: 100%;
  height: auto;
  display: block;
  margin: 12px auto 15px !important;
}

.value-text h3 {
  max-width: 950px;
  margin: 0 auto 15px !important;
  font-size: 22px;
  line-height: 1.4;
}

.value .row[style*="margin-bottom: 40px"] {
  margin-bottom: 28px !important;
  align-items: stretch !important;
}

.value video {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.feature {
  height: 100%;
  padding: 24px !important;
}

.feature h3 {
  margin-bottom: 12px !important;
}

.feature p {
  line-height: 1.55 !important;
  margin-bottom: 12px !important;
}

.feature-point-wrapper {
  display: flex;
  gap: 14px;
  margin-top: 14px !important;
}

.feature-point {
  flex: 1;
  padding: 16px !important;
}

.feature-point h4 {
  margin-bottom: 8px !important;
}

.feature-point p {
  line-height: 1.45 !important;
  margin-bottom: 0 !important;
}

.feature-point img {
  width: 30px;
  height: 30px;
  margin-bottom: 8px !important;
}

@media (max-width: 991px) {
  .value video {
    height: auto;
    max-height: none;
    margin-bottom: 15px;
  }

  .feature {
    height: auto;
  }

  .feature-point-wrapper {
    flex-direction: column;
  }
}

/* Match image/video height with side text card */

.value .row[style*="margin-bottom: 40px"] {
  align-items: stretch !important;
}

.value .row[style*="margin-bottom: 40px"] > div {
  display: flex;
}

.value .value-image,
.value .feature {
  width: 100%;
  height: 100%;
}

.value .value-image img,
.value video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Prevent videos/images becoming too tall */
.value video,
.value .value-image img {
  max-height: 520px;
}

/* Mobile: return to normal height */
@media (max-width: 991px) {
  .value .row[style*="margin-bottom: 40px"] > div {
    display: block;
  }

  .value .value-image,
  .value .feature {
    height: auto;
  }

  .value .value-image img,
  .value video {
    height: auto;
    max-height: none;
  }
}

/* Match How It Works videos/images with side text */

.value .row[style*="margin-bottom: 40px"] {
  align-items: stretch !important;
}

.value .row[style*="margin-bottom: 40px"] > div {
  display: flex;
}

.value video,
.value .feature {
  width: 100%;
  height: 100%;
}

.value video {
  object-fit: cover;
  border-radius: 10px;
  display: block;
  max-height: 560px;
}

.value .feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Top system image */
.value-text img {
  max-width: 900px;
  width: 100%;
  height: auto;
  display: block;
  margin: 15px auto 25px;
}

/* Mobile reset */
@media (max-width: 991px) {
  .value .row[style*="margin-bottom: 40px"] > div {
    display: block;
  }

  .value video,
  .value .feature {
    height: auto;
  }

  .value video {
    max-height: none;
    margin-bottom: 20px;
  }
}