/**
* Template Name: Sailor
* Template URL: https://bootstrapmade.com/sailor-free-bootstrap-theme/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* One consistent font across the whole site: headings and nav use the same Roboto stack as the body. */
  --heading-font: var(--default-font);
  --nav-font: var(--default-font);
}

/* Global Colors - Sourced from the Veterinary X-rays logo: signal red mark and warm grey wordmark */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #4a4a4a; /* Default body copy — neutral grey that ties into the logo wordmark */
  --heading-color: #333333; /* Headings — a deeper grey for hierarchy against body copy */
  --accent-color: #e30613; /* Brand red taken from the logo mark */
  --surface-color: #ffffff; /* Background of cards / icon boxes */
  --contrast-color: #ffffff; /* Text on accent / heading / dark backgrounds */
}

/* Nav Menu Colors */
:root {
  --nav-color: #333333; /* Default navmenu link colour — logo grey */
  --nav-hover-color: #e30613; /* Hover / active — logo red */
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #333333;
  --nav-dropdown-hover-color: #e30613;
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the same color scheme. */

.light-background {
  --background-color: #f4f4f4; /* Soft warm grey to echo the logo wordmark */
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #2b2b2b; /* Neutral charcoal — pairs with the brand red without competing */
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #3a3a3a;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

/* RD CMS Forms
------------------------------*/
/* A form module can be dropped into any page, not just the contact page, so keep every
   rule here unscoped — nothing about a form's appearance should depend on the section
   it happens to sit in. */
/* A checkbox/radio group's title comes through as a <legend>, which Bootstrap's reboot
   floats and blows up to ~1.5rem — nothing like the .form-label on every other field.
   Pull it back so the group title matches the rest of the form. */
.rdcms-form legend.form-label {
  float: none;
  width: auto;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin-bottom: 0.5rem;
}

/* The submit comes through as a Bootstrap .btn-primary, which is blue — override to
   the brand red, focus ring included. */
.rdcms-form .rdcms-form-submit {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.rdcms-form .rdcms-form-submit:hover,
.rdcms-form .rdcms-form-submit:focus,
.rdcms-form .rdcms-form-submit:active {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.rdcms-form .rdcms-form-submit:focus-visible {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 60%);
}

.rdcms-form .rdcms-form-submit:disabled {
  background: color-mix(in srgb, var(--accent-color), transparent 45%);
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --nav-color: #ffffff; /* Desktop navmenu links sit on the dark bar — keep them white */
  --nav-hover-color: #ffffff; /* Hover stays white too */
  --nav-dropdown-color: #ffffff; /* Mobile-style dropdown link colour */
  --nav-dropdown-hover-color: #ffffff; /* Hover on dropdown items stays white */
  --nav-dropdown-background-color: #2b2b2b; /* Dropdown panel matches the dark top bar */
  --nav-mobile-background-color: #2b2b2b; /* Mobile menu panel matches the dark bar so the white links are visible */
  color: var(--contrast-color);
  background-color: #2b2b2b; /* Dark grey top bar */
  padding: 28px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 52px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 28px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
  text-transform: uppercase;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/* Keep active nav items white inside the dark header (hover still flips to red) */
.header .navmenu .active,
.header .navmenu .active:focus {
  color: var(--nav-color);
}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links {
  flex-wrap: wrap;
  gap: 10px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  background-color: color-mix(in srgb, var(--default-color), transparent 92%);
  font-size: 17px;
  line-height: 1;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: #ffffff;
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-3px);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

/* Address / phone / email lines — the icon is tied to an explicit class on each
   line, so it stays correct whatever order the CMS outputs them in */
.footer .footer-contact .contact-address,
.footer .footer-contact .contact-tel,
.footer .footer-contact .contact-email {
  position: relative;
  padding-left: 26px;
  margin-bottom: 5px;
}

/* The CMS placeholders render their own <p> inside the wrapper */
.footer .footer-contact .contact-address p,
.footer .footer-contact .contact-tel p,
.footer .footer-contact .contact-email p {
  margin-bottom: 0;
}

.footer .footer-contact .contact-address::before,
.footer .footer-contact .contact-tel::before,
.footer .footer-contact .contact-email::before {
  position: absolute;
  left: 0;
  top: 2px;
  font-family: "bootstrap-icons";
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 1.4;
  color: var(--accent-color);
}

.footer .footer-contact .contact-address::before {
  content: "\f3e7";
}

.footer .footer-contact .contact-tel::before {
  content: "\f5b4";
}

.footer .footer-contact .contact-email::before {
  content: "\f32c";
}

.footer .footer-contact .contact-tel {
  margin-top: 1rem;
}

.footer .footer-contact a {
  color: inherit;
}

.footer .footer-contact a:hover {
  color: inherit;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 6px 8px;
  position: relative;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--surface-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--surface-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -9px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .copyright p:last-child {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 25px 0;
  position: relative;
}

/* Thick accent line under the breadcrumb, coloured per product category (matches the products page) */
.page-title.category-static,
.page-title.category-portable,
.page-title.category-dr,
.page-title.category-dental,
.page-title.category-pacs {
  border-bottom: 5px solid var(--category-color);
}

.page-title.category-static { --category-color: #0d47a1; }
.page-title.category-portable { --category-color: #2e7d32; }
.page-title.category-dr { --category-color: #0288d1; }
.page-title.category-dental { --category-color: #ef6c00; }
.page-title.category-pacs { --category-color: #6a1b9a; }

.page-title h1 {
  font-size: 28px;
  font-weight: 300;
}

/* Product detail pages promote the datasheet wordmark to the page's only H1, so
   their page-title bar renders as a div. Keep it identical to .page-title h1. */
.page-title .page-title-heading {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.2;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/* The catalogue breadcrumb module (used by the product listing and product detail
   templates) ships its own inline <style> — blue links, a smaller font and '›'
   separators. Restyle it to match the standard .breadcrumbs above so product pages
   look like every other page. Scoped under .page-title to outrank the inline rules. */
.page-title .catalog-breadcrumb {
  gap: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--default-color);
}

/* Swap the module's trailing '›' for the site's leading '/' separator */
.page-title .catalog-breadcrumb li:not(:last-child)::after {
  content: none;
}

.page-title .catalog-breadcrumb li+li {
  padding-left: 10px;
}

.page-title .catalog-breadcrumb li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.page-title .catalog-breadcrumb a {
  color: var(--accent-color);
  text-decoration: none;
}

.page-title .catalog-breadcrumb a:hover {
  text-decoration: none;
}

.page-title .catalog-breadcrumb .is-active {
  color: var(--default-color);
  font-weight: 400;
}

/* The standard breadcrumb module (used on every non-catalogue page) renders
   Bootstrap's .breadcrumb — blue links and a bottom margin by default. Restyle
   it to match .breadcrumbs / .catalog-breadcrumb so every page looks the same. */
.page-title .breadcrumb-module .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--default-color);
}

.page-title .breadcrumb-module .breadcrumb-item+.breadcrumb-item {
  padding-left: 10px;
}

/* Match the site's '/' separator styling (override Bootstrap's divider colour) */
.page-title .breadcrumb-module .breadcrumb-item+.breadcrumb-item::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.page-title .breadcrumb-module .breadcrumb-item a {
  color: var(--accent-color);
  text-decoration: none;
}

.page-title .breadcrumb-module .breadcrumb-item a:hover {
  text-decoration: none;
}

.page-title .breadcrumb-module .breadcrumb-item.active {
  color: var(--default-color);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 30px;
  position: relative;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title p,
.section-title h1 {
  color: var(--heading-color);
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding: 0;
}

.hero .carousel {
  width: 100%;
  min-height: calc(100vh - 90px);
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  position: relative;
}

@media (max-width: 1200px) {
  .hero .carousel {
    min-height: calc(100vh - 66px);
  }
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .carousel-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero .carousel-item:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-container {
  position: absolute;
  inset: 90px 64px 64px 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 3;
}

.hero h2 {
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
  animation: fadeInDown 1s both;
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 30px;
  }
}

.hero p {
  animation: fadeInDown 1s both 0.2s;
}

@media (min-width: 1024px) {

  .hero h2,
  .hero p {
    max-width: 60%;
  }
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 4px;
  transition: 0.5s;
  margin: 10px;
  animation: fadeInUp 1s both 0.4s;
}

.hero .btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 10%;
  transition: 0.3s;
  opacity: 0.5;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

@media (min-width: 1024px) {

  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    width: 5%;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  font-size: 32px;
  line-height: 1;
}

.hero .carousel-indicators {
  list-style: none;
}

.hero .carousel-indicators li {
  cursor: pointer;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about ul {
  list-style: none;
  padding: 0;
}

.about ul li {
  padding-bottom: 5px;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.about .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 10px 28px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.about .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.about .read-more:hover i {
  transform: translate(5px, 0);
}

/* History timeline — about page */
.history-timeline {
  position: relative;
  /* 120px year column + 40px marker column + 720px of copy, centred in the container */
  max-width: 880px;
  margin: 0 auto;
}

/* One continuous spine, drawn on the container so it runs unbroken behind every
   marker. Sits in the gutter between the year labels and the copy. */
.history-timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 140px;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(to bottom,
      #d4d4d4 0%,
      #c9c9c9 50%,
      var(--accent-color) 82%,
      color-mix(in srgb, var(--accent-color), transparent 100%) 100%);
}

.history-timeline .timeline-item {
  display: grid;
  grid-template-columns: 120px 40px minmax(0, 1fr);
  padding-bottom: 32px;
}

.history-timeline .timeline-item:last-child {
  padding-bottom: 0;
}

.history-timeline .timeline-year {
  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
  text-align: right;
  padding-right: 6px;
}

.history-timeline .timeline-item:last-child .timeline-year {
  color: var(--accent-color);
}

.history-timeline .timeline-marker {
  position: relative;
}

.history-timeline .timeline-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--surface-color);
  border: 3px solid var(--accent-color);
}

.history-timeline .timeline-item:last-child .timeline-marker::before {
  background: var(--accent-color);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.history-timeline .timeline-content h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 8px 0;
  color: var(--heading-color);
}

.history-timeline .timeline-content p:last-child {
  margin-bottom: 0;
}

/* Stacked: spine moves to the far left, year label sits above the copy */
@media (max-width: 767.98px) {
  .history-timeline::before {
    left: 10px;
  }

  .history-timeline .timeline-item {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding-left: 40px;
    padding-bottom: 26px;
  }

  .history-timeline .timeline-year {
    text-align: left;
    padding-right: 0;
    margin-bottom: 4px;
  }

  .history-timeline .timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
  }
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  transition: 0.3s;
}

.services .service-item .icon {
  font-size: 36px;
  line-height: 0;
  margin-right: 30px;
  color: var(--accent-color);
}

.services .service-item .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 20px;
}

.services .service-item .title a {
  color: var(--heading-color);
}

.services .service-item p {
  line-height: 24px;
  font-size: 15px;
  margin: 0;
}

.services .service-item:hover {
  border-color: var(--accent-color);
}

.services .service-item:hover .title a {
  color: var(--accent-color);
}

.services .service-item.has-thumb {
  align-items: center;
  gap: 1.5rem;
  min-height: 300px;
}

.services .service-item.has-thumb > div {
  flex: 1;
}

.services .product-thumb {
  height: 260px;
  width: auto;
  max-width: 45%;
  flex-shrink: 0;
  object-fit: contain;
  margin: 0 auto;
}

.services .dental-intro {
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: 300;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.services .dental-intro::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ef6c00; /* matches the dental category colour (.category-dental) */
  margin: 22px auto 0;
}

.services .service-item.category-static,
.services .service-item.category-portable,
.services .service-item.category-dr,
.services .service-item.category-dental,
.services .service-item.category-pacs {
  border-left-width: 6px;
  border-left-style: solid;
  border-left-color: var(--category-color);
}

.services .service-item.category-static { --category-color: #0d47a1; }
.services .service-item.category-portable { --category-color: #2e7d32; }
.services .service-item.category-dr { --category-color: #0288d1; }
.services .service-item.category-dental { --category-color: #ef6c00; }
.services .service-item.category-pacs { --category-color: #6a1b9a; }

.services .service-item.category-static .title a,
.services .service-item.category-portable .title a,
.services .service-item.category-dr .title a,
.services .service-item.category-dental .title a,
.services .service-item.category-pacs .title a,
.services .service-item.category-static:hover .title a,
.services .service-item.category-portable:hover .title a,
.services .service-item.category-dr:hover .title a,
.services .service-item.category-dental:hover .title a,
.services .service-item.category-pacs:hover .title a {
  color: var(--category-color);
}

.services .service-item.category-static:hover,
.services .service-item.category-portable:hover,
.services .service-item.category-dr:hover,
.services .service-item.category-dental:hover,
.services .service-item.category-pacs:hover {
  border-color: var(--category-color);
}

/*--------------------------------------------------------------
# Live CMS (RDCMS) template compatibility
# The live product/category templates emit slightly different markup than
# the repo pages: a `category-generators` colour, a .subcategory-grid wrapper
# (with its own inline <style>), card text that isn't wrapped in <p>, and the
# intro text moved into a .category-header module (leaving .dental-intro empty).
# These rules bridge that markup to the same look as the repo pages.
# Additive only — nothing above is modified.
--------------------------------------------------------------*/

/* The ##(Clients)## text module is emitted wrapped in <div class="text-content">,
   which lands between .clients .row and the .col-* logo divs. That wrapper becomes
   the row's only flex child, so the columns stack vertically. display:contents takes
   the wrapper out of layout and lets the columns lay out against .row as intended. */
.clients .row > .text-content {
  display: contents;
}

/* Generators category colour (repo only defines static/portable/dr/dental/pacs) */
.services .service-item.category-generators {
  --category-color: #2e7d32;
  border-left-width: 6px;
  border-left-style: solid;
  border-left-color: var(--category-color);
}

.services .service-item.category-generators .title a,
.services .service-item.category-generators:hover .title a {
  color: var(--category-color);
}

.services .service-item.category-generators:hover {
  border-color: var(--category-color);
}

/* The CMS wraps cards in .subcategory-grid (auto-fill minmax 180px). Match the
   repo's 2-up column layout instead. The extra `.services` gives this higher
   specificity than the module's inline <style>, so it wins. */
.services .subcategory-grid {
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 1199px) {
  .services .subcategory-grid {
    grid-template-columns: 1fr;
  }
}

/* Product listing grid (product-grid module, e.g. Small Animal > DR). The module's
   inline style uses repeat(auto-fill, minmax(240px, 1fr)), which fits 5 cards across
   at full width — pin it to 4 and step down on smaller screens. The doubled
   .product-grid-module class outranks the module's inline <style>. This targets the
   --grid variant only, so the --list variant and the category .subcategory-grid
   (used by the Equine categories page) are both unaffected. */
.product-grid-module.product-grid-module--grid .product-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1199px) {
  .product-grid-module.product-grid-module--grid .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .product-grid-module.product-grid-module--grid .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .product-grid-module.product-grid-module--grid .product-grid {
    grid-template-columns: 1fr;
  }
}

/* On the live templates the card description isn't wrapped in <p>, so
   `.services .service-item p` doesn't reach it — style the bare text. */
.services .subcategory-grid .service-item.has-thumb > div {
  line-height: 24px;
  font-size: 15px;
}

/* The intro text is moved into a .category-header module and the original
   .dental-intro comes through empty. Hide the empty intro (only on pages that
   have the CMS module, so repo pages are unaffected) and give the real
   description the same centred, underlined treatment. */
.services:has(.category-header) .dental-intro {
  display: none;
}

.services .category-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 1.5rem;
}

.services .category-header__description {
  font-size: 1.2rem;
  font-weight: 300;
}

.services .category-header::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ef6c00; /* matches the repo .dental-intro underline */
  margin: 22px auto 0;
}

/* The live logo is a <figure> inside .logo with no me-auto class, so the menu
   isn't pushed right. margin-right:auto on the .logo div restores it (matches
   the repo header include change). */
.header .logo {
  margin-right: auto;
}

.product-carousel .carousel-item.category-static .product-text h2,
.product-carousel .carousel-item.category-portable .product-text h2,
.product-carousel .carousel-item.category-dr .product-text h2,
.product-carousel .carousel-item.category-dental .product-text h2,
.product-carousel .carousel-item.category-pacs .product-text h2,
.product-carousel .carousel-item.category-static .product-text p,
.product-carousel .carousel-item.category-portable .product-text p,
.product-carousel .carousel-item.category-dr .product-text p,
.product-carousel .carousel-item.category-dental .product-text p,
.product-carousel .carousel-item.category-pacs .product-text p {
  color: #fff;
}

.product-carousel .carousel-item.category-static { --category-color: #0d47a1; }
.product-carousel .carousel-item.category-portable { --category-color: #2e7d32; }
.product-carousel .carousel-item.category-dr { --category-color: #0288d1; }
.product-carousel .carousel-item.category-dental { --category-color: #ef6c00; }
.product-carousel .carousel-item.category-pacs { --category-color: #6a1b9a; }

.product-carousel .carousel-item.category-static .btn-learn-more,
.product-carousel .carousel-item.category-portable .btn-learn-more,
.product-carousel .carousel-item.category-dr .btn-learn-more,
.product-carousel .carousel-item.category-dental .btn-learn-more,
.product-carousel .carousel-item.category-pacs .btn-learn-more {
  background-color: var(--category-color);
  border-color: var(--category-color);
  color: #fff;
}

.product-carousel .carousel-item.category-static .btn-learn-more:hover,
.product-carousel .carousel-item.category-portable .btn-learn-more:hover,
.product-carousel .carousel-item.category-dr .btn-learn-more:hover,
.product-carousel .carousel-item.category-dental .btn-learn-more:hover,
.product-carousel .carousel-item.category-pacs .btn-learn-more:hover {
  background: transparent;
  color: var(--category-color);
}

/*--------------------------------------------------------------
# What We Do Section
--------------------------------------------------------------*/
.wwd-item {
  background-color: var(--surface-color);
  padding: 32px 24px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  height: 100%;
  transition: 0.3s;
  border-radius: 4px;
}

.wwd-item:hover {
  border-color: var(--accent-color);
  transform: translateY(-4px);
}

.wwd-item i {
  font-size: 48px;
  color: var(--accent-color);
  margin-bottom: 16px;
  display: inline-block;
}

.wwd-item h3,
.wwd-item h4 {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 12px;
}

.wwd-item h3 a,
.wwd-item h4 a {
  color: var(--heading-color);
  text-decoration: none;
  transition: 0.3s;
}

.wwd-item:hover h3 a,
.wwd-item:hover h4 a {
  color: var(--accent-color);
}

.wwd-item p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--surface-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/* Larger feature image on the Services and Sales pages */
.why-choose-us .about-img img,
.sales .about-img img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

/*--------------------------------------------------------------
# About 2 Section
--------------------------------------------------------------*/
.about-2 .about-img {
  position: relative;
  margin: 60px 0 0 60px;
}

.about-2 .about-img:before {
  position: absolute;
  inset: -60px 0 0 -60px;
  content: "";
  background: url("../img/about-bg.png") top left;
  background-repeat: no-repeat;
  z-index: 1;
}

.about-2 .about-img img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

@media (max-width: 575px) {
  .about-2 .about-img {
    margin: 30px 0 0 30px;
  }

  .about-2 .about-img:before {
    inset: -30px 0 0 -30px;
  }
}

.about-2 h3 {
  font-weight: 300;
  font-size: 32px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .about-2 h3 {
    font-size: 28px;
  }
}

.about-2 .nav-pills {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.about-2 .nav-pills li+li {
  margin-left: 40px;
}

.about-2 .nav-link {
  background: none;
  font-size: 18px;
  font-weight: 400;
  color: var(--default-color);
  padding: 12px 0;
  margin-bottom: -2px;
  border-radius: 0;
}

.about-2 .nav-link.active {
  color: var(--accent-color);
  background: none;
  border-bottom: 3px solid var(--accent-color);
}

@media (max-width: 575px) {
  .about-2 .nav-link {
    font-size: 16px;
  }
}

.about-2 .tab-content h4 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  color: var(--default-color);
}

.about-2 .tab-content i {
  font-size: 22px;
  line-height: 0;
  margin-right: 8px;
  color: var(--accent-color);
}

.about-2 .tab-content .tab-pane > p:first-of-type {
  font-style: italic;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  padding: 10px 0;
}

.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  color: var(--heading-color);
  font-size: 48px;
  display: block;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.stats .stats-item span:after {
  content: "";
  position: absolute;
  display: block;
  width: 25px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 500;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  color: var(--heading-color);
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: var(--heading-font);
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: 5px;
  transition: 0.5s;
  padding: 30px;
  height: 100%;
}

@media (max-width: 468px) {
  .team .team-member {
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
  }
}

.team .team-member .pic {
  overflow: hidden;
  width: 150px;
  border-radius: 5px;
  flex-shrink: 0;
}

.team .team-member .pic img {
  transition: ease-in-out 0.3s;
}

.team .team-member:hover {
  transform: translateY(-10px);
}

.team .team-member .member-info {
  padding-left: 30px;
}

@media (max-width: 468px) {
  .team .team-member .member-info {
    padding: 30px 0 0 0;
    text-align: center;
  }
}

.team .team-member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
}

.team .team-member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .team-member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 85%);
  bottom: 0;
  left: 0;
}

@media (max-width: 468px) {
  .team .team-member span::after {
    left: calc(50% - 25px);
  }
}

.team .team-member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.team .team-member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
}

@media (max-width: 468px) {
  .team .team-member .social {
    justify-content: center;
  }
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--default-color), transparent 94%);
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  width: 36px;
  height: 36px;
}

.team .team-member .social a i {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 16px;
  margin: 0 2px;
}

.team .team-member .social a:hover {
  background: var(--accent-color);
}

.team .team-member .social a:hover i {
  color: var(--contrast-color);
}

.team .team-member .social a+a {
  margin-left: 8px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
  position: relative;
  height: 100%;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features {
  overflow: hidden;
}

.features .nav-tabs {
  border: 0;
}

.features .nav-link {
  border: 0;
  padding: 12px 15px 12px 0;
  transition: 0.3s;
  color: var(--default-color);
  border-radius: 0;
  border-right: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  font-weight: 600;
  font-size: 15px;
}

.features .nav-link:hover {
  color: var(--accent-color);
}

.features .nav-link.active {
  color: var(--accent-color);
  border-color: var(--accent-color);
  background-color: var(--background-color);
}

.features .tab-pane.active {
  animation: fadeIn 0.5s ease-out;
}

.features .details h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
}

.features .details p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.features .details p:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .features .nav-link {
    border: 0;
    padding: 15px;
  }

  .features .nav-link.active {
    color: var(--accent-color);
    background: var(--accent-color);
  }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.pricing .pricing-item h3 {
  font-weight: 400;
  margin: -20px -20px 20px -20px;
  padding: 20px 15px;
  font-size: 16px;
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background: color-mix(in srgb, var(--default-color), transparent 95%);
}

.pricing .pricing-item h4 {
  font-size: 36px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.pricing .pricing-item h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .pricing-item h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 16px;
  font-weight: 300;
}

.pricing .pricing-item ul {
  padding: 15px 0;
  list-style: none;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing .pricing-item ul li {
  padding-bottom: 16px;
}

.pricing .pricing-item ul i {
  color: var(--accent-color);
  font-size: 18px;
  padding-right: 4px;
}

.pricing .pricing-item ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-decoration: line-through;
}

.pricing .btn-wrap {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  margin: 0 -20px -20px -20px;
  padding: 20px 15px;
  text-align: center;
}

.pricing .btn-buy {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
}

.pricing .btn-buy:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.pricing .featured h3 {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .advanced {
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
}

.blog-posts .post-img {
  max-height: 440px;
  margin: -30px -30px 0 -30px;
  overflow: hidden;
}

.blog-posts .title {
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-posts .meta-top ul li+li {
  padding-left: 20px;
}

.blog-posts .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-posts .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-posts .content {
  margin-top: 20px;
}

.blog-posts .content .read-more {
  text-align: right;
}

.blog-posts .content .read-more a {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 30px;
  transition: 0.3s;
  font-size: 14px;
  border-radius: 4px;
}

.blog-posts .content .read-more a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form textarea {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
/* Not scoped to .contact — the CMS renders this block above the contact
   section rather than inside it, so it must style standalone too. */
.contact-intro {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px 20px;
  text-align: center;
}

.contact-intro p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 12px;
}

.contact-intro p:last-child {
  margin-bottom: 0;
  font-weight: 500;
  color: var(--heading-color);
}

/* The intro above supplies the spacing, so the map shouldn't sit 60px down. */
#contact {
  padding-top: 0;
}

.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  background-color: var(--surface-color);
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Under Construction / Coming Soon Page
--------------------------------------------------------------*/
.under-construction .uc-icon {
  font-size: 4.5rem;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 1.25rem;
  display: inline-block;
}

.under-construction h2 {
  font-weight: 700;
  margin-bottom: 1rem;
}

.under-construction p {
  max-width: 600px;
  margin: 0 auto 2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.under-construction .uc-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/*--------------------------------------------------------------
# Product Carousel / Hero (moved from _includes/carousel.html)
--------------------------------------------------------------*/
.product-carousel {
  padding: 0;
  overflow: hidden;
  position: relative;
  background: url('/ClientArea/images/backgrounds/vetxray1.jpeg') center center / cover no-repeat;
}
/* Dark transparency over the background image */
.product-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}
.product-carousel .carousel {
  position: relative;
  height: 600px;
  z-index: 2;
}
/* Slides are transparent so the shared photo background shows through */
.product-carousel .carousel-item {
  height: 600px;
  padding: 3rem 0;
  transition: all 0.6s ease-in-out;
  background: transparent;
  background-size: cover;
  background-position: center;
  position: relative;
}
.product-carousel .carousel-item .container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
}
.product-carousel .carousel-inner {
  position: relative;
  height: 600px;
  overflow: hidden;
  z-index: 2;
}
.product-carousel .product-slide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  width: 100%;
  position: relative;
  z-index: 1;
}
.product-carousel .product-text {
  flex: 0 1 auto;
  max-width: 460px;
  padding-right: 0;
  position: relative;
  z-index: 2;
}
.product-carousel .product-text h2 {
  font-size: 2.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
  letter-spacing: -0.5px;
  text-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}
.product-carousel .product-text p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.90);
  margin-bottom: 1.75rem;
  max-width: 520px;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.product-carousel .product-text .btn-learn-more {
  display: inline-block;
  background: var(--accent-color);
  color: #fff;
  padding: 10px 32px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  border: 2px solid var(--accent-color);
  transition: 0.3s;
}
.product-carousel .product-image {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-left: auto;
}
.product-carousel .product-image img {
  max-height: 500px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.12));
}
/* Upscale the smaller (square) product images so they read larger; the tall dental image (4th slide) stays as-is */
@media (min-width: 768px) {
  .product-carousel .carousel-item:nth-child(1) .product-image img,
  .product-carousel .carousel-item:nth-child(2) .product-image img,
  .product-carousel .carousel-item:nth-child(3) .product-image img,
  .product-carousel .carousel-item:nth-child(5) .product-image img {
    height: 360px;
    max-height: none;
    width: auto;
  }
}
.product-carousel .carousel-control-prev,
.product-carousel .carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5%;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.product-carousel .carousel-control-prev { left: 0; }
.product-carousel .carousel-control-next { right: 0; }
.product-carousel .carousel-control-prev-icon,
.product-carousel .carousel-control-next-icon {
  color: #fff;
  font-size: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  background-image: none;
  -webkit-text-stroke: 1px #fff;
  transition: opacity 0.3s;
}
.product-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.product-carousel .carousel-control-next:hover .carousel-control-next-icon {
  color: #fff;
  -webkit-text-stroke: 1px #fff;
}
/* Medium screens: keep slide content clear of the prev/next arrows */
@media (min-width: 768px) and (max-width: 991px) {
  .product-carousel .carousel-item .container {
    padding-left: 6%;
    padding-right: 6%;
  }
}
@media (max-width: 767px) {
  .product-carousel .carousel,
  .product-carousel .carousel-inner,
  .product-carousel .carousel-item {
    height: auto;
    min-height: 480px;
  }
  .product-carousel .product-slide {
    flex-direction: column-reverse;
    gap: 1.5rem;
    text-align: center;
    height: auto;
  }
  .product-carousel .product-text { padding-right: 0; }
  .product-carousel .product-text h2 { font-size: 2rem; }
  .product-carousel .product-image { margin-left: 0; }
  .product-carousel .product-image img { max-height: 240px; height: auto; }
}

/*--------------------------------------------------------------
# Hero Slider (CMS hero-slider module) restyled to match the local
# .product-carousel design in _includes/carousel.html — CSS only, no markup
# change. The module injects its own ID-scoped inline <style> (and Bootstrap
# uses !important on .w-100 / .d-none), so these overrides use !important to
# win the cascade. Matches #heroCarousel (current render) and #heroSlider-*.
--------------------------------------------------------------*/
.carousel[id^="hero"] {
  /* Mirrors Bootstrap's .container max-widths so the slide content can line up
     with the header logo (.container-fluid.container-xl) and the page sections
     (.container) instead of drifting on a viewport percentage. */
  --site-container: 100%;
  --site-gutter: 12px; /* .container padding: calc(--bs-gutter-x * .5) */
  position: relative !important;
  overflow: hidden;
  /* No background here on purpose. The Hero Slider module sets its own
     background-image on #heroCarousel; anything declared here would need to lose
     the cascade to it, and an !important background did not. */
}
@media (min-width: 576px) { .carousel[id^="hero"] { --site-container: 540px; } }
@media (min-width: 768px) { .carousel[id^="hero"] { --site-container: 720px; } }
@media (min-width: 992px) { .carousel[id^="hero"] { --site-container: 960px; } }
@media (min-width: 1200px) { .carousel[id^="hero"] { --site-container: 1140px; } }
@media (min-width: 1400px) { .carousel[id^="hero"] { --site-container: 1320px; } }
/* Fallback dark overlay. The Hero Slider module sets its own overlay on
   #heroCarousel::before, which outranks this by ID and wins; this only applies
   to a hero carousel rendered without one. */
.carousel[id^="hero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}
.carousel[id^="hero"] .carousel-inner {
  position: relative;
  height: 600px !important;
  z-index: 2;
}
.carousel[id^="hero"] .carousel-item {
  height: 600px !important;
  min-height: 600px !important;
  background: transparent !important;
}
/* The slide image becomes the right-hand product image (was full-bleed w-100),
   flush with the container's right edge so the slide reads on the page grid */
.carousel[id^="hero"] .carousel-item img {
  position: absolute !important;
  top: 50% !important;
  right: calc(50% - var(--site-container) / 2 + var(--site-gutter)) !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  max-width: 42% !important;
  height: auto !important;
  max-height: 420px !important;
  min-height: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.25));
  z-index: 2;
}
/* The caption becomes the left-hand text block. It is sized and centred like a
   .container so its text starts on the same vertical line as the header logo
   and every section below it; the copy itself is capped inside it. */
.carousel[id^="hero"] .carousel-item .carousel-caption {
  top: 50% !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: var(--site-container) !important;
  max-width: 100% !important;
  padding: 0 var(--site-gutter) !important;
  background: transparent !important;
  border-radius: 0 !important;
  text-align: left !important;
  z-index: 3;
}
/* Keep the copy to its original measure now that the caption spans the container */
@media (min-width: 768px) {
  .carousel[id^="hero"] .carousel-caption h1,
  .carousel[id^="hero"] .carousel-caption h2,
  .carousel[id^="hero"] .carousel-caption h3,
  .carousel[id^="hero"] .carousel-caption h4,
  .carousel[id^="hero"] .carousel-caption h5,
  .carousel[id^="hero"] .carousel-caption h6,
  .carousel[id^="hero"] .carousel-caption p {
    max-width: 460px !important;
  }
}
.carousel[id^="hero"] .carousel-caption h1,
.carousel[id^="hero"] .carousel-caption h2,
.carousel[id^="hero"] .carousel-caption h3,
.carousel[id^="hero"] .carousel-caption h4,
.carousel[id^="hero"] .carousel-caption h5,
.carousel[id^="hero"] .carousel-caption h6 {
  font-size: 2.75rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  color: #fff !important;
  letter-spacing: -0.5px !important;
  text-transform: none !important;
  text-shadow: 0 12px 24px rgba(0, 0, 0, 0.22) !important;
}
.carousel[id^="hero"] .carousel-caption p {
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  margin: 0 0 1.75rem 0 !important;
  max-width: 520px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}
/* Hide the empty <p> the module renders when a slide has no subtitle */
.carousel[id^="hero"] .carousel-caption p:empty {
  display: none !important;
}
/* Learn More button — brand red (matches .product-text .btn-learn-more) */
.carousel[id^="hero"] .carousel-caption .btn {
  display: inline-block !important;
  background: var(--accent-color) !important;
  border: 2px solid var(--accent-color) !important;
  color: #fff !important;
  padding: 10px 32px !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  transition: 0.3s;
}
.carousel[id^="hero"] .carousel-caption .btn:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%) !important;
  border-color: color-mix(in srgb, var(--accent-color), transparent 20%) !important;
  color: #fff !important;
}
.carousel[id^="hero"] .carousel-control-prev,
.carousel[id^="hero"] .carousel-control-next {
  width: 5%;
  opacity: 0.6;
  z-index: 5;
}
.carousel[id^="hero"] .carousel-control-prev:hover,
.carousel[id^="hero"] .carousel-control-next:hover {
  opacity: 1;
}
/* Mobile: stack image over text, centred (matches the local carousel) */
@media (max-width: 767px) {
  .carousel[id^="hero"] .carousel-inner,
  .carousel[id^="hero"] .carousel-item {
    height: auto !important;
    min-height: 480px !important;
  }
  .carousel[id^="hero"] .carousel-item img {
    position: static !important;
    transform: none !important;
    display: block !important;
    margin: 0 auto 1.5rem !important;
    max-width: 70% !important;
    max-height: 240px !important;
  }
  .carousel[id^="hero"] .carousel-item .carousel-caption {
    position: static !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 1rem 2rem !important;
  }
  .carousel[id^="hero"] .carousel-caption h1,
  .carousel[id^="hero"] .carousel-caption h2,
  .carousel[id^="hero"] .carousel-caption h3,
  .carousel[id^="hero"] .carousel-caption h4,
  .carousel[id^="hero"] .carousel-caption h5 {
    font-size: 2rem !important;
  }
}

