/* === FONTS === */
@import url('https://fonts.googleapis.com/css?family=Poppins:600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Inter:500,600&display=swap');

/* === ROOT VARIABLES === */
:root {
  --figma-bg: rgba(43,49,134,0.04);
  --figma-title: #1C1C1C;
  --figma-body: #383838;
  --figma-meta: #383838;
  --figma-blue: #2B3186;
  --figma-blue-hover: #232278;
  --figma-grey-line: #e3e4ee;
  --figma-faq-border: #d2d4e3;
}

/* === RESET & BASE === */
body {
  background: #fff !important;
  font-family: 'Inter', Arial, sans-serif;
  color: var(--figma-body);
  margin: 0;
  padding: 0;
}

/* === HERO CARD CONTAINER === */
.psb-service-detail-container {
  background: var(--figma-bg);
  border-radius: 2px;
  max-width: 1240px;
  margin: 48px auto 40px auto;
  padding: 52px 54px 46px 54px;
  position: relative;
  box-sizing: border-box;
}

/* === MAIN AREA === */
.psb-detail-main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0;
}

/* === HERO TITLE & DESC === */
.psb-service-hero { margin-bottom: 36px; }

.psb-hero-title {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 54px;
  color: var(--figma-title);
  text-transform: capitalize;
  margin-bottom: 12px;
  letter-spacing: 0;
}
.psb-hero-desc {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--figma-body);
  line-height: 29px;
  margin-bottom: 0;
  letter-spacing: 0;
  display: flex;
  align-items: center;
}

/* === INFO & IMAGE GRID === */
.psb-detail-card-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 15px;
  padding: 0;
  min-height: 350px;
}

/* === INFO COLUMN === */
.psb-detail-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  background: transparent;
}

/* Meta row (icons + duration/validity) */
.psb-service-meta-row {
  display: flex;
  gap: 38px;
  align-items: center;
  margin-bottom: 18px;
}
.psb-service-meta {
  display: flex;
  align-items: center;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--figma-meta);
  gap: 8px;
}
.psb-meta-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  margin-right: 6px;
}
.psb-meta-duration {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 20.0002C14.1218 20.0002 16.1566 19.1573 17.6569 17.657C19.1572 16.1567 20 14.1219 20 12.0002C20 9.87845 19.1572 7.84362 17.6569 6.34333C16.1566 4.84304 14.1218 4.00018 12 4.00018C9.87831 4.00018 7.84348 4.84304 6.34319 6.34333C4.8429 7.84362 4.00005 9.87845 4.00005 12.0002C4.00005 14.1219 4.8429 16.1567 6.34319 17.657C7.84348 19.1573 9.87831 20.0002 12 20.0002ZM12 2.00018C13.3133 2.00018 14.6136 2.25884 15.8269 2.76139C17.0401 3.26393 18.1425 4.00053 19.0711 4.92912C19.9997 5.8577 20.7363 6.96009 21.2388 8.17335C21.7414 9.3866 22 10.687 22 12.0002C22 14.6523 20.9465 17.1959 19.0711 19.0712C17.1957 20.9466 14.6522 22.0002 12 22.0002C6.47005 22.0002 2.00005 17.5002 2.00005 12.0002C2.00005 9.34802 3.05361 6.80448 4.92898 4.92912C6.80434 3.05375 9.34788 2.00018 12 2.00018ZM12.5 7.00018V12.2502L17 14.9202L16.25 16.1502L11 13.0002V7.00018H12.5Z' fill='%23383838'/%3E%3C/svg%3E%0A");
}
.psb-meta-validity {
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='22' viewBox='0 0 21 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_10_763)'%3E%3Cpath d='M12.25 5.75V4H8.75V5.75H12.25ZM3.5 8.375V16.25C3.5 16.7313 3.89375 17.125 4.375 17.125H16.625C17.1063 17.125 17.5 16.7313 17.5 16.25V8.375C17.5 7.89375 17.1063 7.5 16.625 7.5H4.375C3.89375 7.5 3.5 7.89375 3.5 8.375ZM17.5 5.75C18.4713 5.75 19.25 6.52875 19.25 7.5V17.125C19.25 18.0963 18.4713 18.875 17.5 18.875H3.5C2.52875 18.875 1.75 18.0963 1.75 17.125L1.75875 7.5C1.75875 6.52875 2.52875 5.75 3.5 5.75H7V4C7 3.02875 7.77875 2.25 8.75 2.25H12.25C13.2213 2.25 14 3.02875 14 4V5.75H17.5Z' fill='%23383838'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10_763'%3E%3Crect width='21' height='21' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

/* Checkbox */
.psb-service-virtual { margin-bottom: 24px; }
.psb-checkbox-label {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 18px;
  color: var(--figma-body);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-weight: 500;
}
.psb-checkbox-label input[type="checkbox"] { display: none; }
.psb-checkbox-custom {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--figma-blue);
  border-radius: 5px;
  background: #fff;
  position: relative;
  display: inline-block;
}
.psb-checkbox-label input[type="checkbox"]:checked + .psb-checkbox-custom {
  background: var(--figma-blue);
  border-color: var(--figma-blue);
}
.psb-checkbox-label input[type="checkbox"]:checked + .psb-checkbox-custom::after {
  content: '✓';
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
}

