/* Dental Arts Brand CSS - Complete Design System */

/* ===== DESIGN TOKENS & VARIABLES ===== */
:root {
  /* Brand Colors */
  --da-blue: #38c6ff;
  --da-gray: #77787B;
  --brand: #38c6ff;
  
  /* Design System Colors */
  --primary: #38c6ff;
  --primary-hover: #0099cc;
  --secondary: #77787B;
  --dark: #0f172a;
  --da-primary: #50C2F0; /* DEFAULT */
  --da-primary-100: #C9EEFB;
  --da-primary-200: #A1E1F8;
  --da-primary-300: #78D4F5;
  --da-primary-400: #50C2F0;
  --da-primary-500: #3BB4E6;
  --da-primary-600: #2FA0CE;
  --da-primary-700: #1E87B1;
  --da-primary-800: #106C8F;
  --da-primary-900: #0B5470;
  --da-accent: #14B8A6;
}




/* ===== BUTTON SYSTEM ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; border: none; cursor: pointer; transition: all 0.3s ease; line-height: 1; white-space: nowrap; border-radius: 6px;}

.btn-primary { background: linear-gradient(135deg, var(--da-primary-400), var(--da-accent)); color: white;}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--da-primary-600), var(--da-accent));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  color: white;
}

.btn-secondary { background: transparent; color: var(--da-primary); border: 2px solid var(--da-primary); }

.btn-secondary:hover {
  background: var(--da-primary-300);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  color: white;
}

.form-input.required-field {
  border-color: var(--da-primary-300);
  box-shadow: 0 0 0 1px rgba(80, 194, 240, 0.35);
}

.form-input.required-field:focus {
  border-color: var(--da-accent);
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.55);
}

.slot-book-btn.is-disabled,
.slot-book-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}


/* Homepage Services Preview Section */
.services-preview-section { margin: 4rem 0; padding: 2rem 0; background: #f8fafc; border-radius: 16px; }
.services-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.services-preview-header h2 { margin: 0; font-size: 2.25rem; font-weight: 700; color: #1e293b; }

/* Homepage Providers Preview Section */
.providers-preview-section { margin: 4rem 0; }
.providers-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.providers-preview-header h2 { margin: 0; font-size: 2.25rem; font-weight: 700; color: #1e293b; }

.view-all-link { color: var(--da-blue); text-decoration: none; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; }
.view-all-link:hover { color: #0099cc; transform: translateX(4px); }
.view-all-link i { font-size: 0.875rem; transition: transform 0.3s ease; }
.view-all-link:hover i { transform: translateX(2px); }

/* Hero Section Styles */
.hero-section { position: relative; height: 600px; display: flex; align-items: center; overflow: hidden; color: #fff; }

.hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.hero-text { max-width: 600px; }
.hero-text h1 { font-size: 3rem; line-height: 1.2; font-weight: 700; margin-bottom: 1rem; color: white; }
.hero-text p { font-size: 1.25rem; line-height: 1.6; color: #ddd; margin-bottom: 2rem; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 768px) { 
  .services-preview-header { flex-direction: column; align-items: flex-start; gap: 1rem; } 
  .services-preview-header h2 { font-size: 1.75rem; } 
  .view-all-link { align-self: flex-end; } 
  .hero-section { height: 500px; } 
  .hero-text h1 { font-size: 2.5rem; } 
  .hero-text p { font-size: 1.1rem; } 
}

@media (max-width: 480px) { 
  .hero-section { height: auto; padding: 3rem 1rem; text-align: center; } 
  .hero-buttons { flex-direction: column; align-items: center; } 
}


.hero-section {position: relative; height: 600px; display: flex; align-items: center; overflow: hidden; color: #fff;}

.hero-content {position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;}
.hero-text {max-width: 600px;}
.hero-text h1 {font-size: 3rem; line-height: 1.2; font-weight: 700; margin-bottom: 1rem;}
.hero-text p {font-size: 1.25rem; line-height: 1.6; color: #ddd; margin-bottom: 2rem;}
.hero-buttons {display: flex; flex-wrap: wrap; gap: 1rem;}
@media (max-width: 768px) {.hero-section {height: 500px;} .hero-text h1 {font-size: 2.5rem;} .hero-text p {font-size: 1.1rem;}}
@media (max-width: 480px) {.hero-section {height: auto; padding: 3rem 1rem; text-align: center;} .hero-buttons {flex-direction: column; align-items: center;}}


:root { --brand: #00B5E2; --ink: #1b1b1b; --bg: #ffffff; --muted: #75787B; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', system-ui, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; }

/* Typography improvements */
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; color: #1e293b; margin-top: 0; }

h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 2rem; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.875rem; }

.site-nav { position: sticky; top: 0; z-index: 1100; background: white; border-bottom: 1px solid #e6eef5; box-shadow: 0 2px 8px rgba(12, 18, 24, 0.04); }
.site-nav .nav-container { display:flex; justify-content: space-between; align-items:center; gap:1rem; padding:0.5rem 0; }
.nav-logo { font-weight:700; color:var(--brand); text-decoration:none; font-size:1.125rem; }
.nav-left {display: flex; align-items: center; gap: 1rem;}
.nav-logo-image { height: 50px; width: auto; display: block;}
.nav-toggle { display:none; background:transparent; border:0; font-size:1.2rem; cursor:pointer; margin-left:auto; }
.nav-links { display:flex; align-items:center; gap:1rem; }
.nav-list { list-style:none; display:flex; gap:1rem; padding:0; margin:0; align-items:center; }
.nav-list a { color:var(--ink); text-decoration:none; padding:0.5rem 0.5rem; display:block; }
.nav-cta { background:var(--brand); color:white; border-radius:8px; padding:0.55rem 1rem; text-decoration:none; font-weight:600; }
.nav-cta:hover { background:#0099cc; }

/* Mobile behaviour */
@media (max-width: 768px) {
  .nav-toggle { display:block; margin-left:0.5rem; }
  .nav-links { position: absolute; right: 0; left: 0; top: 100%; background: white; display:none; flex-direction:column; gap:0.5rem; padding:1rem; border-bottom:1px solid #eef2f6; }
  .nav-links.open { display:flex; }
  .nav-list { flex-direction:column; gap:0.25rem; }
  .nav-cta { width:100%; text-align:center; }
}
.site-header { background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.site-footer { background: #f8fafc; border-top: 1px solid #e5e7eb; color: var(--muted); font-size: 0.9rem; }
h1, h2, h3 { color: #0f172a; }
.offices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; margin: 2rem 0; }

.office-location-card { background: #fff; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; }

.office-location-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.office-name { font-size: 1.5rem; margin: 0 0 1.5rem; color: #0f172a; }

.office-details { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.5rem; }

.office-detail { display: flex; gap: 1rem; align-items: flex-start; }

.office-detail i { color: var(--brand); font-size: 1.2rem; width: 1.5rem; margin-top: 0.2rem; }

.office-detail span {
  flex: 1;
  line-height: 1.5;
}

.office-actions { display: flex; gap: 1rem; margin-top: 2rem; }

/* Breadcrumb */
.breadcrumb { margin-bottom: 0.75rem; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.5rem; align-items: center; }
.breadcrumb li:not(:last-child):after { content: '/'; margin-left: 0.5rem; color: var(--muted); }
.breadcrumb a { color: var(--brand); text-decoration: none; }

/* Office layout */
.office-hero.two-col { display:flex; gap:2rem; align-items:flex-start; margin:2.25rem 0; }
.office-hero-right { width:360px; }
.tagline { color:#666; margin-bottom:0.75rem; }

.office-contact { margin-top: 1rem; display:flex; flex-direction:column; gap:0.75rem; }
.contact-item { display:flex; gap:0.75rem; align-items:flex-start; }
.contact-item .icon { font-size:1.2rem; line-height:1; margin-top:4px; }
.contact-body .contact-label { font-size:0.95rem; color:var(--muted); }
.contact-body .contact-value { margin-top:0.25rem; font-weight:600; }

.office-hours.card { border:1px solid #eee; padding:1rem; border-radius:8px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.office-hours h4 { margin:0 0 0.5rem 0; }
.hours-list { list-style:none; padding:0; margin:0; }
.hours-list li { display:flex; justify-content:space-between; padding:0.25rem 0; border-bottom:1px solid #f3f4f6; }
.hours-list li:last-child { border-bottom: none; }
.hours-list .day { color:var(--muted); }

/* Map */
.office-map { margin:2.5rem 0; }
.map-wrapper iframe { width:100%; height:360px; border:0; border-radius:6px; }

.office-content { margin:2rem 0; }

/* Providers */
.office-providers h3 { font-size: 2rem; font-weight: 600; color: #1e293b; margin-bottom: 2rem; text-align: center; }

/* Reviews Section */
.office-reviews { margin: 3rem 0; }
.office-reviews h3 { font-size: 2rem; font-weight: 600; color: #1e293b; margin-bottom: 2rem; text-align: center; }

.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; }

.review-card { background: #fff; border-radius: 16px; padding: 2.5rem 2rem; border: 2px solid #f1f5f9; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; text-align: left; }

.review-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); border-color: #e2e8f0; }

.quote-icon { text-align: left; margin-bottom: 1rem; }

.quote-icon i { font-size: 2.5rem; color: var(--brand); opacity: 0.8; }

.review-rating { display: flex; gap: 0.25rem; color: var(--brand); font-size: 1.25rem; margin-bottom: 1.5rem; justify-content: flex-start; }

.review-text { margin-bottom: 1.5rem; line-height: 1.7; color: #64748b; }

.review-text p { margin: 0; font-size: 1rem; }

.review-author { font-size: 1rem; color: #1e293b; text-align: left; }

.review-author strong { font-weight: 600; }

.provider-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:1.5rem; }

.provider-card { background:#fff; border-radius:12px; overflow:hidden; border:2px solid #f1f5f9; box-shadow:0 8px 24px rgba(7,12,20,0.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.provider-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(7,12,20,0.12); border-color: #e2e8f0; }

.provider-photo img { width:100%; height:240px; object-fit:cover; display:block; }

.photo-placeholder { height:240px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 3rem; }

.provider-body { padding: 1.5rem 1rem; display: flex; flex-direction: column; justify-content: space-between; }

@media screen and (max-width: 480px) {
  .provider-body { padding: 0.75rem 0.5rem; }
}
@media screen and (max-width: 767px) {
  .provider-body { padding: 1rem 0.75rem; }
}

.provider-body h4 { margin:0 0 0.5rem; font-size:1.25rem; font-weight: 600; color: #1e293b; }

.provider-body h4 a { color: inherit; text-decoration: none; transition: color 0.2s ease; }

.provider-body h4 a:hover { color: var(--brand); }

.provider-title { color: #64748b; margin-bottom:0.75rem; font-size:1rem; font-weight: 500; }

.provider-specialties { margin:1rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.specialty { display:inline-block; background: #f1f5f9; color: #475569; padding: 0.375rem 0.75rem; border-radius: 999px; font-size:0.75rem; font-weight: 400; text-decoration:none; }

.provider-tags { margin-top:1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.tag { display:inline-block; background: linear-gradient(135deg, var(--brand), #3b82f6); color: white; padding:0.375rem 0.75rem; border-radius:999px; font-size:0.75rem; font-weight: 400; }


.credentials { color: var(--brand); font-weight: 600; font-size: 0.95rem; }

/* Services grid (re-usable) */
.office-services { margin: 2.5rem 0; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin: 3rem 0; }

/* Original service card for backwards compatibility */
.service-card { display: block; background: #fff; padding: 1.25rem; border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid #e5e7eb; transition: all 0.18s ease; }
.service-card:hover { transform: translateY(-3px); box-shadow:0 8px 24px rgba(7,12,20,0.04); border-color: var(--brand); }
.service-card h4 { margin: 0 0 0.5rem; color: var(--brand); }
.service-card p { margin:0; color:var(--muted); }

/* Modern service cards */
.service-card.modern { display: flex; flex-direction: column; background: #ffffff; padding: 2rem; border-radius: 16px; text-decoration: none; color: inherit; border: 2px solid #f1f5f9; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }

.service-card.modern::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand), #3b82f6); transform: scaleX(0); transition: transform 0.3s ease; }

.service-card.modern:hover::before { transform: scaleX(1); }

.service-card.modern:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); border-color: #e2e8f0; }



.service-card.modern:hover .service-icon { transform: scale(1.1); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }


.service-description { margin: 0 0 1.5rem 0; color: #64748b; font-size: 0.95rem; line-height: 1.6; flex-grow: 1; }

.service-arrow { margin-top: auto; display: flex; justify-content: flex-end; color: var(--brand); font-size: 1rem; transition: all 0.3s ease; }

.service-card.modern:hover .service-arrow { transform: translateX(4px); color: #3b82f6; }

/* Page intro styling */
.page-intro { text-align: center; margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto; }

.page-intro h1 { margin: 0 0 1rem 0; font-size: 2.5rem; font-weight: 700; color: #1e293b; }

.page-intro .lead { font-size: 1.125rem; color: #64748b; line-height: 1.7; margin: 0; }

/* Doctors grid and cards */
.doctors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0; }

.doctor-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; }

.doctor-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.doctor-photo img { width: 100%; aspect-ratio: 1; height: auto; background: #f8fafc;object-fit: cover;  }


.doctor-info { padding: 1.5rem; }

.doctor-info h3 { margin: 0 0 0.25rem; font-size: 1.25rem; }

.doctor-info h3 a { color: inherit; text-decoration: none; }

.credentials { color: var(--brand); font-weight: 500; font-size: 0.9rem; }

.doctor-title { color: var(--muted); margin: 0.5rem 0; font-size: 0.95rem; }

.doctor-specialties { margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.specialty-tag { background: #f1f5f9; color: #334155; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; }

.doctor-locations { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

.location-tag { background: var(--brand); color: white; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; }

/* Doctor Profile Page */
.doctor-profile { margin: 2rem 0; }

.doctor-hero.two-col { display: grid; grid-template-columns: 360px 1fr; gap: 3rem; margin-bottom: 3rem; }

.doctor-hero-left .doctor-photo { width: 100%; height: auto; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.08); }

.doctor-hero-left .doctor-photo img { width: 100%; height: 100%; object-fit: cover; }

.doctor-hero-right h2 { margin: 0 0 0.5rem; font-size: 2rem; }

.doctor-education { margin-top: 2rem; padding: 1.5rem; background: #f8fafc; border-radius: 12px; }

.doctor-education h3 { margin: 0 0 1rem; font-size: 1.25rem; }

.doctor-education ul { margin: 0; padding-left: 1.5rem; color: var(--muted); }

.doctor-education li { margin-bottom: 0.5rem; }

.doctor-content { margin: 3rem 0; max-width: 70ch; line-height: 1.6; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .doctor-hero.two-col { grid-template-columns: 1fr; gap: 2rem; }
  
  .doctor-hero-left .doctor-photo { max-width: 320px; margin: 0 auto; }
}

/* Community: media grid for event photos */
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }

.media-grid picture,
.media-grid img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

@media (min-width: 992px) {
  .media-grid img { height: 200px; }
}

/* Hero Sections for Home Page */
.hero-section { padding: 4rem 0; background: #ffffff; }

.hero-section.hero-primary { background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%); padding-top: 3rem; }

.hero-section.hero-secondary { background: #ffffff; border-top: 1px solid #e5e7eb; }

.hero-content { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.hero-content.hero-reverse { grid-template-columns: 1fr 1fr; }

.hero-text h2 { font-size: 2.5rem; font-weight: 700; color: #0f172a; margin: 0 0 1.5rem; line-height: 1.2; }

.hero-text p { font-size: 1.125rem; color: var(--muted); margin-bottom: 2rem; line-height: 1.6; }

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-image { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); }

.hero-image img { width: 100%; height: auto; display: block; object-fit: cover; }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; }

.feature-item { display: flex; gap: 1rem; align-items: flex-start; }

.feature-item i { color: var(--brand); font-size: 1.5rem; margin-top: 0.25rem; flex-shrink: 0; }

.feature-item h4 { font-size: 1.125rem; margin: 0 0 0.5rem; color: #0f172a; }

.feature-item p { margin: 0; font-size: 0.95rem; color: var(--muted); line-height: 1.5; }

/* Responsive adjustments for hero sections */
@media (max-width: 992px) {
  .hero-content,
  .hero-content.hero-reverse { grid-template-columns: 1fr; gap: 2.5rem; }

  .hero-content.hero-reverse .hero-image { order: 2; }

  .hero-content.hero-reverse .hero-text { order: 1; }

  .hero-text h2 { font-size: 2rem; }

  .feature-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 768px) {
  .hero-section { padding: 2.5rem 0; }

  .hero-text h2 { font-size: 1.75rem; }

  .hero-text p { font-size: 1rem; }

  .hero-actions { flex-direction: column; }

  .btn-primary,
  .btn-secondary { width: 100%; text-align: center; }
}

/* Services Overview Section */
.services-overview-section { padding: 5rem 0; background: #f8fafc; }


.section-header { text-align: center; margin-bottom: 3rem; }

.section-header h2 { font-size: 2.25rem; font-weight: 700; color: #0f172a; margin: 0 0 1rem; }

.section-header p { font-size: 1.125rem; color: var(--muted); max-width: 700px; margin: 0 auto; line-height: 1.6; }

.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

.service-card { background: white; padding: 2rem 1.5rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; text-align: left; }

.service-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.service-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }

.service-icon i { font-size: 2.5rem; color: var(--brand); }

.service-card h3 { font-size: 1.25rem; font-weight: 600; color: #0f172a; margin: 0 0 0.75rem; }

.service-card p { font-size: 0.95rem; color: var(--muted); margin: 0; line-height: 1.6; }

/* Responsive adjustments for services section */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 768px) {
  .services-overview-section { padding: 3rem 0; }
  
  .services-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  
  .provider-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
  
  .reviews-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  
  .review-card { padding: 2rem 1.5rem; }
  
  .quote-icon i { font-size: 2rem; }
  
  .review-rating { font-size: 1rem; }
  
  .office-hero.two-col { grid-template-columns: 1fr; gap: 2rem; }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
  
  
  .page-intro h1 { font-size: 2rem; }
  
  
  .service-card.modern { padding: 1.5rem; }

  .section-header h2 { font-size: 1.75rem; }

  .section-header p { font-size: 1rem; }

  .service-card { padding: 1.5rem; }
}