/* =========================================================================
   booking.css
   Page-specific styles for booking.html (Booking System / "Online Booking
   System for Sports Facilities"). The section structure and layout all
   live in nav.css (.hero-solution, .features-grid, .stats-bar, etc.) —
   this file only sets the blue-teal gradient unique to Booking, matching
   the original page1.css exactly.
   ========================================================================= */

/* This page loads the inner-page subnav strip above the header (see
   subnav.css) — push the header's own sticky position down to sit right
   below it. The hero's -84px overlap math is untouched, since it's always
   relative to the header, not the subnav. */

.hero-solution-delivery{background-image:linear-gradient(135deg, rgb(68, 202, 201) 0%, rgb(252, 255, 114) 100%);}
.hero-solution-booking {
  background-image: linear-gradient(0deg, rgb(113, 136, 223), rgb(17, 213, 207));
}
.hero-solution-ecommerce{background-image:linear-gradient(260deg, rgb(112, 95, 206) 0%, rgb(176, 89, 219) 100%);}

.features-grid .icon-badge {
  background-image: linear-gradient(0deg, rgb(113, 136, 223), rgb(17, 213, 207));
  color: #fff;
}

.stats-bar {
  background-image: linear-gradient(0deg, rgb(113, 136, 223), rgb(17, 213, 207));
}

.biz-size-grid {
  background: #f4ffff;
}

.biz-size-grid .icon-badge {
  background-image: linear-gradient(0deg, rgb(113, 136, 223), rgb(17, 213, 207));
  color: #fff;
}

.biz-size-card {
  border: 1px solid #17d0d0;
  min-height: 250px;
}

.vertical-tile span {
  color: #634cb1;
}

.trust-points .icon-badge {
  background-image: linear-gradient(0deg, rgb(113, 136, 223), rgb(17, 213, 207));
  color: #fff;
}

.testimonials-section {
  background: #ecf2ff;
}

.testimonials-section .card-custom {
  border: 1px solid #6591dd;
}

/* Pricing highlight — orange implied by the original box-shadow color */
.plan-card.is-featured {
  background: #ff6a2f;
  border-color: #ff6a2f;
}

.plan-card.is-featured .btn-custom {
  background: #fff;
  color: #eb5a20;
}

.plan-toggle .save-note {
  color: #1a9d63;
}

/* ---- Integrations ---- */
.solutions-integrations-grid {
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  margin: 0 auto;
}

.solutions-integration-cell {
  padding: 30px clamp(18px, 3vw, 32px);
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.solutions-integration-cell:nth-child(3n) {
  border-right: none;
}

.solutions-integration-cell h4{font-weight: 600;}

.solutions-integration-cell img,
.solutions-integration-cell .solutions-int-mark {
  height: 28px;
  margin-bottom: 14px;
}

.solutions-int-mark {
  width: 28px;
  border-radius: 6px;
  background: #ccc;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
}

.solutions-integration-cell h4 {
  margin-bottom: 10px;
}

.solutions-integration-cell p {
  font-size: 14px;
  width: 80%;
  margin-bottom: 0;
}
@media (max-width: 480px) {
  .solutions-integrations-grid {
    grid-template-columns: 1fr;
    width:95%;
  } 
  .biz-size-card p{
    margin-bottom: 0;
  }
  .biz-size-card {
    min-height: 226px;
  }
  .solutions-integration-cell p {
    margin-bottom: 0;
  }
}