@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,500,700");
body {
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 400;
}
h1 {
  color: #ffffff;
  font-family: "Ubuntu", sans-serif;
  font-size: 45px !important;
  font-weight: 700;
}
h2 {
  color: #222;
  font-family: "Ubuntu", sans-serif;
  font-size: 36px !important;
  font-weight: 700;
}
h3 {
  color: #222;
  font-family: "Ubuntu", sans-serif;
  font-size: 18px !important;
  font-weight: 700;
  text-transform: uppercase;
}
.modern-banner {
  position: relative;
  padding: 120px 20px;
  /* path is relative to this CSS file (assets/css/), so go up one level to assets/images */
  background-image: url("../images/skaligners_main_02.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 320px; /* ensure banner is visible even if image fails */
  background-color: #000; /* fallback color while image loads */
  color: #ffffff;
  overflow: hidden;
}

.modern-banner .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* dark overlay for readability */
  z-index: 0;
}

.modern-banner .banner-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.modern-banner h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.modern-banner p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.modern-banner .banner-btn {
  display: inline-block;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  color: #009381;
  background-color: transparent;
  border: 2px solid #009381;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.modern-banner .banner-btn:hover {
  background-color: #009381;
  color: #fff;
  box-shadow: 0 0 15px rgba(0, 147, 129, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
  .modern-banner h2 {
    font-size: 24px;
  }
  .modern-banner p {
    font-size: 16px;
  }
  .modern-banner .banner-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}

h4 {
  color: #222;
  font-family: "Ubuntu", sans-serif;
  font-size: 16px !important;
  font-weight: 400;
}
h5 {
  color: #777;
  font-family: "Roboto", sans-serif;
  text-transform: capitalize;
  font-size: 14px !important;
  font-weight: 400;
}
h6 {
  color: #777;
  font-size: 12px !important;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a:hover,
a:focus {
  text-decoration: none;
}
input:focus,
textarea:focus {
  outline: none;
}
.spinner {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #09262e;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1s infinite ease-in-out;
  animation: sk-scaleout 1s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 5;
}
.preloader .spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.nav-menu,
.nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}
.nav-menu li {
  position: relative;
  white-space: nowrap;
}
.nav-menu > li {
  float: left;
}
.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
  display: block;
}
.nav-menu ul ul {
  top: 0;
  left: 100%;
}
.nav-menu ul li {
  min-width: 180px;
  text-align: left;
}
.menu-has-children ul li a {
  padding: 4px 10px !important;
  text-transform: uppercase !important;
}
.sf-arrows .sf-with-ul {
  padding-right: 30px;
  position: relative;
  cursor: pointer;
}
.sf-arrows .sf-with-ul:after {
  content: "\f107";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  cursor: pointer;
  transition: transform 0.3s ease;
  color: #ffffff;
  font-size: 12px;
  pointer-events: auto;
}
.sf-arrows .sf-with-ul:hover:after {
  transform: translateY(-50%) rotate(180deg);
  color: #b6cdb0;
}
.sf-arrows ul .sf-with-ul:after {
  content: "\f105";
}
#nav-menu-container {
  margin: 0;
}
@media (max-width: 960px) {
  #nav-menu-container {
    display: none;
  }
}
.nav-menu a {
  padding: 7px 10px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.nav-menu a:hover {
  color: #b6cdb0;
}
.nav-menu > li {
  margin-left: 15px;
}
.nav-menu ul {
  margin: 14px 0 0 0;
  padding: 10px;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  background: #09262e;
}
.nav-menu ul li {
  transition: 0.3s;
}
.nav-menu ul li a {
  padding: 10px;
  color: #fff;
  transition: 0.3s;
  display: block;
  font-size: 12px;
  text-transform: none;
}
.nav-menu ul li:hover > a {
  color: #244cfd;
}
.nav-menu ul ul {
  margin: 0;
}
#mobile-nav-toggle {
  /* Position the toggle relative to the header container so it centers vertically
     and doesn't jump when the page scrolls. Use transform for centering (GPU
     friendly) and avoid animating positional properties to prevent jitter. */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  border: 0;
  background: transparent;
  font-size: 24px;
  display: none !important; /* Hidden by default on desktop */
  /* Only transition non-positional properties to avoid header jitter on scroll */
  transition: opacity 0.25s ease, color 0.25s ease;
  outline: none;
  cursor: pointer;
  color: white;
  padding: 8px;
}

