/*
  Site fixes bundled last into assets/dist/site.min.css (see 2. Development/tools/build-assets.mjs).
  1. Reserve carousel layout before JS initialises it (prevents Cumulative Layout Shift and lets the hero image
     paint - and become the LCP element - without waiting for owl.carousel/slick to run).
  2. Colour-contrast fixes for the brand beige (#a6907d) which is only ~3:1 against white.
  3. Fixed card / image sizes (aspect-ratio + object-fit, line clamps, equal-height rows).
*/

/* ---------- 1. Pre-init layout ---------- */
.rs-slider .slider-direction img {
  display: block;
  width: 100%;
  height: auto;
}

/* owl.carousel.css hides .owl-carousel until it is initialised; show the first slide straight away */
.rs-slider .rs-carousel.owl-carousel:not(.owl-loaded) {
  display: block;
  overflow: hidden;
}
.rs-slider .rs-carousel.owl-carousel:not(.owl-loaded) > .slider-direction:not(:first-child) {
  display: none;
}

/* Team carousel: lay the cards out in one row (3 / 2 / 1 per view, like the owl options in main.js) */
.rs-team .rs-carousel.owl-carousel:not(.owl-loaded) {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  overflow: hidden;
}
.rs-team .rs-carousel.owl-carousel:not(.owl-loaded) > * {
  flex: 0 0 100%;
  min-width: 0;
}
@media (min-width: 992px) {
  .rs-team .rs-carousel.owl-carousel:not(.owl-loaded) > * {
    flex-basis: calc((100% - 30px) / 2);
  }
}
@media (min-width: 1200px) {
  .rs-team .rs-carousel.owl-carousel:not(.owl-loaded) > * {
    flex-basis: calc((100% - 60px) / 3);
  }
}

/* Partner slick slider (home page): 1 / 2 / 3 slides per view like the slick responsive settings */
.cs_slider_wrapper.cs_preinit_3:not(.slick-initialized) {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-left: -12px;
  margin-right: -12px;
}
.cs_slider_wrapper.cs_preinit_3:not(.slick-initialized) > .cs_slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  .cs_slider_wrapper.cs_preinit_3:not(.slick-initialized) > .cs_slide {
    flex-basis: 50%;
  }
}
@media (min-width: 993px) {
  .cs_slider_wrapper.cs_preinit_3:not(.slick-initialized) > .cs_slide {
    flex-basis: 33.3333%;
  }
}
/* Hidden until slick has laid it out: slick re-parents the slides on init and Chrome reports that as a layout shift */
.cs_slider_wrapper.cs_preinit_3:not(.slick-initialized) {
  opacity: 0;
}

/* Below-the-fold home sections are not laid out/painted until they are near the viewport (much cheaper first layout).
   "auto" in contain-intrinsic-size makes the browser remember the real height once rendered. */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ---------- 2. Colour contrast (white on #7d6754 = 5.3:1, #7d6754 on white = 5.3:1) ---------- */
.sec-title .sub-text,
.sec-title3 .sub-text,
.rs-counter.counter-style3.counter-modify1 .counter-top .rs-counter-list .counter-text .title {
  color: #7d6754;
}
.readon {
  background: #7d6754;
}
.readon:hover,
.readon.slide-touch:hover,
.readon.details:hover {
  background-color: #5c4a3a;
}
.cs_footer_bottom {
  background-color: #7d6754;
}
.full-width-header .rs-header.header-style2 .expand-btn-inner ul .btn-quote .quote-button,
.readon.read-more,
.cs_btn.cs_style_1.cs_color_1 {
  background-color: #7d6754;
}
.rs-team.team-style3 .team-item .team-inner-wrap .team-content {
  background-color: #7d6754;
}

/* ---------- 3. Fixed card / image sizes ----------
   Cards and images keep one size per slot no matter what content or image the admin uploads:
   images get a fixed aspect-ratio + object-fit (cropped, never stretched), text gets a fixed number of lines,
   and cards in one row share the same height. */

/* hero slider: every slide is 16:9 */
.rs-slider .slider-direction img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* service cards (home + /services) */
/* CMS text sometimes holds block elements (div/p/article) that defeat line-clamp, so the boxes get a fixed height too */
.cs_iconbox.cs_style_2 {
  height: 241px; /* icon row + 1 line title + 2 line text */
}
.cs_iconbox.cs_style_2 .cs_iconbox_icon img {
  width: 30px;
  height: 30px;
  max-width: none;
  object-fit: contain;
}

/* team cards (home carousel, /team, /department, search) */
.rs-team .row > [class*="col-"] > .team-item {
  height: 100%;
}
.rs-team .team-item .image-wrap a {
  display: block;
}
.rs-team .team-item .image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 39 / 35;
  object-fit: cover;
  object-position: center top;
}
.rs-team .team-item .team-content .team-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* doctor page */
.rs-team-single .btm-info-team .images-part img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 39 / 35;
  object-fit: cover;
  object-position: center top;
}
.gallery-grid .gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* news list cards: 16:9 picture, 1 line title, 2 line text, button pinned to the bottom */
.rs-inner-blog .row > [class*="col-"] > .blog-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.rs-inner-blog .blog-item .blog-img a {
  display: block;
}
.rs-inner-blog .blog-item .blog-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.rs-inner-blog .blog-item .blog-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.rs-inner-blog .blog-item .blog-content .blog-title {
  height: 25px; /* 1 line */
  overflow: hidden;
}
.rs-inner-blog .blog-item .blog-content .blog-desc {
  height: 52px; /* 2 x 26px line-height */
  overflow: hidden;
}
.rs-inner-blog .blog-item .blog-content .btn-part {
  margin-top: auto;
  padding-top: 15px;
}

