/* ==========================================================================
   responsive.css
   Public-site (Views/Shared/_Layout.cshtml) responsive + typography fixes.

   Loaded AFTER style.css / bootstrap.min.css / lifeadmin.css so it wins the
   cascade without needing !important in most places.

   WHY THIS FILE EXISTS
   --------------------
   assets/css/style.css sets `html { font-size: 10px }`. Every rem-based size
   in Bootstrap 5 therefore renders at 62.5% of its intended value, so on the
   public pages the footer links, the breadcrumb trail, the "Hello <user>"
   greeting and several Bootstrap buttons/labels computed to 10px - unreadable
   on a phone, and below the 16px floor that stops iOS Safari zooming an input
   on focus. The template's own rules are px based, so they were unaffected;
   that is what made the mismatch visible.

   The 10px root is left alone because admin/dashboard screens depend on it.
   Instead the rem-driven text on public pages is lifted back to a readable
   size here. Everything below is scoped to markup only the public layout and
   the Home views use.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Typography - rem-based text was rendering at 10px
   -------------------------------------------------------------------------- */
.footer-wrapper-style-between .single-wized .body .nav-bottom a,
.footer-wrapper-style-between .single-wized .body a,
.copyright-area-inner p,
.breadcrumb-area-wrapper .nav-bread-crumb,
.breadcrumb-area-wrapper .nav-bread-crumb a,
.header-top-two .hello-user-wrap .hello-user,
.subscribe-area-start .subscribe-area input,
.subscribe-area-start .subscribe-area button {
  font-size: 16px;               /* NOT 1rem: 1rem == 10px here */
}

/* The header greeting and the footer subscribe row used to inherit the 10px
   root with no explicit size at all. */
.header-top-two .hello-user-wrap {
  flex: 0 1 auto;
  min-width: 0;
}