#mobile-nav-toggle:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Add mobile-specific hover styles */
@media (max-width: 960px) {
  #mobile-nav-toggle:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-50%) scale(1.1) !important;
  }

  #mobile-nav-toggle:active {
    transform: translateY(-50%) scale(0.95) !important;
  }
}
@media (max-width: 960px) {
  /* Show the toggle in mobile layouts. Because the toggle is absolutely
     positioned, ensure its containing block (#header .container / .row)
     is positioned so the toggle aligns inside the header. */
  #mobile-nav-toggle {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 99999 !important;
    background: transparent !important;
    color: white !important;
    border: none !important;
    font-size: 24px !important;
    padding: 8px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #nav-menu-container {
    display: none;
  }
}
#mobile-nav {
  position: fixed;
  top: 0;
  padding-top: 18px;
  bottom: 0;
  z-index: 998;
  background: #ffffff;
  left: -300px;
  width: 280px;
  overflow-y: auto;
  transition: left 0.3s ease;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 147, 129, 0.1);
}
#mobile-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#mobile-nav ul li {
  position: relative;
}
#mobile-nav ul li a {
  color: var(--primary-dark);
  font-size: 16px;
  text-transform: uppercase;
  overflow: hidden;
  padding: 15px 22px 15px 20px;
  position: relative;
  text-decoration: none;
  width: 100%;
  display: block;
  outline: none;
  font-weight: 500;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
#mobile-nav ul li a:hover {
  color: #ffffff;
  background: var(--primary-teal);
  transform: translateX(5px);
}
#mobile-nav ul li li {
  padding-left: 30px;
}
#mobile-nav ul .menu-has-children i {
  position: absolute;
  right: 0;
  z-index: 99;
  padding: 15px;
  cursor: pointer;
  color: var(--primary-dark);
}
#mobile-nav ul .menu-has-children i.fa-chevron-up {
  color: var(--primary-teal);
}
#mobile-nav ul .menu-has-children li a {
  text-transform: capitalize;
}
#mobile-nav ul .menu-item-active {
  color: var(--primary-teal);
}
#mobile-body-overly {
  width: 100%;
  height: 100%;
  z-index: 997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}
body.mobile-nav-active {
  overflow: hidden;
}
body.mobile-nav-active #mobile-nav {
  left: 0;
}
body.mobile-nav-active #mobile-nav-toggle {
  color: var(--primary-teal);
}
.header-top {
  padding: 10px 0;
  background-color: #009381;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 997;
  position: fixed;
}
.header-top h6 {
  margin-top: 6px;
  color: #ffffff;
}
.header-top h6 i {
  font-size: 18px;
  position: relative;
  top: 2px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .header-top {
    display: none;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .header-top {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .header-top {
    display: none;
  }
}
.header-top .social-links ul {
  float: right;
  margin-top: 5px;
}
.header-top .social-links ul li {
  display: inline;
  margin-left: 15px;
}
.header-top .social-links ul li a {
  color: #ffffff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.header-top .social-links ul li a:hover {
  color: #244cfd;
}
#header {
  padding: 14px 0;
  position: fixed;
  left: 0;
  top: 48px;
  right: 0;
  transition: all 0.5s;
  z-index: 997;
  background: #09262e;
}

/* Make the header's inner container the positioning context for the mobile toggle */
#header .container {
  position: relative;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #header {
    top: 0;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  #header {
    top: 0;
  }
}
@media (max-width: 575.98px) {
  #header {
    top: 0;
  }
}
#header.header-scrolled {
  background: #09262e;
  transition: all 0.5s;
  top: 50;
}
@media (max-width: 673px) {
  #logo {
    margin-left: 20px;
  }
  #logo img {
    height: 25px;
  }
}
#header #logo h1 {
  font-size: 34px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
}
#header #logo h1 a,
#header #logo h1 a:hover {
  color: #fff;
  padding-left: 10px;
  border-left: 4px solid #244cfd;
}
#header #logo img {
  padding: 0;
  margin: 0;
  max-height: 35px; /* reduce height */
  width: auto; /* keep aspect ratio */
}
@media (max-width: 768px) {
  #header #logo h1 {
    font-size: 28px;
  }
  #header #logo img {
    max-height: 40px;
  }
}
/* Hide Google branding */
body {
  top: 0px !important;
}

/* Container */
#google_translate_element {
  display: inline-block;
  font-size: 0;
  position: relative;
}

