/* ==================================================
OMS URGENT CARE
STYLE.CSS PART 1
FOUNDATION + HEADER + HERO + FOOTER
================================================== */

/* ---------- RESET ---------- */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
line-height:1.7;
background:#ffffff;
color:#222222;
overflow-x:hidden;
transition:all .3s ease;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

button,
input,
textarea{
font-family:inherit;
outline:none;
border:none;
}

iframe{
width:100%;
border:0;
}

/* ---------- VARIABLES ---------- */

:root{

--primary:#d62828;
--primary-dark:#b71c1c;

--secondary:#101010;

--white:#ffffff;

--light:#f7f7f7;

--gray:#666666;

--border:#e5e5e5;

--shadow:
0 10px 30px rgba(0,0,0,.08);

--radius:14px;

--transition:.3s ease;

--container:1200px;

}

/* ---------- DARK MODE ---------- */

body.dark-mode{

background:#111111;
color:#f2f2f2;

}

body.dark-mode section{
background:#111111;
}

body.dark-mode .service-card,
body.dark-mode .testimonial,
body.dark-mode .blog-card,
body.dark-mode .award-card,
body.dark-mode .feature{

background:#1b1b1b;
color:#f2f2f2;

}

body.dark-mode footer{
background:#000;
}

body.dark-mode header{

background:#151515;

}

body.dark-mode .nav-links a{

color:#ffffff;

}

/* ---------- CONTAINER ---------- */

.container{

width:90%;
max-width:var(--container);
margin:auto;

}

/* ---------- UTILITIES ---------- */

section{

padding:90px 0;

}

.section-title{

text-align:center;
margin-bottom:50px;

}

.section-title h2{

font-size:2.3rem;
font-weight:800;
margin-bottom:10px;

}

.section-title p{

max-width:700px;
margin:auto;
color:var(--gray);

}

.grid-2{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;

}

/* ---------- TOP BAR ---------- */

.top-bar{

background:var(--secondary);
color:#fff;

display:flex;
align-items:center;
justify-content:space-between;

padding:10px 30px;

overflow:hidden;

}

.social-icons{

display:flex;
gap:15px;

}

.social-icons a{

width:35px;
height:35px;

display:flex;
align-items:center;
justify-content:center;

border-radius:50%;
transition:var(--transition);

}

.social-icons a:hover{

background:var(--primary);

}

.marquee-container{

flex:1;
margin-left:30px;
overflow:hidden;

}

.marquee{

white-space:nowrap;
animation:scrollText 25s linear infinite;

}

@keyframes scrollText{

0%{
transform:translateX(100%);
}

100%{
transform:translateX(-100%);
}

}

/* ---------- HEADER ---------- */

header{

position:sticky;
top:0;

z-index:9999;

background:#fff;

box-shadow:
0 2px 10px rgba(0,0,0,.05);

}

.nav-container{

display:flex;
align-items:center;
justify-content:space-between;

padding:15px 0;

}

.logo img{

height:75px;
width:auto;

}

.nav-links{

display:flex;
gap:30px;

}

.nav-links a{

font-weight:600;
transition:var(--transition);

}

.nav-links a:hover{

color:var(--primary);

}

.header-actions{

display:flex;
gap:12px;
align-items:center;

}

.portal-btn{

padding:12px 20px;
background:#111;
color:#fff;
border-radius:8px;
font-weight:600;

}

.portal-btn:hover{

background:#000;

}

.appointment-btn{

padding:12px 20px;
background:var(--primary);
color:#fff;

cursor:pointer;

border-radius:8px;

font-weight:600;

transition:var(--transition);

}

.appointment-btn:hover{

background:var(--primary-dark);

}

.theme-toggle{

width:45px;
height:45px;

border-radius:50%;

cursor:pointer;

background:#efefef;

display:flex;
align-items:center;
justify-content:center;

}

.hamburger{

display:none;
cursor:pointer;

}