/* Price and Book Button */
.psb-service-price-row {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 42px;
  font-weight: bold;
  color: var(--figma-title);
  margin: 0px 0 40px 0;
  letter-spacing: 0;
  line-height: 53px;
}
.psb-price-currency {
  font-size: 42px;
  font-weight: 700;
  vertical-align: baseline;
}
.psb-btn-book {
  background: var(--figma-blue);
  color: #fff;
  border-radius: 8px;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 36px;
  border: none;
  margin: 12px 0 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 18px 0 rgba(44, 62, 80, 0.07);
  transition: background 0.15s;
  width: auto;
}
.psb-btn-book:hover { background: var(--figma-blue-hover); }

/* === FAQ/Accordion === */
.psb-faqs-content {
  margin-top: 32px;
  padding-top: 16px;
  width: 100%;
}
.psb-faq-item {
  border-bottom: 2px solid #383838CC;
}
.psb-faq-item:last-child { border-bottom: none; }
.psb-faq-question {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #383838;
  background: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 14px 0;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: color 0.14s;
}
.psb-faq-question:hover, 
.psb-faq-question:focus {
  background: none !important;
  color: #1C1C1C;
}
.psb-faq-icon {
  font-size: 24px;
  color: var(--figma-blue);
  margin-left: 8px;
  font-weight: bold;
  transition: transform 0.2s;
}

.psb-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s;
  box-sizing: border-box;
}
.psb-faq-answer.active {
  max-height: 220px;
  margin-bottom: 8px;
}
.psb-faq-answer p {
  font-family: 'Inter', Arial, sans-serif;
  color: #383838;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 11px 0;
}

/* === IMAGE + BLUR OVERLAY === */
.psb-detail-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 340px;
  height: 100%;
}
.psb-detail-image-wrap img {
  max-width: 660px;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 24px;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
  border: none;
  position: relative;
  z-index: 1;
}
.psb-image-blur-bg {
  position: absolute;
  left: 0;
  top: 18px;
  width: 96%;
  height: 88%;
  border-radius: 47px;
  background: linear-gradient(2.77deg, rgba(255,255,255,0.25) 32.66%, rgba(255,255,255,0) 95.72%);
  filter: blur(12.5px);
  z-index: 0;
  pointer-events: none;
}

/* === RELATED SERVICES SECTION (WHITE BACKGROUND) === */
.psb-related-services {
  max-width: 1240px;
  margin: 0 auto 36px auto;
  padding: 36px 0px 46px 0px;
  background: #fff;
}

/* SECTION TITLE */
.psb-section-title,
.psb-related-services > h2 {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--figma-title);
  margin-bottom: 22px;
  margin-left: 4px;
  letter-spacing: 0;
}