/* Styled select */
#google_translate_element select {
  background: #09262e; /* dark color */
  color: #ffffff; /* light text */
  padding: 5px 24px 5px 10px; /* compact */
  border: none;
  border-radius: 20px; /* pill style */
  font-size: 13px; /* smaller text */
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  line-height: 1.2;
  min-height: 28px;
}

/* Custom arrow */
#google_translate_element::after {
  content: "▼";
  font-size: 10px;
  color: #b6cdb0; /* light arrow */
  position: absolute;
  right: 10px;
  top: 35%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Focus */
#google_translate_element select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 147, 129, 0.4);
}

/* From Uiverse.io by satyamchaudharydev */
.button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: #09262e;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #009381;
  outline: none;
  overflow: hidden;
  font-size: 18px;
  cursor: pointer;
  padding: 15px 35px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.button:hover {
  transform: scale(1.05);
  border-color: #fff9;
  color: white;
}

.button:hover .icon {
  transform: translate(4px);
}

.button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

/* Banner Area */
.banner-area {
  padding: 300px 0 350px;
  position: relative;
  overflow: hidden;
}

/* Gradient overlay */
.banner-area::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 147, 129, 0.7);
  z-index: -1; /* behind content */
}

/* Banner content stays above */
.banner-area h1,
.banner-area p,
.appointment-btn {
  position: relative;
  z-index: 1;
}

/* Banner text and button styles */
.banner-area h1 {
  color: #ffffff;
  font-family: "Ubuntu", sans-serif;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 20px;
}

.banner-area p {
  font-size: 18px;
  margin-bottom: 30px;
}

.appointment-btn {
  display: inline-block;
  padding: 10px 20px;
  color: #009381;
  background-color: transparent;
  border: 2px solid #009381;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.appointment-btn:hover {
  background-color: #009381;
  color: #e20e0e;
  box-shadow: 0 0 10px rgba(0, 147, 129, 0.6);
  border-color: #009381;
}

/* Tablet adjustments */
@media (min-width: 576px) and (max-width: 991.98px) {
  .banner-area {
    padding: 250px 0;
  }
}

/* Mobile adjustments */
@media (max-width: 575.98px) {
  .banner-area {
    padding: 150px 20px;
    text-align: center;
  }
  .banner-area h1 {
    font-size: 24px;
  }
  .banner-area p {
    font-size: 14px;
  }
  .appointment-btn {
    padding: 8px 16px;
    font-size: 14px;
  }
}

.banner-area p {
  white-space: nowrap; /* prevent line breaks */
  font-size: 18px !important;
}
.banner-area h1 {
  color: #ffffff;
  font-family: "Ubuntu", sans-serif;
  font-size: 50px !important;
  font-weight: 700;
  white-space: nowrap;
}
.appointment-btn {
  display: inline-block;
  padding: 10px 20px;
  color: #009381; /* text color matches border */
  background-color: transparent; /* no background */
  border: 2px solid #009381; /* modern teal border */
  border-radius: 8px; /* rounded corners */
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.appointment-btn:hover {
  background-color: #009381; /* fill on hover */
  color: #fff; /* text turns white on hover */
  box-shadow: 0 0 10px rgba(0, 147, 129, 0.6); /* matching hover glow */
  border-color: #009381;
}
/* Tablet padding adjustments */
@media (min-width: 576px) and (max-width: 991.98px) {
  .banner-area {
    padding: 250px 0; /* tablet padding */
  }
}

/* Mobile (<576px) styles */
@media (max-width: 575.98px) {
  .banner-area {
    padding: 150px 20px; /* smaller padding for mobile */
    text-align: center; /* optional: center content */
  }

  .banner-area h1 {
    font-size: 24px; /* smaller h1 for mobile */
    white-space: normal; /* allow wrapping */
  }

  .banner-area p {
    font-size: 14px; /* smaller paragraph for mobile */
    white-space: normal; /* allow wrapping */
  }

  .appointment-btn {
    padding: 8px 16px; /* smaller button */
    font-size: 14px; /* smaller button text */
  }
}
/* Scoped styles for services grid */
#services-section .service-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

#services-section .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

#services-section .service-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

#services-section .service-body {
  padding: 18px;
}

#services-section .service-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

#services-section .service-desc {
  font-size: 14px;
  color: #111;
  line-height: 1.45;
}

@media (min-width: 992px) {
  #services-section .service-img {
    height: 160px;
  }
}

