/*
 * site-additions.css — the only stylesheet added on top of the Kinez theme.
 *
 * It holds three kinds of rule and nothing else:
 *   1. the books filter toolbar and empty state (markup the theme has no
 *      equivalent for),
 *   2. the books.html page shell, and
 *   3. narrowly scoped fixes where real content meets a theme rule written for
 *      the demo content — each one commented with what it corrects.
 *
 * Book cards reuse the theme's own `.cources-single-items` component, so no
 * card design is defined here. Everything below uses the template's existing
 * colours (p1 #600EE4, text-p1 #F15F25, section purple #6754E9, card white)
 * so it reads as part of the Kinez design system rather than an addition.
 */

/* ---- header offset ----
   `header-style1` reserves `top: 56px` for `.header-top-section`, the contact
   strip that is no longer on the page, leaving an empty band above the nav.
   Below 992px the template already sets `top: 0`. */
.header-style1 {
  top: 0;
}

/* ---- books.html page shell ----
   `header-style1` is absolutely positioned at top:56px and overlays whatever
   comes first, which on index.html is the hero. The catalogue page has no
   hero, so its first section needs to start below the header instead. */
.books-page-section {
  /* #6754E9 is the flat purple sampled from course-bg.png, and the colour the
     theme already uses for this section's hover states. */
  background-color: #6754e9;
  padding-top: 185px;
}

/* course-bg.png has a scalloped top edge. Mid-page (index.html) that reads as a
   section divider; as the first section it would be drawn straight through the
   overlaid header, so start the image below the header and let the flat
   background colour above carry the header instead. The offset tracks the
   header's bottom edge: 56px strip + ~68px header above 992px, and just the
   header below it, where the template hides the strip. */
.books-page-section .course-bg {
  top: 90px;
  height: calc(100% - 90px);
}

/* The catalogue is several screens tall, and stretched over that height the
   scallops turn into long spikes. Keep the image at its natural proportions
   for the top edge, let the flat background colour fill the middle, and draw
   the bottom scallop with a second copy pinned to the bottom. */
.books-catalogue-section .course-bg {
  height: auto;
  clip-path: inset(0 0 4% 0); /* drop this copy's bottom scallop */
}

.books-catalogue-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100vw * 858 / 1920);
  background: url(../img/element/course-bg.png) center bottom / 100% auto no-repeat;
  clip-path: inset(4% 0 0 0); /* drop this copy's top scallop */
  z-index: -1;
  pointer-events: none;
}

/* ---- scalloped section background on narrow screens ----
   `.course-bg` is a 1920x858 image stretched to the section's full width and
   height. Once the section is a few thousand pixels tall — which it is on a
   phone, where book cards stack one per row — the scallop is drawn as thin
   vertical spikes. Below 992px drop the image on both book sections and let
   the flat purple carry them, the way the template drops its other
   decorations at small sizes. */
@media (max-width: 991px) {
  .books-page-section .course-bg,
  .books-catalogue-section::after,
  #books.courses-section .course-bg {
    display: none;
  }

  #books.courses-section {
    background-color: #6754e9;
  }

  .books-page-section {
    padding-top: 130px;
  }
}

.books-page-intro {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.books-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  /* The theme's book cards sit at z-index 21 (.cources-single-items), so the
     toolbar must stack above them or its open dropdowns paint underneath. */
  position: relative;
  z-index: 30;
}

/* ---- selects (niceSelect wraps these at runtime) ---- */
.books-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.books-toolbar__filters .nice-select {
  background-color: #fff;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 14px 48px 14px 20px;
  font-size: 16px;
  line-height: 20px;
  height: auto;
  color: rgb(0, 2, 41);
  width: auto;
  min-width: 180px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.books-toolbar__filters .nice-select:hover,
.books-toolbar__filters .nice-select.open,
.books-toolbar__filters .nice-select:focus {
  border-color: #f15f25;
}

.books-toolbar__filters .nice-select .current {
  color: rgb(0, 2, 41);
  font-weight: 600;
}

.books-toolbar__filters .nice-select:after {
  border-bottom: 2px solid #f15f25;
  border-right: 2px solid #f15f25;
  height: 8px;
  width: 8px;
  right: 20px;
  top: 50%;
  margin-top: -6px;
}

.books-toolbar__filters .nice-select.open:after {
  margin-top: -2px;
}

/* The theme paints this list purple, which hid the grey option text. */
.books-toolbar__filters .nice-select .list {
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 2, 41, 0.2);
  z-index: 20;
}