.header-top-two .hello-user-wrap .hello-user {
  font-weight: 500;
  color: var(--color-heading-1, #111032);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bootstrap form controls / buttons that sit inside the public forms.
   16px also stops iOS Safari auto-zooming when the field is focused. */
.appoinment-area-main .form-control,
.appoinment-area-main .form-label,
.appoinment-area-main .form-check-label,
.contact-form-area-start .form-control,
.awards-area-main-wrapper .form-control,
.awards-area-main-wrapper .btn,
.card-registration .form-label,
.card-registration .form-control,
.card-registration .form-check-label,
.card-registration .form-select,
.card-registration .col-form-label,
.panel-heading,
.panel-footer,
.pagination .page-link,
.rts-btn {
  font-size: 16px;
}

/* Bootstrap's .small is font-size:.875em - with a 10px root that is 8.75px,
   which is what the file-upload hints on the registration form rendered at. */
.small {
  font-size: 14px;
}

.appoinment-area-main .form-control {
  min-height: 46px;
}

/* The mobile hamburger menu is the ONLY navigation below 1200px. Its top-level
   items (.main) had no font-size of their own, so they inherited the 10px root
   while their own sub-items were set to 16px - the hierarchy was inverted and
   the primary menu was the smallest text on the page. */
.mobile-menu-main nav ul li a {
  font-size: 16px;
}

/* Same inheritance gap in the desktop top bar and the "About Us" / section
   eyebrow labels. */
.header-wrapper-1 .nav-area ul li a,
.title-wrapper-left .pre,
.title-area-center .pre {
  font-size: 16px;
}

.title-wrapper-left .pre,
.title-area-center .pre {
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Headings that used to be locked to a fixed px size inline and so ignored the
   template's own mobile breakpoints. */
.title--responsive {
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1.2;
}


/* --------------------------------------------------------------------------
   2. Horizontal overflow on phones and tablets
   -------------------------------------------------------------------------- */

/* .about-image-left-wrapper pulls the About photo 30px to the right. That is
   deliberate next to a sibling column on desktop, but below the lg breakpoint
   the columns stack full width and the pull pushes the image past the viewport
   (measured 30px of overflow at 360px and at 768px). */
@media (max-width: 991.98px) {
  .about-image-left-wrapper {
    margin-right: 0;
  }
}

.about-image-left-wrapper .thumbnail-main img,
.procedure-iamge-wrapper img,
.vedio-icone img,
.single-team-area-start .thumbnail img,
.thumbnail-appoinment img {
  width: 100%;
  height: auto;
  display: block;
}

/* Google map / any embedded frame must never set the page width. */
.gogle-map-wrapper iframe,
.google-map-area iframe {
  width: 100%;
  height: 320px;
  border: 0;
}

/* The Event page CTA had a hard 200px width and a 2rem (== 20px) font inline. */
.event-register-btn {
  display: block;
  width: 100%;
  max-width: 280px;
  min-height: 52px;
  padding: 14px 20px;
  font-size: 16px;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}


/* --------------------------------------------------------------------------
   3. Header top bar on small screens
   -------------------------------------------------------------------------- */

/* The contact details are already hidden below 992px by style.css; the greeting
   sat next to the logo with no size of its own and squeezed the logo. */
@media (max-width: 575.98px) {
  .header-top-two .hello-user-wrap {
    display: none;
  }

  .header-top-two .logo img {
    max-height: 48px;
    width: auto;
  }
}

/* Two lines of address were collapsing onto each other (line-height: 0). */
.header-top-two .rightarea .single-contact-area .information span,
.header-top-two .rightarea .single-contact-area .information a {
  line-height: 1.5;
}

.header-top-two .rightarea .single-contact-area .information a {
  font-size: 14px;
  color: #111032;
}

/* The menu button is a 45px circle; keep a comfortable touch target. */
.menu-btn {
  flex: 0 0 auto;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   4. Footer
   -------------------------------------------------------------------------- */
.subscribe-area-start {
  flex-wrap: wrap;
  gap: 20px;
}

@media (max-width: 767.98px) {
  .subscribe-area-start .subscribe-area {
    width: 100%;
  }

  .footer-wrapper-style-between {
    gap: 30px;
  }

  .copyright-area-inner p {
    text-align: center;
  }
}

/* style.css fixes this input at width:418px and only collapses it under 576px,
   so between 576px and 767px (iPad Mini / small tablets) it ran past the
   container. Keep the same visual width on desktop, let it shrink below that. */
.subscribe-area-start .subscribe-area input {
  width: 100%;
  max-width: 418px;
}

.subscribe-area-start .subscribe-area button {
  max-width: calc(100% - 14px);
}


/* --------------------------------------------------------------------------
   5. Member list / search rows
   The markup still carried Bootstrap 3 helpers (col-xs-*, pull-left,
   pull-right, hidden-xs) that do not exist in the Bootstrap 5 build, so the
   "List" button and the search field collapsed onto each other on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .panel-heading .row > [class*="col-"],
  .panel-footer .row > [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .panel-heading .btn,
  .panel-footer .pagination {
    margin-bottom: 10px;
  }

  .panel-heading form.d-flex {
    flex-wrap: wrap;
    gap: 8px;
  }

  .panel-heading form.d-flex .form-control {
    flex: 1 1 100%;
  }

  .panel-heading form.d-flex .btn {
    flex: 1 1 100%;
    margin: 0;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   6. Team / trustee cards - stop text touching the card edge
   -------------------------------------------------------------------------- */
.single-team-area-start .bottom .title {
  overflow-wrap: anywhere;
}

.single-team-area-start .bottom p {
  font-size: 16px;
  line-height: 1.6;
}


/* --------------------------------------------------------------------------
   7. Motion - respect the OS "reduce motion" setting
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wow,
  .swiper-slide,
  .move-right,
  .fadeInUp {
    animation: none !important;
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   8. Contact page
   -------------------------------------------------------------------------- */

/* 55px of padding on every side left only ~230px of text width for the address
   card on a 360px phone. */
@media (max-width: 767.98px) {
  .single-contact-information-card {
    padding: 32px 20px;
  }
}

.single-contact-information-card .contact-card-text {
  display: block;
  color: #110C2D;
  font-size: 16px;
  line-height: 1.6;
}

a.contact-card-text:hover {
  color: var(--color-primary);
}

.contact-form-area-start form .search-input {
  width: 100%;
}

.contact-form-area-start form .search-input select,
.contact-form-area-start form .search-input .nice-select {
  width: 100%;
  flex-basis: 100%;
}

.contact-form-area-start form input,
.contact-form-area-start form textarea,
.contact-form-area-start form select {
  width: 100%;
  font-size: 16px;
}

.contact-form-area-start form button.rts-btn {
  border: 0;
  cursor: pointer;
}


/* --------------------------------------------------------------------------
   9. Home banner weight
   style.css paints the three hero slides with 3840x1620 JPEGs - 1.26MB that
   every visitor downloaded, phone or desktop. These WebP cuts are generated
   from the same source files at the sizes actually rendered.

        before : 1262 KB (always)
        desktop:  238 KB (>= 1200px)
        tablet :  168 KB (768-1199px)
        mobile :  110 KB (< 768px)

   The original Background_[1-3].jpg files are left in place, nothing else
   references them.
   -------------------------------------------------------------------------- */
.banner-wrapper-bg {
  background-image: url(../assets/images/banner/banner-1-mobile.webp);
}

.banner-wrapper-bg.bg-2-banner-2 {
  background-image: url(../assets/images/banner/banner-2-mobile.webp);
}

.banner-wrapper-bg.bg-2-banner-3 {
  background-image: url(../assets/images/banner/banner-3-mobile.webp);
}

@media (min-width: 768px) {
  .banner-wrapper-bg {
    background-image: url(../assets/images/banner/banner-1-tablet.webp);
  }

  .banner-wrapper-bg.bg-2-banner-2 {
    background-image: url(../assets/images/banner/banner-2-tablet.webp);
  }

  .banner-wrapper-bg.bg-2-banner-3 {
    background-image: url(../assets/images/banner/banner-3-tablet.webp);
  }
}

@media (min-width: 1200px) {
  .banner-wrapper-bg {
    background-image: url(../assets/images/banner/banner-1-desktop.webp);
  }

  .banner-wrapper-bg.bg-2-banner-2 {
    background-image: url(../assets/images/banner/banner-2-desktop.webp);
  }

  .banner-wrapper-bg.bg-2-banner-3 {
    background-image: url(../assets/images/banner/banner-3-desktop.webp);
  }
}

/* The three slides all render their background on load, so on a phone the hero
   needs far less than the 180px of desktop padding the theme applies. */
@media (max-width: 767.98px) {
  .rts-banner-area-two .banner-wrapper-bg {
    padding: 60px 0 !important;
  }
}


/* --------------------------------------------------------------------------
   10. Policy pages
   -------------------------------------------------------------------------- */
.policy-body .title {
  margin-bottom: 24px;
}

.policy-body .disc {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 18px;
}

.policy-body a {
  color: var(--color-primary);
}