/* Scoped gallery styles */
/* Modern Footer Mobile Responsive Styles */
@media (max-width: 991.98px) {
  .modern-footer .footer-main {
    padding: 60px 0 30px;
  }

  .modern-footer .footer-card {
    margin-bottom: 2rem;
  }

  .modern-footer .footer-card h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }

  .modern-footer .footer-card ul li a {
    font-size: 0.85rem;
  }
}

@media (max-width: 767.98px) {
  .modern-footer .footer-main {
    padding: 50px 0 25px;
  }

  .modern-footer .footer-card {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .modern-footer .footer-logo img {
    max-width: 150px;
  }

  .modern-footer .footer-card h4 {
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }

  .modern-footer .footer-card p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }

  .modern-footer .footer-contact-info {
    margin-bottom: 1.5rem;
  }

  .modern-footer .contact-item {
    margin-bottom: 0.8rem;
  }

  .modern-footer .contact-item .contact-icon {
    width: 35px;
    height: 35px;
  }

  .modern-footer .contact-item .contact-icon svg {
    width: 16px;
    height: 16px;
  }

  .modern-footer .contact-item div {
    font-size: 0.85rem;
  }

  .modern-footer .emergency-notice {
    padding: 0.8rem;
  }
}

@media (max-width: 575.98px) {
  .modern-footer .footer-main {
    padding: 40px 0 20px;
  }

  .modern-footer .footer-card {
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    border-radius: 15px;
  }

  .modern-footer .footer-logo img {
    max-width: 130px;
  }

  .modern-footer .footer-card h4 {
    font-size: 0.95rem;
    margin-bottom: 0.7rem;
  }

  .modern-footer .footer-card p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
  }

  .modern-footer .footer-badges span {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    margin: 0.2rem;
  }

  .modern-footer .footer-card ul li {
    margin-bottom: 0.6rem;
  }

  .modern-footer .footer-card ul li a {
    font-size: 0.8rem;
    padding: 0.3rem 0;
  }

  .modern-footer .footer-card ul li a span {
    width: 3px;
    height: 3px;
  }

  .modern-footer .footer-contact-info {
    margin-bottom: 1.2rem;
  }

  .modern-footer .contact-item {
    margin-bottom: 0.7rem;
    gap: 0.8rem;
  }

  .modern-footer .contact-item .contact-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }

  .modern-footer .contact-item .contact-icon svg {
    width: 14px;
    height: 14px;
  }

  .modern-footer .contact-item div {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .modern-footer .contact-item .contact-text {
    font-size: 0.75rem;
  }

  .modern-footer .emergency-notice {
    padding: 0.7rem;
    border-radius: 10px;
  }

  /* Newsletter Section Mobile */
  .modern-footer .footer-newsletter {
    padding: 30px 0;
  }

  .modern-footer .footer-newsletter h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  .modern-footer .footer-newsletter p {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
  }

  .modern-footer .newsletter-form {
    flex-direction: column;
    gap: 0.8rem;
  }

  .modern-footer .newsletter-form input {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    border-radius: 20px;
  }

  .modern-footer .newsletter-form button {
    padding: 0.7rem 1.5rem;
    font-size: 0.9rem;
    border-radius: 20px;
  }

  /* Footer Bottom Mobile */
  .modern-footer .footer-bottom {
    padding: 25px 0;
  }

  .modern-footer .footer-copyright p {
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 1rem;
  }

  .modern-footer .footer-social {
    justify-content: center;
    gap: 1rem;
  }

  .modern-footer .footer-social a {
    width: 35px;
    height: 35px;
  }

  .modern-footer .footer-social a svg {
    width: 16px;
    height: 16px;
  }

  /* Hide floating elements on very small screens */
  .modern-footer .footer-floating-elements {
    display: none;
  }
}

/* Modern Contact Section Mobile Responsive Styles */
@media (max-width: 991.98px) {
  .modern-contact-section {
    padding: 80px 0;
  }

  .modern-contact-section .contact-header h2 {
    font-size: 2.8rem;
  }

  .modern-contact-section .contact-header p {
    font-size: 1.1rem;
  }

  .modern-contact-section .contact-map-card {
    margin-bottom: 2rem;
  }

  .modern-contact-section .map-container iframe {
    height: 350px;
  }
}