/* news / loyalty detail pictures */
.rs-inner-blog .bs-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.rs-inner-blog .bs-img.bs-img-banner img {
  aspect-ratio: 7 / 3;
}

/* service detail picture */
.rs-services-single .services-img img {
  display: block;
  height: auto;
  aspect-ratio: 816 / 486;
  object-fit: cover;
}
/* partner (accordion) picture + round logo */
.rs-services-single .partners_main1 .services-img img {
  aspect-ratio: 770 / 289;
}
.parnters_logo1 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* about / loyalty / vision pictures */
.rs-about .about-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 571 / 607;
  object-fit: cover;
}
.rs-about.twistdiv .about-img img {
  aspect-ratio: 571 / 669;
}
.rs-about .appoach-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 571 / 533;
  object-fit: cover;
}
.visionmission img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 606 / 628;
  object-fit: cover;
}
.ceo_div img {
  display: block;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: center top;
}
.testi-content .image-wrap img {
  object-fit: cover;
}

/* home partner cards: round logo box, 1 line title, 3 line text */
.cs_card.cs_style_6 .cs_card_thumbnail img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.cs_card.cs_style_6 .cs_card_info.partnersdiv {
  height: 129px; /* 1 line title (42px + 10px) + 3 line text (3 x 25.6px) */
  overflow: hidden;
}

/* insurance logos: square tiles, logo scaled to fit */
.rs-partner.partner-main-home .insurance01 .grid-figure {
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
@media (min-width: 768px) {
  .rs-partner.partner-main-home .insurance01 .grid-figure {
    padding: 40px;
  }
}
.rs-partner.partner-main-home .insurance01 .grid-figure .logo-img,
.rs-partner.partner-main-home .insurance01 .grid-figure .logo-img a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.rs-partner.partner-main-home .insurance01 .grid-figure .logo-img img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* career cards: same height per row, icon box, 2 line title, button at the bottom */
.rs-services.services-style5 .row > [class*="col-"] > .services-item {
  height: 100%;
}
.rs-services.services-style5 .services-item .services-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.rs-services.services-style5 .services-item .services-wrap .services-icon img {
  object-fit: contain;
  object-position: left center;
}
.rs-services.services-style5 .services-item .services-wrap .services-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 209px; /* title (68px) + text (2 lines) + button, so every card has the same height */
}
.rs-services.services-style5 .services-item .services-wrap .services-text .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 68px; /* 2 x 34px line-height */
}
/* the CMS text can contain <div>s, which the HTML parser splits out of the <p> and leaves empty <p>s (with margins) behind */
.rs-services.services-style5 .services-item .services-wrap .services-text > p:empty,
.cs_card.cs_style_6 .cs_card_info p:empty {
  display: none;
}
.rs-services.services-style5 .services-item .services-wrap .services-text .services-txt {
  margin-bottom: 0;
}
.rs-services.services-style5 .services-item .services-wrap .services-text .services-btn {
  margin-top: auto;
  padding-top: 28px;
}

/* footer certificates */
.cs_footer .textwidget img {
  object-fit: contain;
}

/* appointment phone box: the number stays on one line */
.rs-services-single .services-add {
  padding-left: 30px;
  padding-right: 30px;
}
.rs-services-single .services-add .address-wrap .contact a,
.rs-careers-single .services-add .address-wrap .contact a {
  white-space: nowrap;
  font-size: clamp(22px, 7.2vw, 30px);
}