.books-toolbar__filters .nice-select .option {
  color: rgb(0, 2, 41);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  padding: 9px 14px;
  border: none;
  border-radius: 6px;
  white-space: nowrap;
}

.books-toolbar__filters .nice-select .option:hover,
.books-toolbar__filters .nice-select .option.focus,
.books-toolbar__filters .nice-select .option.selected.focus {
  background-color: #fff0e8;
  color: rgb(0, 2, 41);
}

.books-toolbar__filters .nice-select .option.selected {
  background-color: #f15f25;
  color: #fff;
  font-weight: 600;
}

/* Fallback for the brief moment before niceSelect initialises, and for
   any environment where jQuery has not loaded. */
.books-toolbar__filters select {
  background-color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 16px;
  color: rgb(0, 2, 41);
  font-family: inherit;
}

/* ---- clear button ---- */
.books-toolbar__clear {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  border-radius: 10px;
  padding: 16px 22px;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  transition: all 0.4s;
}

.books-toolbar__clear:hover {
  background: #f15f25;
  border-color: #f15f25;
  color: #fff;
}

/* ---- results count ---- */
.books-toolbar__count {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  margin-left: auto;
}

/* ---- book card: keeps the theme card, only sizes the portrait cover ---- */
/* The theme's blob card background is 419x470 and drawn with `object-fit:
   contain`, which letterboxes once a card is taller than it is wide — which a
   portrait book cover always makes it. `fill` stretches the same blob to the
   card instead, so the card keeps its shape and the cover sits inside it. */
.cources-single-items.book-card .cources-bg {
  object-fit: fill;
}

.cources-single-items.book-card .c-image img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.cources-single-items.book-card .c-content h3 span {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  display: block;
}

.cources-single-items.book-card .border-bottom-deshed {
  margin-top: auto;
}

/* Every card in a row takes the row's height, so a title that wraps to two
   lines doesn't leave its neighbours looking short. The dashed rule sits at
   the bottom of each card, lined up across the row. */
.cources-single-items.book-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cources-single-items.book-card .c-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cources-single-items.book-card .c-content h3 {
  margin-bottom: 16px !important;
}

/* ---- why-choose-us blob cards ----
   The theme's blob background is an SVG with a square viewBox. Its own copy
   sizes itself intrinsically, which leaves the blob shorter than the card once
   the card is taller than it is wide. Paired with preserveAspectRatio="none"
   on the markup, these two rules let the blob stretch to the card instead —
   the same thing the theme does for its `.icon-bg` blob on testimonial cards.
   Below 768px the theme hides `.bg-area` entirely, and that still applies. */
#why-choose-us .program-item-wrap .bg-area,
#core-values .program-item-wrap .bg-area {
  height: 100%;
}

#why-choose-us .program-item-wrap .bg-area svg,
#core-values .program-item-wrap .bg-area svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* The theme's program cards carry a PNG illustration in `.thumb`; these cards
   use a Font Awesome glyph instead, sized to the same 60px slot and coloured
   with the theme's primary purple. */
#why-choose-us .why-choose-icon,
#core-values .why-choose-icon {
  width: auto;
  font-size: 48px;
  line-height: 60px;
  color: #600ee4;
}

/* The theme gives each program card a flat mobile background per style1–4
   (where the blob is hidden); the fifth card gets the testimonial peach. */
@media (max-width: 767px) {
  .program-history-section .style5 {
    background-color: #fff0e8;
  }
}

/* ---- testimonial avatars ----
   Positioning context for the theme's dashed ring around each 80px photo. */
#testimonials .testimonial-single-item .user-img {
  position: relative;
}

/* The real reviews run several sentences; the theme's quote style is set for
   one-liners, so loosen the leading slightly and space paragraphs evenly. */
#testimonials .testimonial-single-item .content p {
  line-height: 26px;
  margin-bottom: 12px;
}

