@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap');

*,
*:after,
*:before{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:active,
:hover,
:focus{
    outline: 0 !important;
    outline-offset: 0;
}

a,
a:hover{
    text-decoration: none;
}

a:hover{
    color: var(--primary-color) !important;
}

ul,
ol{
    margin: 0;
    padding: 0;
}

:root{
    --primary-color:#008080;/* red:#A82C48 dark-gray: #1C1C1A light-green: #125F61*/
    --secondary-color:#0b4141;
    --third-color:#f98169;
    --white-color:#fff;
    --text-color:#555;
    --text-gray:#999;
    --black-color:#000;
    --primary-font: 'Roboto', sans-serif;
    --secondary-font: 'Quicksand', sans-serif;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: var(--primary-font);
    font-size: 100%;
    font-weight: 400;
}

::-webkit-scrollbar{
    width: 0.625rem;
}
::-webkit-scrollbar-track{
    background: var(--white-color);
}
::-webkit-scrollbar-thumb{
    background: var(--primary-color);
}


h1{
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 3rem;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
}

h2{
    font-size: 2.25rem;
    font-weight: 700;
    text-transform: capitalize;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
    line-height: 3rem;
}

h4{
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
}

h5{
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: capitalize;
    font-family: var(--secondary-font);
    color: var(--primary-color);
}

p{
    font-size: 1rem;
    color: var(--text-color);
    font-weight: 400;
    line-height: 1.75rem;
    letter-spacing: 1px;
}

.main-btn{
    display: inline-block;
    padding: 0.625rem 1.875rem;
    line-height: 1.5625rem;
    background-color: var(--primary-color);
    border: 0.1875rem solid var(--primary-color);
    color: var(--white-color);
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: capitalize;
    box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 19%);
    --webkit-transition: all .4s ease-out 0s;
    -o-transition: all .4s ease-out 0s;
    -moz-transition: all .4s ease-out 0s;
    transition: all .4s ease-out 0s;
}

.white-btn{
    display: inline-block;
    padding: 0.625rem 1.875rem;
    line-height: 1.5625rem;
    background-color: var(--white-color);
    border: 0.1875rem solid var(--white-color);
    color: var(--text-color);
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: capitalize;
    box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 19%);
    --webkit-transition: all .4s ease-out 0s;
    -o-transition: all .4s ease-out 0s;
    -moz-transition: all .4s ease-out 0s;
    transition: all .4s ease-out 0s;
}

.main-btn:hover{
    background-color: transparent;
    color: var(--primary-color);
}

.white-color:hover{
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.wrapper{
    padding-top: 8.25rem;
    padding-bottom: 8.25rem;
}

.text-content{
    width: 70%;
    margin: auto;
}

.counter-section h2,
.testimonial-section h2,
.book-food-text h2{
    color: var(--white-color);
}

.navigation-wrap {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 1000;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.navigation-wrap .nav-item{
    margin: 0.15rem;
    padding: 0 0.625rem;
    transition: all 200ms linear;
}
.navbar-toggler:focus{
    outline: unset;
    border: unset;
    box-shadow: none;
}

#navbarNav {
    margin-top: 29px;
    margin-bottom: 20px;
}

.navbar-brand {
    margin-left: -20px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.navbar-brand img {
    height: 75px;
}

.nav-link{
    font-size: 1.325rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--primary-color);
    letter-spacing: 1px;
    /*line-height: 1.125rem;
    background-color: var(--primary-color);
    border: 0.1875rem solid var(--white-color);
    color: var(--white-color);
    font-size: 1.5375rem;
    font-weight: 600;
    text-transform: capitalize;*/
}
/* This is for including header background 
header .navbar{
    background: url('../images/header-bg.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 65% auto;
}*/

.nav-link:focus,
.nav-link:hover{
    color: var(--scondary-color) !important;
}
.address-link{
    color: var(--primary-color);
}

.address-link:hover{
    color: var(--secondary-color) !important;
}
.navigation-wrap .main-btn{
    padding: 0.3125rem 1.4375rem;
    box-shadow: none;
    margin-left: 0.625rem;
}
.navigation-wrap.scroll-on{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--white-color);
    box-shadow: 0 0.125rem 1.75rem 0 rgb(0,0,0,0.9);
    transition: all .15s ease-in-out 0s;
}