/* ---------- 4. Home counters ---------- */
/* odometer.min.css is loaded after the main bundle and would switch the digits to a cursive font; keep the intended one */
.rs-counter .odometer.odometer-auto-theme,
.rs-counter .odometer.odometer-theme-default {
  font-family: 'Space Grotesk', sans-serif;
}
/* tablet / phone: the three counters sit in one row instead of 2 + 1 */
@media (max-width: 991.98px) {
  .rs-counter.counter-style3.counter-modify1 .counter-top .row > [class*="col-"] {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    margin-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 767.98px) {
  .rs-counter.counter-style3.counter-modify1 .counter-top {
    padding: 36px 8px 32px;
  }
  .rs-counter.counter-style3.counter-modify1 .counter-top .rs-counter-list .counter-text .counter-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }
  .rs-counter.counter-style3.counter-modify1 .counter-top .rs-counter-list .counter-text .counter-number {
    gap: 3px;
    flex-wrap: nowrap;
  }
  .rs-counter.counter-style3.counter-modify1 .counter-top .rs-counter-list .counter-text .counter-number .rs-count,
  .rs-counter.counter-style3.counter-modify1 .counter-top .rs-counter-list .counter-text .counter-number .prefix {
    font-size: clamp(18px, 5.6vw, 32px);
    line-height: 1.3;
    padding-top: 8px;
  }
  .rs-counter.counter-style3.counter-modify1 .counter-top .rs-counter-list .counter-text .title {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    margin-top: 2px;
  }
}

/* ---------- 5. Mobile polish ---------- */
/* responsive.css shrinks every button to 10px text / 24px height below 992px; keep them readable and easy to tap */
@media (max-width: 991.98px) {
  .readon {
    font-size: 12px !important;
    line-height: 20px;
    padding: 9px 20px !important;
  }
  .readon.slide-touch {
    font-size: 11px !important;
    padding: 8px 18px !important;
  }
}
/* text pasted into the CMS carries inline text-align: justify, which leaves big gaps on narrow screens */
@media (max-width: 767.98px) {
  [style*="text-align: justify"] {
    text-align: start !important;
  }
}
/* the reCAPTCHA widget is 304px wide */
@media (max-width: 380px) {
  .g-recaptcha {
    transform: scale(0.82);
    transform-origin: 0 0;
    margin-bottom: -14px;
  }
  [dir="rtl"] .g-recaptcha {
    transform-origin: 100% 0;
  }
}

/* the contrast colour for .sub-text above is for light backgrounds; the testimonial block has a dark photo behind it */
.rs-testimonial .sec-title .sub-text {
  color: #d9c9b8;
}

/* the video grid asked for 370px columns, which is wider than a phone screen */
.video-gallery {
  grid-template-columns: repeat(auto-fit, minmax(min(370px, 100%), 1fr));
}

/* the form fields only have left padding, so Arabic text and placeholders sit flush against the right edge of the field */
.rs-contact .contact-section .from-control {
  padding-right: 25px !important;
}

/* ---------- 6. Image dimensions ---------- */
/* Logos and flags carry width/height attributes so the browser can reserve their space before they load;
   the CSS above still decides how big they are drawn, so keep the attributes from stretching them. */
.logo-area img,
.canvas-logo img,
.cs_footer_logo img {
  width: auto;
  height: auto;
}
.lang img {
  height: auto;
}

/* ---------- 7. Carousels: swiping ---------- */
/* Owl calls preventDefault() on touchmove, which Chrome ignores for its document-level listener, so the page scrolled / cancelled the touch in the middle of a horizontal swipe. Telling the browser that only vertical panning is native here lets the carousels have the horizontal gesture. */
.owl-carousel,
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item,
.slick-slider,
.slick-list,
.slick-track {
  touch-action: pan-y;
}

/* ---------- 8. FAQ accordion on phones ---------- */
/* responsive.css puts the +/- icon at left:11px but leaves only 20-23px of padding, so the icon sat on top of the first letter of the question */
@media (max-width: 767.98px) {
  .rs-faq.faq-style1.faq-modify1 .faq-content .accordion .card .card-header .card-link,
  .rs-faq.faq-style1.faq-modify1 .faq-content .accordion .card .card-header .card-link.collapsed {
    padding-left: 40px;
    height: auto;
    min-height: 60px;
  }
  .rs-faq.faq-style1.faq-modify1 .faq-content .accordion .card .card-header .card-link::after {
    left: 14px;
  }
}

/* ---------- 9. Partners slider: seamless loop ---------- */
/* The theme hides every slide that is not active and lets the list overflow so the card logos can stick out of the top. Slick shows the clones used for the loop (last -> first) only after the slide has landed, so that jump had an empty slot and cropped cards. Keep all slides visible and clip the sides of the list instead (the top stays open for the logos). */
.cs_remove_overflow .slick-list {
  overflow-x: clip;
  overflow-y: visible;
}
.cs_remove_overflow .slick-slide {
  opacity: 1;
  visibility: visible;
}

/* 10. Breadcrumb trail under the page title (Home > Services > ...). Built by Helpers/Breadcrumbs.cs */
.rs-crumbs { position: relative; z-index: 1; margin-top: 8px; }
.rs-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, .85); }
.rs-crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .6; }
.rs-crumbs a { color: #fff; text-decoration: none; opacity: .9; }
.rs-crumbs a:hover, .rs-crumbs a:focus-visible { text-decoration: underline; opacity: 1; }
.rs-crumbs [aria-current="page"] { color: #fff; font-weight: 600; }