/* Slides stretch to the tallest review so the row of cards lines up, and the
   reviewer's name sits above their school rather than beside it — the real
   roles run to two lines, which squeezed the name into a narrow column. */
#testimonials .testimonial-slider .swiper-slide {
  height: auto;
}

#testimonials .testimonial-card {
  height: 100%;
}

/* On wide screens the theme draws the card as a fixed-size blob (and dashed
   outline) sized for a one-line quote, so the longer reviews spilled out of it.
   Stretch both shapes to the card's real height — the SVGs carry
   preserveAspectRatio="none" — and keep the dashed stroke from distorting. */
#testimonials .testimonial-card .icon-bg,
#testimonials .testimonial-card .icon-border {
  height: 100%;
}

#testimonials .testimonial-card .icon-border svg path {
  vector-effect: non-scaling-stroke;
}

@media screen and (min-width: 1601px) {
  #testimonials .testimonial-card {
    padding: 64px 56px;
  }
}

/* The slider's bottom padding and Why Choose Us' top padding stacked into a
   ~240px gap between the two sections; halve it. */
#testimonials .testimonial-slider .swiper-wrapper.space-bottom {
  padding-bottom: 50px;
}

#why-choose-us.space-top {
  padding-top: 60px;
}

@media (max-width: 991px) {
  #testimonials .testimonial-slider .swiper-wrapper.space-bottom {
    padding-bottom: 40px;
  }

  #why-choose-us.space-top {
    padding-top: 40px;
  }
}

#testimonials .testimonial-single-item .author-info {
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
}

/* ---- offcanvas contact details ----
   The panel capitalises every word, which is fine for the template's "Mon-Friday"
   style strings but turns the real email into "Info@Himadripublications.Com". */
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li {
  text-transform: none;
}

/* ---- footer contact columns ----
   The template's footer carried one-line values here ("123 Rainbow Street"),
   which cleared the floating rainbow decoration at x 65–205. The real
   registered-office address wraps to three lines, and its white text lands on
   the decoration's white clouds between roughly 1400px and 1700px, where the
   first column still starts at the container edge. The template already hides
   this decoration below 1400px (`d-xxl-block`); extend that to 1700px, above
   which the container centres and the collision no longer happens. */
.footer-style1 .footer-info-item {
  position: relative;
  z-index: 2;
}

@media (max-width: 1700px) {
  .footer-style1 .footer-estrue {
    display: none !important;
  }
}

.footer-style1 .footer-copyright {
  font-size: 15px;
  opacity: 0.85;
}

/* ---- workshops list ----
   `.sassion-item` is a one-row "Morning Session / 9:00 am" strip. The workshop
   points are full sentences, so stack the label above its text and left-align
   both, keeping the theme's purple tile and spacing. */
#contact .morning-sassion .sassion-item {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

#contact .morning-sassion .sassion-item .pra {
  text-align: left;
}

/* ---- buy_now.html catalogue ----
   Shares the books page shell (purple section under the header). The banner
   and the embedded Slides catalogue sit on the same white, rounded surface the
   theme uses for book cards, so they read as part of that section. */
.buy-now-card {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 20px;
  padding: 16px;
}

/* Catalogue cover, recreated from the original banner: cream paper, heavy
   serif title, navy policy pill and the red class-range line. */
.catalogue-banner {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(214, 196, 168, 0.25), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(214, 196, 168, 0.25), transparent 55%),
    #fbf8f2;
  padding: clamp(28px, 6vw, 72px) clamp(16px, 4vw, 48px);
  text-align: center;
}

.catalogue-banner__title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  font-size: clamp(34px, 7.5vw, 92px);
  line-height: 1.05;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: #2a0d14;
  margin: 0 0 clamp(14px, 2.5vw, 28px);
}

.catalogue-banner__title .catalogue-banner__year {
  font: inherit;
  color: inherit;
  white-space: nowrap;
}

.catalogue-banner__policy {
  display: inline-block;
  background-color: #2c2f7a;
  color: #fff;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 2.2vw, 26px);
  line-height: 1.3;
  padding: 0.35em 1.6em;
  border-radius: 999px;
  margin: 0 0 clamp(12px, 2vw, 24px);
}

