@media (max-width: 700px) {
  .service-name {
    max-width: 100%;
    width: 100%;
    display: block;
    font-size: 2.2vmax;
    font-weight: 700;
    color: #1a237e;
    background: #f3f6fd;
    border-radius: 0.7em;
    padding: 0.7em 1em 0.7em 1em;
    margin-bottom: 1.1em;
    margin-top: 0.7em;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(25,118,210,0.07);
    letter-spacing: 0.01em;
    word-break: break-word;
  }
  .price-box {
    font-size: 2vmax;
    font-weight: 700;
    background: #1976d2;
    color: #fff;
    border-radius: 0.7em;
    padding: 0.6em 1.2em;
    margin-left: 0;
    margin-top: 0.5em;
    margin-bottom: 1.1em;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(25,118,210,0.09);
    letter-spacing: 0.03em;
    min-width: 90px;
    text-align: center;
  }
}
/* Remove dots from price-list */
.price-list {
  list-style: none;
  padding-left: 0;
}
.service-name {
  font-weight: 600;
  color: #222;
  font-size: clamp(1em, 1.2vw, 1.3em);
  letter-spacing: 0.2px;
  display: inline-block;
  max-width: 90%;
  vertical-align: middle;
  margin-right: 0.5em;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

@media (max-width: 700px) {
  .service-name {
    font-size: 1em;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  .service-name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    max-width: 100%;
  }
}
.service-name {
  font-weight: 600;
  color: #222;
  font-size: 1.08em;
  letter-spacing: 0.2px;
  display: inline-block;
  max-width: 60%;
  vertical-align: middle;
  padding-right: 0.5em;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
/* Service name style for better readability */
.service-name {
  font-weight: 600;
  color: #222;
  font-size: 1.08em;
  letter-spacing: 0.2px;
  display: inline-block;
  max-width: 60%;
  vertical-align: middle;
  padding-right: 0.5em;
  word-break: break-word;
}
/* Price box for service list */
.price-box {
  background: #1976d2;
  color: #fff;
  border-radius: 8px;
  padding: 0.25em 0.9em;
  font-weight: bold;
  font-size: 1em;
  margin-left: 1em;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(25,118,210,0.08);
  display: inline-block;
  min-width: 80px;
  text-align: center;
  border: 2px solid #fffde7;
}
body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background: #f7fafd; color: #222; }
header { background: #1976d2; color: #fff; padding: 1.5em 0 1em 0; text-align: center; }
.logo { font-size: 2em; font-weight: bold; letter-spacing: 1px; }
nav { margin-top: 1em; }
nav a { color: #fff; text-decoration: none; margin: 0 1.2em; font-size: 1.1em; font-weight: 500; transition: color 0.2s; }
nav a:hover { color: #ff9800; }
.hero { background: linear-gradient(90deg,#1976d2 60%,#ff9800 100%); color: #fff; text-align: center; padding: 3em 1em 2em 1em; position:relative; overflow:hidden; }
.hero h1 { font-size: 2.7em; margin-bottom: 0.3em; letter-spacing: 1px; }
.hero p { font-size: 1.35em; max-width: 650px; margin: 0 auto 1.2em auto; }
.button-group { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; margin: 2em 0 1em 0; }
/* Removed duplicate .modern-btn and related button styles. Use modern-buttons.css for button styles. */
.header-flex { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 0 1em; position: relative; height: 70px; }
.logo { font-size: 2em; font-weight: bold; letter-spacing: 1px; flex: 1; text-align: left; }
.hamburger { display: none; flex-direction: column; justify-content: center; align-items: flex-end; width: 40px; height: 40px; cursor: pointer; margin-left: auto; margin-right: 0; position: relative; z-index: 200; }
.hamburger span { height: 4px; width: 100%; background: #fff; margin: 5px 0; border-radius: 2px; transition: 0.3s; display: block; }
nav { margin-top: 0; }
@media (max-width: 700px) { .header-flex { flex-direction: row; justify-content: space-between; padding: 0 0.5em; height: 60px; } .logo { font-size: 1.3em; text-align: left; } nav { display: none; position: absolute; top: 100%; left: 0; width: 100vw; background: #1976d2; z-index: 100; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .hamburger { display: flex; align-items: center; margin-left: auto; margin-right: 0; } nav.active { display: block; } nav.active a { display: block; margin: 1em 0; } .button-group { flex-direction: column; } .section { padding: 1em 0.5em; } }
.section { max-width: 1100px; margin: 3em auto 2em auto; background: #fff; border-radius: 18px; box-shadow: 0 4px 24px rgba(25,118,210,0.10); padding: 2.5em 2em; }
.section h2 { color: #1976d2; margin-top: 0; }
.faq { margin-top: 2em; }
.faq strong { color: #1976d2; }
footer { background: #1976d2; color: #fff; text-align: center; padding: 2em 0; margin-top: 3em; border-radius: 18px 18px 0 0; }
footer .social { margin-top: 1.2em; }
footer .social a { margin: 0 10px; color: #fff; font-size: 1.7em; vertical-align: middle; }
footer .social i { font-size: 1.7em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.sticky-phone-btn, .sticky-whatsapp-btn, .sticky-message-btn, .sticky-email-btn {
  display: flex !important;
  position: fixed;
  bottom: 18px;
  z-index: 99999;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  font-size: 26px;
  color: #fff;
}
/* Equal 50px gap between each button */
.sticky-phone-btn { right: 18px; background: #ff9800; }
.sticky-whatsapp-btn { right: 68px; background: #25D366; }
.sticky-email-btn { right: 118px; background: #1976d2; }
.sticky-message-btn { right: 168px; background: #43a047; }
/* Adjust for mobile: 40px gap */
@media (max-width: 700px) {
  .sticky-phone-btn { right: 8px; }
  .sticky-whatsapp-btn { right: 48px; }
  .sticky-email-btn { right: 88px; }
  .sticky-message-btn { right: 128px; }
}
@media (max-width: 700px) {
  .sticky-phone-btn { right: 8px; }
  .sticky-whatsapp-btn { right: 58px; }
  .sticky-email-btn { right: 108px; }
  .sticky-message-btn { right: 158px; }
}