/*--------------------------------------------------------------
# Services / Sales "Get Started" button (moved from services.html, services/sales.html)
--------------------------------------------------------------*/
#services .btn-get-started,
#sales .btn-get-started {
  color: var(--accent-color);
  background: transparent;
  border: 2px solid var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 8px 28px;
  border-radius: 4px;
  text-decoration: none;
  transition: 0.3s;
}
#sales .btn-get-started {
  display: inline-block;
}
#services .btn-get-started:hover,
#sales .btn-get-started:hover {
  background: var(--accent-color);
  color: var(--contrast-color, #fff);
}

/*--------------------------------------------------------------
# Product Datasheet (moved from x-mind-dc.html)
--------------------------------------------------------------*/
.datasheet {
  --ds-red: #e21f26;
  --ds-blue: #5fb3d4;
  --ds-blue-dark: #3a8fb0;
  --ds-text: #2d2d2d;
  --ds-row-alt: #fbe9e9;
  background: #fff;
  color: var(--ds-text);
  font-family: var(--default-font);
  padding: 2.5rem 0 1.5rem;
}
.datasheet-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
/* Match the datasheet accent to the product category colour (keeps a datasheet's
   wordmark in step with its category page-title / listing theme) */
.datasheet.category-portable { --ds-blue: #2e7d32; --ds-blue-dark: #1b5e20; }
.datasheet.category-static { --ds-blue: #0d47a1; --ds-blue-dark: #08306b; }
.datasheet.category-dr { --ds-blue: #0288d1; --ds-blue-dark: #01579b; }
.datasheet.category-dental { --ds-blue: #ef6c00; --ds-blue-dark: #b53d00; }
.datasheet.category-pacs { --ds-blue: #6a1b9a; --ds-blue-dark: #4a148c; }

.datasheet-wordmark {
  font-weight: 300;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--ds-blue);
  margin: 0 0 0.5rem;
}
.datasheet-red-rule {
  width: 50px;
  height: 4px;
  background: var(--ds-red);
  margin: 1rem 0 1.5rem;
  border: 0;
}
.datasheet-left p {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 2rem;
  max-width: 480px;
}
.datasheet-section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--ds-text);
  margin: 0 0 1.5rem;
}
.datasheet-section-title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ds-red);
}
.datasheet-features { list-style: none; padding: 0; margin: 0; }
.datasheet-features li {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.6rem 0;
}
.datasheet-features li i {
  color: var(--ds-red);
  font-size: 1.6rem;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.datasheet-download {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0.75rem 1.6rem;
  background: var(--ds-red);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid var(--ds-red);
  border-radius: 4px;
  transition: 0.25s;
}
.datasheet-download i {
  font-size: 1.2rem;
  line-height: 1;
}
.datasheet-download:hover {
  background: transparent;
  color: var(--ds-red);
}
.datasheet-hero {
  position: relative;
  text-align: center;
}
.datasheet-hero .hero-img {
  max-height: 360px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
}
.datasheet-hero p {
  font-size: 0.85rem;
  color: #777;
  margin-top: 0.75rem;
  text-align: center;
  font-style: italic;
}
.datasheet-secondary {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
}
.datasheet-secondary img {
  max-height: 160px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.08));
}
.datasheet-spec {
  grid-column: 1 / -1;
  padding: 1.5rem 0 0;
}
.datasheet-spec table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.datasheet-spec th,
.datasheet-spec td {
  padding: 0.7rem 1rem;
  text-align: left;
  border: 0;
}
.datasheet-spec tr:nth-child(odd) td,
.datasheet-spec tr:nth-child(odd) th { background: #fff; }
.datasheet-spec tr:nth-child(even) td,
.datasheet-spec tr:nth-child(even) th { background: var(--ds-row-alt); }
.datasheet-spec th { font-weight: 500; color: var(--ds-text); width: 30%; }

.datasheet-body > p {
  grid-column: 1 / -1;
  font-size: 0.65rem;
  color: #999;
  margin-top: 2rem;
  text-align: right;
}

@media (max-width: 900px) {
  .datasheet-body { grid-template-columns: 1fr; }
  .datasheet-wordmark { font-size: 3.5rem; }
}

product-element__hero img {
    width: 30%;
    height: auto;
    display: block;
}

/*--------------------------------------------------------------
# Live CMS (RDCMS) product detail page compatibility
# The live product template nests the CMS product modules inside the
# datasheet shell, which breaks several of the rules above:
#   - <h1 class="product-element__title"> is nested inside .datasheet-wordmark
#     (and inside the .page-title h1), carrying inline font-weight/margin
#   - the hero image is .product-element__hero img, not .hero-img
#   - the description is a <div class="product-element__body">, not a <p>
#   - empty section titles / features / spec table render as stray red rules
# `!important` is only used where the CMS sets the property inline and there
# is no other way to win. Additive only — nothing above is modified.
--------------------------------------------------------------*/

/* Page-title heading only: the CMS nests the product-title <h1> inside the
   page-title <h1>, so the parser closes the outer one and leaves an empty <h1>
   behind. That empty heading is still a flex item, and under
   justify-content-between it pushes the real title into the middle. Hiding the
   empty shell leaves two items, so the title sits on the left, in line with the
   logo. The :has(> ...) guard makes this inert if the CMS markup is ever fixed,
   and it never matches the repo pages. Datasheet wordmark left untouched. */
.page-title .container:has(> .product-element__title) > h1:not(.product-element__title):not(:has(.product-element__title)) {
  display: none;
}

/* The wordmark is a plain <div> now (the Product Name module supplies the page's
   only <h1>), so that heading nests inside the wrapper instead of auto-closing it.
   Make it render as the wordmark itself. The module sets font-weight, line-height
   and margin inline, so those three need !important; font-size does not. */
.datasheet-wordmark .product-element__title {
  font: inherit;
  color: inherit;
  font-weight: 300 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Description module stands in for `.datasheet-left p`. */
.datasheet-left .product-element__body {
  max-width: 480px;
  margin-bottom: 2rem;
}

/* Hero image: strip the module's grey panel and match `.datasheet-hero .hero-img`. */
.datasheet-hero .product-element__hero {
  background: transparent;
  border-radius: 0;
}

.datasheet-hero .product-element__hero img {
  max-height: 360px;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
}

/* Thumbnail strip: centre and constrain it. When there is only one thumbnail it
   just duplicates the hero, so hide it (repo datasheets show no strip either). */
.datasheet-hero .product-element__gallery {
  grid-template-columns: repeat(auto-fit, 90px);
  justify-content: center;
  margin-top: 1rem;
}

.datasheet-hero .product-element__gallery-item {
  background: transparent;
}

.datasheet-hero .product-element__gallery-item img {
  object-fit: contain;
}

.datasheet-hero .product-element__gallery:not(:has(.product-element__gallery-item + .product-element__gallery-item)) {
  display: none;
}

/* Suppress empty CMS modules so they don't render as stray red rules.
   Repo datasheets always have <li>/<tr>, so these never match locally. */
.datasheet-left:has(.datasheet-features:not(:has(li))) .datasheet-section-title,
.datasheet-features:not(:has(li)) {
  display: none;
}

.datasheet-spec:not(:has(tr)) {
  display: none;
}

/* The Features and Downloads CMS modules ship no inline <style> of their own, so
   they render unstyled. Style them to match the repo .datasheet-features list and
   .datasheet-download button. Scoped under .datasheet so the --ds-* vars resolve
   and repo pages (which have no .product-features/.product-downloads) are unaffected. */

/* Hide the empty repo section title that sits above a CMS module (the module
   carries its own heading). Covers both the Features and Specifications blocks. */
.datasheet-section-title:has(+ .datasheet-features .product-features),
.datasheet-spec:has(.product-specs) .datasheet-section-title {
  display: none;
}

/* Features module */
.datasheet .product-features {
  margin: 0;
}

/* Features and Specifications share one title rule so they stay identical and
   left-aligned. padding:0 / background/border overrides also defeat the specs
   module's inline grey-bar title styling. */
.datasheet .product-features__title,
.datasheet .product-specs__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  background: transparent;
  border-bottom: 0;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text);
}

