/**
* Template Name: MediNest
* Template URL: https://bootstrapmade.com/medinest-bootstrap-hospital-template/
* Updated: Apr 28 2026 with Bootstrap v5.3.8
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

@charset "UTF-8";

/*--------------------------------------------------------------
# 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";
  --heading-font: "Ubuntu",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #363f40; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #1f2f31; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #94371c; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #363f40;  /* The default color of the main navmenu links */
  --nav-hover-color: #94371c; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #363f40; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #94371c; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

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

.light-background {
  --background-color: #f7f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #021418;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #11262a;
  --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;
}

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

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

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

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

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

.header .logo h1 span {
  color: var(--accent-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 26px;
  margin: 0;
  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 20px;
  }

  .header .navmenu {
    order: 3;
  }
}

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

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: #ffffff;
}

/*--------------------------------------------------------------
# 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: 16px;
    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;
  }
}

/*--------------------------------------------------------------
# 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 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
}

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

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

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

.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: 8px;
  font-size: 15.5px;
  line-height: 1.6;
}

.footer .footer-contact p strong {
  color: var(--heading-color);
}

.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 .credits {
  margin-top: 8px;
  font-size: 14px;
}

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

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  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;
  bottom: 15px;
}

/*--------------------------------------------------------------
# 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);
  position: relative;
  padding-top: 100px;
}

.page-title .heading {
  padding: 80px 0;
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 500;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 20px 0;
}

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

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

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

/*--------------------------------------------------------------
# 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 {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding-top: 120px;
  position: relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--surface-color), transparent 0%) 100%);
  overflow: hidden;
  padding-bottom: 80px;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero .hero-image {
  position: relative;
}

.hero .hero-image .main-image {
  border-radius: 30px;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--accent-color), transparent 80%);
  transform: rotate(-2deg);
  transition: all 0.3s ease;
}

.hero .hero-image .main-image:hover {
  transform: rotate(0deg) scale(1.02);
}

.hero .hero-image .floating-card {
  position: absolute;
  background-color: var(--surface-color);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
  backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero .hero-image .floating-card.emergency-card {
  top: 20px;
  left: -30px;
  z-index: 3;
}

.hero .hero-image .floating-card.emergency-card .card-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero .hero-image .floating-card.emergency-card .card-content i {
  font-size: 2rem;
  color: var(--accent-color);
  padding: 15px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 15px;
}

.hero .hero-image .floating-card.emergency-card .card-content .text {
  display: flex;
  flex-direction: column;
}

.hero .hero-image .floating-card.emergency-card .card-content .text .label {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.hero .hero-image .floating-card.emergency-card .card-content .text .number {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--heading-color);
}

.hero .hero-image .floating-card.stats-card {
  bottom: 30px;
  right: -40px;
  z-index: 3;
  display: flex;
  gap: 2rem;
}

.hero .hero-image .floating-card.stats-card .stat-item {
  text-align: center;
}

.hero .hero-image .floating-card.stats-card .stat-item .number {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
}

.hero .hero-image .floating-card.stats-card .stat-item .label {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

@media (max-width: 992px) {
  .hero .hero-image {
    margin-bottom: 3rem;
  }

  .hero .hero-image .floating-card {
    position: static;
    margin: 1rem 0;
    transform: none;
  }

  .hero .hero-image .floating-card.stats-card {
    justify-content: center;
  }
}

.hero .hero-content {
  padding-left: 3rem;
}

@media (max-width: 992px) {
  .hero .hero-content {
    padding-left: 0;
  }
}

.hero .hero-content .badge-container {
  margin-bottom: 1.5rem;
}

.hero .hero-content .badge-container .hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  color: var(--contrast-color);
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Foto del dottore accanto al suo nome, in primo piano */
.hero .hero-content .hero-doctor-heading {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 0.5rem;
}

.hero .hero-content .hero-doctor-photo {
  width: 118px;
  height: 118px;
  min-width: 118px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 82%);
}

.hero .hero-content .hero-doctor-heading .hero-title,
.hero .hero-content .hero-doctor-heading h2 {
  margin-bottom: 0.4rem;
}

@media (max-width: 576px) {
  .hero .hero-content .hero-doctor-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .hero .hero-content .hero-doctor-photo {
    width: 92px;
    height: 92px;
    min-width: 92px;
  }
}

.hero .hero-content .hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--heading-color);
}

@media (max-width: 992px) {
  .hero .hero-content .hero-title {
    font-size: 2.8rem;
  }
}

@media (max-width: 768px) {
  .hero .hero-content .hero-title {
    font-size: 2.2rem;
  }
}

.hero .hero-content .hero-description {
  font-size: 1.2rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
  .hero .hero-content .hero-description {
    font-size: 1.1rem;
  }
}

.hero .hero-stats {
  margin-bottom: 3rem;
}

.hero .hero-stats .stat-group {
  display: flex;
  gap: 2.5rem;
}

@media (max-width: 768px) {
  .hero .hero-stats .stat-group {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.hero .hero-stats .stat-group .stat {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero .hero-stats .stat-group .stat i {
  font-size: 2.5rem;
  color: var(--accent-color);
  padding: 15px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 90%) 0%, color-mix(in srgb, var(--accent-color), transparent 95%) 100%);
  border-radius: 20px;
}

.hero .hero-stats .stat-group .stat .stat-text {
  display: flex;
  flex-direction: column;
}

.hero .hero-stats .stat-group .stat .stat-text .number {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1;
}

.hero .hero-stats .stat-group .stat .stat-text .label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.hero .cta-section .cta-buttons {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 576px) {
  .hero .cta-section .cta-buttons {
    flex-direction: column;
  }
}

.hero .cta-section .cta-buttons .btn {
  padding: 15px 30px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 15px;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hero .cta-section .cta-buttons .btn.btn-primary {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  border: none;
  color: var(--contrast-color);
}

.hero .cta-section .cta-buttons .btn.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.hero .cta-section .cta-buttons .btn.btn-secondary {
  background-color: transparent;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
  color: var(--default-color);
}

.hero .cta-section .cta-buttons .btn.btn-secondary:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.hero .cta-section .quick-actions {
  display: flex;
  gap: 2rem;
}

@media (max-width: 768px) {
  .hero .cta-section .quick-actions {
    flex-direction: column;
    gap: 1rem;
  }
}

.hero .cta-section .quick-actions .action-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--default-color);
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
}

.hero .cta-section .quick-actions .action-link i {
  font-size: 1.25rem;
  color: var(--accent-color);
}

.hero .cta-section .quick-actions .action-link:hover {
  color: var(--accent-color);
  transform: translateX(5px);
}

.hero .background-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.hero .background-elements .bg-shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 92%) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
}

.hero .background-elements .bg-shape.shape-1 {
  width: 400px;
  height: 400px;
  top: -200px;
  right: -200px;
}

.hero .background-elements .bg-shape.shape-2 {
  width: 300px;
  height: 300px;
  bottom: -150px;
  left: -150px;
}

.hero .background-elements .bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle at 25% 75%, color-mix(in srgb, var(--accent-color), transparent 97%) 0%, transparent 50%);
}

@media (max-width: 992px) {
  .hero {
    padding: 60px 0;
  }

  .hero .hero-content {
    text-align: center;
  }

  .hero .hero-stats .stat-group {
    justify-content: center;
  }

  .hero .cta-section .quick-actions {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Home About Section
--------------------------------------------------------------*/
.home-about {
  padding: 120px 0;
  background: linear-gradient(135deg, var(--background-color) 0%, color-mix(in srgb, var(--surface-color), var(--accent-color) 3%) 100%);
}

.home-about .section-heading {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, var(--heading-color), var(--accent-color));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@media (max-width: 768px) {
  .home-about .section-heading {
    font-size: 2.25rem;
  }
}

.home-about .lead-description {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  max-width: 600px;
  margin: 0 auto;
}

.home-about .image-grid {
  position: relative;
  display: grid;
  /* MODIFICA: le due sedi (Siena e Volterra) sono ora mostrate alla
     STESSA dimensione, entrambe grandi come prima era solo Siena
     (colonne 1fr/1fr invece di 2fr/1fr, che rendeva Volterra molto
     più piccola). La grafica resta la stessa: due immagini affiancate
     con, a destra, i riquadri di testo. */
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  height: 100%;
  min-height: 460px;
}

@media (max-width: 768px) {
  .home-about .image-grid {
    grid-template-columns: 1fr;
    height: auto;
    gap: 1rem;
  }
}

.home-about .image-grid .primary-image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 80px color-mix(in srgb, var(--default-color), transparent 88%);
}

.home-about .image-grid .primary-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.home-about .image-grid .primary-image:hover img {
  transform: scale(1.08);
}

.home-about .image-grid .primary-image .certification-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--surface-color);
  padding: 10px 16px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.home-about .image-grid .primary-image .certification-badge i {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.home-about .image-grid .primary-image .certification-badge span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--heading-color);
}

.home-about .image-grid .secondary-images {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .home-about .image-grid .secondary-images {
    flex-direction: row;
    height: 180px;
  }
}

.home-about .image-grid .secondary-images .small-image {
  border-radius: 12px;
  overflow: hidden;
  flex: 1;
  box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 92%);
}

.home-about .image-grid .secondary-images .small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.home-about .image-grid .secondary-images .small-image:hover img {
  transform: scale(1.1);
}

.home-about .content-wrapper {
  padding-left: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .home-about .content-wrapper {
    padding-left: 0;
    text-align: center;
  }
}

.home-about .content-wrapper .highlight-box {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  border-left: 4px solid var(--accent-color);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 95%);
}

@media (max-width: 992px) {
  .home-about .content-wrapper .highlight-box {
    text-align: left;
  }
}

.home-about .content-wrapper .highlight-box .highlight-icon {
  background: color-mix(in srgb, var(--accent-color), transparent 88%);
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home-about .content-wrapper .highlight-box .highlight-icon i {
  color: var(--accent-color);
  font-size: 1.75rem;
}

/* MODIFICA: variante "compatta" dei riquadri, usata in home page per
   "Collaborazione" e "Fiducia dei Pazienti" ora che l'icona è stata
   rimossa: meno spazio verticale/orizzontale occupato (padding
   ridotto, margine inferiore ridotto), testo che parte da sinistra
   senza il vuoto lasciato dall'icona. */
.home-about .content-wrapper .highlight-box.highlight-box-compact {
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.25rem;
  gap: 0;
}

.home-about .content-wrapper .highlight-box .highlight-content h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--heading-color);
}

.home-about .content-wrapper .highlight-box .highlight-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.home-about .content-wrapper .feature-list {
  margin-bottom: 2.5rem;
}

.home-about .content-wrapper .feature-list .feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 992px) {
  .home-about .content-wrapper .feature-list .feature-item {
    justify-content: center;
  }
}

.home-about .content-wrapper .feature-list .feature-item .feature-icon i {
  color: var(--accent-color);
  font-size: 1.25rem;
}

.home-about .content-wrapper .feature-list .feature-item .feature-text {
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-weight: 400;
}

.home-about .content-wrapper .metrics-row {
  display: flex;
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 992px) {
  .home-about .content-wrapper .metrics-row {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .home-about .content-wrapper .metrics-row {
    gap: 1rem;
  }
}

.home-about .content-wrapper .metrics-row .metric-box {
  text-align: center;
}

.home-about .content-wrapper .metrics-row .metric-box .metric-number {
  font-size: 2.75rem;
  font-weight: 300;
  color: var(--accent-color);
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.home-about .content-wrapper .metrics-row .metric-box .metric-label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.home-about .content-wrapper .action-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

@media (max-width: 992px) {
  .home-about .content-wrapper .action-buttons {
    justify-content: center;
  }
}

.home-about .content-wrapper .action-buttons .btn-explore {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 14px 32px;
  font-size: 1.05rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.home-about .content-wrapper .action-buttons .btn-explore:hover {
  background: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-3px);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--accent-color), transparent 70%);
  color: var(--contrast-color);
}

