/* ── Golden Rays — Responsive Overrides ──────────────────────────────────── */

/* ── Utilities ───────────────────────────────────────────────────────────── */
img { max-width: 100%; height: auto; }
table { width: 100%; }

/* ── max-width: 1199px ───────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .container { padding-left: 20px; padding-right: 20px; }
}

/* ── max-width: 991px  (tablet) ──────────────────────────────────────────── */
@media (max-width: 991px) {

  /* Breadcrumb: nav is relative on mobile, so sticky is unnecessary */
  .gr-breadcrumb {
    position: relative;
    top: auto;
  }

  /* Header default-top compact */
  .header_default .default-top {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
  }
  .header_s a.navbar-brand {
    font-size: 22px;
    padding: 8px 0;
  }
  .header_s a.phone-call {
    font-size: 13px;
    padding: 7px 12px;
    margin-top: 0;
    border-radius: 6px;
  }

  /* Hamburger — reduce oversized margin */
  .ownavigation .navbar-toggle {
    margin: 12px 0 !important;
    padding: 7px 9px !important;
  }

  /* Mobile nav links: ensure readable on dark bg */
  .ownavigation .navbar-nav li a,
  .ownavigation .navbar-nav li .dropdown-menu > li > a {
    color: #d4d4d4 !important;
  }
  .ownavigation .navbar-nav li a:hover,
  .ownavigation .navbar-nav li .dropdown-menu > li > a:hover {
    color: #d4a83c !important;
  }

  /* Dropdown caret alignment on mobile */
  .ownavigation .navbar-nav > li.dropdown > a .caret { margin-left: 4px; }

  /* Section vertical padding */
  [class*="-section"],
  .contact-us,
  .about-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  /* Section headers */
  .section-header h2 { font-size: 26px; }
  .section-header h3 { font-size: 22px; }
  .section-header p   { font-size: 14px; }

  /* Welcome section image: center on tablet */
  .welcome-section .col-sm-6:first-child img {
    margin: 0 auto;
    display: block;
    max-width: 80%;
  }

  /* Footer columns stack gracefully */
  .footer-main .col-md-3,
  .footer-main .col-sm-6 { margin-bottom: 30px; }
}

/* ── max-width: 767px  (phone landscape + up) ────────────────────────────── */
@media (max-width: 767px) {

  /* Typography scale */
  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
  h4 { font-size: 17px !important; }
  h5 { font-size: 15px !important; }
  p  { font-size: 14px; line-height: 1.65; }

  /* Sections tighter */
  [class*="-section"],
  .contact-us,
  .about-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Default-top: stack logo above phone link */
  .header_default .default-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 15px;
  }

  /* Inline section padding overrides */
  [style*="padding:70px"] { padding: 40px 15px !important; }
  [style*="padding:60px"] { padding: 35px 15px !important; }

  /* Tables scroll on small screens */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Forms full-width */
  .clinic-form .form-control,
  .appoinment-form .form-control,
  .contact-us .form-control { width: 100% !important; }

  /* Button full-width on phones */
  .welcome-section .btn,
  .contact-us .btn { width: 100%; max-width: 320px; margin: 5px auto; display: block; }

  /* Gallery thumbnails */
  .gallery-section .col-sm-4,
  .gallery-section .col-sm-3 { margin-bottom: 15px; }

  /* Team grid */
  .team-section .col-sm-6,
  .team-section .col-md-3 { margin-bottom: 30px; }

  /* Footer padding */
  .footer-main { padding-top: 60px; padding-bottom: 60px; }
  .footer-bottom { padding: 15px 0; }
  .footer-bottom p { font-size: 12px; text-align: center; }

  /* Breadcrumb font */
  .gr-breadcrumb .breadcrumb { font-size: 12px; padding: 7px 0; }
}

/* ── max-width: 639px  (small phone) ─────────────────────────────────────── */
@media (max-width: 639px) {

  /* Make all 3-col and 2-col grids single-column */
  .col-xs-6 { width: 100% !important; float: none !important; }
  .col-xs-4 { width: 100% !important; float: none !important; }
  .col-xs-3 { width: 50%  !important; }

  /* Override back for confirmed 2-up layouts (thumbnails etc.) */
  .gallery-section .col-xs-6 { width: 50% !important; float: left !important; }

  /* Typography tighter still */
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }

  /* Navbar toggle even more compact */
  .ownavigation .navbar-toggle { margin: 8px 0 !important; }

  /* Section header decorators shrink */
  .section-header h3::before,
  .section-header h3::after { max-width: 40px; }

  /* Phone-call button in header */
  .header_s a.phone-call { font-size: 12px; padding: 6px 10px; }

  /* Offer/Solutions boxes */
  .offer-section .col-sm-4,
  .offer-section .col-md-4 { margin-bottom: 20px; }
}

/* ── max-width: 479px  (extra-small phone) ───────────────────────────────── */
@media (max-width: 479px) {

  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
  p  { font-size: 13px; }

  /* Sections very tight */
  [class*="-section"],
  .contact-us,
  .about-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  [style*="padding:70px"] { padding: 28px 12px !important; }
  [style*="padding:60px"] { padding: 24px 12px !important; }

  /* Container gutter reduce */
  .container { padding-left: 12px; padding-right: 12px; }
  .row { margin-left: -10px; margin-right: -10px; }
  [class*="col-"] { padding-left: 10px; padding-right: 10px; }

  /* Breadcrumb */
  .gr-breadcrumb .breadcrumb { font-size: 11px; padding: 6px 0; }

  /* Demo highlight button in nav */
  .ownavigation .navbar-nav li a.demo-highlight {
    display: block !important;
    text-align: center;
    margin: 6px 0 !important;
  }

  /* Footer widget spacing */
  .footer-main { padding-top: 40px; padding-bottom: 40px; }

  /* Appointment form */
  .appoinment-form .input-group [class*="col-"] { width: 100% !important; margin-bottom: 12px; }
}

/* ── max-width: 360px  (tiny phones) ─────────────────────────────────────── */
@media (max-width: 360px) {
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
  .container { padding-left: 10px; padding-right: 10px; }
  .header_s a.phone-call { display: none; }
}