/* ====== Service Page (OKAB original style) ====== */

/* ---- Header: keep homepage navy style (style.css) ----
   The fixed header overlaps the page top, so the title bar needs
   extra top padding on desktop to sit below it. */
@media (min-width: 768px) {
  .title_container .page-section-content.overflow-hidden { padding: 175px 0 70px; }
}

/* ---- Grid (ok-row / ok-md) ---- */
.ok-row { display: flex; flex-wrap: wrap; }
.ok-sd-6, .ok-xsd-12 { padding: 0 15px; }

/* ---- Page title bar ---- */
.title_container {
  background: #363636; position: relative; z-index: 2; overflow: hidden;
  background-image: url("../images/callout-bg.jpg");
  background-size: cover; background-position: center;
}
.title_container::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,36,84,0.92) 0%, rgba(2,36,84,0.6) 100%);
}
.title_container::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 46px 46px;
}
.title_container .title-particles {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none;
}
.title_container .page-section-content { position: relative; z-index: 2; padding: 50px 0 70px; }
.title_container h1.undertitle {
  font-family: "Cairo", sans-serif;
  text-align: center; font-size: 36px; font-weight: 700; line-height: 1.25em;
  color: #fff; margin: 0;
}
.title_container .dima-breadcrumbs {
  margin-top: 20px; text-align: center; font-size: 14px; line-height: 20px; color: #fff;
}
.title_container .dima-breadcrumbs a { color: #fff; }
.title_container .dima-breadcrumbs a:hover { text-decoration: underline; }
.title_container .dima-breadcrumbs .sep { margin: 0 5px; }

/* ---- Services grid (features-box) ---- */
.features-box {
  text-align: center; padding: 50px 30px;
  -webkit-box-shadow: 0 0 0 1px #e1e1e1; box-shadow: 0 0 0 1px #e1e1e1;
  position: relative; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
  margin-bottom: 30px;
}
.features-box:hover { -webkit-box-shadow: 0 0 0 1px #1565c0; box-shadow: 0 0 0 1px #1565c0; }
.icon-box-header { margin-bottom: 35px; }
.box-circle {
  position: relative; display: inline-block; text-align: center;
  background: #f6fbff; -webkit-box-shadow: 0 0 0 2px #1565c0; box-shadow: 0 0 0 2px #1565c0;
  border-radius: 50%; width: 125px; height: 125px; line-height: 125px;
  font-size: 48px; margin: 0; overflow: hidden;
}
.features-box .features-title {
  font-size: 22px; line-height: 1.4em; margin-bottom: 13px; color: #1565c0 !important;
}
.features-box .features-content p { color: #636363; font-size: 15px; line-height: 30px; margin: 0; }

/* ---- Callout band ---- */
.dima-callout {
  overflow: hidden; position: relative; padding: 55px;
  display: table; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 40;
}
.dima-callout-clm1 { display: table-cell; vertical-align: middle; width: 75%; }
.dima-callout-clm1 h3 { font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.dima-callout-clm1 p { font-size: 16px; line-height: 30px; margin: 0; }
.dima-callout-clm2 { display: table-cell; vertical-align: middle; width: 25%; text-align: end; }

/* ---- Pricing tables ---- */
.dima-pricing-table { width: 100%; margin-bottom: 30px; }
.dima-pricing-col { width: 100%; float: right; text-align: center; position: relative; }
.dima-pricing-col.featured { z-index: 99; }
.dima-pricing-col.featured.box-shadow { -webkit-box-shadow: 0 8px 24px rgba(0,0,0,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.dima-pricing-col .header {
  position: relative; background: #363636; padding: 15px 5px; margin: 0 0 -1px 0;
}
.dima-pricing-col.featured .header { background: #1565c0; color: #fff; }
.dima-pricing-col .header.di_green { background: #8bc34a; }
.dima-table-title { font-size: 18px; line-height: 20px; color: #fff; margin: 0; }
.dima-pricing-col-info { background: #fff; padding: 30px; color: #636363; border: 1px solid #e1e1e1; }
.dima-pricing-row { display: block; font-size: 18px; line-height: 15px; padding-bottom: 30px; color: #363636; }
.dima-pricing-row .pricing { position: relative; font-size: 36px; line-height: 36px; font-weight: 600; color: #1565c0; }
.dima-pricing-row .pricing .currency {
  font-size: 18px; line-height: 18px; font-weight: 400; position: absolute; top: 6px; right: -12px;
}
.dima-pricing-row .interval { font-size: 16px; line-height: 16px; color: #363636; }
.dima-pricing-row.di_green { color: #8bc34a; }
.dima-pricing-row.di_green .pricing { color: #8bc34a; }
.dima-pricing-col-info .icon-list { padding-bottom: 35px; list-style: none; width: 100%; margin: 0; }
.dima-pricing-col-info .icon-list li {
  padding: 15px 0; margin-bottom: 0; font-size: 14px; line-height: 20px; border-top: 1px solid #f5f5f5;
}
.dima-pricing-col-info .icon-list li i { margin-left: 5px; color: #1565c0; }
.dima-pricing-col-info .dima-button { margin-bottom: 0; }

/* ---- dima-clear spacer ---- */
.dima-clear { clear: both; }

/* ---- Service detail page content ---- */
.service-detail { padding: 60px 0; }
.service-detail .detail-inner { max-width: 900px; margin: 0 auto; }
.service-detail h2.detail-heading {
  font-family: "Cairo", sans-serif;
  font-size: 30px; font-weight: 700; color: #022454; margin: 0 0 14px;
}
.service-detail .detail-lead { color: #5a6b80; font-size: 17px; line-height: 32px; margin-bottom: 24px; }
.service-detail h3 {
  font-family: "Cairo", sans-serif; font-size: 20px; font-weight: 700; color: #1565c0; margin: 26px 0 10px;
}
.service-detail p { color: #5a6b80; font-size: 16px; line-height: 30px; }
.service-detail ul { list-style: none; padding: 0; margin: 0 0 10px; }
.service-detail ul li { position: relative; padding: 6px 32px 6px 0; color: #5a6b80; font-size: 16px; line-height: 28px; }
.service-detail ul li i { position: absolute; right: 0; top: 12px; color: #8bc34a; font-size: 18px; }
.service-detail .related-links { margin-top: 30px; padding: 24px; background: #f6fbff; border: 1px solid #e1e1e1; border-radius: 8px; }
.service-detail .related-links h4 { font-size: 18px; font-weight: 700; color: #022454; margin-bottom: 10px; }
.service-detail .related-links ul li { padding: 4px 26px 4px 0; }
.service-detail .related-links ul li i { top: 9px; }

/* ---- Buttons (OKAB look) ---- */
.dima-button { min-width: 160px; }
.dima-button.di_green { background: #8bc34a; color: #fff; }
.dima-button.di_green:hover { background: #7eb143; color: #fff !important; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .dima-topbar { display: none; }
}
@media (max-width: 991px) {
  .ok-md-4 { width: 50% !important; }
  .ok-md-3 { width: 50% !important; }
  .dima-callout { padding: 40px 30px; }
  .dima-callout-clm1, .dima-callout-clm2 { display: block; width: 100%; text-align: center; }
  .dima-callout-clm2 { margin-top: 30px; }
}
@media (max-width: 575px) {
  .ok-md-4, .ok-md-3 { width: 100% !important; }
  .features-box { padding: 35px 20px; }
  .title_container .page-section-content { padding: 35px 0 45px; }
  .title_container h1.undertitle { font-size: 28px; }
}
@media (min-width: 992px) {
  .ok-md-4 { width: 33.3333%; }
  .ok-md-3 { width: 25%; }
}