.catalogue-banner__books {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(18px, 3vw, 36px);
  line-height: 1.2;
  color: #e3342f;
  margin: 0;
}

.buy-now-card iframe {
  border: 0;
}

.buy-now-card__caption {
  padding: 14px 4px 2px;
  text-align: center;
}

@media (max-width: 575px) {
  .buy-now-card {
    padding: 10px;
    border-radius: 14px;
  }
}

/* ---- who_we_are.html ----
   Built from the same pieces as the homepage: the purple books band for the
   intro and the ecosystem, the admissions layout for "Our Beginning", the
   blob-card grid for core values. The rules below only cover what those
   pieces have no slot for: long-form copy, the mission/vision cards and the
   closing quote. Colours are the theme's own pastel card fills. */
.who-intro-section {
  padding-bottom: 150px;
}

.who-intro-copy {
  max-width: 820px;
}

.who-intro-copy p {
  color: #fff;
  font-size: 17px;
  line-height: 28px;
  margin-bottom: 16px;
}

.who-card {
  border-radius: 24px;
  padding: 40px;
}

.who-card--mission {
  background-color: #f2e9ff;
}

.who-card--vision {
  background-color: #dbfff9;
}

.who-card p,
.who-eco-card p {
  font-size: 16px;
  line-height: 26px;
  color: #4a4a50;
  margin-bottom: 14px;
}

.who-card__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #600ee4;
  color: #fff;
  font-size: 24px;
  margin-bottom: 20px;
}

.who-card__title {
  font-family: "Baloo 2", sans-serif;
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  color: rgb(0, 2, 41);
  margin-bottom: 14px;
}

.who-eco-card {
  padding: 32px 28px;
}

.who-eco-card .who-card__title {
  font-size: 24px;
  line-height: 30px;
}

.who-ecosystem-section {
  position: relative;
}

.who-quote {
  max-width: 860px;
}

.who-quote .who-card__icon {
  background-color: #f15f25;
}

.who-quote__text {
  font-family: "Baloo 2", sans-serif;
  font-size: 36px;
  line-height: 46px;
  margin: 18px 0 14px;
}

.who-quote__author {
  font-size: 18px;
  font-weight: 600;
  color: #f15f25;
}

/* The source page is a numbered 01–07 deck; the numbers carry over as a
   large label above each point. */
.who-num {
  font-family: "Baloo 2", sans-serif;
  font-size: 64px;
  line-height: 1;
  font-weight: 800;
  color: #f15f25;
  margin-bottom: 12px;
}

.who-num--light {
  color: #fff;
  opacity: 0.9;
}

.who-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.who-card__head .who-card__icon,
.who-card__head .who-num {
  margin-bottom: 0;
}

.who-company {
  font-family: "Baloo 2", sans-serif;
  font-size: 48px;
  line-height: 56px;
  margin: 18px 0 6px;
}

.who-since {
  font-size: 20px;
  letter-spacing: 0.04em;
}

.who-card--thanks {
  background-color: #fff0e8;
}

.who-thanks__title {
  font-family: "Baloo 2", sans-serif;
  font-size: 44px;
  line-height: 52px;
  margin-bottom: 12px;
}

.who-thanks__org {
  font-weight: 700;
  color: rgb(0, 2, 41);
}

.who-thanks__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(0, 2, 41, 0.15);
  font-size: 16px;
}

.who-thanks__list li:last-child {
  border-bottom: 0;
}

.who-thanks__label {
  flex: 0 0 180px;
  font-weight: 700;
  color: rgb(0, 2, 41);
}

.who-thanks__list a {
  color: #600ee4;
}

@media (max-width: 991px) {
  .who-intro-section .course-bg,
  .who-ecosystem-section .course-bg {
    display: none;
  }

  .who-intro-section,
  .who-ecosystem-section {
    background-color: #6754e9;
  }

  .who-intro-section {
    padding-bottom: 80px;
  }
}

