/* Chester Family Dental - Stylesheet matching Nexus Framework layout */
/* Color Scheme: base1=#C6C6C6, base2=#333, c12=#3279E3, c22=#BFAD73, c32=#022C47 */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Raleway:wght@400;500;600;700&display=swap');

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ===== BASE (matches Nexus framework.css defaults) ===== */
body {
  font-family: 'Raleway', Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.625;
  color: #333;
  background: #C6C6C6;
  /* Default body background - overridden per page by body classes */
  background-image: url('images/bg-body.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
a { color: inherit; text-decoration: none; opacity: 1; transition: opacity 0.1s linear; }
a:hover { opacity: 0.8; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Josefin Sans', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0.5em;
}
h1 { font-size: 30px; }
h2 { font-size: 27px; }
h3 { font-size: 24px; }
h4 { font-size: 21px; }
h5 { font-size: 18px; }
h6 { font-size: 15px; }
p { margin-bottom: 1.625em; font-size: 15px; line-height: 1.625em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 16px 25px; }
ul { list-style: square; }
ul li, ol li { margin-top: 10px; line-height: 1.5em; }
ul li:first-child, ol li:first-child { margin-top: 0; }
strong, b { font-weight: 700; }
blockquote { display: inline-block; padding: 8px 15px; border-left: 10px rgba(0,0,0,0.1) solid; margin-bottom: 20px; background: rgba(0,0,0,0.05); }

/* ===== WIDESCREEN CONTAINER (matches Nexus nxs-widescreen) ===== */
/* The live site uses 100% width for header/nav/footer wrappers,
   with inner containers at 924px (960px - 36px border gutter).
   Content area uses 960px total. */

/* ===== HEADER (base1 #C6C6C6 background, full-width) ===== */
.site-header {
  background: #C6C6C6;
  padding: 7.5px 0;
  width: 100%;
}
.header-inner {
  max-width: 924px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}
.header-logo, .logo { display: flex; align-items: center; flex: 0 0 50%; }
.header-logo img, .logo img { max-height: 90px; width: auto; margin-right: 15px; float: left; }
.header-logo a, .logo a { display: block; }
.header-spacer { flex: 0 0 25%; }
.header-contact, .header-info {
  flex: 0 0 25%;
  text-align: center;
  color: #022C47;
  font-size: 18px;
}
.header-contact a, .header-info a { color: #022C47; }
.header-contact .btn, .header-info .btn { font-size: 21px; padding: 0 15px; }

/* ===== BUTTONS (matching Nexus nxs-button) ===== */
.btn, .btn-primary, a.btn-primary {
  display: inline-block;
  padding: 0 10px;
  border-radius: 3px;
  border: 1px solid transparent;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  line-height: 2em;
  transition: opacity 0.1s linear;
}
.btn:hover, .btn-primary:hover { opacity: 0.8; text-decoration: none; }
.btn-gold, .btn-primary { background: #BFAD73; color: #C6C6C6; }
.btn-blue { background: #3279E3; color: #C6C6C6; }
.btn-navy { background: #022C47; color: #C6C6C6; }
/* Scale variants matching Nexus button-scale */
.btn-scale-1-2 { font-size: 16.8px; padding: 0 12px; }
.btn-scale-1-4 { font-size: 19.6px; padding: 0 14px; }
.btn-scale-1-5 { font-size: 21px; padding: 0 15px; }
.btn-scale-1-6 { font-size: 22.4px; padding: 0 16px; }
.btn-scale-1-8 { font-size: 25.2px; padding: 0 18px; }

/* ===== NAVIGATION (c12 #3279E3 background, full-width) ===== */
.site-nav { background: #3279E3; width: 100%; }
.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  max-width: 924px;
  margin: 0 auto;
}
.site-nav > ul > li { position: relative; }
.site-nav a {
  display: block;
  color: #C6C6C6;
  padding: 0 1.2125em;
  font-size: 16px;
  font-weight: 500;
  line-height: 45px;
  white-space: nowrap;
  transition: all 0.25s ease 0.1s;
}
.site-nav a:hover,
.site-nav .active > a,
.site-nav a.active { background: #022C47; color: #C6C6C6; opacity: 1; }
/* Dropdown menus */
.site-nav .has-submenu > a::after { content: ' \25BE'; font-size: 10px; }
.site-nav .submenu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #3279E3;
  min-width: 230px;
  z-index: 100;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  list-style: none;
  padding: 0;
  transition: all 0.25s ease 0.1s;
}
.site-nav .has-submenu:hover .submenu { visibility: visible; opacity: 1; }
.site-nav .submenu li a {
  padding: 0 20px;
  font-size: 14px;
  line-height: 45px;
}
.site-nav .submenu a:hover { background: #022C47; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: #3279E3;
  color: #C6C6C6;
  border: none;
  width: 100%;
  padding: 0;
  font-size: 20px;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  line-height: 53px;
}

/* ===== PAGE TITLE BAR (inherits base1 #C6C6C6) ===== */
.page-title-bar {
  max-width: 960px;
  margin: 0 auto;
  background: #C6C6C6;
  text-align: center;
  padding: 15px 36px;
}
.page-title-bar h1 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  color: #333;
  margin: 0;
  font-size: 30px;
}

/* ===== CONTENT AREA (960px, base1 bg, 652/308 split for sidebar pages) ===== */
.site-content {
  background: #C6C6C6;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 15px;
}
.site-content .container, .content-wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
  background: #C6C6C6;
}
/* Main content column - matches Nexus nxs-main (widescreen=616px) */
.content-area, .main-content {
  flex: 0 0 652px;
  width: 652px;
  min-width: 0;
  padding: 0 36px 25px;
}
.full-width .content-area, .full-width .main-content {
  flex: 0 0 100%;
  width: 100%;
  padding: 0 36px 25px;
}
/* Sidebar column - matches Nexus nxs-sidebar1 */
.has-sidebar .content-area, .has-sidebar .main-content {
  flex: 0 0 652px;
  width: 652px;
}
.has-sidebar .sidebar {
  flex: 0 0 308px;
  width: 308px;
  padding: 0 0 25px;
}

/* ===== SIDEBAR WIDGETS ===== */
/* Stack items have 30px margin bottom like Nexus */
.sidebar-box { margin-bottom: 30px; position: relative; }

/* Callout box - background image with dark overlay */
.sidebar-callout {
  background: url('images/sidebar-bg.jpg') no-repeat center center;
  background-size: cover;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  border-radius: 0;
  padding: 0;
}
.sidebar-callout-overlay {
  background: rgba(51,51,51,0.2);
  padding: 22.5px;
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sidebar-callout h2, .sidebar-callout-text {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 27px;
  font-weight: 400;
  color: #C6C6C6;
  line-height: 1.3;
  margin-bottom: 15px;
  text-align: center;
}
.sidebar-callout .btn { margin-top: 10px; }

/* Office Hours table - matches Nexus nxs-table */
.sidebar-hours { padding: 0; }
.sidebar-hours h2, .sidebar-hours h3 {
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 10px;
  padding: 0 10px;
}
.sidebar-box table {
  width: 100%;
  border: 1px solid #dfdfdf;
  background: #f9f9f9;
  border-collapse: separate;
  font-size: 15px;
}
.sidebar-box table th {
  padding: 0 15px;
  line-height: 36px;
  text-align: left;
  font-weight: bold;
  background: linear-gradient(#f9f9f9, #ececec);
  color: #333;
  text-shadow: rgba(255,255,255,0.8) 0 1px 0;
}
.sidebar-box table td {
  padding: 8px 15px;
  line-height: 1.5em;
  border-top: 1px solid #fff;
  color: #000;
}
.sidebar-box table tr:nth-child(even) { background: #f6f6f6; }

/* CTA box - dark navy background */
.sidebar-cta {
  background: #022C47;
  color: #C6C6C6;
  text-align: center;
  padding: 7.5px;
}
.sidebar-cta h2, .sidebar-cta h3 { color: #C6C6C6; }
.sidebar-cta h2 { font-size: 21px; font-weight: 400; }
.sidebar-cta h3 { font-size: 18px; font-weight: 400; }
.sidebar-cta .btn-blue { margin-top: 10px; }
.sidebar-cta p { color: #C6C6C6; }

/* Our Services list - matches Nexus nxs-blog-minimal */
.sidebar-services { padding: 0 10px; }
.sidebar-services h2, .sidebar-services h3 {
  font-size: 27px;
  font-weight: 400;
  text-align: left;
  margin-bottom: 10px;
}
.sidebar-services ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-services li {
  padding: 8px 0 8px 20px;
  border-bottom: none;
  margin-top: 0;
  line-height: 1.625em;
  font-size: 15px;
}
.sidebar-services a { color: #022C47; font-weight: 500; }

/* Sidebar search box (dark navy) */
.sidebar-search {
  background: #022C47;
  padding: 7.5px;
  display: flex;
  gap: 5px;
}
.sidebar-search input[type="text"] {
  flex: 1;
  height: 30px;
  line-height: 30px;
  text-indent: 10px;
  border: 1px solid #ccc;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
}
.sidebar-search button {
  background: #3279E3;
  color: #C6C6C6;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
  line-height: 30px;
}

/* LendingClub sidebar banner */
.sidebar-lending { padding: 0; }
.sidebar-lending img { max-width: 100%; }

/* ===== SERVICE BUTTONS GRID ===== */
.service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.service-btn {
  display: inline-block;
  padding: 0 10px;
  border-radius: 3px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  line-height: 2em;
  text-decoration: none;
  transition: opacity 0.1s linear;
}
.service-btn:hover { opacity: 0.8; text-decoration: none; }
.service-btn.gold, .service-btn { background: #BFAD73; color: #C6C6C6; }
.service-btn.blue { background: #3279E3; color: #C6C6C6; }
.service-btn.navy { background: #022C47; color: #C6C6C6; }

/* ===== IMAGE + TEXT ROWS ===== */
.content-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  align-items: flex-start;
}
.content-row .col-img { flex: 0 0 45%; max-width: 45%; }
.content-row .col-text { flex: 1; min-width: 0; }
.nxs-shadow, .content-row img { box-shadow: 0 2px 6px rgba(10,10,10,0.6); }
.nxs-stretch, .img-stretch { width: 100%; height: auto; }

/* ===== CONTENT TEXT (justify like live site) ===== */
.main-content p, .content-area p { text-align: justify; }
/* Nexus custom CSS class .test1 for paragraph padding */
.test1 { padding-left: 10px; padding-right: 10px; }

/* ===== STAFF HEADING WITH BLUE TOP BORDER ===== */
.staff-heading-wrap {
  border-top: 1px solid #3279E3;
  padding: 10px 0;
  margin-bottom: 15px;
  text-align: center;
}
.staff-heading-wrap h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  text-align: center;
}
/* Subsequent staff headings use lighter blue border */
.staff-heading-wrap.alt { border-top-color: rgba(50,121,227,0.7); }

/* ===== STAFF PHOTO FLOAT (matching live nxs-icon-right) ===== */
.staff-photo-right {
  float: right;
  margin: 0 0 10px 20px;
  max-width: 100%;
  border: 1px solid #C6C6C6;
  box-shadow: 0 2px 6px rgba(10,10,10,0.6);
}

/* ===== CALLOUT BOX ===== */
.callout-box {
  padding: 10px 0;
  margin-bottom: 20px;
}
.callout-box h2 { margin: 0; font-size: 30px; }

/* ===== REVIEWS ===== */
.review-badge { text-align: center; margin-bottom: 15px; }
.review-badge img { display: inline-block; max-height: 50px; }
.review-card {
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
}
.review-card:last-child { border-bottom: none; }
.review-text, .review-card .review-quote {
  font-style: italic;
  font-weight: 600;
  color: #022C47;
  margin-bottom: 5px;
}
.review-author, .review-card .review-author { font-size: 13px; color: #666; }
.review-divider { text-align: center; padding: 20px 0; }
.review-divider img, .gold-divider {
  display: inline-block;
  max-width: 300px;
  margin: 0 auto;
  height: auto;
}

/* ===== FAQ ===== */
.faq-item { margin-bottom: 20px; }
.faq-item h3 { color: #022C47; margin-bottom: 5px; font-size: 18px; font-weight: 700; }
.faq-section { margin-bottom: 30px; }
.text-center { text-align: center; }

/* ===== GALLERY ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
  margin-bottom: 25px;
  padding: 0 36px;
}
.gallery-grid img { box-shadow: 0 2px 6px rgba(10,10,10,0.6); width: 100%; border: 3px solid transparent; }

/* ===== CONTACT FORM (matches Nexus nxs-form) ===== */
.contact-form { max-width: 100%; }
.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.625em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: 1px;
  border: 1px solid #ccc;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
  text-indent: 10px;
}
.contact-form textarea { height: 200px; min-height: 200px; resize: vertical; line-height: 1.625em; text-indent: 0; padding: 1%; width: 98%; }
.contact-form button, .contact-form input[type="submit"] {
  padding: 0 14px;
  background: #BFAD73;
  color: #C6C6C6;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 19.6px;
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
  cursor: pointer;
  transition: opacity 0.1s linear;
  line-height: 2em;
  height: auto;
}
.contact-form button:hover { opacity: 0.8; }
.form-group { margin-bottom: 10px; }

/* ===== FOOTER (base2 #333 at 50% alpha + blue links, full-width) ===== */
.site-footer {
  background-color: rgba(51,51,51,0.5);
  color: #C6C6C6;
  padding: 22.5px 0 0;
  width: 100%;
}
.footer-inner, .footer-columns {
  max-width: 924px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
}
.footer-col {
  flex: 1;
  min-width: 200px;
  padding: 0 18px;
  text-align: center;
}
.footer-col h2, .footer-col h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  color: #C6C6C6;
  margin-bottom: 10px;
  font-size: 27px;
  text-align: center;
}
.footer-col p { color: #C6C6C6; font-size: 15px; text-align: center; }
.footer-col a { color: #3279E3; }
.footer-col a:hover { opacity: 0.8; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 5px; }
/* Footer social column links should be light, not blue */
.footer-col.footer-social a { color: #C6C6C6; }
/* Footer info column links should be light */
.footer-col.footer-info a { color: #C6C6C6; }
.footer-bottom {
  max-width: 924px;
  margin: 0 auto;
  text-align: center;
  padding: 5px 0 30px;
  font-size: 9px;
  color: #C6C6C6;
}
.footer-bottom a { color: #3279E3; }
.footer-bottom p { font-size: 9px; padding-bottom: 0; }

/* Social icon images (50x50px like live site) */
.social-icons { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 10px; }
.social-icons li { margin: 0; }
.social-icons a { display: block; }
.social-icons img { width: 50px; height: 50px; object-fit: contain; }
/* Fallback text links */
.social-links a { display: inline-block; margin: 0 5px; font-weight: 600; font-size: 15px; }

/* ===== HOMEPAGE HERO (matching live Nexus layout) ===== */
/* Row uses no explicit bg color (transparent), so body bg shows through */
.hero-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 37.5px 0;
}
.hero-inner, .hero-section > div {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.hero-image, .hero-img {
  flex: 0 0 50%;
  max-width: 50%;
}
.hero-image img, .hero-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #C6C6C6;
  box-shadow: 0 2px 6px rgba(10,10,10,0.6);
}
.hero-content, .hero-text {
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
}
.hero-content-inner {
  width: 90%;
  background: rgba(51,51,51,0.5);
  border-radius: 0;
  padding: 15px;
  text-align: center;
}
.hero-content h2, .hero-text h2 { font-size: 45px; margin-bottom: 15px; }
.hero-content h3 { font-size: 21px; font-weight: 400; margin-bottom: 15px; line-height: 1.5em; }

/* ===== HOMEPAGE SECTIONS ===== */
.home-section { max-width: 960px; margin: 0 auto; padding: 20px 36px; background: #C6C6C6; }
.home-two-col { display: flex; flex-wrap: wrap; gap: 0; }
.home-two-col .home-col { flex: 0 0 50%; padding: 0 18px; }
.home-two-col .home-col h2 { text-align: center; font-size: 30px; }
.home-two-col .home-col p { padding-left: 10px; padding-right: 10px; }

/* Dr. Gut / Staff Photo section */
.home-photo-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 36px;
  background: #C6C6C6;
  text-align: center;
}
.home-photo-section img {
  max-width: 573px;
  margin: 0 auto;
  border: 1px solid #C6C6C6;
  box-shadow: 0 2px 6px rgba(10,10,10,0.6);
}

/* Navy dark section for contact/hours/map */
.home-section-navy {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px 0;
  background: #022C47;
  color: #C6C6C6;
}
.home-section-navy .home-four-col {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 924px;
  margin: 0 auto;
  padding: 0;
}
.home-section-navy .home-four-col > div {
  flex: 0 0 25%;
  padding: 0 7.5px;
}
.home-section-navy h2 { color: #C6C6C6; font-size: 30px; }
.home-section-navy a { color: #3279E3; }
.home-section-navy .contact-form label { color: #C6C6C6; }
.home-section-navy p { color: #C6C6C6; }

/* Our Services section */
.home-services { max-width: 960px; margin: 0 auto; padding: 7.5px 0; background: #C6C6C6; }
.home-services > h2 { text-align: center; margin-bottom: 20px; font-size: 30px; padding: 0 36px; }
.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 924px;
  margin: 0 auto;
  padding: 0;
}
.service-card, .home-service-card {
  flex: 0 0 33.333%;
  text-align: center;
  padding: 0 4.5px;
  background: #C6C6C6;
  border: none;
  transition: opacity 0.2s;
}
/* Blue header bar on each service card */
.service-card-header {
  background: #3279E3;
  border: 1px solid #3279E3;
  padding: 4.5px;
  margin-bottom: 0;
  text-align: center;
}
.service-card-header a { color: #C6C6C6; }
.service-card-header h4 {
  font-size: 21px;
  color: #C6C6C6;
  margin: 0;
  text-align: center;
}
/* Card body */
.service-card-body {
  background: #C6C6C6;
  border: 1px solid #C6C6C6;
  border-top: none;
  padding: 4.5px;
}
.service-card:hover { opacity: 0.9; }
.service-card h3 { font-size: 21px; color: #333; margin-bottom: 8px; }
.service-card h1.service-card-title { font-size: 30px; color: #333; margin-bottom: 8px; text-align: center; }
.service-card p { font-size: 15px; margin-bottom: 12px; text-align: justify; }
.service-card .read-more { text-align: right; }
.service-card .read-more a {
  display: inline-block;
  background: #3279E3;
  color: #C6C6C6;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0 12px;
  font-size: 16.8px;
  font-weight: 600;
  line-height: 2em;
  text-decoration: none;
  transition: opacity 0.1s linear;
}
.service-card .read-more a:hover { opacity: 0.8; }
.service-card img { box-shadow: 0 2px 6px rgba(10,10,10,0.6); margin-bottom: 15px; width: 100%; }

/* Our Beautiful Office section */
.home-office-section { max-width: 960px; margin: 0 auto; padding: 7.5px 0; background: #C6C6C6; }
.home-office-section > h2 { text-align: center; margin-bottom: 15px; font-size: 30px; padding: 0 36px; }
.home-office-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: 924px;
  margin: 0 auto;
  padding: 0;
}
.home-office-gallery a {
  flex: 0 0 33.333%;
  padding: 0 4.5px;
}
.home-office-gallery img {
  width: 100%;
  box-shadow: 0 2px 6px rgba(10,10,10,0.6);
  border: 3px solid transparent;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
  .header-inner { flex-wrap: wrap; padding: 0 20px; }
  .header-logo, .logo { flex: 0 0 100%; justify-content: center; }
  .header-spacer { display: none; }
  .header-contact, .header-info { flex: 0 0 100%; }
  .has-sidebar .content-area, .has-sidebar .main-content,
  .has-sidebar .sidebar { flex: 0 0 100%; width: 100%; }
  .content-area, .main-content { flex: 0 0 100%; width: 100%; }
  .nav-toggle { display: block; }
  .site-nav > ul { display: none; flex-direction: column; }
  .site-nav.open > ul { display: flex; }
  .site-nav .submenu { position: static; box-shadow: none; visibility: visible; opacity: 1; }
  .site-nav .submenu li a { text-indent: 30px; }
  .hero-image, .hero-img, .hero-content, .hero-text { flex: 0 0 100%; max-width: 100%; border-radius: 0; }
  .hero-content-inner { width: 100%; }
  .services-grid { flex-direction: column; }
  .service-card, .home-service-card { flex: 0 0 100%; }
  .home-two-col .home-col { flex: 0 0 100%; }
  .home-section-navy .home-four-col > div { flex: 0 0 50%; }
  .gallery-grid { grid-template-columns: 1fr; }
  .home-office-gallery a { flex: 0 0 100%; margin-bottom: 10px; }
  .footer-inner, .footer-columns { flex-direction: column; }
}
@media (max-width: 480px) {
  .service-grid { flex-direction: column; }
  .service-btn { width: 100%; text-align: center; }
}