/* RELATED SERVICE CARDS */
.psb-related-grid {
  display: flex;
  gap: 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-behavior: smooth;
}
.psb-related-card {
  background: #fff;
  border: 1.5px solid #e2e4f0;
  border-radius: 16px;
  box-shadow: 0 3px 16px rgba(44,62,80,0.07);
  width: 370px;
  min-width: 370px;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 18px 18px 18px;
  transition: box-shadow 0.15s;
  margin-bottom: 7px;
}
.psb-related-card:hover {
  box-shadow: 0 10px 28px rgba(44,62,80,0.12);
}
.psb-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.psb-card-top {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.psb-card-title-row {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.psb-card-title {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #181c22;
  line-height: 1.28;
  margin: 0 0 4px 0;
  letter-spacing: 0;
  display: block;
  min-height: 42px;
  max-width: 96%;
  word-break: break-word;
}
.psb-card-unit {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #81839c;
  margin-left: 6px;
  line-height: 1.1;
}
.psb-card-image {
  width: 80px;
  height: 70px;
  border-radius: 10px;
  background: #f5f6fa;
  border: 1.2px solid #e1e6ed;
  overflow: hidden;
  box-shadow: 0 1.5px 7px rgba(44,62,80,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.psb-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.psb-card-desc {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  color: #5e647a;
  font-weight: 500;
  margin: 14px 0 0 0;
  line-height: 1.5;
  min-height: 38px;
  max-width: 96%;
  white-space: normal;
}
.psb-card-bottom {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.psb-card-price {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 20px;
  color: #181c22;
  font-weight: 700;
  letter-spacing: 0;
}
.psb-card-book {
  background: var(--figma-blue);
  color: #fff !important;
  border-radius: 8px;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 16px !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.13s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  min-width: 120px;
  text-align: center;
}
.psb-card-book:hover,
.psb-card-book:focus {
  background: var(--figma-blue-hover);
}

/* --- Responsive --- */

/* Tablet and small desktop */
/* Mobile */
@media (max-width: 700px) {
  .psb-service-detail-container,
  .psb-related-services {
    background: var(--figma-bg) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 22px 2vw 32px 2vw !important;
    max-width: 100vw !important;
    box-shadow: none !important;
    overflow: hidden !important
    ;
  }
  .psb-detail-main { padding: 0 !important; max-width: 100vw !important; }
  .psb-detail-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    min-height: unset !important;
    width: 100vw !important;
    box-sizing: border-box !important;
  }
  .psb-detail-image-wrap {
    order: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 0 16px 0 !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
  }
  .psb-detail-image-wrap img {
    width: 92vw !important;
    max-width: 92vw !important;
    border-radius: 14px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
    background: transparent !important;
    aspect-ratio: 16/9 !important;
  }
  .psb-detail-info {
    order: 1 !important;
    width: 100vw !important;
    padding: 0 4vw 0 4vw !important;
    background: transparent !important;
    align-items: flex-start !important;
  }
  .psb-service-hero { margin-bottom: 13px !important; padding-top: 0 !important; width: 100vw !important; padding-left: 4vw !important; padding-right: 4vw !important; }
  .psb-hero-title { font-size: 20px !important; line-height: 28px !important; font-weight: 600 !important; margin-bottom: 7px !important; color: #1C1C1C !important; padding: 0 !important; letter-spacing: 0 !important; font-family: 'Poppins', Arial, sans-serif !important; }
  .psb-hero-desc { font-size: 13.5px !important; font-weight: 400 !important; line-height: 21px !important; margin-bottom: 10px !important; color: #383838CC !important; padding: 0 !important; font-family: 'Inter', Arial, sans-serif !important; }
  .psb-service-meta-row { gap: 10px !important; margin-bottom: 6px !important; margin-top: 0 !important; padding: 0 !important; align-items: center !important; }
  .psb-service-meta { font-size: 13.5px !important; gap: 4px !important; color: #383838 !important; font-family: 'Inter', Arial, sans-serif !important; align-items: center !important; }
  .psb-meta-icon { width: 17.5px !important; height: 17.5px !important; min-width: 17.5px !important; margin-right: 4px !important; background-size: contain !important; display: inline-block !important; background-repeat: no-repeat;}
  .psb-service-virtual { margin-bottom: 9px !important; margin-top: 0 !important; padding: 0 !important; }
  .psb-checkbox-label { font-size: 14px !important; gap: 9px !important; font-family: 'Inter', Arial, sans-serif !important; align-items: center !important; font-weight: 500 !important; color: #383838 !important; }
  .psb-checkbox-custom { width: 20px !important; height: 20px !important; border-radius: 4px !important; border-width: 2px !important; margin-right: 2px !important; }
  .psb-checkbox-label input[type="checkbox"]:checked + .psb-checkbox-custom {
    background: var(--figma-blue) !important; border-color: var(--figma-blue) !important;
  }
  .psb-checkbox-label input[type="checkbox"]:checked + .psb-checkbox-custom::after {
    font-size: 13px !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important;
  }
  .psb-service-price-row { font-size: 22px !important; font-weight: 700 !important; color: #1C1C1C !important; line-height: 30px !important; margin: 0 0 12px 0 !important; padding: 0 !important; }
  .psb-price-currency,
  .psb-price-amount { font-size: 22px !important; font-weight: 700 !important; color: #1C1C1C !important; }
  .psb-btn-book { font-size: 14px !important; border-radius: 8px !important; padding: 10px 20px !important; height: 44px !important; min-width: 112px !important; max-width: 200px !important; margin: 0 0 14px 0 !important; font-family: 'Poppins', Arial, sans-serif !important; font-weight: 600 !important; background: var(--figma-blue) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 18px 0 rgba(44, 62, 80, 0.07) !important; }
  .psb-faqs-content { margin-top: 8px !important; padding-top: 8px !important; width: 100vw !important; margin-left: -4vw !important; padding-left: 4vw !important; padding-right: 4vw !important; box-sizing: border-box !important; }
  .psb-faq-item { border-bottom: 2px solid #d2d4e3 !important; margin-bottom: 0 !important; }
  .psb-faq-question { font-size: 13px !important; font-family: 'Poppins', Arial, sans-serif !important; font-weight: 600 !important; color: #383838 !important; padding: 13px 0 10px 0 !important; background: none !important; outline: none !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; letter-spacing: 0 !important; }
  .psb-faq-icon { font-size: 20px !important; margin-left: 8px !important; color: #383838 !important; font-weight: bold !important; transition: transform 0.2s !important; }
  .psb-faq-answer { font-size: 13px !important; line-height: 1.4 !important; color: #383838 !important; margin-bottom: 6px !important; margin-top: 0 !important; max-height: 210px !important; }
  .psb-faq-answer p { font-size: 13px !important; color: #383838 !important; margin: 0 0 6px 0 !important; }
  .psb-related-services { background: #fff !important; max-width: 100vw !important; margin: 0 !important; padding: 18px 0 22px 22px !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden;}
  .psb-section-title { font-size: 19px !important; font-family: 'Poppins', Arial, sans-serif !important; margin-bottom: 11px !important; margin-left: 3vw !important; color: #1C1C1C !important; text-align: left !important; font-weight: 600 !important; }
  .psb-related-grid { gap: 16px !important; flex-wrap: nowrap !important; overflow-x: auto !important; padding: 0 0 8px 0 !important; margin: 0 !important; width: 100vw !important; }
  .psb-related-card { width: 70vw !important; min-width: 68vw !important; max-width: 97vw !important; margin: 0 0 10px 0 !important; border-radius: 14px !important; box-shadow: 0 1.5px 7px rgba(44,62,80,0.07) !important; padding: 11px 3vw 13px 3vw !important; border: 1px solid #e4e4e4 !important; display: flex !important; flex-direction: column !important; }
  .psb-card-top { gap: 7px !important; }
  .psb-card-title { font-size: 13.5px !important; line-height: 21px !important; font-weight: 600 !important; color: #1C1C1C !important; margin: 0 0 2px 0 !important; font-family: 'Poppins', Arial, sans-serif !important; }
  .psb-card-desc { font-size: 9.5px !important; line-height: 15px !important; color: #999 !important; margin: 8px 0 0 0 !important; font-family: 'Inter', Arial, sans-serif !important; min-height: 21px !important; }
  .psb-card-image { width: 55px !important; height: 45px !important; border-radius: 9px !important; background: #f5f6fa !important; border: 1.2px solid #e1e6ed !important; margin-left: auto !important; margin-right: 0 !important; box-shadow: 0 1.5px 7px rgba(44,62,80,0.05) !important; }
  .psb-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 9px !important; display: block !important; }
  .psb-card-bottom { margin-top: 9px !important; gap: 9px !important; }
  .psb-card-price { font-size: 14.5px !important; font-weight: 700 !important; color: #1C1C1C !important; letter-spacing: 0 !important; margin: 0 !important; }
  .psb-card-book { font-size: 11.5px !important; min-width: 65px !important; padding: 7px 10px !important; border-radius: 8px !important; background: var(--figma-blue) !important; color: #fff !important; margin-left: 6px !important; height: 26px !important; font-family: 'Poppins', Arial, sans-serif !important; font-weight: 600 !important; }
}

/* Ultra small screens: shrink fonts and padding */
@media (max-width: 430px) {
  .psb-hero-title { font-size: 17px !important; line-height: 24px !important; }
  .psb-section-title { font-size: 16px !important; }
  .psb-card-title { font-size: 12.3px !important; }
  .psb-faq-question { font-size: 11.5px !important; }
}


/* === FAQ OVERRIDES & FIXES === */
.psb-faq-question,
.psb-faq-question:focus,
.psb-faq-question:active {
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #383838 !important;
  width: 100% !important;
  padding: 20px 0 14px 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between; /* THIS puts the + at the end! */
  text-align: left !important;
  gap: 0 !important;
  overflow: visible !important;
}

/* Remove any leftover Elementor border or background on .psb-faq-question */
.psb-faq-question,
.psb-faq-question:focus,
.psb-faq-question:active {
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Keep the icon at far right, never wrapping */
.psb-faq-icon {
  margin-left: 16px !important;
  flex-shrink: 0;
  color: var(--figma-blue);
  font-size: 24px;
  transition: transform 0.2s, color 0.16s;
}

/* FAQ hover: text + icon turn blue, no border, no bg */
.psb-faq-question:hover,
.psb-faq-question:focus {
  color: var(--figma-blue) !important;
  background: none !important;
  border: none !important;
  outline: none !important;
}

.psb-faq-question:hover .psb-faq-icon,
.psb-faq-question:focus .psb-faq-icon {
  color: var(--figma-blue-hover) !important;
}

/* Prevent FAQ overflow (mobile and desktop) */
.psb-faqs-content,
.psb-faq-item,
.psb-faq-question {
  max-width: 100%;
  overflow-x: hidden;
  word-break: break-word;
}

.psb-card-desc {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  color: #5e647a;
  font-weight: 500;
  margin: 14px 0 0 0;
  line-height: 1.5;
  min-height: 38px;
  max-width: 96%;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .psb-detail-card-grid {
    display: flex
;
    flex-direction: column-reverse;
    gap: 64px;
    align-items: start;
    margin-bottom: 15px;
    padding: 0;
    min-height: 350px;
}
  .psb-related-card {
        width: 426px;
        min-width: 426px;
        max-width: 230px;
        padding: 20px 18px 18px 18px !important;
    }
    .psb-card-image img {
    width: 100%;
    min-width: 300px
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}
.psb-related-services{
    margin: 20px 0px 20px 50px;
  }
}


.psb-service-virtual {
    display: none;
}

.psb-btn:focus {
    background: #23287B;
    color: #fff;
}

/* Stop stretching and centering the image column */
.psb-detail-image-wrap {
  /* remove the stretch */
  height: auto;            /* was: height: 100% */
  align-self: start;       /* keep the column aligned to the top of the grid row */
  align-items: flex-start; /* was: center; keeps the image at the top inside the wrap */
  justify-content: flex-start; /* was: center; */
}

/* Make sure the image itself doesn't introduce extra vertical centering */
.psb-detail-image-wrap img {
  display: block;
}

/* Tablet band: keep TWO columns and pin image to top */
@media (min-width: 701px) and (max-width: 1100px) {

  /* Put the grid back (override the column-reverse flex) */
  .psb-detail-card-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: start;
    min-height: auto;
  }

  /* Stop the image from re-centering/pushing */
  .psb-detail-image-wrap {
    height: auto;          /* was: 100% */
    align-self: start;
    align-items: flex-start;   /* was: center */
    justify-content: flex-start; /* was: center */
    min-width: 0;          /* drop the 340px constraint on tablets */
  }

  .psb-detail-image-wrap img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    display: block;
  }
}

/* Optional: make the image sticky on tablet+ so the FAQ can grow without moving it */
@media (min-width: 701px) {
  .psb-detail-image-wrap {
    position: sticky;
    top: 24px;
  }
}

.psb-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.32s; }
.psb-faq-answer.active { max-height: 1000px; }

/* ============== TABLET FIX (701–1100px) ============== */
/* Put the grid back, stop column-reverse, give the image room, pin it to the top */
@media (min-width:701px) and (max-width:1100px) {
  .psb-service-detail-container { padding: 32px 32px 36px 32px !important; }

  .psb-detail-card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;  /* 2 equal columns on tablet */
    gap: 32px !important;
    align-items: start !important;
    min-height: auto !important;
  }

  .psb-detail-image-wrap {
    position: sticky !important;  /* keeps image visible as FAQ opens */
    top: 24px !important;
    height: auto !important;      /* kill height:100% stretch */
    align-self: start !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-width: 0 !important;      /* drop the 340px min that squeezes content */
  }

  .psb-detail-image-wrap img {
    width: 100% !important;
    max-width: 520px !important;  /* avoid thumbnail look */
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* ============== NARROWER TABLET (≤900px) ============== */
@media (min-width:701px) and (max-width:900px) {
  .psb-detail-card-grid {
    grid-template-columns: 1.1fr 0.9fr !important; /* a bit more space for text */
    gap: 24px !important;
  }
}

/* ============== MOBILE (≤700px) — keep your single-column ============== */
@media (max-width:700px) {
  .psb-detail-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .psb-detail-image-wrap {
    order: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .psb-detail-image-wrap img {
    width: 92vw !important;
    max-width: 92vw !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
  }
}

/* ============== Smoother accordion (prevents weird clipping) ============== */
.psb-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.32s; }
.psb-faq-answer.active { max-height: 1000px; } /* generous cap */

/* ------- SMALL TABLETS / LARGE PHONES ------- */
/* Single column, BIG image on top */
@media (min-width: 600px) and (max-width: 899px) {
  .psb-detail-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: stretch !important;
  }

  .psb-detail-image-wrap {
    order: 0 !important;
    position: static !important;   /* no sticky here */
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    align-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .psb-detail-image-wrap img {
    width: 100% !important;
    max-width: 680px !important;   /* nice, big visual */
    height: auto !important;
    aspect-ratio: 16/9 !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .psb-detail-info {
    order: 1 !important;
  }
}

/* ------- LARGE TABLETS ------- */
/* Two columns; image pinned to top (optionally sticky) */
@media (min-width: 900px) and (max-width: 1100px) {
  .psb-detail-card-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
  }

  .psb-detail-image-wrap {
    position: sticky;  /* comment this line if you don't want sticky */
    top: 24px;
    height: auto !important;
    align-self: start !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .psb-detail-image-wrap img {
    width: 100% !important;
    max-width: 520px !important;   /* keeps it substantial without dwarfing text */
    height: auto !important;
    aspect-ratio: 16/9 !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* ------- MOBILE (already close to what you had) ------- */
/* Ensure the mobile single-column stays clean */
@media (max-width: 599px) {
  .psb-detail-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .psb-detail-image-wrap {
    width: 100% !important;
    height: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .psb-detail-image-wrap img {
    width: 92vw !important;
    max-width: 92vw !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    object-fit: contain !important;
  }
}


/* ---------- MOBILE TYPE + SPACING NORMALIZER (<=700px) ---------- */
@media (max-width: 700px) {

  /* Make sure the actual weights are used */
  @font-face { font-family: 'Inter'; font-display: swap; src: local('Inter'); }
  @font-face { font-family: 'Poppins'; font-display: swap; src: local('Poppins'); }

  :root {
    /* Figma palette (mobile) */
    --figma-title: #1C1C1C;
    --figma-body:  #383838;
    --figma-body-soft: #383838CC;
    --figma-blue: #2B3186;
    --figma-blue-hover: #232278;

    /* Type scale centered on Figma targets */
    --m-h1: clamp(1.25rem, 4vw + 0.6rem, 1.4rem);   /* ≈ 20–22px */
    --m-body: clamp(0.88rem, 1.4vw + 0.7rem, 0.94rem); /* ≈ 14–15px */
    --m-meta: clamp(1.05rem, 1.8vw + 0.8rem, 1.12rem); /* ≈ 16.5–18px */
    --m-price: clamp(1.9rem, 6vw + 1rem, 2.4rem);  /* ≈ 30–38px */
    --m-btn: 1rem;                                 /* 16px */
    --m-faq-q: clamp(0.8rem, 1.2vw + 0.65rem, 0.9rem); /* ≈ 12.5–14px */

    /* Tight, Figma-like leading */
    --lh-title: 1.45;
    --lh-body: 1.55;
    --lh-meta: 1.2;
  }

  /* Page & container */
  body { color: var(--figma-body); -webkit-font-smoothing: antialiased; }

  .psb-service-detail-container {
    background: rgba(43,49,134,0.04) !important;
    padding: 20px 16px 28px !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Single column rhythm */
  .psb-detail-card-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Image stays hero, 16:9 */
  .psb-detail-image-wrap { margin: 0 auto 12px !important; }
  .psb-detail-image-wrap img {
    width: 100% !important;
    max-width: 92vw !important;
    height: auto !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  /* Title + description */
  .psb-service-hero { margin: 0 0 8px 0 !important; }
  .psb-hero-title {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: var(--m-h1) !important;
    line-height: var(--lh-title) !important;
    color: var(--figma-title) !important;
    margin: 0 0 6px 0 !important;
  }
  .psb-hero-desc {
    font-family: 'Inter', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--m-body) !important;
    line-height: var(--lh-body) !important;
    color: var(--figma-body-soft) !important;
    margin: 0 0 8px 0 !important;
  }

  /* Meta row (clock + validity) */
  .psb-service-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 8px 0 !important;
  }
  .psb-service-meta {
    font-family: 'Inter', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: var(--m-meta) !important;
    line-height: var(--lh-meta) !important;
    color: var(--figma-body) !important;
    gap: 6px !important;
  }
  .psb-meta-icon {
    width: 18px !important;
    height: 18px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    flex-shrink: 0 !important;
  }

  /* Checkbox line */
  .psb-service-virtual { margin: 6px 0 10px 0 !important; }
  .psb-checkbox-label {
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: var(--m-body) !important;
    font-weight: 500 !important;
    color: var(--figma-body) !important;
    gap: 10px !important;
  }
  .psb-checkbox-custom { width: 20px !important; height: 20px !important; border-radius: 4px !important; }

  /* Price + Book */
  .psb-service-price-row {
    font-size: var(--m-price) !important;
    line-height: 1.35 !important;
    color: var(--figma-title) !important;
    margin: 2px 0 10px 0 !important;
  }
  .psb-btn-book {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: var(--m-btn) !important; /* 16 */
    height: 46px !important;
    padding: 10px 18px !important;
    background: var(--figma-blue) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 18px rgba(44,62,80,0.07) !important;
  }

  /* FAQ */
  .psb-faqs-content { margin-top: 8px !important; padding-top: 8px !important; }
  .psb-faq-item { border-bottom: 2px solid rgba(56,56,56,0.8) !important; }
  .psb-faq-question {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: var(--m-faq-q) !important; /* ≈13 */
    line-height: 1.6 !important;
    color: var(--figma-body) !important;
    padding: 12px 0 10px !important;
  }
  .psb-faq-icon { font-size: 20px !important; color: var(--figma-body) !important; }
  .psb-faq-answer { font-size: var(--m-body) !important; line-height: var(--lh-body) !important; }

  /* Section: Related services — keep scroller but unify type */
  .psb-related-services {
    background: #fff !important;
    padding: 18px 0 22px 16px !important;
  }
  .psb-section-title {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(1.1rem, 2.4vw + 0.7rem, 1.25rem) !important; /* ≈ 18–20 */
    line-height: 1.4 !important;
    color: var(--figma-title) !important;
    margin: 0 0 10px 4px !important;
  }

  .psb-related-grid { gap: 16px !important; padding-bottom: 8px !important; }

  .psb-related-card {
    width: 70vw !important; min-width: 68vw !important;
    border-radius: 14px !important;
    padding: 12px 12px 14px !important;
    box-shadow: 0 2px 10px rgba(44,62,80,0.08) !important;
  }
  .psb-card-title {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(0.9rem, 1.6vw + 0.7rem, 1.05rem) !important; /* ≈ 14–16 */
    line-height: 1.45 !important;
    color: var(--figma-title) !important;
    min-height: auto !important;
  }
  .psb-card-desc {
    font-family: 'Inter', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(0.72rem, 1.2vw + 0.55rem, 0.85rem) !important; /* ≈ 11–13.5 */
    line-height: 1.55 !important;
    color: #999 !important;
    -webkit-line-clamp: 3 !important;
  }
  .psb-card-price {
    font-family: 'Inter', Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(0.95rem, 1.8vw + 0.7rem, 1.2rem) !important; /* ≈ 15–19 */
    color: var(--figma-title) !important;
  }
  .psb-card-book {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(0.7rem, 1.2vw + 0.55rem, 0.9rem) !important; /* ≈ 11–14 */
    padding: 8px 12px !important;
    border-radius: 8px !important;
    background: var(--figma-blue) !important;
  }
}

/* ---------- MOBILE: make cards look like desktop (single column, no horizontal scroll) ---------- */
@media (max-width: 700px) {
  /* section */
  .psb-related-services {
    background: #fff !important;
    padding: 20px 0 28px !important;
  }

  /* turn the scroller into a block grid */
  .psb-related-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;  /* 1 per row */
    gap: 16px !important;
    overflow: visible !important;           /* kill scrollbar */
    padding: 0 16px !important;
    margin: 0 !important;
  }

  /* card resets — remove the “70vw” sizing from earlier rules */
  .psb-related-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;

    border: 1.5px solid #e2e4f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 3px 16px rgba(44,62,80,0.07) !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* header row */
  .psb-card-top {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .psb-card-title {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    color: #181c22 !important;
    min-height: auto !important;
    margin: 0 !important;
  }
  .psb-card-image {
    width: 72px !important;
    height: 60px !important;
    border-radius: 10px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    background: #f5f6fa !important;
    border: 1.2px solid #e1e6ed !important;
  }

  /* body text */
  .psb-card-desc {
    font-family: 'Inter', Arial, sans-serif !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #5e647a !important;
    margin: 10px 0 0 0 !important;

    /* keep the desktop feel: 2–3 lines max */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* price + button row */
  .psb-card-bottom {
    margin-top: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .psb-card-price {
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #181c22 !important;
  }
  .psb-card-book {
    background: #2B3186 !important;
    color: #fff !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    min-width: unset !important;
    height: auto !important;
    text-decoration: none !important;
  }
}

/* ---------- VERY SMALL PHONES: tighten a touch ---------- */
@media (max-width: 380px) {
  .psb-card-image { width: 64px !important; height: 54px !important; }
  .psb-card-title { font-size: 15px !important; }
}

/* ---------- TABLETS: two cards per row like a small desktop grid ---------- */
@media (min-width: 701px) and (max-width: 1100px) {
  .psb-related-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    overflow: visible !important;
    padding: 0 20px !important;
  }
  .psb-related-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}