.home-about .content-wrapper .action-buttons .btn-contact {
  color: var(--heading-color);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 14px 20px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.home-about .content-wrapper .action-buttons .btn-contact i {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.home-about .content-wrapper .action-buttons .btn-contact:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

@media (max-width: 992px) {
  .home-about {
    padding: 100px 0;
  }
}

@media (max-width: 768px) {
  .home-about {
    padding: 80px 0;
  }

  .home-about .content-wrapper {
    margin-top: 3rem;
  }
}

/*--------------------------------------------------------------
# Featured Departments Section
--------------------------------------------------------------*/
.featured-departments {
  padding: 120px 0;
}

.featured-departments .departments-showcase {
  max-width: 1200px;
  margin: 0 auto;
}

.featured-departments .featured-department {
  margin-bottom: 120px;
}

@media (max-width: 992px) {
  .featured-departments .featured-department {
    margin-bottom: 80px;
  }
}

.featured-departments .department-content {
  padding-right: 40px;
}

@media (max-width: 992px) {
  .featured-departments .department-content {
    padding-right: 0;
    margin-bottom: 40px;
  }
}

.featured-departments .department-category {
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.featured-departments .department-title {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 24px;
  color: var(--heading-color);
}

@media (max-width: 768px) {
  .featured-departments .department-title {
    font-size: 2.25rem;
  }
}

.featured-departments .department-description {
  font-size: 18px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 32px;
}

.featured-departments .department-features {
  margin-bottom: 40px;
}

.featured-departments .feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.featured-departments .feature-item i {
  color: var(--accent-color);
  font-size: 18px;
  margin-right: 12px;
}

.featured-departments .feature-item span {
  font-size: 16px;
  color: var(--default-color);
}

.featured-departments .cta-link {
  color: var(--heading-color);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

.featured-departments .cta-link i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.featured-departments .cta-link:hover {
  color: var(--accent-color);
}

.featured-departments .cta-link:hover i {
  transform: translateX(4px);
}

.featured-departments .department-visual {
  position: relative;
}

@media (max-width: 992px) {
  .featured-departments .department-visual {
    margin-top: 40px;
  }
}

.featured-departments .image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.featured-departments .image-wrapper::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
  border-radius: 8px;
  z-index: 2;
  pointer-events: none;
}

.featured-departments .image-wrapper img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

@media (max-width: 768px) {
  .featured-departments .image-wrapper img {
    height: 350px;
  }
}

.featured-departments .image-wrapper:hover img {
  transform: scale(1.02);
}

.featured-departments .departments-grid {
  margin-bottom: 100px;
}

@media (max-width: 992px) {
  .featured-departments .departments-grid {
    margin-bottom: 80px;
  }
}

.featured-departments .department-card {
  background: var(--surface-color);
  padding: 40px 32px;
  height: 100%;
  transition: all 0.4s ease;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.featured-departments .department-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.featured-departments .department-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.featured-departments .department-card:hover::before {
  transform: scaleX(1);
}

.featured-departments .department-card:hover .card-icon {
  transform: scale(1.1);
}

.featured-departments .card-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.featured-departments .card-icon i {
  font-size: 32px;
  color: var(--accent-color);
}

.featured-departments .card-title {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 16px;
}

.featured-departments .card-description {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 32px;
}

.featured-departments .card-stats {
  display: flex;
  gap: 32px;
}

.featured-departments .stat-item {
  text-align: center;
}

.featured-departments .stat-item .stat-number {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: var(--accent-color);
  line-height: 1;
}

.featured-departments .stat-item .stat-label {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}

.featured-departments .departments-cta {
  text-align: center;
  padding: 80px 40px;
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
  border-radius: 8px;
}

@media (max-width: 768px) {
  .featured-departments .departments-cta {
    padding: 60px 24px;
  }
}

.featured-departments .cta-title {
  font-size: 2rem;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .featured-departments .cta-title {
    font-size: 1.75rem;
  }
}

.featured-departments .cta-description {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.featured-departments .btn-primary {
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
  color: var(--contrast-color);
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 0;
  text-transform: none;
  transition: all 0.3s ease;
}

.featured-departments .btn-primary:hover {
  background-color: transparent;
  color: var(--accent-color);
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services .service-card {
  position: relative;
  background: var(--surface-color);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.featured-services .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.featured-services .service-card:hover .service-image img {
  transform: scale(1.05);
}

.featured-services .service-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.featured-services .service-icon i {
  font-size: 24px;
  color: var(--contrast-color);
}

.featured-services .service-image {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.featured-services .service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.featured-services .service-image::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, var(--surface-color), transparent);
}

.featured-services .service-content {
  padding: 30px 25px;
}

.featured-services .service-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--heading-color);
  line-height: 1.4;
}

.featured-services .service-content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 14px;
}

.featured-services .service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  font-weight: 500;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.featured-services .service-link:hover {
  color: var(--heading-color);
  gap: 12px;
}

.featured-services .service-link i {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.featured-services .service-link:hover i {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .featured-services .service-icon {
    width: 50px;
    height: 50px;
    top: 15px;
    right: 15px;
  }

  .featured-services .service-icon i {
    font-size: 20px;
  }

  .featured-services .service-image {
    height: 180px;
  }

  .featured-services .service-content {
    padding: 20px;
  }

  .featured-services .service-content h3 {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# Find A Doctor Section
--------------------------------------------------------------*/
.find-a-doctor .search-header {
  text-align: center;
  margin-bottom: 3rem;
}

.find-a-doctor .search-header h2 {
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.find-a-doctor .search-header p {
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.find-a-doctor .advanced-search-container {
  background: var(--surface-color);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 4rem;
}

.find-a-doctor .advanced-search-container .search-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 1.5rem;
  align-items: end;
}

.find-a-doctor .advanced-search-container .search-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.find-a-doctor .advanced-search-container .search-field .input-group,
.find-a-doctor .advanced-search-container .search-field .select-group {
  position: relative;
}

.find-a-doctor .advanced-search-container .search-field .input-group i,
.find-a-doctor .advanced-search-container .search-field .select-group i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 1rem;
  z-index: 2;
}

.find-a-doctor .advanced-search-container .search-field .form-control,
.find-a-doctor .advanced-search-container .search-field .form-select {
  padding: 14px 16px 14px 44px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 12px;
  background: var(--background-color);
  color: var(--default-color);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.find-a-doctor .advanced-search-container .search-field .form-control:focus,
.find-a-doctor .advanced-search-container .search-field .form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 90%);
  outline: none;
}

.find-a-doctor .advanced-search-container .search-field .form-control::placeholder,
.find-a-doctor .advanced-search-container .search-field .form-select::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.find-a-doctor .advanced-search-container .search-submit {
  background: var(--accent-color);
  border: none;
  border-radius: 12px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--contrast-color);
  font-size: 1.125rem;
  transition: all 0.3s ease;
}

.find-a-doctor .advanced-search-container .search-submit:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.find-a-doctor .specialists-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.find-a-doctor .specialist-card {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.find-a-doctor .specialist-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--default-color), transparent 85%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.find-a-doctor .specialist-card.featured {
  border-color: var(--accent-color);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.find-a-doctor .specialist-card.featured .card-content {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, var(--surface-color) 100%);
}

.find-a-doctor .specialist-card .card-content {
  padding: 1.75rem;
}

.find-a-doctor .specialist-card .specialist-info {
  margin-bottom: 1.5rem;
}

.find-a-doctor .specialist-card .specialist-info .profile-section {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .profile-image {
  position: relative;
  flex-shrink: 0;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .profile-image img {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  object-fit: cover;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .profile-image .online-status {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--surface-color);
}

.find-a-doctor .specialist-card .specialist-info .profile-section .profile-image .online-status.active {
  background: #22c55e;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .profile-image .online-status.busy {
  background: #f59e0b;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .profile-image .online-status.offline {
  background: color-mix(in srgb, var(--default-color), transparent 50%);
}

.find-a-doctor .specialist-card .specialist-info .profile-section .specialist-data {
  flex: 1;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .specialist-data h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.25rem;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .specialist-data .specialty {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .specialist-data .credentials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .specialist-data .credentials .badge {
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.find-a-doctor .specialist-card .specialist-info .profile-section .specialist-data .credentials .experience {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 0.875rem;
}

.find-a-doctor .specialist-card .specialist-info .rating-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.find-a-doctor .specialist-card .specialist-info .rating-info .stars-display {
  display: flex;
  gap: 1px;
}

.find-a-doctor .specialist-card .specialist-info .rating-info .stars-display i {
  color: #fbbf24;
  font-size: 0.875rem;
}

.find-a-doctor .specialist-card .specialist-info .rating-info .score {
  font-weight: 600;
  color: var(--heading-color);
  font-size: 1rem;
}

.find-a-doctor .specialist-card .specialist-info .rating-info small {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 0.8rem;
}

.find-a-doctor .specialist-card .quick-actions {
  display: flex;
  gap: 0.75rem;
}

.find-a-doctor .specialist-card .quick-actions .action-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.find-a-doctor .specialist-card .quick-actions .action-btn.outline {
  background: transparent;
  color: var(--default-color);
  border: 1.5px solid color-mix(in srgb, var(--default-color), transparent 75%);
}

.find-a-doctor .specialist-card .quick-actions .action-btn.outline:hover {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  border-color: color-mix(in srgb, var(--default-color), transparent 60%);
  color: var(--default-color);
  text-decoration: none;
}

.find-a-doctor .specialist-card .quick-actions .action-btn.primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1.5px solid var(--accent-color);
}

.find-a-doctor .specialist-card .quick-actions .action-btn.primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  border-color: color-mix(in srgb, var(--accent-color), black 10%);
  color: var(--contrast-color);
  text-decoration: none;
  transform: translateY(-1px);
}

.find-a-doctor .view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 28px;
  background: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
  border-radius: 12px;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.find-a-doctor .view-all-link:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.find-a-doctor .view-all-link:hover i {
  transform: translateX(2px);
}

.find-a-doctor .view-all-link i {
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}

@media (max-width: 992px) {
  .find-a-doctor .advanced-search-container .search-row {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .find-a-doctor .advanced-search-container .search-row .search-submit {
    grid-column: span 2;
    width: 100%;
    height: 48px;
    margin-top: 1rem;
  }

  .find-a-doctor .specialists-showcase {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .find-a-doctor .search-header {
    margin-bottom: 2rem;
  }

  .find-a-doctor .search-header h2 {
    font-size: 1.875rem;
  }

  .find-a-doctor .search-header p {
    font-size: 1rem;
  }

  .find-a-doctor .advanced-search-container {
    padding: 1.5rem;
    margin-bottom: 3rem;
  }

  .find-a-doctor .advanced-search-container .search-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .find-a-doctor .advanced-search-container .search-row .search-submit {
    grid-column: span 1;
    margin-top: 0.5rem;
  }

  .find-a-doctor .specialists-showcase {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .find-a-doctor .specialist-card .card-content {
    padding: 1.5rem;
  }
}

@media (max-width: 576px) {
  .find-a-doctor .search-header h2 {
    font-size: 1.625rem;
  }

  .find-a-doctor .specialist-card .profile-section {
    gap: 1rem;
  }

  .find-a-doctor .specialist-card .profile-section .profile-image img {
    width: 60px;
    height: 60px;
  }

  .find-a-doctor .specialist-card .profile-section .specialist-data h3 {
    font-size: 1.125rem;
  }

  .find-a-doctor .specialist-card .quick-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  background: linear-gradient(180deg, var(--background-color) 0%, color-mix(in srgb, var(--surface-color), var(--accent-color) 3%) 100%);
}

.call-to-action .hero-content {
  margin-bottom: 5rem;
}

.call-to-action .hero-content .content-wrapper {
  padding-right: 2rem;
}

@media (max-width: 992px) {
  .call-to-action .hero-content .content-wrapper {
    padding-right: 0;
    margin-bottom: 3rem;
    text-align: center;
  }
}

.call-to-action .hero-content h2 {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--heading-color);
}

@media (max-width: 768px) {
  .call-to-action .hero-content h2 {
    font-size: 2.2rem;
  }
}

.call-to-action .hero-content p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 2.5rem;
}

.call-to-action .hero-content .action-buttons {
  display: flex;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 576px) {
  .call-to-action .hero-content .action-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}

.call-to-action .hero-content .primary-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 18px 40px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  transition: all 0.4s ease;
  display: inline-block;
}

.call-to-action .hero-content .primary-btn:hover {
  background: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.call-to-action .hero-content .secondary-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.call-to-action .hero-content .secondary-link span {
  margin-right: 0.5rem;
}

.call-to-action .hero-content .secondary-link i {
  transition: transform 0.3s ease;
}

.call-to-action .hero-content .secondary-link:hover {
  color: color-mix(in srgb, var(--accent-color), black 20%);
}

.call-to-action .hero-content .secondary-link:hover i {
  transform: translateX(5px);
}

.call-to-action .hero-content .hero-image {
  position: relative;
}

.call-to-action .hero-content .hero-image::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: 20px;
  bottom: 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 12px;
  z-index: -1;
}

.call-to-action .hero-content .hero-image img {
  border-radius: 12px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.call-to-action .stats-section {
  margin-bottom: 5rem;
  padding: 3rem 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.call-to-action .stats-section .stat-item {
  text-align: center;
  padding: 1rem;
}

.call-to-action .stats-section .stat-item .stat-number {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .call-to-action .stats-section .stat-item .stat-number {
    font-size: 2rem;
  }
}

.call-to-action .stats-section .stat-item .stat-label {
  font-size: 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 400;
}

.call-to-action .services-grid {
  margin-bottom: 4rem;
}

.call-to-action .services-grid .service-card {
  background: var(--surface-color);
  padding: 3rem 2rem;
  border-radius: 12px;
  text-align: center;
  height: 100%;
  transition: all 0.4s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
  margin-bottom: 2rem;
}

.call-to-action .services-grid .service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px color-mix(in srgb, var(--default-color), transparent 88%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.call-to-action .services-grid .service-card .service-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 50%;
  transition: all 0.4s ease;
}

.call-to-action .services-grid .service-card .service-icon i {
  font-size: 2rem;
  color: var(--accent-color);
  transition: all 0.4s ease;
}

.call-to-action .services-grid .service-card:hover .service-icon {
  background: var(--accent-color);
}

.call-to-action .services-grid .service-card:hover .service-icon i {
  color: var(--contrast-color);
}

.call-to-action .services-grid .service-card h4 {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1.2rem;
  color: var(--heading-color);
}

.call-to-action .services-grid .service-card p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.call-to-action .services-grid .service-card .service-link {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.call-to-action .services-grid .service-card .service-link:hover {
  color: color-mix(in srgb, var(--accent-color), black 20%);
}

.call-to-action .contact-banner {
  background: linear-gradient(135deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), black 15%) 100%);
  border-radius: 16px;
  padding: 3rem;
  color: var(--contrast-color);
}

@media (max-width: 768px) {
  .call-to-action .contact-banner {
    padding: 2rem;
  }
}

.call-to-action .contact-banner .banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 992px) {
  .call-to-action .contact-banner .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
}

.call-to-action .contact-banner .contact-info {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .call-to-action .contact-banner .contact-info {
    flex-direction: column;
    text-align: center;
  }
}

.call-to-action .contact-banner .contact-icon {
  width: 60px;
  height: 60px;
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
}

@media (max-width: 768px) {
  .call-to-action .contact-banner .contact-icon {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

.call-to-action .contact-banner .contact-icon i {
  font-size: 1.5rem;
  color: var(--contrast-color);
}

.call-to-action .contact-banner .contact-text h5 {
  color: var(--contrast-color);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.call-to-action .contact-banner .contact-text p {
  color: color-mix(in srgb, var(--contrast-color), transparent 25%);
  margin: 0;
  line-height: 1.6;
}

.call-to-action .contact-banner .contact-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

@media (max-width: 576px) {
  .call-to-action .contact-banner .contact-actions {
    flex-direction: column;
    width: 100%;
  }
}

.call-to-action .contact-banner .call-btn {
  background: var(--contrast-color);
  color: var(--heading-color);
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}

@media (max-width: 576px) {
  .call-to-action .contact-banner .call-btn {
    width: 100%;
    justify-content: center;
  }
}

.call-to-action .contact-banner .call-btn i {
  margin-right: 8px;
  font-size: 1.1rem;
}

.call-to-action .contact-banner .call-btn:hover {
  background: color-mix(in srgb, var(--contrast-color), transparent 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--default-color), transparent 75%);
}

.call-to-action .contact-banner .contact-link {
  color: var(--contrast-color);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--contrast-color), transparent 60%);
  transition: all 0.3s ease;
}

.call-to-action .contact-banner .contact-link:hover {
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  border-bottom-color: var(--contrast-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  padding: 120px 0;
}

.about .intro-section {
  margin-bottom: 100px;
}

.about .intro-section h2 {
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}

.about .intro-section p.lead {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  max-width: 700px;
  margin: 0 auto;
}

.about .image-stats-section {
  margin-bottom: 120px;
}

.about .image-gallery {
  position: relative;
}

.about .image-gallery .main-image-container {
  position: relative;
}

.about .image-gallery .main-image-container .main-image {
  border-radius: 8px;
  width: 100%;
  /* MODIFICA (PUNTO 2): ridotta da 500px a 420px, per bilanciarsi con
     la colonna immagini ora esattamente a metà larghezza (col-lg-6)
     invece che a 7/12 di prima. */
  height: 420px;
  object-fit: cover;
}

.about .image-gallery .secondary-images {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

/* Galleria DRX9000: più immagini impilate, ciascuna larga quanto
   la colonna (anziché due miniature affiancate), per dare maggiore
   risalto visivo al macchinario e ai risultati del trattamento. */
.drx-gallery .main-image-container .main-image {
  height: 300px;
}

@media (max-width: 768px) {
  .drx-gallery .main-image-container .main-image {
    height: 220px;
  }
}

.about .image-gallery .secondary-images .secondary-image {
  width: calc(50% - 8px);
  /* MODIFICA (PUNTO 2): ridotta da 200px a 170px, in proporzione alla
     colonna immagini più stretta (metà spazio esatta). */
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.about .image-gallery .secondary-images .secondary-image:hover {
  transform: scale(1.02);
}

.about .stats-content {
  padding-left: 3rem;
}

@media (max-width: 992px) {
  .about .stats-content {
    padding-left: 0;
    margin-top: 3rem;
  }
}

.about .stats-content h3 {
  font-size: 2.4rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.about .stats-content h5 {
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading-color);
  margin-bottom: 1.25rem;
}

.about .stats-content>p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 3rem;
  text-align: justify;
}

.about .stats-list .stat-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.about .stats-list .stat-row:last-child {
  margin-bottom: 0;
}

.about .stats-list .stat-row .stat-number {
  min-width: 120px;
  margin-right: 2rem;
}

.about .stats-list .stat-row .stat-number span {
  font-size: 3rem;
  font-weight: 200;
  color: var(--accent-color);
  line-height: 1;
}

.about .stats-list .stat-row .stat-number span:not(.purecounter) {
  font-size: 1.8rem;
}

.about .stats-list .stat-row .stat-info {
  flex: 1;
}

.about .stats-list .stat-row .stat-info h5 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: var(--heading-color);
}

.about .stats-list .stat-row .stat-info p {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
  line-height: 1.6;
}

.about .mission-section {
  margin-bottom: 100px;
  padding: 80px 0;
}

.about .mission-section .mission-item {
  text-align: center;
  padding: 0 1rem;
  height: 100%;
}

.about .mission-section .mission-item .mission-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #6c5ce7 20%));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  transition: transform 0.3s ease;
}

.about .mission-section .mission-item .mission-icon i {
  font-size: 1.8rem;
  color: var(--contrast-color);
}

.about .mission-section .mission-item h4 {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: var(--heading-color);
}

.about .mission-section .mission-item p {
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin: 0;
}

.about .mission-section .mission-item:hover .mission-icon {
  transform: translateY(-5px) scale(1.05);
}

.about .specialties-section {
  margin-bottom: 100px;
}

.about .specialties-section h3 {
  font-size: 2.4rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

.about .specialties-section .section-description {
  /* MODIFICA: carattere aumentato (da 1.1rem a 1.35rem) su richiesta,
     per dare più risalto alla frase introduttiva della pagina
     Patologie ("Le patologie e i disturbi più comuni..."). */
  font-size: 1.35rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.about .specialties-section .specialty-item {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--surface-color);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.about .specialties-section .specialty-item:hover {
  transform: translateY(-8px);
  border-color: var(--accent-color);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.about .specialties-section .specialty-item i {
  font-size: 2.2rem;
  color: var(--accent-color);
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

.about .specialties-section .specialty-item span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--heading-color);
  transition: color 0.3s ease;
}

.about .specialties-section .specialty-item:hover i {
  color: var(--accent-color);
}

.about .specialties-section .specialty-item:hover span {
  color: var(--accent-color);
}

.about .accreditation-section h3 {
  font-size: 2.2rem;
  font-weight: 300;
  margin-bottom: 1rem;
}

.about .accreditation-section .section-description {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 3rem;
  line-height: 1.7;
}

.about .accreditation-section .accreditation-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  align-items: center;
}

@media (max-width: 992px) {
  .about .accreditation-section .accreditation-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px) {
  .about .accreditation-section .accreditation-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.about .accreditation-section .accreditation-grid .accreditation-item {
  padding: 1.5rem;
  background: var(--surface-color);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.about .accreditation-section .accreditation-grid .accreditation-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--default-color), transparent 88%);
}

.about .accreditation-section .accreditation-grid .accreditation-item img {
  max-height: 50px;
  max-width: 100%;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  filter: grayscale(100%);
}

.about .accreditation-section .accreditation-grid .accreditation-item:hover img {
  opacity: 1;
  filter: grayscale(0%);
}

@media (max-width: 992px) {
  .about {
    padding: 80px 0;
  }

  .about .intro-section {
    margin-bottom: 60px;
  }

  .about .intro-section h2 {
    font-size: 2.6rem;
  }

  .about .image-stats-section {
    margin-bottom: 80px;
  }

  .about .mission-section {
    margin-bottom: 60px;
    padding: 60px 0;
  }

  .about .specialties-section {
    margin-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .about .intro-section h2 {
    font-size: 2.2rem;
  }

  .about .stats-content h3 {
    font-size: 2rem;
  }

  .about .stats-list .stat-row .stat-number {
    min-width: 100px;
    margin-right: 1.5rem;
  }

  .about .stats-list .stat-row .stat-number span {
    font-size: 2.4rem;
  }

  .about .image-gallery .secondary-images {
    flex-direction: column;
    gap: 15px;
  }

  .about .image-gallery .secondary-images .secondary-image {
    width: 100%;
    height: 180px;
  }

  .about .mission-section .mission-item {
    margin-bottom: 3rem;
  }
}

/*--------------------------------------------------------------
# Departments Section
--------------------------------------------------------------*/
.departments .department-item {
  background: var(--surface-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 5px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .departments .department-item {
    border-radius: 15px;
  }
}

.departments .department-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 50px color-mix(in srgb, var(--default-color), transparent 85%);
}

.departments .department-item:hover .department-overlay {
  opacity: 1;
  visibility: visible;
}

.departments .department-item:hover .department-image img {
  transform: scale(1.1);
}

.departments .department-item:hover .department-icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #ff6b6b 20%));
}

.departments .department-item:hover .department-icon i {
  color: var(--contrast-color);
}

.departments .department-item .department-content {
  padding: 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .departments .department-item .department-content {
    padding: 25px 20px;
  }
}

.departments .department-item .department-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 576px) {
  .departments .department-item .department-header {
    gap: 15px;
    margin-bottom: 15px;
  }
}

.departments .department-item .department-icon {
  width: 60px;
  height: 60px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.4s ease;
}

@media (max-width: 576px) {
  .departments .department-item .department-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }
}

.departments .department-item .department-icon i {
  font-size: 28px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

@media (max-width: 576px) {
  .departments .department-item .department-icon i {
    font-size: 24px;
  }
}

.departments .department-item .department-info {
  flex: 1;
}

.departments .department-item .department-info h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--heading-color);
  font-family: var(--heading-font);
  letter-spacing: -0.3px;
}

@media (max-width: 576px) {
  .departments .department-item .department-info h3 {
    font-size: 20px;
  }
}

.departments .department-item .department-info .department-category {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 576px) {
  .departments .department-item .department-info .department-category {
    font-size: 13px;
  }
}

.departments .department-item p {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 20px;
  flex: 1;
}

@media (max-width: 576px) {
  .departments .department-item p {
    font-size: 14px;
    margin-bottom: 15px;
  }
}

.departments .department-item .department-features {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.departments .department-item .department-features .feature-badge {
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

@media (max-width: 576px) {
  .departments .department-item .department-features .feature-badge {
    font-size: 11px;
    padding: 5px 10px;
  }
}

.departments .department-item .department-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

@media (max-width: 576px) {
  .departments .department-item .department-image {
    height: 160px;
  }
}

.departments .department-item .department-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.departments .department-item .department-image .department-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.departments .department-item .department-image .department-overlay .department-link {
  width: 60px;
  height: 60px;
  background: var(--contrast-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  font-size: 20px;
  transition: all 0.3s ease;
}

@media (max-width: 576px) {
  .departments .department-item .department-image .department-overlay .department-link {
    width: 50px;
    height: 50px;
    font-size: 18px;
  }
}

.departments .department-item .department-image .department-overlay .department-link:hover {
  transform: scale(1.1);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Department Details Section
--------------------------------------------------------------*/
.department-details .department-content .department-header {
  margin-bottom: 3rem;
}

.department-details .department-content .department-header .specialty-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  color: var(--contrast-color);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 2rem;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.department-details .department-content .department-header .specialty-tag i {
  font-size: 1.1rem;
}

.department-details .department-content .department-header .department-name {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.department-details .department-content .department-header .department-description {
  font-size: 1.3rem;
  line-height: 1.85;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  max-width: 85%;
}

.department-details .department-content .service-highlights {
  margin-bottom: 3rem;
}

.department-details .department-content .service-highlights h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 2rem;
}

.department-details .department-content .service-highlights .highlights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background-color: var(--surface-color);
  border-radius: 12px;
  border-left: 4px solid var(--accent-color);
  transition: all 0.3s ease;
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card:hover {
  transform: translateX(5px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--default-color), transparent 90%);
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card .highlight-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 15%));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card .highlight-icon i {
  font-size: 1.3rem;
  color: var(--contrast-color);
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.department-details .department-content .service-highlights .highlights-grid .highlight-card p {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
  line-height: 1.7;
}

.department-details .department-content .cta-section {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.department-details .department-content .cta-section .btn-appointment {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 15%));
  color: var(--contrast-color);
  padding: 1.2rem 2.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.department-details .department-content .cta-section .btn-appointment:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
  color: var(--contrast-color);
}

.department-details .department-content .cta-section .btn-appointment i {
  font-size: 1.1rem;
}

.department-details .department-content .cta-section .contact-quick {
  display: flex;
  flex-direction: column;
}

.department-details .department-content .cta-section .contact-quick .contact-label {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.department-details .department-content .cta-section .contact-quick .contact-number {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .department-details .department-content .department-header .department-name {
    font-size: 2.2rem;
  }

  .department-details .department-content .department-header .department-description {
    max-width: 100%;
  }

  .department-details .department-content .cta-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

.department-details .visual-section .main-visual {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.department-details .visual-section .main-visual .department-image {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

.department-details .visual-section .main-visual .stats-overlay {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background-color: var(--surface-color);
  padding: 1.5rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 80%);
  backdrop-filter: blur(10px);
}

.department-details .visual-section .main-visual .stats-overlay .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.department-details .visual-section .main-visual .stats-overlay .stat-item:not(:last-child) {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.department-details .visual-section .main-visual .stats-overlay .stat-item .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.department-details .visual-section .main-visual .stats-overlay .stat-item .stat-label {
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 991px) {
  .department-details .visual-section {
    margin-top: 3rem;
  }

  .department-details .visual-section .main-visual .department-image {
    height: 400px;
  }

  .department-details .visual-section .main-visual .stats-overlay {
    top: 1rem;
    right: 1rem;
    padding: 1rem;
  }
}

.department-details .department-details {
  margin-top: 6rem;
  padding-top: 4rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.department-details .department-details .details-content h3 {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.department-details .department-details .details-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 2.5rem;
}

.department-details .department-details .details-content .care-features .feature-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.department-details .department-details .details-content .care-features .feature-row i {
  color: var(--accent-color);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.department-details .department-details .details-content .care-features .feature-row span {
  font-size: 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 1.6;
}

.department-details .department-details .info-sidebar .info-card {
  background-color: var(--surface-color);
  padding: 2rem;
  border-radius: 15px;
  margin-bottom: 2rem;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 95%);
}

.department-details .department-details .info-sidebar .info-card h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--accent-color);
}

.department-details .department-details .info-sidebar .info-card .hours-list .hours-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
}

.department-details .department-details .info-sidebar .info-card .hours-list .hours-item:last-child {
  border-bottom: none;
}

.department-details .department-details .info-sidebar .info-card .hours-list .hours-item span:first-child {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-weight: 500;
}

.department-details .department-details .info-sidebar .info-card .hours-list .hours-item span:last-child {
  color: var(--default-color);
  font-weight: 600;
}

.department-details .department-details .info-sidebar .info-card .quick-links a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  text-decoration: none;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
  transition: all 0.3s ease;
}

.department-details .department-details .info-sidebar .info-card .quick-links a:last-child {
  border-bottom: none;
}

.department-details .department-details .info-sidebar .info-card .quick-links a:hover {
  color: var(--accent-color);
  transform: translateX(5px);
}

.department-details .department-details .info-sidebar .info-card .quick-links a:hover i {
  transform: translateX(3px);
}

.department-details .department-details .info-sidebar .info-card .quick-links a i {
  color: var(--accent-color);
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.department-details .department-details .info-sidebar .info-card .quick-links a span {
  font-weight: 500;
}

@media (max-width: 991px) {
  .department-details .department-details .info-sidebar {
    margin-top: 3rem;
  }
}

@media (max-width: 768px) {
  .department-details .department-details .details-content h3 {
    font-size: 1.8rem;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .services-grid {
  margin-bottom: 60px;
}

.services .service-card {
  background: var(--surface-color);
  border-radius: 25px;
  padding: 0;
  height: 100%;
  transition: all 0.4s ease;
  border: 3px solid transparent;
  position: relative;
  overflow: hidden;
}

.services .service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 98%), color-mix(in srgb, var(--accent-color), transparent 95%));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.services .service-card:hover {
  transform: translateY(-10px);
  border-color: var(--accent-color);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.services .service-card:hover::before {
  opacity: 1;
}

.services .service-card:hover .service-icon i {
  transform: scale(1.2) rotate(10deg);
}

.services .service-card:hover .service-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.services .service-card:hover .service-btn i {
  transform: translateX(5px);
}

.services .service-card.featured {
  border-color: var(--accent-color);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.services .service-card.featured .featured-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: 600;
  z-index: 2;
}

.services .service-card>* {
  position: relative;
  z-index: 1;
}

.services .service-header {
  padding: 30px 30px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.services .service-header .service-category {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.services .service-header .status-indicator {
  background: #28a745;
  color: var(--contrast-color);
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 10px;
  font-weight: 600;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

.services .service-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #007acc 50%));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.services .service-icon i {
  font-size: 28px;
  color: var(--contrast-color);
  transition: all 0.3s ease;
}

.services .service-body {
  padding: 0 30px 20px;
}

.services .service-body h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 15px;
  line-height: 1.3;
}

.services .service-body p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 25px;
  line-height: 1.6;
  font-size: 16px;
  text-align: justify;
}

.services .service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.services .service-features .feature-badge {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.services .service-footer {
  padding: 0 30px 30px;
  margin-top: auto;
}

.services .service-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 25px;
  color: var(--default-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: center;
}

.services .service-btn i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.services .service-btn.emergency-btn {
  background: #dc3545;
  color: var(--contrast-color);
  border-color: #dc3545;
}

.services .service-btn.emergency-btn:hover {
  background: color-mix(in srgb, #dc3545, #000000 20%);
  border-color: color-mix(in srgb, #dc3545, #000000 20%);
}

.services .services-stats {
  background: var(--surface-color);
  border-radius: 20px;
  padding: 50px 0;
  margin-bottom: 50px;
  box-shadow: 0 5px 30px color-mix(in srgb, var(--default-color), transparent 92%);
}

.services .services-stats .stat-item {
  text-align: center;
  padding: 0 20px;
}

.services .services-stats .stat-item .stat-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-color);
  display: block;
  line-height: 1;
  margin-bottom: 10px;
}

.services .services-stats .stat-item .stat-label {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 500;
  font-size: 15px;
}

.services .appointment-banner {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #007acc 30%));
  border-radius: 25px;
  overflow: hidden;
  position: relative;
}

.services .appointment-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: color-mix(in srgb, var(--contrast-color), transparent 95%);
  border-radius: 50%;
}

.services .appointment-banner::after {
  content: "";
  position: absolute;
  bottom: -40%;
  left: -15%;
  width: 200px;
  height: 200px;
  background: color-mix(in srgb, var(--contrast-color), transparent 97%);
  border-radius: 50%;
}

.services .appointment-banner .banner-content {
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

@media (max-width: 992px) {
  .services .appointment-banner .banner-content {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
}

.services .appointment-banner .banner-text h3 {
  font-size: 32px;
  font-weight: 700;
  color: var(--contrast-color);
  margin-bottom: 15px;
}

.services .appointment-banner .banner-text p {
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
  font-size: 16px;
  margin: 0;
  max-width: 400px;
  line-height: 1.6;
}

.services .appointment-banner .banner-actions {
  display: flex;
  gap: 15px;
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .services .appointment-banner .banner-actions {
    flex-direction: column;
    width: 100%;
  }
}

.services .appointment-banner .banner-actions .btn-primary {
  background: var(--contrast-color);
  color: var(--accent-color);
  padding: 15px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid var(--contrast-color);
}

.services .appointment-banner .banner-actions .btn-primary:hover {
  background: transparent;
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.services .appointment-banner .banner-actions .btn-secondary {
  background: transparent;
  color: var(--contrast-color);
  padding: 15px 30px;
  border: 2px solid color-mix(in srgb, var(--contrast-color), transparent 30%);
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.services .appointment-banner .banner-actions .btn-secondary:hover {
  background: color-mix(in srgb, var(--contrast-color), transparent 90%);
  border-color: var(--contrast-color);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .services .service-card {
    margin-bottom: 20px;
  }

  .services .service-header {
    padding: 25px 25px 15px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .services .service-header .service-category {
    order: 2;
  }

  .services .service-icon {
    width: 60px;
    height: 60px;
  }

  .services .service-icon i {
    font-size: 24px;
  }

  .services .service-body {
    padding: 0 25px 15px;
    text-align: center;
  }

  .services .service-body h4 {
    font-size: 20px;
  }

  .services .service-footer {
    padding: 0 25px 25px;
  }

  .services .services-stats {
    padding: 40px 20px;
  }

  .services .services-stats .stat-item {
    margin-bottom: 30px;
  }

  .services .services-stats .stat-item .stat-number {
    font-size: 36px;
  }

  .services .appointment-banner .banner-content {
    padding: 40px 25px;
  }

  .services .appointment-banner .banner-text h3 {
    font-size: 26px;
  }
}

/*--------------------------------------------------------------
# Service Details 2 Section
--------------------------------------------------------------*/
.service-details-2 .service-image {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.service-details-2 .service-image img {
  border-radius: 15px;
}

.service-details-2 .service-image .service-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
}

.service-details-2 .service-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .service-details-2 .service-content h2 {
    font-size: 2rem;
  }
}

.service-details-2 .service-content .service-tagline {
  font-size: 1.2rem;
  color: var(--accent-color);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.service-details-2 .service-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  text-align: justify;
}

.service-details-2 .service-content .service-features {
  margin: 2rem 0;
}

.service-details-2 .service-content .service-features h4 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.service-details-2 .service-content .service-features ul {
  list-style: none;
  padding: 0;
}

.service-details-2 .service-content .service-features ul li {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.service-details-2 .service-content .service-features ul li i {
  color: var(--accent-color);
  margin-right: 0.8rem;
  font-size: 1.1rem;
}

.service-details-2 .service-content .service-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

@media (max-width: 576px) {
  .service-details-2 .service-content .service-actions {
    flex-direction: column;
  }
}

.service-details-2 .service-content .service-actions .btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.service-details-2 .service-content .service-actions .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
}

.service-details-2 .service-content .service-actions .btn-secondary {
  background: transparent;
  color: var(--heading-color);
  padding: 12px 28px;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.service-details-2 .service-content .service-actions .btn-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.service-details-2 .service-card {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  height: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.service-details-2 .service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.service-details-2 .service-card .card-icon {
  width: 70px;
  height: 70px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.service-details-2 .service-card .card-icon i {
  font-size: 2rem;
  color: var(--accent-color);
}

.service-details-2 .service-card h4 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.service-details-2 .service-card p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 1.5rem;
}

.service-details-2 .service-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.service-details-2 .service-card .card-link:hover {
  gap: 0.8rem;
  color: color-mix(in srgb, var(--accent-color), black 10%);
}

.service-details-2 .service-card .card-link i {
  transition: transform 0.3s ease;
}

.service-details-2 .service-card .card-link:hover i {
  transform: translateX(3px);
}

.service-details-2 .booking-section {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  padding: 2rem;
  border-radius: 15px;
}

.service-details-2 .booking-section h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.service-details-2 .booking-section p {
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 2rem;
}

.service-details-2 .booking-section .availability-info .info-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.service-details-2 .booking-section .availability-info .info-item i {
  width: 40px;
  height: 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-details-2 .booking-section .availability-info .info-item div {
  display: flex;
  flex-direction: column;
}

.service-details-2 .booking-section .availability-info .info-item div strong {
  color: var(--heading-color);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.service-details-2 .booking-section .availability-info .info-item div span {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 1rem;
}

.service-details-2 .appointment-card {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.service-details-2 .appointment-card h4 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.service-details-2 .appointment-card p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 2rem;
}

.service-details-2 .appointment-card .btn-appointment {
  display: inline-block;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  width: 100%;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.service-details-2 .appointment-card .btn-appointment:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
}

.service-details-2 .appointment-card .contact-alternative {
  text-align: center;
  font-size: 0.9rem;
}

.service-details-2 .appointment-card .contact-alternative span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: block;
  margin-bottom: 0.3rem;
}

.service-details-2 .appointment-card .contact-alternative a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}

.service-details-2 .appointment-card .contact-alternative a:hover {
  color: color-mix(in srgb, var(--accent-color), black 10%);
}

@media (max-width: 992px) {
  .service-details-2 .service-content {
    margin-top: 2rem;
  }
}

@media (max-width: 768px) {
  .service-details-2 .booking-section {
    margin-bottom: 2rem;
  }

  .service-details-2 .availability-info .info-item {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}

/*--------------------------------------------------------------
# Doctors Section
--------------------------------------------------------------*/
.doctors {
  /* Theme variables */
  --card-bg: var(--surface-color);
  --card-border: color-mix(in srgb, var(--default-color), transparent 85%);
  --muted: color-mix(in srgb, var(--default-color), transparent 60%);
  --soft-accent: color-mix(in srgb, var(--accent-color), transparent 85%);
  --shadow: 0 8px 24px color-mix(in srgb, var(--default-color), transparent 90%);
  --radius: 14px;
  /* Directory */
  /* Doctor Card */
  /* Carousel */
  /* Single Profile */
  /* Minimal / Compact */
  /* Tabs Profile */
  /* Responsive tweaks */
}

.doctors .btn-appointment {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 20%);
  padding: 0.55rem 1rem;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.doctors .btn-appointment:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 8%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  transform: translateY(-1px);
}

.doctors .btn-appointment:active {
  transform: translateY(0);
}

.doctors .btn-soft {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 75%);
  padding: 0.55rem 1rem;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.doctors .btn-soft:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 86%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 60%);
}

.doctors .doctor-directory .directory-bar {
  background: color-mix(in srgb, var(--accent-color), transparent 94%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  box-shadow: var(--shadow);
}

.doctors .doctor-directory .directory-bar .form-label {
  font-weight: 600;
  color: var(--heading-color);
}

.doctors .doctor-directory .directory-bar .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 18px;
}

.doctors .doctor-directory .directory-bar .search-input {
  padding-left: 2.25rem;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: var(--card-border);
}

.doctors .doctor-directory .directory-bar .search-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
}

.doctors .doctor-directory .directory-bar .search-input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.doctors .doctor-directory .directory-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 10px 0;
  padding: 0;
  list-style: none;
}

.doctors .doctor-directory .directory-filters li {
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--default-color);
  transition: all 0.3s ease;
  user-select: none;
}

.doctors .doctor-directory .directory-filters li:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.doctors .doctor-directory .directory-filters li.filter-active {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.doctors .doctor-card {
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.doctors .doctor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--default-color), transparent 88%);
}

.doctors .doctor-card:hover .doctor-media .socials {
  opacity: 1;
  transform: translateY(0);
}

.doctors .doctor-card .doctor-media {
  position: relative;
  overflow: hidden;
}

.doctors .doctor-card .doctor-media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

@media (min-width: 992px) {
  .doctors .doctor-card .doctor-media img {
    height: 220px;
  }
}

.doctors .doctor-card .doctor-media .tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.doctors .doctor-card .doctor-media .tag.alt {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.doctors .doctor-card .doctor-media .socials {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.3s ease;
}

.doctors .doctor-card .doctor-media .socials a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--default-color);
  transition: all 0.3s ease;
}

.doctors .doctor-card .doctor-media .socials a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.doctors .doctor-card .doctor-content {
  padding: 16px;
}

.doctors .doctor-card .doctor-content .doctor-name {
  font-size: 1.1rem;
  margin: 0 0 4px;
}

.doctors .doctor-card .doctor-content .doctor-title {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.doctors .doctor-card .doctor-content .doctor-desc {
  font-size: 0.95rem;
  margin-bottom: 12px;
}

.doctors .doctor-card .doctor-content .doctor-meta {
  margin-bottom: 12px;
}

.doctors .doctor-card .doctor-content .doctor-meta .badge.dept {
  background: var(--soft-accent);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 65%);
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 600;
}

.doctors .doctor-card .doctor-content .doctor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.doctors .doctor-carousel .swiper {
  padding-bottom: 36px;
}

.doctors .doctor-carousel .swiper-wrapper {
  height: auto !important;
}

.doctors .doctor-carousel .swiper-button-prev,
.doctors .doctor-carousel .swiper-button-next {
  color: var(--accent-color);
}

.doctors .doctor-carousel .swiper-button-prev:after,
.doctors .doctor-carousel .swiper-button-next:after {
  font-size: 22px;
}

.doctors .doctor-carousel .swiper-pagination-bullet {
  background: var(--soft-accent);
  opacity: 1;
}

.doctors .doctor-carousel .swiper-pagination-bullet-active {
  background: var(--accent-color);
}

.doctors .single-profile .profile-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.doctors .single-profile .profile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 360px;
}

.doctors .single-profile .profile-media .availability {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 600;
}

.doctors .single-profile .profile-media .availability .bi-circle-fill {
  color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.doctors .single-profile .profile-content .badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
}

.doctors .single-profile .profile-content .badge.role {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.doctors .single-profile .profile-content .badge.years,
.doctors .single-profile .profile-content .badge.cert {
  background: var(--soft-accent);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
}

.doctors .single-profile .profile-content .name {
  font-size: 1.6rem;
}

.doctors .single-profile .profile-content .title {
  color: var(--muted);
}

.doctors .single-profile .profile-content .highlights li {
  padding-left: 4px;
  margin-bottom: 6px;
}

.doctors .single-profile .profile-content .highlights li i {
  color: var(--accent-color);
}

.doctors .compact-view .minimal-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 14px 10px;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: var(--shadow);
}

.doctors .compact-view .minimal-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--default-color), transparent 88%);
}

.doctors .compact-view .minimal-card .avatar {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 60%);
}

.doctors .compact-view .minimal-card .info {
  margin-top: 8px;
}

.doctors .compact-view .minimal-card .info h4 {
  font-size: 0.98rem;
}

.doctors .compact-view .minimal-card .info small {
  color: var(--muted);
  font-weight: 600;
}

.doctors .profile-tabs .tab-profile-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

.doctors .profile-tabs .tab-profile-card img {
  height: 260px;
  width: 100%;
  object-fit: cover;
}

.doctors .profile-tabs .tab-profile-card .badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 600;
}

.doctors .profile-tabs .tab-profile-card .badge.cert,
.doctors .profile-tabs .tab-profile-card .badge.years {
  background: var(--soft-accent);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 60%);
}

.doctors .profile-tabs .nav-pills .nav-link {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--default-color);
  margin-right: 8px;
  border-radius: 999px;
  font-weight: 600;
}

