/* =================================
RESPONSIVE
================================= */
html, body {
overflow-x: hidden;
width: 100%;
}
.hero-content h1,
.section-heading,
.offer-banner h2,
.final-cta h2 {
overflow-wrap: break-word;
word-break: break-word;
}
.hero-slider {
overflow: hidden;
}

@media (max-width: 991px) {
.main-header {
background: rgba(41, 35, 31, .95);
padding: 15px 0;
}
.navbar-collapse {
padding: 20px 0;
}
.nav-link {
padding: 10px 0 !important;
}
.hero-slider {
min-height: 640px;
}
.feature-content {
padding: 60px 25px;
}
.price-card.featured {
transform: none;
}
.price-card.featured:hover {
transform: translateY(-8px);
}
}
@media (max-width: 767px) {
.section-space {
padding: 75px 0;
}
.hero-scroll {
display: none;
}
.about-image-wrap {
padding-right: 15px;
}
.about-image {
height: 450px;
}
.about-stamp {
width: 110px;
height: 110px;
font-size: 15px;
right: 0;
}
.feature-image {
height: 420px;
}
.before-after {
height: 400px;
}
.appointment-form {
padding: 25px;
}
.offer-banner {
padding: 55px 25px;
}
.gallery-item img {
height: 300px;
}
.testimonial-card {
padding: 30px 20px;
}
}

@media (max-width: 480px) {
.hero-content h1 {
font-size: clamp(32px, 9vw, 42px);
}
.hero-content p {
font-size: 14px;
margin-bottom: 25px;
}
.hero-eyebrow {
letter-spacing: 3px;
}
.hero-actions {
gap: 10px;
}
.hero-actions .btn-elora,
.hero-actions .btn-light-elora {
padding: 12px 20px;
font-size: 10px;
}
.hero-slider::after {
display: none;
}
.section-heading {
font-size: clamp(30px, 7vw, 38px);
}
.offer-banner {
padding: 45px 6%;
}
.final-cta {
padding: 70px 20px;
}
.about-image {
height: 320px;
}
.feature-image {
height: 300px;
}
.before-after {
height: 320px;
}
.gallery-item img {
height: 240px;
}

.brand { width:180px}


}

/* =================================
NEWSLETTER BANNER (footer) — responsive fixes
================================= */
/* Let the input shrink inside the flex form (default input width was
   forcing the button outside the screen on phones) */
.newsletter-form input {
min-width: 0;
width: 100%;
}
/* Tablet / small laptop: stack the banner so text and form never wrap awkwardly */
@media (max-width: 1099px) {
.footer-newsletter {
flex-direction: column;
align-items: stretch;
text-align: center;
padding: 32px 30px;
border-radius: 40px;
gap: 20px;
}
.footer-newsletter .newsletter-form {
min-width: 0;
max-width: 520px;
width: 100%;
flex: 0 0 auto;
margin: 0 auto;
}
}
/* Phones: stacked input + full-width button */
@media (max-width: 575px) {
.footer-newsletter {
padding: 28px 18px;
border-radius: 24px;
}
.footer-newsletter h3 {
font-size: 20px;
}
.footer-newsletter p {
font-size: 14px;
}
.footer-newsletter .newsletter-form {
flex-direction: column;
border-radius: 20px;
padding: 8px;
gap: 8px;
max-width: none;
}
.footer-newsletter .newsletter-form input {
padding: 14px 16px;
text-align: center;
font-size: 14px;
}
.footer-newsletter .newsletter-form button {
width: 100%;
height: 48px;
padding: 0 20px;
border-radius: 14px;
}
}

/* =================================
PACKAGES TABLE — allow horizontal swipe on small screens
(table has min-width:680px, wrapper had no overflow so it was clipped)
================================= */
.pk-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

/* =================================
HEADER — small laptops / landscape tablets (992–1199px)
Keeps menu on one line and stops "Book Appointment" from wrapping
================================= */
.header-book {
white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1199px) {
.nav-link {
margin: 0 2px;
font-size: 13px;
letter-spacing: .5px;
}
.header-book {
padding: 10px 14px;
font-size: 12px;
letter-spacing: 1px;
}
}