.top-banner{
    width: 100%;
    /*background: url('../images/logo-final-05.png') no-repeat right;
    background-size: cover;
    background-size: 55%;*/
    padding-top: 16.875rem; /* 0 9.375rem;*/
}

.counter-section{
    background-color: var(--primary-color);
    padding: 2.5rem 0;
}
.counter-section p{
    color: var(--white-color);
    text-transform: uppercase;
}

.about-section{
    background-color: var(--white-color) !important;
}
.about-section .card,
.about-section .card img{
    border-radius: 0.625rem;
}
.about-section .text-sec{
    padding-left: 2rem;
}

.store-hours{
    color: var(--text-gray);
}

.food-type{
    padding-top: 3.25rem;
}
.food-type ul li,
.about-us ul li{
    font-size: 1rem;
    color: var(--text-color);
    line-height: 32px;
    position: relative;
    margin-left: 30px;
    text-align: left;
}
.food-type ul li::before,
.about-us ul li::before{
    position: absolute;
    left: -2.1875rem;
    color: var(--primary-color);
    font-size: 1.25rem;
    font-family: "Font Awesome 5 Free";
    content: '\f00c';
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}
.story-section{
    width: 100%;
    height: 28.125rem;
    background: url('../images/bg/bg-story-section.jpg') no-repeat center;
    background-size: cover;
    padding-top: 100px;
    text-align: center;
}
.story-section h2{
    color: var(--primary-color);
}

.story-section p{
    color: var(--white-color);
}


.explore-food .card {
    border: none;
    background-color: transparent;
    border-radius: 0.9375rem;
    text-align: center;
}

.about-us .card{
    padding: 20px;
    border: 2px solid #eee;
    background-color: transparent;
    border-radius: 0.9375rem;
    text-align: center;
}


/*.about-us .card ul{
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}*/

.about-us img{
    max-height: 250px;
}

.whatsapp_float{
	position:fixed;
	bottom:40px;
	right:20px;
}

.whatsapp_float img {
  display: block;
  transition: transform 0.3s ease-out;
}

.whatsapp_float:hover img {
  transform: translateY(-20%);
}

.explore-food .card:hover{
    box-shadow: 0 8px 32px rgba(0,128,128,0.18);
    transform: translateY(-0.4rem);
    transition: all 0.2s ease-in-out;
}

/* Product card body. The heading, service time and button sit inside a padded
   block so the button is inset from the card edge instead of flush against it.
   Sides and bottom only, because the pt-3 utility supplies the top padding. */
.explore-food .card .pt-3{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 1.5rem;
}

.explore-food .card img{
    border-radius: 0.9375rem;
    /*object-fit: cover;
    height: 350px;*/
    height: 250px;
}
.accessories .card img{
    border-radius: 0.9375rem;
    object-fit: cover;
    height: auto !important;
}
.explore-food .card span{
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    padding-bottom: 1rem;
    border-bottom: 0.0625rem solid #eee;
}
.explore-food .card span del{
    color: var(--text-gray);
    margin-left: 0.5rem;
}


.testimonial-section{
    background-color: var(--primary-color);
}

.testimonial-section .carousel-item{
    margin-top: 3rem;
    padding: 9.125rem;
    background-color: var(--white-color);
    border-radius: 0.9375rem;
    text-align: center;
}

.testimonial-section .carousel-caption img{
    max-width: 5rem;
    border-radius: 50%;
    padding: 0.3125rem;
    border: 2px solid var(--primary-color);
}

.testimonial-section .carousel-item .carousel-caption p{
    font-size: 1.3125rem;
    line-height: 2.0625rem;
    /*padding: 0 11% 0.625rem;*/
}