.doctors .profile-tabs .nav-pills .nav-link:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.doctors .profile-tabs .nav-pills .nav-link.active {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.doctors .profile-tabs .tab-content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.doctors .profile-tabs .schedule-grid .slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: color-mix(in srgb, var(--accent-color), transparent 94%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 10px;
  padding: 10px 12px;
}

.doctors .profile-tabs .schedule-grid .slot strong {
  color: var(--heading-color);
}

.doctors .profile-tabs .schedule-grid .slot span {
  color: var(--default-color);
  font-weight: 600;
}

.doctors .profile-tabs .review .stars i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 992px) {
  .doctors .doctor-card .doctor-media img {
    height: 240px;
  }
}

@media (max-width: 768px) {
  .doctors .single-profile .profile-media img {
    min-height: 280px;
  }
}

/*--------------------------------------------------------------
# Appointmnet Section
--------------------------------------------------------------*/
.appointmnet .appointment-info h3 {
  color: var(--heading-color);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.appointmnet .appointment-info p {
  color: var(--default-color);
  font-size: 1rem;
  line-height: 1.6;
}

.appointmnet .info-items .info-item .icon-wrapper {
  width: 60px;
  height: 60px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.appointmnet .info-items .info-item .icon-wrapper i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.appointmnet .info-items .info-item h5 {
  color: var(--heading-color);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.appointmnet .info-items .info-item p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.9rem;
  line-height: 1.5;
}

.appointmnet .emergency-contact .emergency-card {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-left: 4px solid var(--accent-color);
  border-radius: 8px;
}

.appointmnet .emergency-contact .emergency-card h6 {
  color: var(--heading-color);
  font-weight: 600;
}

.appointmnet .emergency-contact .emergency-card h6 i {
  color: var(--accent-color);
}

.appointmnet .emergency-contact .emergency-card p {
  color: var(--default-color);
  font-size: 0.9rem;
}

.appointmnet .emergency-contact .emergency-card p strong {
  color: var(--accent-color);
}

.appointmnet .appointment-form-wrapper {
  background-color: var(--surface-color);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}

.appointmnet .appointment-form .form-control,
.appointmnet .appointment-form .form-select {
  color: var(--default-color);
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.appointmnet .appointment-form .form-control:focus,
.appointmnet .appointment-form .form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 85%);
}

.appointmnet .appointment-form .form-control::placeholder,
.appointmnet .appointment-form .form-select::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.appointmnet .appointment-form .form-select {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.appointmnet .appointment-form .form-select:focus {
  color: var(--default-color);
}

.appointmnet .appointment-form textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.appointmnet .appointment-form .btn-appointment {
  background-color: var(--accent-color);
  border: none;
  color: var(--contrast-color);
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.appointmnet .appointment-form .btn-appointment:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
}

.appointmnet .appointment-form .btn-appointment i {
  font-size: 1.1rem;
}

.appointmnet .process-steps {
  margin-top: 4rem;
}

.appointmnet .process-steps .step-item {
  position: relative;
  padding: 2rem 1rem;
  text-align: center;
}

.appointmnet .process-steps .step-item .step-number {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  z-index: 2;
}

.appointmnet .process-steps .step-item .step-icon {
  margin: 1.5rem 0 1rem 0;
}

.appointmnet .process-steps .step-item .step-icon i {
  font-size: 3rem;
  color: color-mix(in srgb, var(--accent-color), transparent 30%);
}

.appointmnet .process-steps .step-item h5 {
  color: var(--heading-color);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.appointmnet .process-steps .step-item p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 0;
}

.appointmnet .process-steps .step-item::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: calc(100% - 80px);
  height: 2px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 70%);
  z-index: 1;
}