.hamburger span{

display:block;

width:28px;
height:3px;

background:#111;

margin:5px 0;

}

/* ---------- HERO ---------- */

.hero{

padding:0;
position:relative;

}

.hero-slider{

position:relative;
height:85vh;
overflow:hidden;

}

.slide{

position:absolute;
width:100%;
height:100%;

opacity:0;
visibility:hidden;

transition:all 1s ease;

}

.slide.active{

opacity:1;
visibility:visible;

}

.slide img{

width:100%;
height:100%;
object-fit:cover;

}

.hero-content{

position:absolute;

left:10%;
top:50%;

transform:translateY(-50%);

max-width:650px;

color:#fff;

z-index:5;

animation:fadeUp 1s ease;

}

.hero::before{

content:"";

position:absolute;
inset:0;

background:
rgba(0,0,0,.45);

z-index:1;

}

.hero-content h1{

font-size:4rem;
line-height:1.1;
font-weight:800;

margin-bottom:20px;

}

.hero-content p{

font-size:1.2rem;

margin-bottom:30px;

max-width:600px;

}

@keyframes fadeUp{

from{
opacity:0;
transform:
translateY(50px);
}

to{
opacity:1;
transform:
translateY(0);
}

}

/* ---------- BUTTONS ---------- */

.cta-btn{

display:inline-block;

padding:15px 28px;

background:var(--primary);

color:#fff;

border-radius:10px;

font-weight:700;

transition:var(--transition);

}

.cta-btn:hover{

transform:translateY(-3px);

background:var(--primary-dark);

}

.outline-btn{

display:inline-block;

padding:15px 28px;

border:2px solid var(--primary);

color:var(--primary);

border-radius:10px;

font-weight:700;

margin-top:20px;

transition:var(--transition);

}

.outline-btn:hover{

background:var(--primary);
color:#fff;

}

/* ---------- AWARD ---------- */

.award-section{

background:var(--light);

}

.award-card{

background:#fff;

padding:40px;

border-radius:var(--radius);

box-shadow:var(--shadow);

text-align:center;

}

.award-card h2{

font-size:2rem;
margin-bottom:10px;

}

/* ---------- SERVICES PREVIEW ---------- */

.services-grid{

display:grid;
grid-template-columns:
repeat(3,1fr);

gap:25px;

}

.service-card{

background:#fff;

padding:35px;

border-radius:var(--radius);

text-align:center;

box-shadow:var(--shadow);

transition:var(--transition);

}

.service-card:hover{

transform:
translateY(-10px);

}

.service-card i{

font-size:3rem;

color:var(--primary);

margin-bottom:20px;

}

.service-card h3{

margin-bottom:10px;

}

/* ---------- WHY US ---------- */

.features-grid{

display:grid;
grid-template-columns:
repeat(3,1fr);

gap:20px;

}

.feature{

background:#fff;

padding:25px;

border-radius:12px;

box-shadow:var(--shadow);

text-align:center;

font-weight:700;

}

/* ---------- TESTIMONIALS ---------- */

.testimonial-grid{

display:grid;
grid-template-columns:
repeat(3,1fr);

gap:25px;

}

.testimonial{

background:#fff;

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

font-size:1.05rem;

}

/* ---------- BLOG ---------- */

.blog-grid{

display:grid;
grid-template-columns:
repeat(3,1fr);

gap:25px;

}

.blog-card{

background:#fff;

border-radius:var(--radius);

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

}

.blog-card:hover{

transform:
translateY(-10px);

}

.blog-card img{

height:230px;
width:100%;

object-fit:cover;

}

.blog-card h3{

padding:20px;

}

.blog-card a{

display:inline-block;

margin:0 20px 20px;

color:var(--primary);

font-weight:700;

}

/* ---------- MAP ---------- */

.map-section iframe{

height:450px;

border-radius:20px;

}

/* ---------- FOOTER ---------- */