.datasheet .product-features__title::after,
.datasheet .product-specs__title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--ds-red);
}

.datasheet .product-features__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.datasheet .product-features__item {
  position: relative;
  padding: 0.6rem 0 0.6rem 2rem;
  line-height: 1.5;
}

.datasheet .product-features__item::before {
  content: "\2713"; /* check mark */
  position: absolute;
  left: 0;
  top: 0.6rem;
  color: var(--ds-red);
  font-weight: 700;
  font-size: 1.1rem;
}

/* Downloads module */
.datasheet .product-downloads {
  margin-top: 2rem;
}

.datasheet .product-downloads__title {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-text);
  margin: 0 0 1rem;
}

.datasheet .product-downloads__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.datasheet .product-downloads__item {
  margin: 0 0 0.75rem;
}

.datasheet .product-downloads__item:last-child {
  margin-bottom: 0;
}

.datasheet .product-downloads__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.6rem;
  background: var(--ds-red);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid var(--ds-red);
  border-radius: 4px;
  transition: 0.25s;
}

.datasheet .product-downloads__link:hover {
  background: transparent;
  color: var(--ds-red);
}

/* Specifications module: the CMS ships its own inline <style> giving it a bordered
   card with a grey title bar. Override it via the existing .product-specs wrapper
   classes (scoped under .datasheet for higher specificity than the inline style)
   so it matches the repo .datasheet-spec table — a section-title heading with the
   red rule and alternating tinted rows. No new classes or markup are introduced. */
.datasheet .product-specs {
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.datasheet .product-specs table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.datasheet .product-specs td {
  padding: 0.7rem 1rem;
  border: 0;
}

.datasheet .product-specs tr:nth-child(odd) td {
  background: #fff;
}

.datasheet .product-specs tr:nth-child(even) td {
  background: var(--ds-row-alt);
}

.datasheet .product-specs td:first-child {
  width: 30%;
  color: var(--ds-text);
  font-weight: 500;
}

.datasheet .product-specs td:last-child {
  color: var(--ds-text);
  font-weight: 400;
}