@media (max-width: 991px) {
  .appointmnet .process-steps .step-item::before {
    display: none;
  }
}

.appointmnet .process-steps .step-item:last-child::before {
  display: none;
}

@media (max-width: 768px) {
  .appointmnet .appointment-form-wrapper {
    padding: 1.5rem;
    margin-top: 2rem;
  }

  .appointmnet .process-steps {
    margin-top: 3rem;
  }

  .appointmnet .process-steps .step-item {
    padding: 1.5rem 0.5rem;
  }
}

/*--------------------------------------------------------------
# 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: 17px;
  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;
}

/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
.gallery .isotope-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 40px;
  padding: 0;
  list-style: none;
}

.gallery .isotope-filters li {
  display: inline-block;
  padding: 10px 20px;
  background: var(--surface-color);
  color: var(--default-color);
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  transition: 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.gallery .isotope-filters li:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.gallery .isotope-filters li.filter-active {
  background: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

@media (max-width: 576px) {
  .gallery .isotope-filters {
    gap: 8px;
  }

  .gallery .isotope-filters li {
    padding: 8px 14px;
    font-size: 14px;
  }
}

.gallery .gallery-item {
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .gallery .gallery-item {
    margin-bottom: 20px;
  }
}

.gallery .gallery-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  height: 100%;
}

.gallery .gallery-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.gallery .gallery-card:hover .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}

.gallery .gallery-card:hover .gallery-image img {
  transform: scale(1.1);
}

.gallery .gallery-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
  overflow: hidden;
}

.gallery .gallery-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.gallery .gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 25px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
  color: var(--contrast-color);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.gallery .gallery-overlay h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--contrast-color);
}

.gallery .gallery-overlay p {
  font-size: 14px;
  margin-bottom: 15px;
  opacity: 0.9;
}

.gallery .gallery-overlay .gallery-actions {
  display: flex;
  gap: 15px;
}

.gallery .gallery-overlay .gallery-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 18px;
  transition: 0.3s;
}

.gallery .gallery-overlay .gallery-actions a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  transform: scale(1.1);
}

.gallery .glightbox-clean .gslide-description {
  background: #272727;
}

.gallery .glightbox-clean .gslide-title {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 5px;
  overflow: hidden;
}

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

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active {
  background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
  overflow: hidden;
}

.contact .info-box {
  color: var(--default-color);
  background: var(--surface-color);
  padding: 30px;
  height: 100%;
  border-radius: 15px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all 0.3s ease;
}

.contact .info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 35px rgba(0, 0, 0, 0.12);
}

.contact .info-box i {
  font-size: 32px;
  color: var(--accent-color);
  border-radius: 50%;
  padding: 15px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  margin-bottom: 20px;
  display: inline-block;
  line-height: 1;
}

.contact .info-box h3 {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 600;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 0;
}

.contact .map-container {
  overflow: hidden;
  padding-bottom: 500px;
  position: relative;
  height: 0;
  border-radius: 15px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
}

.contact .map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

@media (max-width: 992px) {
  .contact .map-container {
    padding-bottom: 350px;
  }
}

@media (max-width: 768px) {
  .contact .map-container {
    padding-bottom: 300px;
  }
}

.contact .php-email-form {
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
  padding: 30px;
  background: var(--surface-color);
  border-radius: 15px;
}

.contact .php-email-form .form-control {
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #ced4da;
  font-size: 14px;
  transition: all 0.3s;
}

.contact .php-email-form .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 80%);
}

.contact .php-email-form .form-control::placeholder {
  color: #adb5bd;
}

.contact .php-email-form textarea.form-control {
  min-height: 120px;
}

.contact .php-email-form button[type=submit] {
  background: var(--accent-color);
  border: 0;
  padding: 12px 34px;
  color: var(--contrast-color);
  border-radius: 50px;
  font-weight: 500;
  transition: 0.3s;
}

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

.contact .php-email-form .loading,
.contact .php-email-form .error-message,
.contact .php-email-form .sent-message {
  display: none;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 500;
  border-radius: 10px;
}

.contact .php-email-form .loading {
  background: #fff;
  color: var(--accent-color);
}

.contact .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: #fff;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form .error-message {
  color: #fff;
  background: #ed3c0d;
}

.contact .php-email-form .sent-message {
  color: #fff;
  background: #18d26e;
}

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

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

.contact .social-links {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.contact .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface-color);
  color: var(--accent-color);
  font-size: 18px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.contact .social-links a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

@media (max-width: 992px) {
  .contact .info-box {
    margin-bottom: 20px;
    padding: 20px;
  }

  .contact .php-email-form {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .contact .info-box {
    padding: 15px;
  }

  .contact .info-box i {
    font-size: 28px;
    padding: 12px;
  }

  .contact .info-box h3 {
    font-size: 18px;
  }

  .contact .social-links {
    gap: 12px;
  }

  .contact .social-links a {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
.terms-of-service .tos-header {
  margin-bottom: 60px;
}

.terms-of-service .tos-header .last-updated {
  display: inline-block;
  padding: 8px 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 30px;
  color: var(--accent-color);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.terms-of-service .tos-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.terms-of-service .tos-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.terms-of-service .tos-content .content-section {
  margin-bottom: 50px;
  scroll-margin-top: 100px;
}

.terms-of-service .tos-content .content-section:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.terms-of-service .tos-content .content-section p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
  margin-bottom: 20px;
}

.terms-of-service .tos-content .content-section p:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .info-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .info-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .info-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .list-items {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.terms-of-service .tos-content .content-section .list-items li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .list-items li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .list-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .alert-box {
  display: flex;
  gap: 20px;
  padding: 25px;
  background-color: var(--surface-color);
  border-radius: 15px;
  border-left: 4px solid var(--accent-color);
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .alert-box i {
  font-size: 2rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content h5 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .prohibited-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-content .content-section .prohibited-list {
    grid-template-columns: 1fr;
  }
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background-color: var(--surface-color);
  border-radius: 12px;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item i {
  color: #dc3545;
  font-size: 1.2rem;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item span {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .disclaimer-box {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .disclaimer-box p {
  margin-bottom: 15px;
  font-weight: 500;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .notice-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .notice-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .notice-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-contact {
  margin-top: 60px;
}

.terms-of-service .tos-contact .contact-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-contact .contact-box {
    flex-direction: column;
    text-align: center;
  }
}

.terms-of-service .tos-contact .contact-box .contact-icon {
  width: 60px;
  height: 60px;
  background-color: var(--accent-color);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.terms-of-service .tos-contact .contact-box .contact-icon i {
  font-size: 1.8rem;
  color: var(--contrast-color);
}

.terms-of-service .tos-contact .contact-box .contact-content {
  flex: 1;
}

.terms-of-service .tos-contact .contact-box .contact-content h4 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-contact .contact-box .contact-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 15px;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media print {
  .terms-of-service .tos-contact {
    display: none;
  }

  .terms-of-service .content-section {
    page-break-inside: avoid;
  }
}

/*--------------------------------------------------------------
# Privacy Section
--------------------------------------------------------------*/
.privacy .privacy-content {
  font-size: 16px;
  line-height: 1.7;
}