footer{

background:#111;

color:#fff;

padding-top:80px;

}

.footer-grid{

display:grid;
grid-template-columns:
2fr 1fr 1fr 1fr;

gap:40px;

}

.footer-grid h4{

margin-bottom:20px;

font-size:1.2rem;

}

.footer-grid ul li{

margin-bottom:12px;

}

.footer-grid a:hover{

color:var(--primary);

}

.footer-grid form{

display:flex;
flex-direction:column;
gap:15px;

}

.footer-grid input{

padding:14px;

border-radius:8px;

}

.footer-grid button{

padding:14px;

background:var(--primary);

color:#fff;

border-radius:8px;

cursor:pointer;

font-weight:700;

}

.copyright{

text-align:center;

padding:25px;

margin-top:50px;

border-top:
1px solid rgba(255,255,255,.1);

}

/* ---------- WHATSAPP ---------- */

.whatsapp-widget{

position:fixed;

bottom:25px;
left:25px;

width:60px;
height:60px;

background:#25d366;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

font-size:2rem;

color:#fff;

z-index:999;

box-shadow:
0 8px 20px rgba(0,0,0,.2);

}

/* ---------- BACK TO TOP ---------- */

#backToTop{

position:fixed;

bottom:25px;
right:25px;

width:55px;
height:55px;

background:var(--primary);

color:#fff;

border-radius:50%;

cursor:pointer;

font-size:20px;

display:none;

z-index:999;

}

/* ---------- SIMPLE REVEAL ---------- */

.reveal{

opacity:0;

transform:
translateY(40px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:
translateY(0);

}

/* ==================================================
OMS URGENT CARE
STYLE.CSS PART 2
PAGES + FORMS + MODAL + GALLERY + CONTACT
================================================== */

/* ---------- ABOUT PAGE ---------- */

.about-hero,
.page-hero{

padding:120px 0;
text-align:center;

background:
linear-gradient(
135deg,
#d62828,
#b71c1c
);

color:#fff;

}

.page-hero h1{

font-size:3rem;
margin-bottom:15px;

}

.page-hero p{

max-width:700px;
margin:auto;

font-size:1.1rem;

}

.mission-grid{

display:grid;
grid-template-columns:
repeat(3,1fr);

gap:30px;

margin-top:50px;

}

.mission-card{

padding:35px;
background:#fff;

border-radius:14px;

box-shadow:var(--shadow);

text-align:center;

}

.mission-card h3{

margin-bottom:15px;

color:var(--primary);

}

/* ---------- STATS SECTION ---------- */

.stats-section{

background:var(--primary);
color:#fff;

}

.stats-grid{

display:grid;
grid-template-columns:
repeat(4,1fr);

gap:30px;

text-align:center;

}

.stat-box h3{

font-size:3rem;
font-weight:800;

}

.stat-box p{

font-size:1rem;

}

/* ---------- PROVIDERS ---------- */

.providers-grid{

display:grid;
grid-template-columns:
repeat(3,1fr);

gap:30px;

}

.provider-card{

background:#fff;

border-radius:16px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.3s ease;

}

.provider-card:hover{

transform:translateY(-8px);

}

.provider-card img{

height:350px;
width:100%;

object-fit:cover;

}

.provider-content{

padding:25px;

}

.provider-content h3{

margin-bottom:8px;

}

.provider-content span{

color:var(--primary);
font-weight:600;

}

/* ---------- SERVICES PAGE ---------- */

.services-page-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

}

.service-box{

background:#fff;

padding:35px;

border-radius:16px;

box-shadow:var(--shadow);

transition:.3s ease;

}

.service-box:hover{

transform:translateY(-8px);

}

.service-box i{

font-size:2.8rem;

color:var(--primary);

margin-bottom:20px;

}

.service-box h3{

margin-bottom:15px;

}

.service-box ul{

padding-left:20px;

list-style:disc;

}