@media (max-width: 575px) {
  .who-card {
    padding: 28px 22px;
    border-radius: 18px;
  }

  .who-card__title {
    font-size: 24px;
    line-height: 30px;
  }

  .who-quote__text {
    font-size: 26px;
    line-height: 34px;
  }

  .who-num {
    font-size: 48px;
  }

  .who-company {
    font-size: 32px;
    line-height: 40px;
  }

  .who-thanks__title {
    font-size: 34px;
    line-height: 42px;
  }

  .who-thanks__label {
    flex-basis: 100%;
  }
}

/* ---- contact.html ----
   Same purple intro band as who_we_are.html, the theme's own contact
   blocks (call-info_contact) for the address, and the who-card pastels for
   the helpdesk / distributor / Author's Club forms. */
.contact-hours {
  background-color: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 12px 24px;
  color: #fff;
  font-size: 17px;
}

.contact-hours i {
  font-size: 22px;
}

.contact-phones {
  gap: 4px 18px;
}

.contact-phones a {
  font-size: 20px;
  font-weight: 600;
  font-family: "Baloo 2", sans-serif;
  color: #000;
}

.contact-map {
  min-height: 420px;
  background-color: #f7f7f7;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

.contact-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-action .common_btn {
  margin-top: auto;
}

@media (max-width: 575px) {
  .contact-hours {
    font-size: 15px;
    padding: 10px 18px;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 320px;
  }

  .contact-left-get .call-info-contact-wrap {
    padding: 18px;
  }

  .contact-left-get .call-info_contact .cont a,
  .contact-phones a {
    font-size: 16px;
  }

  .contact-action .common_btn {
    white-space: normal !important;
  }
}

/* ---- support.html ----
   Calendly booking iframe inside the buy-now card. Calendly's inline
   widget needs roughly 700px of height to show the month and time slots
   without an inner scrollbar. */
.support-calendar {
  background-color: #fff;
}

.support-calendar iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
}

@media (max-width: 767px) {
  .support-calendar iframe {
    height: 900px;
  }
}

/* ---- testimonials.html ----
   The homepage testimonial cards laid out as a static two-column grid. The
   theme's blob SVGs are sized for a single wide slide, so these use the flat
   peach card the theme itself switches to below 1600px, at every width. */
.testimonials-page-section .testimonial-card {
  height: 100%;
  background-color: #fff0e8;
  border-radius: 24px;
  padding: 40px 32px;
  transition: background-color 0.3s;
}

.testimonials-page-section .testimonial-card:hover {
  background-color: #f2edfe;
}

.testimonials-page-section .user-img img {
  display: block;
  width: 80px;
  height: 80px;
  border: 3px solid #fff;
}

.testimonials-more {
  font-family: "Baloo 2", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: rgb(0, 2, 41);
}

@media (max-width: 575px) {
  .testimonials-page-section .testimonial-card {
    padding: 28px 18px;
    border-radius: 18px;
  }
}

/* ---- privacy.html, terms-conditions.html, disclaimer.html ----
   Same purple intro band as the other inner pages, then a two-column
   layout: a sticky sidebar (page switcher, on-page contents, contact card)
   and the legal copy split into icon-led blocks. Colours are the theme's
   purple, orange and pastel card fills. */
.legal-intro-section {
  padding-bottom: 130px;
}

.legal-intro__icon {
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 30px;
  margin-bottom: 18px;
}

.legal-intro-section .badge-section {
  width: max-content;
}

.legal-crumbs li,
.legal-crumbs a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
}

.legal-crumbs a:hover {
  color: #fff;
}

.legal-crumbs li[aria-hidden] {
  font-size: 10px;
  opacity: 0.7;
}

.legal-crumbs li[aria-current] {
  color: #fff;
  font-weight: 700;
}