.privacy .privacy-content .last-updated {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 40px;
  border-left: 4px solid var(--accent-color);
}

.privacy .privacy-content .last-updated p {
  margin: 0;
  color: var(--heading-color);
}

.privacy .privacy-content .privacy-section {
  margin-bottom: 50px;
}

.privacy .privacy-content .privacy-section h3 {
  font-size: 28px;
  margin-bottom: 25px;
  color: var(--heading-color);
  position: relative;
  padding-bottom: 15px;
}

.privacy .privacy-content .privacy-section h3:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  border-radius: 2px;
}

.privacy .privacy-content .privacy-section h4 {
  color: var(--heading-color);
  font-size: 22px;
  margin: 30px 0 15px 0;
}

.privacy .privacy-content .privacy-section h5 {
  color: var(--heading-color);
  font-size: 18px;
  margin-bottom: 10px;
}

.privacy .privacy-content .privacy-section p {
  margin-bottom: 20px;
  color: var(--default-color);
}

.privacy .privacy-content .privacy-section ul,
.privacy .privacy-content .privacy-section ol {
  margin: 20px 0;
  padding-left: 30px;
}

.privacy .privacy-content .privacy-section ul li,
.privacy .privacy-content .privacy-section ol li {
  margin-bottom: 10px;
  color: var(--default-color);
}