@media (max-width: 767.98px) {
  .modern-contact-section {
    padding: 60px 0;
  }

  .modern-contact-section .contact-header {
    margin-bottom: 3rem;
  }

  .modern-contact-section .contact-header h2 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }

  .modern-contact-section .contact-header p {
    font-size: 1rem;
    line-height: 1.5;
  }

  .modern-contact-section .contact-map-card {
    margin-bottom: 2rem;
    border-radius: 15px;
  }

  .modern-contact-section .map-container iframe {
    height: 300px;
  }

  .modern-contact-section .contact-info-card {
    padding: 2rem;
    border-radius: 15px;
  }

  .modern-contact-section .contact-info-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .modern-contact-section .contact-details {
    gap: 1.2rem;
  }

  .modern-contact-section .contact-item {
    gap: 1rem;
    align-items: flex-start;
  }

  .modern-contact-section .contact-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
  }

  .modern-contact-section .contact-icon svg {
    width: 22px;
    height: 22px;
  }

  .modern-contact-section .contact-text {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .modern-contact-section .contact-actions {
    margin-top: 2rem;
    gap: 0.8rem;
  }

  .modern-contact-section .contact-actions a {
    padding: 0.9rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 10px;
  }

  /* Additional Info Cards Mobile */
  .modern-contact-section .info-card {
    padding: 1.5rem;
    text-align: center;
    border-radius: 15px;
  }

  .modern-contact-section .info-card .card-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 1.2rem;
  }

  .modern-contact-section .info-card .card-icon svg {
    width: 25px;
    height: 25px;
  }

  .modern-contact-section .info-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
  }

  .modern-contact-section .info-card p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1rem;
  }

  .modern-contact-section .info-card a {
    font-size: 0.95rem;
  }
}

