/*============================================================
  Project customizations on top of the Denox template (style.css)
  Loaded for both languages; Arabic overrides live in rtl.css
==============================================================*/

/* ---------- Brand palette (taken from the clinic logo) ----------
   logo blue   #4698D4  ->  primary (darkened to #2B7BC0 for white-text contrast)
   logo indigo #5B6EB2  ->  accent (outer ring)
   logo deep   #106090  ->  base for the navy dark tone
   logo sky    #8FD0F0  ->  light tint
------------------------------------------------------------------ */
:root {
  --theme-color: #2b7bc0;
  --theme-color2: #12355b;
  --theme-accent: #5b6eb2;
  --theme-sky: #8fd0f0;
  --theme-bg-light: #f4f8fc;
  --theme-bg-light2: #eaf4fb;
  --color-dark: #0f2c4c;
  --body-text-color: #6b7a90;
  --footer-bg: #0d2743;
  --theme-gradient: linear-gradient(135deg, #2b7bc0 0%, #5b6eb2 100%);
  --box-shadow3: 0 0 40px 5px rgba(43, 123, 192, 0.06);
}

/* Text sitting on the (now darker) primary color must be white */
.theme-border-btn,
.theme-btn {
  color: var(--color-white);
}
.feature-area2 .feature-item.active .feature-info h4,
.feature-area2 .feature-item:hover .feature-info h4,
.feature-area2 .feature-item.active .feature-info p,
.feature-area2 .feature-item:hover .feature-info p {
  color: var(--color-white);
}

.feature-area2 .feature-item.active .feature-info p{
    text-align: justify;
}


.text-justify{
    text-align: justify;
}

.feature-area2 .feature-item.active .count,
.feature-area2 .feature-item:hover .count {
  background: var(--color-white);
  color: var(--theme-color);
}
.footer-social li a i:hover {
  color: var(--color-white);
}
.marquee-text-slider .tw-marquee .tw-marquee-group h3 {
  color: var(--color-white);
}

/* Hero feature cards: the template forces them white, so style the active one explicitly */
.hs-3 .hs-single .hero-single .feature-item.active,
.hs-3 .hs-single .hero-single .feature-item:hover {
  background: var(--theme-gradient);
}
.hs-3 .hs-single .hero-single .feature-item.active .feature-info h4,
.hs-3 .hs-single .hero-single .feature-item:hover .feature-info h4 {
  color: var(--color-white);
}

/* Logo-ring gradient on the big brand surfaces */
.cta-wrap,
.tw-marquee,
.feature-area2 .feature-item.active,
.feature-area2 .feature-item:hover {
  background: var(--theme-gradient);
}
.theme-btn2::before {
  background: var(--theme-accent);
}
.site-heading .site-title-tagline {
  color: var(--theme-color);
}


/* ---------- Navbar ---------- */
.navbar .navbar-brand img,
.navbar .offcanvas-brand img {
    width: 200px;
    height: 100%;
    max-width: 100%;
    object-fit: fill;
}
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
  transition: var(--transition2);
}
.nav-lang:hover {
  color: var(--theme-color);
}
.nav-lang i {
  color: var(--theme-color);
}

/* ---------- Hero ---------- */
.hs-3 .hero-single .hero-content .hero-text {
  margin: 20px 0 0;
  color: var(--body-text-color);
  text-align: justify;
}

/* ---------- Projects ---------- */
.portfolio-panel .pin-panel .portfolio-content .portfolio-text {
  color: var(--color-white);
  margin: 10px 0 0;
  font-size: 15px;
}

/* ---------- Choose ---------- */
.choose-area2 .choose-img .img-1 {
  width: 100%;
  object-fit: cover;
}

/* ---------- FAQ ---------- */
.faq-area .accordion-button span {
  flex-shrink: 0;
}

/* ---------- Appointment form ---------- */
.quote-form .theme-btn .spinner-border {
  margin-inline-start: 8px;
}