.privacy .privacy-content .privacy-section .info-box {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 10px;
  margin: 30px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-content .privacy-section .info-box h4 {
  color: var(--heading-color);
  margin-top: 0;
}

.privacy .privacy-content .privacy-section .highlight-box {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000000 20%));
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  color: var(--contrast-color);
  margin: 40px 0;
}

.privacy .privacy-content .privacy-section .highlight-box i {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.privacy .privacy-content .privacy-section .highlight-box h4 {
  color: var(--contrast-color);
  margin-bottom: 15px;
}

.privacy .privacy-content .privacy-section .highlight-box p {
  color: var(--contrast-color);
  margin: 0;
  opacity: 0.9;
}

.privacy .privacy-content .privacy-section .security-measures {
  margin: 30px 0;
}

.privacy .privacy-content .privacy-section .security-measures .measure-item {
  text-align: center;
  padding: 30px 20px;
  border-radius: 10px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
}

.privacy .privacy-content .privacy-section .security-measures .measure-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.privacy .privacy-content .privacy-section .security-measures .measure-item i {
  font-size: 36px;
  color: var(--accent-color);
  margin-bottom: 20px;
  display: block;
}

.privacy .privacy-content .privacy-section .security-measures .measure-item h5 {
  margin-bottom: 15px;
}

.privacy .privacy-content .privacy-section .security-measures .measure-item p {
  margin: 0;
  font-size: 14px;
}

.privacy .privacy-content .privacy-section .rights-list {
  margin: 30px 0;
}

.privacy .privacy-content .privacy-section .rights-list .right-item {
  display: flex;
  align-items: flex-start;
  padding: 25px;
  margin-bottom: 20px;
  background: var(--surface-color);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
}

.privacy .privacy-content .privacy-section .rights-list .right-item:hover {
  border-color: var(--accent-color);
  transform: translateX(5px);
}

.privacy .privacy-content .privacy-section .rights-list .right-item i {
  font-size: 24px;
  color: var(--accent-color);
  margin-right: 20px;
  margin-top: 5px;
  min-width: 24px;
}

.privacy .privacy-content .privacy-section .rights-list .right-item div {
  flex: 1;
}

.privacy .privacy-content .privacy-section .rights-list .right-item div h5 {
  margin-bottom: 10px;
}

.privacy .privacy-content .privacy-section .rights-list .right-item div p {
  margin: 0;
  font-size: 14px;
}

.privacy .privacy-content .privacy-section .cookie-types {
  margin: 30px 0;
}

.privacy .privacy-content .privacy-section .cookie-types h4 {
  margin-bottom: 20px;
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table {
  margin: 0;
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table thead {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table thead th {
  border: none;
  color: var(--heading-color);
  font-weight: 600;
  padding: 15px 20px;
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table tbody td {
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 15px 20px;
  color: var(--default-color);
}

.privacy .privacy-content .privacy-section .cookie-types .table-responsive .table tbody tr:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 97%);
}

.privacy .privacy-content .contact-section {
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
  padding: 40px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

.privacy .privacy-content .contact-section h3 {
  color: var(--heading-color);
  margin-bottom: 20px;
}

.privacy .privacy-content .contact-section h3:after {
  background: var(--accent-color);
}

.privacy .privacy-content .contact-section .contact-info {
  margin-top: 30px;
}

.privacy .privacy-content .contact-section .contact-info .contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.privacy .privacy-content .contact-section .contact-info .contact-item i {
  font-size: 18px;
  color: var(--accent-color);
  margin-right: 15px;
  min-width: 18px;
}

.privacy .privacy-content .contact-section .contact-info .contact-item span {
  color: var(--default-color);
}

@media (max-width: 768px) {
  .privacy .privacy-content {
    font-size: 15px;
  }

  .privacy .privacy-content .privacy-section h3 {
    font-size: 24px;
  }

  .privacy .privacy-content .privacy-section h4 {
    font-size: 20px;
  }

  .privacy .privacy-content .privacy-section .security-measures .row>div {
    margin-bottom: 20px;
  }

  .privacy .privacy-content .privacy-section .rights-list .right-item {
    flex-direction: column;
    text-align: center;
  }

  .privacy .privacy-content .privacy-section .rights-list .right-item i {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
.error-404 {
  padding: 100px 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--background-color), transparent 0%), color-mix(in srgb, var(--background-color), var(--accent-color) 4%));
}

.error-404 .error-wrapper {
  position: relative;
  overflow: hidden;
}

.error-404 .error-illustration {
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-404 .error-illustration i {
  font-size: 9rem;
  color: color-mix(in srgb, var(--accent-color), transparent 10%);
  position: relative;
  z-index: 2;
  animation: pulse 2s infinite;
}

.error-404 .error-illustration .circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
}

.error-404 .error-illustration .circle.circle-1 {
  width: 200px;
  height: 200px;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  animation: float 6s ease-in-out infinite;
}

.error-404 .error-illustration .circle.circle-2 {
  width: 120px;
  height: 120px;
  background: color-mix(in srgb, var(--heading-color), transparent 85%);
  top: 30%;
  left: 25%;
  animation: float 8s ease-in-out infinite;
}

.error-404 .error-illustration .circle.circle-3 {
  width: 80px;
  height: 80px;
  background: color-mix(in srgb, var(--accent-color), transparent 75%);
  bottom: 20%;
  right: 30%;
  animation: float 7s ease-in-out infinite reverse;
}

.error-404 .error-content {
  padding: 30px 0;
}

.error-404 .error-badge {
  display: inline-block;
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 30px;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.error-404 .error-code {
  font-size: clamp(5rem, 10vw, 8rem);
  font-weight: 900;
  margin: 0;
  background: linear-gradient(135deg, var(--heading-color), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: -2px;
}

.error-404 .error-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 1.5rem;
}

.error-404 .error-description {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.error-404 .error-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.error-404 .error-actions .btn-home,
.error-404 .error-actions .btn-help {
  padding: 0.8rem 1.8rem;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.error-404 .error-actions .btn-home i,
.error-404 .error-actions .btn-help i {
  font-size: 1.2rem;
}

.error-404 .error-actions .btn-home {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
}

.error-404 .error-actions .btn-home:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.error-404 .error-actions .btn-help {
  background-color: transparent;
  color: var(--accent-color);
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 75%);
}

.error-404 .error-actions .btn-help:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  transform: translateY(-3px);
}

.error-404 .error-suggestions {
  padding: 1.5rem;
  background-color: color-mix(in srgb, var(--background-color), var(--accent-color) 5%);
  border-radius: 12px;
}

.error-404 .error-suggestions h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 1rem;
}

.error-404 .error-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.error-404 .error-suggestions ul li {
  margin-bottom: 0.8rem;
}

.error-404 .error-suggestions ul li:last-child {
  margin-bottom: 0;
}

.error-404 .error-suggestions ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--default-color);
  font-size: 1.05rem;
  transition: all 0.3s;
}

.error-404 .error-suggestions ul li a i {
  color: var(--accent-color);
  font-size: 1.1rem;
  transition: transform 0.3s;
}

.error-404 .error-suggestions ul li a:hover {
  color: var(--accent-color);
}

.error-404 .error-suggestions ul li a:hover i {
  transform: translateX(3px);
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@media (max-width: 992px) {
  .error-404 .error-illustration {
    height: 300px;
    margin-bottom: 2rem;
  }
}

@media (max-width: 768px) {
  .error-404 {
    padding: 70px 0;
  }

  .error-404 .error-code {
    font-size: clamp(4rem, 12vw, 6rem);
  }

  .error-404 .error-title {
    font-size: 1.8rem;
  }

  .error-404 .error-actions {
    flex-direction: column;
  }

  .error-404 .error-actions .btn-home,
  .error-404 .error-actions .btn-help {
    width: 100%;
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  padding-top: 60px;
  padding-bottom: 60px;
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Site Customizations
# Regole aggiuntive che estendono il tema per adattarlo ai
# contenuti e alla brand identity di International Chiropractic
# Service. Organizzate per area della pagina.
--------------------------------------------------------------*/

/* ---------------------------------------------------------------
   Header e menu di navigazione
   --------------------------------------------------------------- */

/* Il titolo del sito è solo testo (nessun logo grafico in intestazione). */
.header .logo {
  display: flex;
  align-items: center;
  line-height: 1.15;
}

/* Icone di sezione, visibili solo nel pannello mobile (sul desktop il
   menu resta testuale, per restare compatto ed elegante). */
.navmenu .nav-icon {
  font-size: 18px !important;
  width: 26px;
  text-align: center;
  margin-right: 6px;
  background: none !important;
}

/* Selettore di lingua: due semplici etichette testuali (IT / EN),
   senza bandiere. La lingua attiva è mostrata come testo semplice,
   quella non attiva è un link che effettua subito il cambio lingua:
   niente menu a tendina da aprire, per restare leggibile e
   affidabile anche sui piccoli schermi. */
.navmenu .lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navmenu .lang-option {
  font-family: var(--nav-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 6px;
  line-height: 1;
}

.navmenu a.lang-option {
  color: var(--nav-color);
}

.navmenu a.lang-option:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

.navmenu .lang-option.lang-current {
  color: var(--contrast-color);
  background: var(--accent-color);
  cursor: default;
}

/* ----- Desktop (>= 1200px): sottolineatura animata + separatore lingua --- */
@media (min-width: 1200px) {
  .navmenu > ul > li {
    position: relative;
  }

  .navmenu > ul > li > a:not(.lang-option)::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }

  .navmenu > ul > li:hover > a:not(.lang-option)::after,
  .navmenu > ul > li > a.active:not(.lang-option)::after {
    transform: scaleX(1);
  }

  .navmenu .lang-switcher {
    margin-left: 6px;
    padding-left: 16px;
    border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  }

  /* MODIFICA (SOLO DESKTOP): pillola più grande e arrotondata, con
     ingrandimento al passaggio del mouse. Questa regola vive
     esclusivamente dentro il blocco "min-width: 1200px", quindi non
     tocca in alcun modo l'aspetto su mobile, che resta quello
     originale (vedi blocco "max-width: 1199px" più sotto). */
  .navmenu .lang-option {
    padding: 6px 14px;
    border-radius: 50px;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, padding 0.2s ease;
  }

  .navmenu a.lang-option:hover {
    transform: scale(1.12);
    padding: 6px 18px;
  }
}

/* ----- Mobile (< 1200px): pannello a comparsa, ancorato sotto
   l'intestazione fissa (che resta sempre visibile) ---------------- */
@media (max-width: 1199px) {

  /* Sfondo del pannello: leggero effetto vetro smerigliato invece di
     un semplice colore scuro piatto. Il pannello parte da sotto
     l'intestazione (non da cima pagina), che resta sempre visibile
     con il nome dello studio come unico titolo. */
  .mobile-nav-active .navmenu {
    top: 68px;
    background: rgba(20, 24, 25, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* La lista dei link diventa una scheda ancorata sotto l'header,
     animata in dissolvenza. */
  .navmenu ul {
    inset: 68px 16px 24px 16px;
    padding: 12px 0 16px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .mobile-nav-active .navmenu ul {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .navmenu a,
  .navmenu a:focus {
    min-height: 50px;
    border-radius: 12px;
    margin: 2px 12px;
    padding: 12px 14px;
  }

  .navmenu li:hover > a,
  .navmenu a:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
  }

  .navmenu .active,
  .navmenu .active:focus {
    background: color-mix(in srgb, var(--accent-color), transparent 88%);
    font-weight: 700;
  }

  /* La voce lingua, in fondo al pannello, è evidenziata come una
     piccola riga a sé stante con le due etichette ben visibili. */
  .navmenu .lang-switcher {
    margin: 10px 12px 0;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  }

  .navmenu .lang-option {
    font-size: 15px;
    padding: 8px 16px;
  }

  /* Il pulsante hamburger/chiusura è più grande e ben visibile anche
     su schermi molto piccoli. */
  .mobile-nav-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .mobile-nav-active .mobile-nav-toggle {
    background: color-mix(in srgb, #000000, transparent 60%);
  }
}

/* Il titolo testuale si riduce su schermi molto piccoli per non
   sovrapporsi al pulsante del menu. */
@media (max-width: 400px) {
  .header .logo h1 {
    font-size: 21px;
  }
}

/* ---------------------------------------------------------------
   Home — sezione "About" (titolo e testo introduttivo)
   --------------------------------------------------------------- */

/* Il testo introduttivo occupa più spazio orizzontale e ha una
   dimensione del carattere leggermente maggiore per dargli più
   risalto rispetto al resto della pagina. */
.home-about .lead-description.lead-description-wide {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.lead-description-wide {
  font-size: 1.15rem;
  line-height: 1.85;
  max-width: 100%;
}

@media (min-width: 992px) {
  .home-about .col-lg-10.mx-auto {
    max-width: 88%;
  }
}

/* ---------------------------------------------------------------
   Home — presentazione dello staff (riquadro sopra le schede)
   --------------------------------------------------------------- */

.staff-callout {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 40px;
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 92%) 0%, var(--surface-color) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 82%);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--accent-color), transparent 88%);
}

.staff-callout-icon {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 30px;
}

.staff-callout-title {
  margin-bottom: 10px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.staff-callout-text {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 10%);
  line-height: 1.75;
}

@media (max-width: 768px) {
  .staff-callout {
    flex-direction: column;
    text-align: center;
    padding: 28px 24px;
  }
}

/* ---------------------------------------------------------------
   Home — schede dei collaboratori (foto/testo segnaposto)
   --------------------------------------------------------------- */

.tab-profile-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-color);
}

/* ---------------------------------------------------------------
   Home — origini della chiropratica: coppia di illustrazioni
   ---------------------------------------------------------------
   MODIFICA (PUNTO 4): le immagini sono ora mostrate per intero, alla
   loro dimensione grande originale (object-fit: contain invece di
   cover, che le ritagliava), con una didascalia sotto ciascuna che ne
   indica la fonte (Wikimedia Commons). */

.history-image-pair {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.history-figure {
  margin: 0;
  background: var(--surface-color);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--default-color), transparent 90%);
}

.history-image-main,
.history-image-secondary {
  width: 100%;
  height: 340px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

.history-figure figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  text-align: center;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-style: italic;
}

@media (max-width: 768px) {
  .history-image-pair {
    gap: 16px;
  }

  .history-image-main,
  .history-image-secondary {
    height: 260px;
  }
}

/* Il testo, affiancato all'immagine, è giustificato per un blocco
   più ordinato e leggibile. */
.call-to-action .hero-content .content-wrapper p {
  text-align: justify;
}

.doctors .single-profile .profile-content .bio {
  text-align: justify;
}

/* ---------------------------------------------------------------
   Prevenzione — tavola anatomica della colonna vertebrale
   --------------------------------------------------------------- */

.spine-chart-wrapper {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-color), transparent 94%) 0%, transparent 100%);
  border-radius: 24px;
  padding: 20px;
  text-align: center;
}