@media (max-width: 575.98px) {
  .modern-contact-section {
    padding: 50px 0;
  }

  .modern-contact-section .contact-header {
    margin-bottom: 2.5rem;
  }

  .modern-contact-section .contact-header h2 {
    font-size: 1.8rem;
    margin-bottom: 0.8rem;
  }

  .modern-contact-section .contact-header p {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .modern-contact-section .contact-map-card {
    margin-bottom: 1.5rem;
    border-radius: 12px;
  }

  .modern-contact-section .map-header {
    padding: 1.5rem 1.5rem 0;
  }

  .modern-contact-section .map-header h3 {
    font-size: 1.2rem;
  }

  .modern-contact-section .map-header p {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  .modern-contact-section .map-container iframe {
    height: 250px;
  }

  .modern-contact-section .contact-info-card {
    padding: 1.5rem;
    border-radius: 12px;
  }

  .modern-contact-section .contact-info-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
  }

  .modern-contact-section .contact-details {
    gap: 1rem;
  }

  .modern-contact-section .contact-item {
    gap: 0.8rem;
    margin-bottom: 0.8rem;
  }

  .modern-contact-section .contact-icon {
    width: 40px;
    height: 40px;
  }

  .modern-contact-section .contact-icon svg {
    width: 18px;
    height: 18px;
  }

  .modern-contact-section .contact-text {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  .modern-contact-section .contact-text div:first-child {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }

  .modern-contact-section .contact-actions {
    margin-top: 1.5rem;
    flex-direction: column;
    gap: 0.6rem;
  }

  .modern-contact-section .contact-actions a {
    padding: 0.8rem 1rem;
    font-size: 0.85rem;
    border-radius: 8px;
    text-align: center;
  }

  /* Additional Info Cards Mobile */
  .modern-contact-section .info-card {
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    border-radius: 12px;
  }

  .modern-contact-section .info-card .card-icon {
    width: 45px;
    height: 45px;
    margin: 0 auto 1rem;
  }

  .modern-contact-section .info-card .card-icon svg {
    width: 22px;
    height: 22px;
  }

  .modern-contact-section .info-card h4 {
    font-size: 1rem;
    margin-bottom: 0.7rem;
  }

  .modern-contact-section .info-card p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.8rem;
  }

  .modern-contact-section .info-card a {
    font-size: 0.9rem;
  }

  /* Hide floating elements on very small screens */
  .modern-contact-section .contact-floating-elements {
    display: none;
  }
}

/* Additional Mobile Optimizations */
@media (max-width: 480px) {
  .modern-contact-section .contact-header h2 {
    font-size: 1.6rem;
  }

  .modern-contact-section .contact-info-card h3 {
    font-size: 1.2rem;
  }

  .modern-contact-section .info-card h4 {
    font-size: 0.95rem;
  }

  .modern-contact-section .map-container iframe {
    height: 220px;
  }

  .modern-footer .footer-newsletter h4 {
    font-size: 1.1rem;
  }

  .modern-footer .footer-copyright p {
    font-size: 0.75rem;
  }
}

/* Touch-friendly improvements for mobile */
@media (max-width: 767.98px) {
  .modern-contact-section .contact-actions a,
  .modern-footer .newsletter-form button,
  .modern-footer .footer-social a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modern-contact-section .contact-item,
  .modern-footer .contact-item {
    padding: 0.5rem 0;
  }
}

/* Ensure proper spacing for mobile navigation */
@media (max-width: 991.98px) {
  body.mobile-nav-active .modern-footer,
  body.mobile-nav-active .modern-contact-section {
    padding-top: 60px;
  }
}

/* Improve readability on small screens */
@media (max-width: 575.98px) {
  .modern-contact-section .contact-text,
  .modern-footer .contact-text {
    word-break: break-word;
    hyphens: auto;
  }

  .modern-contact-section .contact-item a,
  .modern-footer .contact-item a {
    word-break: break-all;
  }
}

/* Better button spacing on mobile */
@media (max-width: 767.98px) {
  .modern-contact-section .contact-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .modern-contact-section .contact-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* Newsletter form mobile optimization */
@media (max-width: 575.98px) {
  .modern-footer .newsletter-form input {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .modern-footer .newsletter-form button {
    width: 100%;
  }
}

/* Ensure map responsiveness */
@media (max-width: 767.98px) {
  .modern-contact-section .map-container iframe {
    width: 100%;
    border: 0;
  }
}

/* Footer card hover effects - disable on touch devices */
@media (hover: none) and (pointer: coarse) {
  .modern-footer .footer-card:hover {
    transform: none;
  }

  .modern-contact-section .info-card:hover {
    transform: none;
  }
}

/* Better focus states for accessibility */
@media (max-width: 991.98px) {
  .modern-footer .footer-card a:focus,
  .modern-contact-section .contact-actions a:focus,
  .modern-footer .newsletter-form input:focus,
  .modern-footer .newsletter-form button:focus {
    outline: 2px solid #009381;
    outline-offset: 2px;
  }
}

/* Blog Section Animations and Styles */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.animate-on-scroll.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Blog Styles */
.department-area {
  background: #f9f9fd;
}
.department-slider.owl-carousel .owl-nav {
  display: none;
}
.department-slider.owl-carousel .owl-dots {
  display: block;
  position: absolute;
  bottom: -70px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.department-slider.owl-carousel .owl-dots .owl-dot {
  width: 15px;
  height: 4px;
  background: #c6d0d4;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  margin: 0 7px;
}
.department-slider.owl-carousel .owl-dots .owl-dot.active {
  background: #244cfd;
}
.footer-copyright {
  margin-top: 70px;
}
.footer-copyright .color {
  color: #244cfd;
}
.footer-copyright ul {
  float: right;
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .footer-copyright ul {
    float: left;
    margin-top: 30px;
  }
}
@media (max-width: 575.98px) {
  .footer-copyright ul {
    float: left;
    margin-top: 30px;
  }
}
.footer-copyright ul li {
  display: inline;
  margin-left: 10px;
}
.footer-copyright ul li i {
  display: inline-block;
  padding: 10px;
  color: #777;
  background: #fff;
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.footer-copyright ul li i:hover {
  color: #fff;
  background: linear-gradient(to right, #244cfd, #15e4fd);
}
/* Floating container */
#whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99998;
}

/* Button */
#whatsapp-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
  text-decoration: none;
  transition: all 0.3s ease;
  animation: whatsapp-pulse 2s infinite;
}

#whatsapp-button i {
  color: white;
  font-size: 28px;
}

/* Hidden label by default */
#whatsapp-label {
  position: absolute;
  bottom: 60px;
  right: 0;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
  border-radius: 24px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.2);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
}

/* Small arrow under label */
.whatsapp-arrow {
  position: absolute;
  bottom: -8px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #128c7e;
}

/* Show label on hover */
#whatsapp-float:hover #whatsapp-label {
  opacity: 1;
  transform: translateY(0);
}
#mapBox {
  width: 100%;
  height: 420px;
  overflow: hidden;
}
.success {
  background: #4cd3e3;
}
.success:before {
  background: #2ebccd;
}
.info {
  background: #38a4ff;
}
.info:before {
  background: #298cdf;
}
.radius {
  border-radius: 3px;
}
.circle {
  border-radius: 20px;
}
.arrow span {
  padding-left: 5px;
}
.large {
  line-height: 45px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.small {
  line-height: 25px;
  padding-top: 0px;
  padding-bottom: 0px;
}
b,
sup,
sub,
u,
del {
  color: #f8b600;
}
h1 {
  font-size: 36px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 14px;
}
.circle {
  border-radius: 20px;
}
.list-style {
  width: 14px;
  height: 14px;
}
.section-padding {
  padding: 130px 0;
}
.section-padding4 {
  padding: 130px 0 200px;
}
.section-top {
  margin-bottom: 80px;
}

/* Modern Contact Section Styles */
.modern-contact-section {
  background: #ffffff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.modern-contact-section .contact-header {
  text-align: center;
  margin-bottom: 4rem;
}

.modern-contact-section .contact-header h2 {
  color: #09262e;
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
}

.modern-contact-section .contact-header h2 span {
  color: #009381;
}

.modern-contact-section .contact-header p {
  color: #6c757d;
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.modern-contact-section .contact-map-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 3rem;
  border: 1px solid #f1f3f4;
}

.modern-contact-section .map-header {
  padding: 2rem 2rem 0;
  text-align: center;
}

.modern-contact-section .map-header h3 {
  color: #09262e;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.modern-contact-section .map-header p {
  color: #6c757d;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.modern-contact-section .map-container {
  position: relative;
  height: 400px;
  overflow: hidden;
}

.modern-contact-section .map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.modern-contact-section .contact-info-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  padding: 3rem;
  border: 1px solid #f1f3f4;
}