.legal-count {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background-color: #f15f25;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* The theme's `.fix` is overflow: hidden, which turns the section into a
   scroll container and stops the sidebar sticking. `clip` still trims the
   decoration but leaves sticky positioning working. */
.legal-section.fix {
  overflow: clip;
}

/* sidebar */
.legal-aside {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.legal-side-card {
  border-radius: 24px;
  padding: 26px;
  background-color: #f2e9ff;
}

.legal-side-card h3 {
  font-family: "Baloo 2", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: rgb(0, 2, 41);
  margin-bottom: 14px;
}

.legal-nav ul,
.legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-nav li + li {
  margin-top: 8px;
}

.legal-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background-color: #fff;
  font-weight: 600;
  color: rgb(0, 2, 41);
  transition: background-color 0.25s, color 0.25s;
}

.legal-nav a i:first-child {
  width: 20px;
  text-align: center;
  color: #600ee4;
}

.legal-nav__arrow {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.5;
}

.legal-nav a:hover,
.legal-nav a.active {
  background-color: #600ee4;
  color: #fff;
}

.legal-nav a:hover i,
.legal-nav a.active i {
  color: #fff;
}

.legal-toc {
  background-color: #fff;
  border: 1px solid #ecebf5;
}

.legal-toc ol {
  counter-reset: toc;
}

.legal-toc li {
  counter-increment: toc;
}

.legal-toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 15px;
  color: #4a4a50;
  border-bottom: 1px dashed #ecebf5;
}

.legal-toc li:last-child a {
  border-bottom: 0;
}

.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-weight: 700;
  color: #f15f25;
}

.legal-toc a:hover {
  color: #600ee4;
}

.legal-help {
  background-color: #6754e9;
  color: #fff;
}

.legal-help h3 {
  color: #fff;
}

.legal-help__icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background-color: #f15f25;
  font-size: 22px;
  margin-bottom: 14px;
}

.legal-help__line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 500;
  padding: 4px 0;
}

.legal-help__line:hover {
  color: #ffd464;
}

.legal-help .common_btn {
  display: inline-flex;
}

/* article */
.legal-block {
  border: 1px solid #ecebf5;
  border-radius: 24px;
  padding: 30px 32px;
  background-color: #fff;
  box-shadow: 0 10px 40px rgba(103, 84, 233, 0.06);
  scroll-margin-top: 110px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.legal-block + .legal-block,
.legal-callout + .legal-block {
  margin-top: 20px;
}

.legal-block:hover {
  border-color: #cfc6fb;
  box-shadow: 0 14px 44px rgba(103, 84, 233, 0.12);
}

.legal-block__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.legal-block__icon {
  flex: 0 0 auto;
  display: inline-flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background-color: #fff0e8;
  color: #f15f25;
  font-size: 20px;
}

.legal-block:nth-child(3n + 2) .legal-block__icon {
  background-color: #f2e9ff;
  color: #600ee4;
}

.legal-block:nth-child(3n + 3) .legal-block__icon {
  background-color: #dbfff9;
  color: #0b8f7d;
}

.legal-block__num {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #c7c7ca;
}

.legal-block h2 {
  font-family: "Baloo 2", sans-serif;
  font-size: 23px;
  line-height: 30px;
  font-weight: 700;
  color: rgb(0, 2, 41);
  margin: 0;
}

.legal-block p,
.legal-callout p,
.legal-term p {
  font-size: 16px;
  line-height: 28px;
  color: #4a4a50;
  margin-bottom: 12px;
}

.legal-block__body p:last-child,
.legal-callout p,
.legal-term p {
  margin-bottom: 0;
}

.legal-callout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px 28px;
  border-radius: 24px;
  background-color: #fff0e8;
  border-left: 4px solid #f15f25;
}

.legal-callout p {
  font-weight: 600;
  color: rgb(0, 2, 41);
}

.legal-callout .legal-block__icon {
  background-color: #fff;
}

.legal-terms {
  margin: 20px 0 0;
}

.legal-term {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid #ecebf5;
  border-radius: 20px;
  background-color: #fff;
  transition: border-color 0.25s, background-color 0.25s;
}

.legal-term + .legal-term {
  margin-top: 14px;
}

.legal-term:hover {
  border-color: #cfc6fb;
  background-color: #faf8ff;
}

.legal-term__num {
  flex: 0 0 auto;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #600ee4;
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 16px;
}

.legal-term:nth-child(even) .legal-term__num {
  background-color: #f15f25;
}

.legal-sign {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: 20px;
  border: 1px dashed #cfc6fb;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: rgb(0, 2, 41);
}

.legal-deco {
  top: 60px;
  right: 40px;
  z-index: -1;
}

@media (max-width: 991px) {
  .legal-intro-section {
    padding-bottom: 70px;
  }

  .legal-aside {
    position: static;
  }
}