/* ---------- Footer ---------- */
.footer-logo img {
  width: 200px;
  height: 100%;
  max-width: none;
  padding: 8px;
  background: var(--color-white);
  /* border-radius: 50%; */
  border-radius: 10px;
  object-fit: contain;
}
.footer-newsletter .newsletter-form button .spinner-border {
  vertical-align: middle;
}
#subscribeMessage {
  font-size: 14px;
  margin-bottom: 10px;
}
.copyright .copyright-sep {
  margin: 0 6px;
  opacity: 0.5;
}

/* ---------- Floating WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: 99;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--box-shadow2);
  transition: var(--transition2);
}
.whatsapp-float:hover {
  color: #fff;
  transform: translateY(-3px);
}

/* ---------- Separator banner (video area without a video) ---------- */
.video-area.video-text-only .video-content {
  min-height: 380px;
  display: flex;
  align-items: center;
  padding-bottom: 100px;
}
.video-area.video-text-only .video-content > .row {
  width: 100%;
}

/* ---------- Footer links: sky blue reads better than primary on navy ---------- */
.footer-area .copyright a,
.footer-area .footer-list li a:hover,
.footer-area .footer-contact a:hover {
  color: var(--theme-sky);
}
.footer-widget-title::before {
  background: var(--theme-sky);
}

/* ---------- Preloader: clinic logo with brand-colored ripples ---------- */
.preloader {
  background: var(--color-white);
}
.preloader-logo {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader-logo img {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 100%;
  object-fit: contain;
  animation: preloader-pulse 1.6s ease-in-out infinite;
  max-width: none;
}
.preloader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--theme-color);
  animation: preloader-ripple 1.6s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.preloader-ring:nth-child(2) {
  border-color: var(--theme-accent);
  animation-delay: -0.8s;
}
@keyframes preloader-ripple {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
@keyframes preloader-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .preloader-logo img,
  .preloader-ring {
    animation: none;
  }
}

/* ---------- Inner page breadcrumb ----------
   ScrollSmoother pins the page content to the top of the screen, so the
   header (about 120px) sits on top of the banner. The top padding covers
   the header plus the same space that is left below the text. */
.site-breadcrumb {
  overflow: hidden;
  padding-top: 250px;
  padding-bottom: 130px;
  background: none !important;
}
.site-breadcrumb .breadcrumb-bg {
  position: absolute;
  left: 0;
  top: -25%;
  width: 100%;
  height: 150%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -2;
}
.site-breadcrumb::before {
  background: linear-gradient(135deg, rgba(13, 39, 67, 0.85) 0%, rgba(43, 123, 192, 0.55) 100%);
}
.site-breadcrumb .breadcrumb-menu li.active {
  color: var(--theme-sky);
}
@media all and (max-width: 991px) {
  .site-breadcrumb {
    padding-top: 170px;
    padding-bottom: 80px;
  }
  /* the template only gives the header a background on desktop */
  .header.hd-3 .navbar {
    background: var(--color-white);
    box-shadow: var(--box-shadow);
  }

  .cta-wrap{
    padding: 32px;
  }
}

/* ---------- Pagination (template style) ---------- */
.pagination {
  flex-wrap: wrap;
  gap: 6px 0;
}
.pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination .page-item.disabled .page-link {
  opacity: 0.45;
}

/* ---------- Contact page ---------- */
#formStatusMessage {
  border-radius: 10px;
}
.contact-form .theme-btn .spinner-border {
  margin-inline-start: 8px;
}

/* ---------- Appointment background ----------
   The template hardcodes a green overlay here; use the brand navy/blue instead */
.quote-bg::before {
  background: linear-gradient(135deg, rgba(13, 39, 67, 0.88) 0%, rgba(43, 123, 192, 0.6) 100%);
}
/* same hardcoded green on the home page banner section */
.video-bg::before {
  background: linear-gradient(135deg, rgba(13, 39, 67, 0.7) 0%, rgba(43, 123, 192, 0.4) 100%);
}

/* ---------- Service details page ---------- */
.service-sidebar .widget .category a.active {
  color: var(--theme-color);
}
.service-details img {
  width: 100%;
  object-fit: cover;
}
.service-details .content .row img {
  height: 260px;
}