.service-box ul li{

margin-bottom:8px;

}

/* ---------- INSURANCE GRID ---------- */

.insurance-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

align-items:center;

}

.insurance-grid img{

background:#fff;

padding:20px;

height:120px;

width:100%;

object-fit:contain;

border-radius:12px;

box-shadow:var(--shadow);

transition:.3s ease;

}

.insurance-grid img:hover{

transform:scale(1.05);

}

/* ---------- CTA BANNER ---------- */

.cta-banner{

background:
linear-gradient(
135deg,
#d62828,
#b71c1c
);

color:#fff;

text-align:center;

padding:80px 30px;

border-radius:20px;

}

.cta-banner h2{

font-size:2.5rem;

margin-bottom:20px;

}

.cta-banner p{

max-width:700px;

margin:auto auto 30px;

}

/* ---------- FAQ ---------- */

.faq-section{

background:#f9f9f9;

}

.faq-container{

max-width:900px;
margin:auto;

}

.faq-item{

background:#fff;

margin-bottom:15px;

border-radius:12px;

overflow:hidden;

box-shadow:var(--shadow);

}

.faq-question{

padding:20px;

font-weight:700;

cursor:pointer;

display:flex;

justify-content:space-between;

align-items:center;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

padding:0 20px;

}

.faq-item.active .faq-answer{

max-height:300px;

padding:20px;

}

/* ---------- TESTIMONIALS ADVANCED ---------- */

.testimonial{

position:relative;

}

.testimonial::before{

content:"❝";

position:absolute;

top:10px;
right:15px;

font-size:3rem;

opacity:.08;

}

/* ---------- GOOGLE REVIEWS ---------- */

.review-cta{

text-align:center;

padding:50px;

background:#fff;

border-radius:20px;

box-shadow:var(--shadow);

}

.review-cta h3{

margin-bottom:15px;

}

.review-cta a{

display:inline-block;

margin-top:20px;

}

/* ---------- GALLERY ---------- */

.gallery-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:16px;

cursor:pointer;

}

.gallery-item img{

height:300px;
width:100%;

object-fit:cover;

transition:.5s ease;

}

.gallery-item:hover img{

transform:scale(1.1);

}

.gallery-item::after{

content:"";

position:absolute;

inset:0;

background:
rgba(214,40,40,.35);

opacity:0;

transition:.3s ease;

}

.gallery-item:hover::after{

opacity:1;

}

/* ---------- LIGHTBOX ---------- */

.lightbox{

position:fixed;

inset:0;

background:
rgba(0,0,0,.95);

display:none;

align-items:center;
justify-content:center;

z-index:99999;

}

.lightbox.active{

display:flex;

}

.lightbox img{

max-width:90%;
max-height:90%;

}

/* ---------- BLOG PAGE ---------- */

.blog-page-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

}

.blog-page-card{

background:#fff;

border-radius:16px;

overflow:hidden;

box-shadow:var(--shadow);

}

.blog-page-card img{

height:250px;
width:100%;

object-fit:cover;

}

.blog-page-content{

padding:25px;

}

.blog-page-content h3{

margin-bottom:15px;

}

.blog-page-content p{

margin-bottom:15px;

}

/* ---------- BLOG POST ---------- */

.blog-post{

max-width:900px;

margin:auto;

}

.blog-post img{

border-radius:20px;

margin-bottom:40px;

}

.blog-post h1{

font-size:3rem;

margin-bottom:20px;

}

.blog-post h2{

margin-top:40px;
margin-bottom:15px;

}

.blog-post p{

margin-bottom:20px;

}

.blog-post ul{

list-style:disc;

padding-left:25px;

margin-bottom:20px;

}

/* ---------- CONTACT PAGE ---------- */

.contact-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:50px;

}

.contact-info{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}

.contact-item{

display:flex;

gap:20px;

margin-bottom:25px;

}