.spine-chart-image {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--default-color), transparent 90%);
  background: #fdfaf6;
}

.spine-chart-caption {
  margin: 14px 0 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-style: italic;
}

@media (max-width: 768px) {
  .spine-chart-image {
    max-height: 460px;
  }
}

/* Riquadro per evidenziare il messaggio principale sul valore
   preventivo della chiropratica. */
.wellbeing-callout {
  padding: 32px 40px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-color), transparent 94%);
  border-left: 5px solid var(--accent-color);
}

.wellbeing-callout-body h3 {
  margin-bottom: 12px;
  font-family: var(--heading-font);
  color: var(--heading-color);
  text-align: left;
}

.wellbeing-callout-body p {
  margin: 0;
  line-height: 1.8;
  text-align: justify;
}

@media (max-width: 768px) {
  .wellbeing-callout {
    padding: 24px;
  }
}

/* ---------------------------------------------------------------
   Cosa Facciamo — spaziature e riquadri per i trattamenti
   --------------------------------------------------------------- */

.intro-section-tight {
  margin-bottom: 40px !important;
}

.mission-section-tight {
  margin-bottom: 30px !important;
  padding-top: 10px !important;
}

/* Ogni trattamento (testo + immagini correlate) è racchiuso in un
   unico riquadro fluido, cosi' risulta immediatamente chiaro quali
   immagini illustrano quale testo. I riquadri alternano un leggero
   sfondo per scandire visivamente la sequenza dei trattamenti. */