.modern-contact-section .contact-info-card h3 {
  color: #09262e;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
}

.modern-contact-section .contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.modern-contact-section .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.modern-contact-section .contact-item:hover {
  background: #e9ecef;
  transform: translateX(5px);
}

.modern-contact-section .contact-icon {
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #009381, #00a081);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 25px rgba(0, 147, 129, 0.3);
}

.modern-contact-section .contact-icon svg {
  width: 28px;
  height: 28px;
  fill: white;
}

.modern-contact-section .contact-text {
  flex: 1;
}

.modern-contact-section .contact-text div:first-child {
  color: #09262e;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.modern-contact-section .contact-text div:last-child {
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.4;
}

.modern-contact-section .contact-text a {
  color: #009381;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.modern-contact-section .contact-text a:hover {
  color: #007a6b;
}

.modern-contact-section .contact-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2.5rem;
  justify-content: center;
}

.modern-contact-section .contact-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.modern-contact-section .contact-actions a.secondary {
  background: #ffffff;
  color: #09262e;
  border: 2px solid #09262e;
}

.modern-contact-section .contact-actions a.secondary:hover {
  background: #09262e;
  color: white;
  transform: translateY(-2px);
}

.modern-contact-section .contact-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(90deg);
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
  }
  75% {
    transform: translateY(-30px) rotate(270deg);
  }
}

/* Hover effects */
.modern-contact-section .contact-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

.modern-contact-section .contact-map-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

/* Modern Enhanced About Section Styles */
.about-area {
  background: #ffffff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

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

.geometric-shape {
  position: absolute;
  opacity: 0.08;
  animation: geometricFloat 15s ease-in-out infinite;
}

.geometric-shape.shape-1 {
  top: 10%;
  left: 5%;
  background: linear-gradient(
    135deg,
    rgba(0, 147, 129, 0.1),
    rgba(0, 160, 129, 0.05)
  );
  border-radius: 30px;
  transform: rotate(45deg);
  animation-delay: 0s;
}

.geometric-shape.shape-2 {
  top: 60%;
  right: 8%;
  background: linear-gradient(
    135deg,
    rgba(9, 38, 46, 0.1),
    rgba(0, 160, 129, 0.05)
  );
  border-radius: 50%;
  animation-delay: 5s;
}

.geometric-shape.shape-3 {
  bottom: 15%;
  left: 15%;
  background: linear-gradient(
    135deg,
    rgba(0, 147, 129, 0.08),
    rgba(9, 38, 46, 0.03)
  );
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation-delay: 10s;
}

.geometric-shape.shape-4 {
  bottom: 40%;
  right: 12%;
  background: linear-gradient(
    135deg,
    rgba(0, 147, 129, 0.06),
    rgba(0, 160, 129, 0.04)
  );
  border-radius: 20px;
  transform: rotate(30deg);
  animation-delay: 12s;
}

@keyframes geometricFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.08;
  }
  25% {
    transform: translateY(-20px) rotate(90deg);
    opacity: 0.12;
  }
  50% {
    transform: translateY(-10px) rotate(180deg);
    opacity: 0.06;
  }
  75% {
    transform: translateY(-30px) rotate(270deg);
    opacity: 0.1;
  }
}