.contact-item i{

font-size:1.5rem;

color:var(--primary);

margin-top:4px;

}

.contact-form{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}

.contact-form form{

display:flex;
flex-direction:column;
gap:15px;

}

.contact-form input,
.contact-form textarea{

padding:15px;

border:
1px solid var(--border);

border-radius:10px;

}

.contact-form textarea{

height:180px;

resize:none;

}

.contact-form button{

padding:15px;

background:var(--primary);

color:#fff;

font-weight:700;

border-radius:10px;

cursor:pointer;

}

/* ---------- FORMS ---------- */

input,
textarea,
select{

width:100%;

}

input:focus,
textarea:focus{

border-color:var(--primary);

box-shadow:
0 0 0 4px rgba(214,40,40,.15);

}

/* ---------- APPOINTMENT MODAL ---------- */

.modal{

position:fixed;

inset:0;

background:
rgba(0,0,0,.75);

display:none;

align-items:center;
justify-content:center;

z-index:99999;

padding:20px;

}

.modal.active{

display:flex;

}

.modal-content{

background:#fff;

width:100%;
max-width:700px;

border-radius:20px;

padding:40px;

position:relative;

animation:modalFade .4s ease;

}

@keyframes modalFade{

from{

opacity:0;
transform:translateY(50px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.close-modal{

position:absolute;

top:15px;
right:20px;

font-size:2rem;

cursor:pointer;

}

.modal-content h2{

margin-bottom:25px;

}

.modal-content form{

display:grid;

grid-template-columns:
1fr 1fr;

gap:15px;

}

.modal-content textarea{

grid-column:span 2;

height:120px;

}

.modal-content button{

grid-column:span 2;

padding:15px;

background:var(--primary);

color:#fff;

font-weight:700;

border-radius:10px;

cursor:pointer;

}

/* ---------- NEWSLETTER ---------- */

.newsletter-box{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

}

.newsletter-box form{

display:flex;

gap:15px;

margin-top:20px;

}

.newsletter-box input{

flex:1;

padding:15px;

border:
1px solid var(--border);

border-radius:10px;

}

.newsletter-box button{

padding:15px 30px;

background:var(--primary);

color:#fff;

border-radius:10px;

cursor:pointer;

}

/* ---------- HOURS CARD ---------- */

.hours-card{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

}

.hours-card ul li{

display:flex;

justify-content:space-between;

padding:10px 0;

border-bottom:
1px solid #eee;

}

/* ---------- LOCATION CARD ---------- */

.location-card{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:var(--shadow);

}

.location-card h3{

margin-bottom:15px;

}

/* ---------- EMERGENCY NOTICE ---------- */

.emergency-alert{

background:#fff3cd;

border-left:
6px solid #ffcc00;

padding:20px;

border-radius:10px;

margin-top:30px;

}

.emergency-alert strong{

display:block;

margin-bottom:8px;

}

/* ---------- SCROLL PROGRESS BAR ---------- */

.scroll-progress{

position:fixed;

top:0;
left:0;

height:4px;

background:var(--primary);

width:0%;

z-index:999999;

}

/* ---------- FLOATING CALL BUTTON ---------- */

.call-widget{

position:fixed;

bottom:100px;
left:25px;

width:60px;
height:60px;

border-radius:50%;

background:#d62828;

color:#fff;

display:flex;

align-items:center;
justify-content:center;

font-size:1.5rem;

box-shadow:
0 8px 20px rgba(0,0,0,.2);

z-index:999;

}

/* ---------- SECTION DIVIDERS ---------- */

.wave-divider{

overflow:hidden;

line-height:0;

}

.wave-divider svg{

display:block;

width:100%;

height:80px;

}

/* ==================================================
OMS URGENT CARE
STYLE.CSS PART 3
RESPONSIVE + ACCESSIBILITY + PERFORMANCE
================================================== */

/* ---------- LARGE DESKTOP ---------- */

@media (min-width:1600px){

.container{
max-width:1400px;
}

.hero-content h1{
font-size:5rem;
}

.section-title h2{
font-size:3rem;
}

}

/* ---------- DESKTOP ---------- */

@media (max-width:1200px){

.services-grid,
.blog-grid,
.blog-page-grid,
.providers-grid,
.services-page-grid,
.testimonial-grid{

grid-template-columns:
repeat(2,1fr);

}

.stats-grid{

grid-template-columns:
repeat(2,1fr);

gap:40px;

}

.footer-grid{

grid-template-columns:
repeat(2,1fr);

}

}

/* ---------- TABLET ---------- */

@media (max-width:992px){

.grid-2{

grid-template-columns:1fr;

}

.hero-content{

left:5%;
max-width:90%;

}

.hero-content h1{

font-size:3rem;

}

.mission-grid,
.insurance-grid,
.features-grid,
.gallery-grid{

grid-template-columns:
repeat(2,1fr);

}

.contact-grid{

grid-template-columns:1fr;

}

.modal-content form{

grid-template-columns:1fr;

}

.modal-content textarea,
.modal-content button{

grid-column:auto;

}

.page-hero h1{

font-size:2.5rem;

}

.cta-banner h2{

font-size:2rem;

}

}

/* ---------- MOBILE NAVIGATION ---------- */

@media (max-width:768px){

.top-bar{

flex-direction:column;
gap:10px;

padding:12px;

}

.marquee-container{

margin-left:0;
width:100%;

}

header{

position:sticky;

}

.hamburger{

display:block;

z-index:9999;

}

.nav-links{

position:fixed;

top:90px;
right:-100%;

width:280px;
height:calc(100vh - 90px);

background:#fff;

display:flex;
flex-direction:column;

padding:40px 25px;

gap:25px;

box-shadow:
-10px 0 25px rgba(0,0,0,.1);

transition:.4s ease;

}

body.dark-mode .nav-links{

background:#111;

}

.nav-links.active{

right:0;

}

.header-actions{

display:none;

}

.hero-slider{

height:70vh;

}

.hero-content{

text-align:left;

}

.hero-content h1{

font-size:2.4rem;

line-height:1.2;

}

.hero-content p{

font-size:1rem;

}

.section-title h2{

font-size:2rem;

}

.services-grid,
.blog-grid,
.blog-page-grid,
.providers-grid,
.services-page-grid,
.testimonial-grid,
.insurance-grid,
.features-grid,
.gallery-grid,
.mission-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid img{

margin:auto;

}

.newsletter-box form{

flex-direction:column;

}

.cta-banner{

padding:50px 25px;

}

.cta-banner h2{

font-size:1.8rem;

}

.page-hero{

padding:90px 20px;

}

.page-hero h1{

font-size:2rem;

}

.blog-post h1{

font-size:2rem;

}

.blog-post h2{

font-size:1.4rem;

}

.contact-form,
.contact-info{

padding:25px;

}

.map-section iframe{

height:350px;

}

}

/* ---------- SMALL MOBILE ---------- */

@media (max-width:576px){

.logo img{

height:60px;

}

.hero-slider{

height:65vh;

}

.hero-content h1{

font-size:2rem;

}

.hero-content p{

font-size:.95rem;

}

.cta-btn,
.outline-btn{

padding:12px 22px;

font-size:.95rem;

}

.service-card,
.service-box,
.provider-card,
.testimonial{

padding:25px;

}

.award-card{

padding:25px;

}

.award-card h2{

font-size:1.5rem;

}

.section-title{

margin-bottom:35px;

}

.section-title h2{

font-size:1.8rem;

}

.stat-box h3{

font-size:2.3rem;

}

.whatsapp-widget,
.call-widget{

width:55px;
height:55px;

font-size:1.4rem;

}

#backToTop{

width:50px;
height:50px;

}

.modal-content{

padding:25px;

}

.modal-content h2{

font-size:1.5rem;

}

}

/* ---------- EXTRA SMALL DEVICES ---------- */

@media (max-width:380px){

.hero-content h1{

font-size:1.7rem;

}

.hero-content p{

font-size:.9rem;

}

.logo img{

height:50px;

}

.portal-btn,
.appointment-btn{

padding:10px 14px;

font-size:.85rem;

}

}

/* ---------- ACCESSIBILITY ---------- */

:focus-visible{

outline:3px solid var(--primary);
outline-offset:3px;

}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible{

outline:3px solid var(--primary);

}

html{

-webkit-text-size-adjust:100%;

}

img{

height:auto;

}

/* ---------- SCREEN READER ---------- */

.sr-only{

position:absolute;

width:1px;
height:1px;

padding:0;
margin:-1px;

overflow:hidden;

clip:rect(0,0,0,0);

border:0;

}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce){

*{

animation:none !important;
transition:none !important;
scroll-behavior:auto !important;

}

}

/* ---------- HIGH CONTRAST ---------- */

@media (prefers-contrast: more){

.service-card,
.service-box,
.testimonial,
.blog-card,
.provider-card{

border:2px solid #000;

}

}

/* ---------- DARK MODE ENHANCEMENTS ---------- */

body.dark-mode{

background:#111;
color:#f5f5f5;

}

body.dark-mode .page-hero{

background:
linear-gradient(
135deg,
#8d1b1b,
#5f0f0f
);

}

body.dark-mode .service-card,
body.dark-mode .service-box,
body.dark-mode .provider-card,
body.dark-mode .testimonial,
body.dark-mode .blog-card,
body.dark-mode .mission-card,
body.dark-mode .contact-form,
body.dark-mode .contact-info,
body.dark-mode .hours-card,
body.dark-mode .location-card,
body.dark-mode .modal-content{

background:#1a1a1a;

color:#fff;

}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{

background:#222;
color:#fff;

border:1px solid #333;

}

body.dark-mode .faq-item{

background:#1a1a1a;

}

body.dark-mode .faq-question{

color:#fff;

}

body.dark-mode .faq-answer{

color:#ddd;

}

body.dark-mode footer{

background:#050505;

}

body.dark-mode .top-bar{

background:#000;

}

/* ---------- PERFORMANCE ---------- */

.hero img,
.gallery-item img,
.blog-card img,
.provider-card img{

content-visibility:auto;

}

section{

contain-intrinsic-size:1px 500px;

}

/* ---------- PRINT ---------- */

@media print{

header,
footer,
.whatsapp-widget,
.call-widget,
#backToTop,
.theme-toggle,
.hamburger{

display:none !important;

}

body{

background:#fff;
color:#000;

}

section{

padding:20px 0;

}

a{

text-decoration:underline;

}

}

/* ---------- UTILITIES ---------- */

.text-center{
text-align:center;
}

.text-left{
text-align:left;
}

.text-right{
text-align:right;
}

.mt-1{
margin-top:10px;
}

.mt-2{
margin-top:20px;
}

.mt-3{
margin-top:30px;
}

.mt-4{
margin-top:40px;
}

.mt-5{
margin-top:50px;
}

.mb-1{
margin-bottom:10px;
}

.mb-2{
margin-bottom:20px;
}

.mb-3{
margin-bottom:30px;
}

.mb-4{
margin-bottom:40px;
}

.mb-5{
margin-bottom:50px;
}

.py-1{
padding-top:10px;
padding-bottom:10px;
}

.py-2{
padding-top:20px;
padding-bottom:20px;
}

.py-3{
padding-top:30px;
padding-bottom:30px;
}

.py-4{
padding-top:40px;
padding-bottom:40px;
}

.py-5{
padding-top:50px;
padding-bottom:50px;
}

.hidden{
display:none;
}

.visible{
display:block;
}