.treatment-panel {
  padding: 36px;
  border-radius: 22px;
  background: var(--surface-color);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--default-color), transparent 92%);
  margin-bottom: 32px;
}

.treatment-panel-alt {
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
}

/* MODIFICA: titolo di ogni scheda "Cosa Facciamo", ora centrato in
   alto e "cerchiato" (racchiuso in un bordo arrotondato pieno,
   colore accento) invece di essere affiancato al testo a destra. */
.treatment-panel-title {
  text-align: center;
  margin-bottom: 28px;
}

.treatment-panel-title span {
  display: inline-block;
  padding: 14px 40px;
  border: 2px solid var(--accent-color);
  border-radius: 50px;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading-color);
  background: var(--surface-color);
}

@media (max-width: 576px) {
  .treatment-panel-title span {
    padding: 10px 22px;
    font-size: 1.25rem;
  }
}

.treatment-tag {
  display: inline-block;
  padding: 10px 24px;
  margin-bottom: 16px;
  border-radius: 50px;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .treatment-panel {
    padding: 24px;
    border-radius: 18px;
  }

  /* Su mobile le colonne tornano impilate: l'ordine "immagini sopra,
     testo sotto" resta identico a prima, cambia solo il rapporto
     delle larghezze su desktop. */
  .treatment-panel-title span {
    font-size: 1.35rem;
  }
}

/* MODIFICA: il sottotitolo descrittivo (es. "Il trattamento
   chiropratico: arte e scienza per l'aggiustamento della colonna
   vertebrale") non è più dentro al riquadro cerchiato in alto: è ora
   mostrato sopra il testo, a sinistra, in grassetto e a carattere più
   grande, ma SENZA bordo/cerchiatura. */
.treatment-subtitle {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--heading-color);
  margin-bottom: 14px;
}

@media (max-width: 576px) {
  .treatment-subtitle {
    font-size: 1.15rem;
  }
}

/* ---------------------------------------------------------------
   Servizi / Patologie
   --------------------------------------------------------------- */

.services .service-card.primary-care .service-image img {
  border-radius: 14px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 160px;
}

/* MODIFICA (PUNTO 6, poi rivista): ogni scheda Patologie può mostrare
   fino a tre immagini (invece di una sola). Su richiesta, quando ce ne
   sono più di una vengono impilate una sotto l'altra (colonna),
   anziché affiancate in griglia, mantenendo la stessa larghezza
   complessiva della colonna di prima. */
.services .service-card.primary-care .service-image.service-image-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;
}

.services .service-card.primary-care .service-image.service-image-gallery img {
  width: 100%;
  min-height: 130px;
  height: 150px;
}

/* Con una sola immagine, l'altezza resta quella "grande" originale. */
.services .service-card.primary-care .service-image.service-image-gallery img:only-child {
  height: 220px;
}

@media (max-width: 576px) {
  .services .service-card.primary-care .service-image.service-image-gallery img {
    height: 130px;
  }
}

.testimonials .testimonial-item p span {
  line-height: 1.8;
}

/* ---------------------------------------------------------------
   Pagine legali (Privacy Policy / Cookie Policy)
   --------------------------------------------------------------- */

.legal-page {
  padding-top: 60px;
  padding-bottom: 80px;
}

.legal-title {
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-weight: 700;
  margin-bottom: 6px;
}

.legal-updated {
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-style: italic;
  margin-bottom: 32px;
}

.legal-body h3 {
  font-size: 1.15rem;
  color: var(--heading-color);
  margin-top: 34px;
  margin-bottom: 12px;
}

.legal-body p {
  line-height: 1.8;
  margin-bottom: 14px;
}

.legal-body .cookie-table {
  width: 100%;
  min-width: 560px; /* garantisce leggibilità delle colonne quando la tabella scorre in orizzontale su mobile */
  border-collapse: collapse;
  margin: 0;
  font-size: 15px;
}

.legal-body .cookie-table th,
.legal-body .cookie-table td {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.legal-body .cookie-table th {
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--heading-color);
}

/* MODIFICA (PUNTO 10): contenitore che rende la tabella scorrevole in
   orizzontale sui piccoli schermi invece di rompere il layout della
   pagina o rimpicciolire il testo. Il contenitore viene creato
   automaticamente da js/main.js attorno a ogni tabella presente nel
   testo legale (il contenuto HTML arriva dal database). */
.legal-body .legal-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0 28px;
  border-radius: 8px;
}

/* Tutto il resto del testo (titoli, paragrafi, elenchi, link) si
   adatta correttamente alla larghezza dello schermo: nessun elemento
   può forzare uno scorrimento orizzontale dell'intera pagina. */
.legal-body,
.legal-body * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.legal-body ul,
.legal-body ol {
  padding-left: 1.4rem;
}

@media (max-width: 576px) {
  .legal-page {
    padding-top: 40px;
    padding-bottom: 50px;
  }

  .legal-title {
    font-size: 1.5rem;
  }

  .legal-body h3 {
    font-size: 1.05rem;
  }

  .legal-body p,
  .legal-body li {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* ---------------------------------------------------------------
   Contatti — moduli distinti Siena / Volterra (PUNTO 7)
   ---------------------------------------------------------------
   Ogni modulo riprende lo stile già esistente (booking-section per
   Siena, appointment-card per Volterra) ma lo racchiude in un'unica
   scheda ("contact-module-card") che include anche orario, sede,
   contatti e la mappa incorporata, per rendere ben distinta e
   riconoscibile la differenza fra le due sedi.
   --------------------------------------------------------------- */

.contact-module {
  padding-top: 40px;
  padding-bottom: 10px;
}

.contact-module-card {
  background: var(--surface-color);
  border-radius: 22px;
  padding: 2.5rem;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--default-color), transparent 92%);
  border-top: 5px solid var(--accent-color);
}

/* Il modulo di Volterra usa un bordo/sfondo leggermente diverso per
   distinguersi a colpo d'occhio da quello di Siena. */
.contact-module-card-alt {
  border-top: 5px solid color-mix(in srgb, var(--accent-color), #000 20%);
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.contact-module-kicker {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 6px 16px;
  border-radius: 50px;
  background: var(--accent-color);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.contact-module .booking-section,
.contact-module .appointment-card {
  background: transparent;
  padding: 0;
  box-shadow: none;
  text-align: left;
}

.contact-module .appointment-card .btn-appointment {
  width: auto;
  display: inline-block;
  padding: 14px 28px;
}

.contact-appointment-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--heading-color);
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  padding: 10px 16px;
  border-radius: 10px;
  margin-bottom: 1.5rem !important;
  font-size: 0.95rem;
}

.contact-appointment-note i,
.contact-volterra-frequency i {
  color: var(--accent-color);
}

.contact-volterra-frequency {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.contact-module-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}

/* MODIFICA: le 4 informazioni del modulo Siena (orario, telefono,
   sede, email) sono allineate a coppie di due per riga invece che una
   sotto l'altra: su una riga orario + telefono, sulla riga successiva
   sede + email. Su schermi stretti torna a una sola colonna. */
.contact-module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.5rem;
  margin: 1.5rem 0;
}

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

.contact-module-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-module-detail i {
  width: 40px;
  height: 40px;
  background: var(--accent-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.contact-module-detail strong {
  display: block;
  color: var(--heading-color);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.contact-module-detail span,
.contact-module-detail span a {
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  text-decoration: none;
}

.contact-module-detail span a:hover {
  color: var(--accent-color);
}

/* Mappa incorporata direttamente nel modulo (stessa logica di
   ".contact .map-container", isolata qui per non alterarne altri usi). */
.contact-module-map {
  overflow: hidden;
  position: relative;
  height: 100%;
  min-height: 320px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.contact-module-map iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

@media (max-width: 768px) {
  .contact-module-card {
    padding: 1.5rem;
  }

  .contact-module-map {
    min-height: 260px;
  }
}