.testimonial-section .carousel-indicators,
.slider-section .carousel-indicators{
    bottom: -2.8125rem;
}

.testimonial-section .carousel-indicators button,
.slider-section .carousel-indicators button{
    width: 15px;
    height: 15px;
    outline: none;
    border-radius: 50%;
    border: none;
    margin-right: 1rem;
    opacity: 0.2;
}
.testimonial-section .carousel-indicators button.active,
.slider-section .carousel-indicators button.active{
    opacity: 1;
}

.slider-section img{
    width: 100%;
    border-radius: 0.9375rem;
}

.faq h4 span{
    color:var(--primary-color);
    font-size: 1.875rem;
    margin-right: 0.3125rem;
}

.book-food{
    width: 100%;
    background: url('../images/bg/bg-parallex-section.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: 0 71.9125px;
    padding: 5.375rem 0;
}

.main-btn-home {
	padding-left: 0 !important;
	padding-right: 12px !important;
}

/* Diagnostics Tiers */
.diagnostics-section{
    background: linear-gradient(135deg, #f8fffe 0%, #eef7f7 100%);
}
.diag-card{
    background: var(--white-color);
    border-radius: 1rem;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.diag-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(0,128,128,0.15);
}
.diag-card-icon{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
    color: var(--white-color);
}
.diag-card-icon.free{ background: var(--primary-color); }
.diag-card-icon.mid{ background: var(--secondary-color); }
.diag-card-icon.adv{ background: #064e4e; }
.diag-card h4{
    margin-bottom: 0.25rem;
}
.diag-price{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
    font-family: var(--secondary-font);
}
.diag-price .free-badge{
    background: var(--primary-color);
    color: var(--white-color);
    padding: 0.2rem 0.75rem;
    border-radius: 2rem;
    font-size: 1rem;
}
.diag-note{
    font-size: 0.85rem;
    color: var(--text-gray);
    font-style: italic;
    margin-top: 0.5rem;
}
.diag-desc{
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Subscribe Newsletter */
.newsletter{
    width: 75%;
    margin: 0 auto;
}
.newsletter .form-control{
    height: 3.225rem;
    padding: 0 1.25rem;
    font-size: 0.875rem;
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    border: 0.1875rem solid var(--text-gray);
    color: var(--black-color);
    font-weight: 700;
}
.newsletter .form-control:hover,
.newsletter .form-control:focus{
    outline: none;
    box-shadow: none;
    border-color: var(--primary-color);
}

/* Footer Section */
.footer{
    background: var(--primary-color);
}

.footer-brand{
    color: var(--white-color);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

.footer-tagline{
    color: rgba(255,255,255,0.7);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* Footer cards */
.footer-card{
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 1rem;
    padding: 2rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.footer-card:hover{
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.25);
}

/* Card body fills remaining height */
.footer-card-body{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.footer-card-body svg {
    color: #fff;
}

/* Social section sits naturally after quote button */
.td-cwr{
    margin-top: 0.9rem;
}

/* Second info block (Store Hours) has a small natural gap */
.footer-info-block + .footer-info-block{
    margin-top: 0.75rem;
}

/* Icon  plain white icon, no circle */
.footer-card-icon{
    margin-bottom: 1.375rem;
    text-align: center;
}
.footer-card-icon i{
    color: rgba(255,255,255,0.9);
    font-size: 2rem;
}
.footer-card-icon .fa-compass{
    font-size: 2.5rem;
}

/* Card title  plain bold header, no pill */
.footer-card-title{
    color: var(--white-color);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.1rem;
	text-align: center;
}

/* Navigate card  2x3 button grid */
.footer-nav-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}
.footer-nav-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0.5rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.5rem;
    color: rgba(255,255,255,0.88) !important;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.footer-nav-btn:hover{
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.3);
    color: var(--white-color) !important;
}

/* Hours grid with label and value pairs */
.footer-hours-grid{
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    row-gap: 0.3rem;
    margin-top: 0.35rem;
}
.footer-hours-grid span{
    color: rgba(255,255,255,0.85);
    font-size: 0.875rem;
    line-height: 1.5;
}
.footer-hours-grid span:nth-child(odd){
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
}
.footer-closed{
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}

/* Request a Quote button */
.footer-quote-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.7rem 1.25rem;
    background: var(--white-color);
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.footer-quote-btn:hover{
    background: rgba(255,255,255,0.9);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    text-decoration: none;
}

/* Plain section block with spacing only, used in the Hours card */
.footer-plain-block{
    margin-bottom: 1rem;
}
.footer-plain-block:last-of-type{
    margin-bottom: 0;
}

/* Info lines inside cards */
.footer-info-block{
    background: rgba(255,255,255,0.07);
    border-radius: 0.6rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
}
.footer-info-block:last-of-type{
    margin-bottom: 0;
}

.footer-card-line{
    color: rgba(255,255,255,0.9);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.footer-inline-icon{
    color: var(--white-color);
    margin-right: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.7;
}

.footer-map-link,
.footer-contact-link{
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-map-link:hover,
.footer-contact-link:hover{
    color: var(--white-color) !important;
    text-decoration: underline;
}

/* Phone number, large and prominent */
.footer-phone{
    display: block;
    color: var(--white-color);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
    text-align: center;
    transition: opacity 0.2s;
}
.footer-phone:hover{
    opacity: 0.85;
    color: var(--white-color) !important;
    text-decoration: none;
}

.footer-contact-label{
    color: rgba(255,255,255,0.55);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0;
}

/* Social icons */
.td-cir{
    display: flex;
    gap: 0.625rem;
    margin-top: 0.75rem;
}
.td-cir a{
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.td-cir a:hover{
    background: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}
.td-cir a i{
    color: var(--white-color);
    font-size: 0.85rem;
    padding: 0;
}

/* Social label */
.td-clb{
    color: rgba(255,255,255,0.5);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

/* Bottom bar */
.footer-bottom{
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 1.25rem;
    text-align: center;
}
.footer-bottom p{
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    margin: 0;
}
.footer-credit{
    margin-top: 0.35rem !important;
}
.footer-credit a{
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}
.footer-credit a:hover{
    color: var(--white-color) !important;
    text-decoration: underline;
}

/* Legacy link selector kept for any stray usage */
.footer .footer-link{
    font-size: 1rem;
    color: var(--white-color);
    padding: 0 1.875rem;
}
.footer .footer-link:hover{
    color: var(--white-color) !important;
}

.job-app{
    margin-top: 5rem;
}
.job-app .form-check{
    padding-left: 0;
}
.job-app label{
    margin-top: 1rem;
}
.job-app input[type=radio]{
    float: none;
    margin: 1rem .25em .25em .25em;
}
.text-truncate{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}
.review-btn{
    padding: 0.25rem !important;
    border-radius: 10px;
    margin-bottom: 1rem;
}
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 1.2em;
    min-width: 400px;
    /*box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);*/
    text-align: center;
    width: 100%;
}

.styled-table thead tr {
    background-color: var(--primary-color);
    color: #ffffff;
    text-align: center;
}

.styled-table th, .styled-table td {
    padding: 12px 15px;
}







/* Community cards (About page) */
.community-card{
    background: var(--white-color);
    border-radius: 1rem;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.community-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 10px 32px rgba(0,0,0,0.12);
}
.community-card-icon{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
    color: var(--white-color);
}
.community-card-icon.schools{ background: var(--primary-color); }
.community-card-icon.blood{ background: var(--third-color); }
.community-desc{
    color: var(--text-color);
    margin-bottom: 0;
}
.community-desc a{ color: var(--primary-color); font-weight: 600; }

/* Interior page titles (h1) with optional subtitle */
.page-title{
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}
.page-subtitle{
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1rem;
}
@media (max-width: 767px){
    .page-title{ font-size: 2rem; }
    .page-subtitle{ font-size: 1.25rem; line-height: 1.35; }
}

/* Footer link directory. Four columns below the three footer cards, giving every
   service and service-area page a site-wide link. */
.footer-links-row{
    padding-top: 1.75rem;
}
.footer-link-col{
    padding: 0 0.25rem;
}
.footer-link-heading{
    color: var(--white-color);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
    opacity: 0.92;
}
.footer-link-col a{
    display: block;
    color: rgba(255,255,255,0.78);
    font-size: 0.8125rem;
    text-decoration: none;
    padding: 0.3rem 0;
    transition: color 0.2s;
}
.footer-link-col a:hover{
    color: var(--white-color) !important;
    text-decoration: underline;
}
@media (max-width: 767px){
    .footer-link-col{
        margin-bottom: 0.5rem;
    }
}

/* Header dropdown menus. Hover on desktop, a caret toggle on mobile. Wide menus
   run in columns so a long list fits on screen instead of scrolling off it. */
.nav-item.td-has-dropdown{
    position: relative;
}
.td-dropdown{
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white-color);
    border-radius: 0.75rem;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14);
    padding: 1rem 0.5rem 0.5rem;
    z-index: 1200;
}
.td-dropdown-right{
    left: auto;
    right: 0;
}
.nav-item.td-has-dropdown:hover .td-dropdown,
.nav-item.td-has-dropdown:focus-within .td-dropdown,
.nav-item.td-has-dropdown.td-open .td-dropdown{
    display: block;
}
.td-dropdown-cols{
    display: flex;
    gap: 0.25rem;
}
.td-dropdown-col{
    min-width: 215px;
    padding: 0 0.65rem;
}
.td-dropdown-wide .td-dropdown-col{
    min-width: 205px;
}
.td-dropdown-label{
    display: block;
    padding: 0.45rem 0.5rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-gray);
    margin: 0;
}
.td-dropdown a{
    display: block;
    padding: 0.5rem 0.5rem;
    font-size: 0.9rem;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background 0.15s, color 0.15s;
}
.td-dropdown a:hover{
    background: var(--primary-color);
    color: var(--white-color) !important;
}
.td-dropdown-split{
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 0.45rem 0.5rem;
}
.td-dropdown-foot{
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.td-dropdown-foot a{
    flex: 1 1 auto;
    text-align: center;
    font-weight: 600;
    color: var(--primary-color);
}

/* Caret toggle, shown only where the menu collapses into the burger. */
.td-dd-toggle{
    display: none;
    background: none;
    border: none;
    color: var(--primary-color);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1;
    transition: transform 0.2s;
}
.td-dd-toggle i{
    pointer-events: none;
}

@media (max-width: 991px){
    .nav-item.td-has-dropdown{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .nav-item.td-has-dropdown > .nav-link{
        flex: 0 0 auto;
    }
    .td-dd-toggle{
        display: inline-block;
        flex: 0 0 auto;
    }
    .nav-item.td-has-dropdown.td-open .td-dd-toggle{
        transform: rotate(180deg);
    }
    .td-dropdown,
    .td-dropdown-right{
        display: none;
        position: static;
        left: auto;
        right: auto;
        flex: 1 1 100%;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
        min-width: 0;
        padding: 0 0 0.5rem 0.9rem;
    }
    .nav-item.td-has-dropdown:hover .td-dropdown,
    .nav-item.td-has-dropdown:focus-within .td-dropdown{
        display: none;
    }
    .nav-item.td-has-dropdown.td-open .td-dropdown{
        display: block;
    }
    .td-dropdown-cols{
        display: block;
    }
    .td-dropdown-col{
        min-width: 0;
        padding: 0;
    }
    /* The header is fixed, so an expanded menu taller than the screen would put
       its lower items out of reach with nothing to scroll. The menu takes the
       screen height minus the bar and scrolls inside itself instead. */
    #navbarNav{
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .td-dropdown a{
        padding: 0.4rem 0;
        font-size: 0.875rem;
    }
    .td-dropdown a:hover{
        background: transparent;
        color: var(--primary-color) !important;
    }
    .td-dropdown-label{
        padding: 0.5rem 0 0.2rem;
    }
    .td-dropdown-split{
        margin: 0.45rem 0;
    }
    .td-dropdown-foot{
        display: block;
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    .td-dropdown-foot a{
        text-align: left;
    }
}

/* The wide menu is anchored to the nav list instead of its own menu item, so a
   four-column panel cannot run past the right edge of the window wherever the
   Repairs item sits in the bar. The nav list is used as the anchor because its
   bottom edge is the bottom edge of the links themselves, which keeps the panel
   flush under them and leaves no gap for the pointer to fall through. */
@media (min-width: 992px){
    .navbar.navigation-wrap .navbar-collapse{
        position: relative;
    }
    .nav-item.td-has-dropdown:has(.td-dropdown-wide){
        position: static;
    }
    .td-dropdown-wide{
        top: 100%;
        left: auto;
        right: 0;
        max-width: calc(100vw - 1.5rem);
    }
    .td-dropdown-wide .td-dropdown-cols{
        flex-wrap: wrap;
    }
}

/* Between the desktop breakpoint and roughly 1280px the six nav items, the quote
   button and the full-size logo do not fit on one row, so the row overflowed the
   container and carried the wide menu off the right of the screen with it. The
   links tighten and the logo steps down across that range so the row stays
   inside the container and the menu clamps to it. */
@media (min-width: 992px) and (max-width: 1279px){
    .navbar-brand img{
        height: 58px;
    }
    .navigation-wrap .nav-item{
        margin: 0.15rem 0;
        padding: 0 0.35rem;
    }
    .nav-link{
        font-size: 1.02rem;
        letter-spacing: 0;
    }
    .navigation-wrap .main-btn{
        padding: 0.3125rem 0.9rem;
        margin-left: 0.35rem;
    }
}

/* Hover bridge. The panel carries an invisible strip across its own top edge so
   a sub-pixel seam between the link and the panel cannot end the hover while the
   pointer is still travelling down into the menu. */
@media (min-width: 992px){
    .td-dropdown::before{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -0.75rem;
        height: 0.75rem;
    }
}

/* Tighter columns on a narrow desktop window. */
@media (min-width: 992px) and (max-width: 1199px){
    .td-dropdown-wide .td-dropdown-col{
        min-width: 168px;
    }
    .td-dropdown{
        padding: 0.85rem 0.35rem 0.35rem;
    }
}

/* Image-above-card stack. The photograph sits above the bordered box instead of
   inside it, so the box holds only the text and the image is not boxed in twice. */
.td-stack{
    height: 100%;
    display: flex;
    flex-direction: column;
}
.td-stack-img{
    display: block;
    margin: 0 auto 1.25rem;
    max-width: 100%;
    height: auto;
    border-radius: 0.9375rem;
}
.td-stack > .card{
    flex: 1 1 auto;
    padding: 0 1.25rem 1.25rem;
}
.td-stack > .card > .pt-3{
    padding-top: 1.5rem !important;
}

/* Hero image column. The storefront graphic is a tall portrait, so at full column
   width it ran far below the last line of the text beside it and sat low on the page.
   Capping its height and centering the two columns against each other keeps the logo
   legible and the row balanced. The banner's own padding-top was set for a taller
   header than the one in use, so it is trimmed here and given matching space
   underneath. Below the desktop breakpoint the image stacks under the text and
   responsive-style.css carries its own padding. */
@media (min-width: 992px){
    #home .top-banner{
        padding-top: 11rem;
        padding-bottom: 3rem;
    }
    #home .top-banner > .container > .row{
        align-items: center;
    }
    #home .col-lg-5 img{
        max-height: 30rem;
        width: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}