:root{
  --brand:#e5322d;
  --accent:#0f6bba;
  --muted:#6c757d;
  --bg:#f8f9fa;
  --card:#ffffff;
  --radius:10px;
  --max-width:1200px;
  --ff-sans: Inter, system-ui, -apple-system, "Segoe UI", "Roboto","Popins", "Helvetica Neue", Arial, sans-serif;
  /* --ff-sans: "Roboto", sans-serif; */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:var(--ff-sans);background:var(--bg);color:#222;-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
.container{max-width:var(--max-width);padding:1rem;margin:0 auto}

/* Navbar */
.navbar-brand{font-weight:700;color:var(--brand)}
.nav-link{color:#444;font-weight:500;}
.nav-link.active{color: var(--brand)!important;font-size:large!important;font-weight:800;transition:color .3s ease; };
/*logo*/

.logo-Size{ width: 156px!important; height: auto; }

/* Hero */
.hero{height:auto}
.hero-slide {
  min-height: 520px; 
  background-size: cover; 
  background-position: center; 
  position: relative; 
  display: block; 
}

.hero .carousel-overlay{
  position: absolute; /* Ensure it covers the entire slide */
  top: 0; /* Align to the top */
  left: 0; /* Align to the left */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background: rgba(0,0,0,0.70); /*linear-gradient(90deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.12) 60%);*/
  display: block; 
}
.hero-content{ 
  /* max-width:680px; */
   padding:2rem; margin-left:1rem; border-radius:8px; }
.hero-content h1{color:#fff; font-size:2rem; margin-bottom:.5rem}
.hero-content p.lead{color:rgba(255,255,255,0.95); font-size:1.05rem}

/* Cards and sections */
.card{ border-radius:var(--radius); border:1px solid rgba(0,0,0,0.04); background:var(--card); box-shadow:0 6px 18px rgba(0,0,0,0.04) }
.lead{color:var(--muted)}

/* Testimonials */
.site-footer{background:var(--brand); border-top:1px solid rgba(0,0,0,0.06);
  /* padding:1rem 0; */
  font-size:.9rem}

.site-footer .carousel-overlay{background: rgba(0,0,0,0.25);}
.site-footer ul li a{text-decoration: none;}
.bg-white{background:#fff}

/* Buttons */
.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-outline-light{color:#fff;border-color:rgba(255,255,255,0.25)}
.btn-outline-light:hover{background:rgba(255,255,255,0.06)}

/* About page additions */
.about-hero{overflow:hidden; position:relative; }
.about-hero-overlay{ background:linear-gradient(180deg, rgba(229,50,45,0.8), rgba(229,50,45,0.30)); padding:3rem; }
.team-grid .team-card{ background:rgba(255,255,255,0.98); border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.06); }
.team-photo{ width:110px; height:110px; object-fit:cover; border:4px solid rgba(255,255,255,0.15); }
@media (max-width: 768px) {
  .about-hero-overlay{ padding:1.25rem; }
  .team-photo{ width:88px; height:88px; }
}
/* end additions */

/* Responsive */
@media (max-width: 991px){
  .hero-slide{ min-height:360px }
  .hero-content{ padding:1rem; margin-left:.75rem }
  .hero-content h1{font-size:1.4rem}
}

/* Contact page / map / form adjustments */
.mt90 { margin-top: 90px; } /* keep content below fixed header */

.contact-card { background: linear-gradient(180deg, #ffffff, #fbfbfb); border-radius: 10px; box-shadow: 0 8px 24px rgba(12,18,25,0.06); }
.contact-card h5{ margin-bottom:.5rem; color:var(--brand) }

/* Form */
.card .form-label { font-weight: 600; color: #2b2b2b; }
.was-validated .form-control:invalid { border-color: #dc3545; box-shadow: none; }
.was-validated .form-control:valid { border-color: #198754; box-shadow: none; }

/* Map */
.map-wrap { border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 20px rgba(0,0,0,0.04); }
.map-wrap iframe { width:100%; height:320px; border:0; display:block; }

/* Small screens */
@media (max-width: 767px) {
  .map-wrap iframe { height:220px; }
  .contact-card { text-align: left; }
}

/* Footer fine-tuning (if needed) */
/* .site-footer { padding-top: 2rem; padding-bottom: 1.25rem; } */

/* Accessibility helpers */
[aria-live] { min-height: 1.2em; display:inline-block; }

/* Contact page / map / form adjustments */

/* Brands section */
.brands-section { background: #fff; }
.brands-section h2 { font-weight: 700; }
.brands-section .lead { color: var(--muted); }

/* responsive logo grid */
.brands-grid { gap: 1.5rem; }
.brand-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(25% - 1.5rem); /* default 4 per row */
  max-width: calc(25% - 1.5rem);
  padding: .75rem;
  border-radius: 8px;
  /* transition: transform .18s ease, filter .25s ease, opacity .25s ease; */
  text-decoration: none;
  outline: none;
}
.brand-item img {
  max-height: 156px;
  width: auto;
  display: block;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(11,26,43,0.12); outline: none; 
  object-fit: contain;
}



/* breakpoints */
@media (max-width: 1199px) {
  .brand-item { flex: 0 0 calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); }
}
@media (max-width: 767px) {
  .brand-item { flex: 0 0 calc(50% - .75rem); max-width: calc(50% - .75rem); padding:.5rem; }
  .brand-item img { max-height:48px; }
  .brands-section .lead { font-size: .96rem; }
}

/* optional marquee (small screens) - uncomment HTML to use */
.brands-marquee { overflow: hidden; }
.marquee-track {
  display:flex;
  gap:1.25rem;
  align-items:center;
  animation: marquee 18s linear infinite;
}
.marquee-item img { max-height:44px; filter:grayscale(100%) opacity(.75); }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* duplicate track recommended for seamless loop */
}

/* Accessibility: ensure logos have enough contrast on hover */
.brand-item img[alt=""] { visibility: hidden; } /* avoid decorative empty alt; prefer descriptive alts */

/* Aid Model Cards Section */
#aidModel { background: #f9fafb; }

.aid-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.aid-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.aid-card-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #f0f4f8 0%, #d9e8f5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.aid-card-image img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.aid-card-body {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.aid-card-title {
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.aid-card-text {
  color: #6c757d;
  line-height: 1.5;
  flex-grow: 1;
}

.aid-features {
  padding: 0.5rem 0;
}

.aid-features li {
  margin-bottom: 0.25rem;
  color: #495057;
}

.aid-features li::before {
  content: "✓ ";
  color: var(--brand);
  font-weight: 600;
  margin-right: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .aid-card-image { height: 160px; }
  .aid-card-body { padding: 1rem; }
  .aid-card-title { font-size: 0.95rem; }
}

@media (max-width: 575px) {
  .aid-card-image { height: 140px; }
  .aid-card-body { padding: 0.9rem; }
  .aid-card-title { font-size: 0.9rem; }
  .aid-card-text { font-size: 0.85rem; }
  .aid-features li { font-size: 0.8rem; }
}

/* Hearing Solutions Section */
#hearing-solutions { background: #ffffff; }
/* #hearing-solutions h2 { font-weight: 700; color: #2b2b2b; } */

.solution-card {
  background: #f9fafb;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.solution-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #e7f5ff 0%, #bae6fd 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--brand);
  flex-shrink: 0;
}

.solution-title {
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.solution-text {
  color: #6c757d;
  line-height: 1.5;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.solution-features {
  padding: 0.75rem 0;
  margin: 0;
}

.solution-features li {
  margin-bottom: 0.35rem;
  color: #495057;
  font-size: 0.9rem;
}

/* Feature lists */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  margin-bottom: 1rem;
  padding-left: 0;
  line-height: 1.6;
  color: #495057;
}

.feature-list li strong {
  color: var(--brand);
  display: block;
  margin-bottom: 0.25rem;
}

.feature-list ol {
  padding-left: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .solution-card { padding: 1.5rem 1.25rem; }
  .solution-icon { width: 56px; height: 56px; }
  .solution-title { font-size: 0.95rem; }
  .solution-text { font-size: 0.9rem; }
}

@media (max-width: 575px) {
  .solution-card { padding: 1.25rem 1rem; }
  .solution-icon { width: 48px; height: 48px; margin-bottom: 0.75rem; }
  .solution-icon svg { width: 32px; height: 32px; }
  .solution-title { font-size: 0.9rem; }
  .solution-text { font-size: 0.85rem; margin-bottom: 0.75rem; }
  .solution-features li { font-size: 0.8rem; margin-bottom: 0.25rem; }
}

/* index.html hearing solition section style will modified and deleted. */

/* About-hero style with layered device card */
.about-hero-2 { background: #fff; }
.text-brand { color: var(--brand, #d9534f); }

/* Card wrapper */
.hero-image-card {
  width: 100%;
  max-width: 720px;
  height: 380px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 18px;
  /* position: relative; */
  overflow: visible; /* allow overflow for layered images */
  display: block;
}

/* soft rounded panel that acts as card background */
.hero-card-bg {
  /* position: absolute;
  right: 0;
  top: 0; */
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  box-shadow: 0 18px 40px rgba(11,26,43,0.08);
  border: 1px solid rgba(11,26,43,0.04);
  transform: translateX(6%);
  z-index: 1;
}


/* Device images (layered) */
.hero-device {
  z-index: 4;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
  filter: drop-shadow(0 10px 24px rgba(11,26,43,0.10));
  border-radius: 8px;
  background: transparent;
  object-fit: cover;
}

/* front device (center / largest) */
.device-front {
  width: 46%;
  transform: translateZ(0) scale(1);
}

/* left (slightly behind) */
.device-left {
  width: 30%;
  transform: rotate(-6deg) translateZ(0);
  opacity: 0.95;
}

/* right (slightly behind) */
.device-right {
  width: 30%;
  transform: rotate(6deg) translateZ(0);
  opacity: 0.95;
}

/* hover interaction - subtle lift */
.hero-image-card:hover .hero-device { transform: translateY(-6px) scale(1.02); }
.hero-image-card:hover .device-left { transform: rotate(-4deg) translateY(-4px) scale(1.02); }
.hero-image-card:hover .device-right { transform: rotate(4deg) translateY(-4px) scale(1.02); }

/* responsive */

@media (max-width: 991px) {
  .hero-image-card { height: 320px; border-radius:14px; }
  .device-front { width: 52%;  }
  .device-left { width: 34%; left: 4%; top: 36%; }
  .device-right { width: 34%; right: 1%; top: 8%; }
  .hero-wave { top: 22%; height: 48%; stroke-width:5; opacity:0.12; }
}

@media (max-width: 575px) {
  .hero-image-card { height: 260px; max-width: 100%; transform: none; }
  .device-front { width: 60%; }
  .device-left, .device-right { display: none; } /* simplify on small screens */
  .hero-wave { display: none; }
  .about-hero-2 .display-5 { font-size: 1.6rem; }
  .about-hero-2 .lead { font-size: 0.98rem; }
}

/* accessibility */
.hero-image-card img { display:block; width:100%; height:auto; }

/* utility */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; border:0; padding:0; margin:-1px; }



/* append the following at end of file (service page styles) */

.services-grid { margin-top: .5rem; }

.service-card {
  background: linear-gradient(180deg,#fff,#fbfbfd);
  border: 1px solid rgba(11,26,43,0.04);
  border-radius: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform .22s ease, box-shadow .22s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(11,26,43,0.08);
}

.service-icon {
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  border-radius:8px;
  background: rgba(229,50,45,0.06);
  color: var(--brand);
}

.service-card h5 { margin-top: .4rem; margin-bottom:.35rem; font-weight:700; color:#222; }
.service-card p { margin:0; color:var(--muted); flex-grow:1; }

/* Gallery 3x3 Grid Section */
.gallery-grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.gallery-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
  box-shadow: 0 8px 22px rgba(11, 26, 43, 0.06);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gallery-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(11, 26, 43, 0.12);
}

.gallery-card:focus-within {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  box-shadow: 0 16px 40px rgba(11, 26, 43, 0.12);
}

/* Image wrapper */
.gallery-image-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, #e7f5ff 0%, #bae6fd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.gallery-card:hover .gallery-img,
.gallery-card:focus-within .gallery-img {
  transform: scale(1.05);
}

/* Caption below image */
.gallery-caption {
  padding: 1rem;
  background: transparent;
  text-align: left;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.caption-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand);
  margin-bottom: 0.25rem;
}

.caption-sub {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}
#lightboxImage{
 padding: 0 .5rem  0!important
}

/* Gallery link (stretched over entire card) */
.gallery-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-decoration: none;
}

/* Entrance animation */
@keyframes fadeUpGallery {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.gallery-card { animation: fadeUpGallery 420ms ease both; }
.gallery-card:nth-child(2) { animation-delay: 40ms; }
.gallery-card:nth-child(3) { animation-delay: 80ms; }
.gallery-card:nth-child(4) { animation-delay: 120ms; }
.gallery-card:nth-child(5) { animation-delay: 160ms; }
.gallery-card:nth-child(6) { animation-delay: 200ms; }
.gallery-card:nth-child(7) { animation-delay: 240ms; }
.gallery-card:nth-child(8) { animation-delay: 280ms; }
.gallery-card:nth-child(9) { animation-delay: 320ms; }

/* Lightbox caption */
.lightbox-caption {
  /* position: absolute; */
  /* left: 1.5rem;
  right: 1.5rem; */
  /* bottom: 0.75rem; */
  text-align: center;
  font-size: 1rem;
}

/* Responsive breakpoints */
@media (max-width: 1199px) {
  .gallery-grid-3x3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  /* .gallery-image-wrapper { height: 220px; } */
}

@media (max-width: 991px) {
  .gallery-grid-3x3 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  /* .gallery-image-wrapper { height: 200px; } */
  .gallery-caption { padding: 0.9rem; }
}

@media (max-width: 575px) {
  .gallery-grid-3x3 { grid-template-columns: 1fr; gap: 0.75rem; }
  /* .gallery-image-wrapper { height: 240px; } */
  .caption-title { font-size: 0.9rem; }
  .caption-sub { font-size: 0.8rem; }
}

/* Accessibility */
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}