@media (max-width: 575px) {
  .legal-block,
  .legal-callout,
  .legal-term {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .legal-callout,
  .legal-term {
    gap: 14px;
  }

  .legal-block h2 {
    font-size: 20px;
    line-height: 26px;
  }

  .legal-block__icon {
    width: 42px;
    height: 42px;
    font-size: 17px;
  }

  .legal-term__num {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

/* ---- "145+ Titles" badge on the homepage ----
   `.boxes` is absolutely positioned and centred inside the badge, so it is
   only as wide as its content. While counterUp runs 1 → 145 the number
   widens, the box re-centres on every tick and "Titles" jitters with it.
   Reserving the final number's width (3 digits) up front, with even-width
   digits, keeps the box a constant size so only the digits change. */
.admission-thumb-wap .count-box .count {
  display: inline-block;
  min-width: 3ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Sit the badge lower so it overlaps the edge of the About photo instead of
   the people in it. Below 450px the template lifts it 140px to clear a video
   box this page doesn't have. */
.admission-thumb-wap .count-box {
  bottom: -70px;
}

@media (max-width: 450px) {
  .admission-thumb-wap .count-box {
    bottom: -50px;
  }
}

/* ---- empty state ---- */
.books-empty {
  text-align: center;
  padding: 40px 20px 10px;
}

.books-empty p {
  max-width: 480px;
  margin: 10px auto 24px;
}

@media (max-width: 767px) {
  .books-toolbar__count {
    margin-left: 0;
  }
}

@media (max-width: 575px) {
  .books-toolbar {
    gap: 12px;
  }

  .books-toolbar__filters {
    width: 100%;
  }

  .books-toolbar__filters .nice-select,
  .books-toolbar__filters select,
  .books-toolbar__clear {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
    text-align: left;
  }
}

/* Hero image: keep it from towering over the headline. The cap is on the
   wrapper's width (image is 1100x989) so the floating circle, flash and bulb
   elements stay positioned against the image. */
.banner-section .hero-thumb {
  max-width: 600px; /* ~540px tall */
  margin-inline: auto;
}

@media (min-width: 992px) {
  .banner-section .hero-thumb {
    margin-right: 172px;
  }
}

.banner-section .hero-thumb .hero-circle {
  left: 89px;
}

/* Without this the img's height attribute wins and stretches it vertically. */
.banner-section .hero-thumb .mimg {
  height: auto;
}

@media (min-width: 1200px) {
  /* width: auto keeps the 1100x989 proportions at the fixed height. */
  .banner-section .hero-thumb .mimg {
    height: 600px;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 991px) {
  .banner-section .hero-thumb {
    max-width: 380px;
  }
}

/* ---- logo ----
   The logo is a stacked mark-over-wordmark on a white ground (not a wide
   strip), so it is sized by height. On the purple header and footer it sits
   on a white rounded tile that matches its own background. */
.header-main .header-logo {
  max-width: none;
  margin: 8px 0;
}

.header-main .header-logo img,
.footer-logo img {
  width: auto;
  height: 72px;
  padding: 4px 8px;
  background-color: #fff;
  border-radius: 12px;
}

.footer-logo {
  width: fit-content;
}

.footer-logo img {
  height: 96px;
}

.offcanvas__info .offcanvas__logo {
  max-width: none;
}

.offcanvas__info .offcanvas__logo img {
  width: auto;
  height: 80px;
  border-radius: 10px;
}

@media (max-width: 1399px) {
  .header-main .header-logo img {
    height: 62px;
  }
}

.sara_box .icon img {
  border-radius: 20px;
}

/* The hero's decorative layers sit above the content (the bottom wave is
   full-width at z-index 1). On wide screens the wave reaches up over the
   "Explore Books" / "Why Choose Us" buttons and swallows clicks on their lower
   half, so let clicks pass through every decoration. */
.banner-section .hero-shape1,
.banner-section .hero-dump,
.banner-section .hero-pen,
.banner-section .hero-car,
.banner-section .hero-thumb .hero-circle,
.banner-section .hero-thumb .flash-ele,
.banner-section .hero-thumb .bulp-ele {
  pointer-events: none;
}