/* Reviews Carousel Styles */
.reviews-carousel-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Desktop enhancement */
@media (min-width: 992px) {
  .reviews-carousel-container {
    max-width: 1400px;
    padding: 0 40px;
  }
}

.reviews-carousel-wrapper {
  position: relative;
  border-radius: 25px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95),
    rgba(182, 205, 176, 0.1)
  );
  backdrop-filter: blur(15px);
  box-shadow: 0 25px 50px rgba(0, 147, 129, 0.15);
  padding: 3rem;
  border: 1px solid rgba(0, 147, 129, 0.1);
}

.carousel-review-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 147, 129, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  height: auto;
  width: 100% !important;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Desktop specific improvements for single card display */
@media (min-width: 992px) {
  .carousel-review-card {
    padding: 3rem;
    min-height: 320px;
    width: 100% !important;
  }

  .carousel-review-card .gallery-review-text {
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .carousel-review-card .gallery-reviewer-name {
    font-size: 1.1rem;
  }

  .reviews-carousel-container {
    max-width: 1200px;
  }

  .reviews-carousel-wrapper {
    padding: 4rem;
  }
}

.carousel-review-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #009381, #00a081);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.carousel-review-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: rgba(0, 147, 129, 0.2);
}

.carousel-review-card:hover::before {
  opacity: 1;
}

.gallery-review-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 18px;
}

.gallery-reviewer-info {
  flex: 1;
}

.gallery-reviewer-avatar {
  border: 3px solid #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.gallery-reviewer-details {
  margin-top: 12px;
}

.gallery-reviewer-name {
  display: block;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.gallery-review-rating {
  margin-top: 8px;
}

.gallery-review-text {
  line-height: 1.6;
  color: #495057;
  font-size: 0.95rem;
  position: relative;
}

.gallery-review-header {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 18px;
}

.gallery-reviewer-info {
  flex: 1;
}

.gallery-reviewer-avatar {
  border: 3px solid #f8f9fa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.gallery-reviewer-details {
  margin-top: 12px;
}

.gallery-reviewer-name {
  display: block;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.gallery-review-rating {
  margin-top: 8px;
}

.gallery-review-text {
  line-height: 1.6;
  color: #495057;
  font-size: 0.95rem;
  position: relative;
}

/* Mobile Responsive Gallery */
@media (max-width: 768px) {

  .gallery-review-header {
    gap: 12px;
    margin-bottom: 15px;
  }

  .gallery-reviewer-avatar {
    width: 50px !important;
    height: 50px !important;
    font-size: 1rem !important;
  }

  .gallery-reviewer-name {
    font-size: 1rem;
  }

  .gallery-review-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {

  .gallery-review-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .gallery-reviewer-info {
    text-align: center;
  }

  .gallery-reviewer-details {
    margin-top: 8px;
  }
}

/* Tablet adjustments */

/* Additional Desktop Enhancements for Reviews Carousel */
@media (min-width: 992px) {
  .gallery-review-header {
    margin-bottom: 24px;
  }

  .gallery-reviewer-info {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .gallery-reviewer-avatar {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.1rem !important;
  }

  .gallery-reviewer-name {
    font-size: 1.1rem !important;
  }

  .gallery-review-text {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }

  .reviews-carousel-wrapper {
    padding: 4rem;
  }
}

@media (min-width: 1200px) {
  .reviews-carousel-wrapper {
    padding: 4rem 3rem;
  }

  .carousel-review-card {
    min-height: 320px;
    padding: 3rem;
    width: 100% !important;
  }

  .carousel-review-card .gallery-review-text {
    font-size: 1.1rem;
    line-height: 1.8;
  }
}

/* Contact Info Items Styling for Accessibility */

/* Accessibility Improvements */
/* Enhanced focus indicators for better keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 3px solid #009381;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip to main content link for screen readers */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #009381;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 9999;
  border-radius: 4px;
  font-weight: 600;
}

.skip-to-main:focus {
  top: 6px;
  outline: 3px solid #ffffff;
}

/* Improved button hover states for accessibility */
.btn-luxury:focus,
.modern-cta-btn:focus,
.contact-action-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 147, 129, 0.4);
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  
  .social-links a {
    border: 2px solid currentColor;
    padding: 4px 8px;
    border-radius: 4px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}