.elementor-kit-11{--e-global-color-primary:#1E3A8A;--e-global-color-secondary:#2563EB;--e-global-color-text:#334155;--e-global-color-accent:#0F766E;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//*
 * DR. TANVIR ORTHOPEDIC MEDICAL WEBSITE - GLOBAL CUSTOM CSS
 * 
 * Instructions:
 * 1. Go to your WordPress Dashboard > Appearance > Customize > Additional CSS.
 * 2. Copy and paste this entire CSS code there.
 * 3. In Elementor, when building widgets, go to the widget's "Advanced" tab.
 * 4. Find the "CSS Classes" field and type the matching class name (without the dot, e.g., "medical-chip" or "wp-chamber-card").
 */

:root {
  /* Branding Colors */
  --primary-blue: #2563EB;     /* Standard medical blue */
  --deep-blue: #1E3A8A;        /* Deep hospital blue */
  --medical-teal: #0F766E;     /* Surgical teal */
  --dark-text: #0F172A;        /* Dark gray for readability */
  --body-text: #334155;        /* Neutral dark for body copy */
  --muted-text: #64748B;       /* Muted gray for small text */
  --soft-bg: #F8FAFC;          /* Extremely soft blue-gray background */
  --soft-blue: #EFF6FF;        /* Light blue highlights */
  --soft-teal: #ECFDF5;        /* Light teal highlights */
  --white: #FFFFFF;
  --border: #E2E8F0;           /* Soft borders */
  
  /* Alert Colors */
  --caution: #F59E0B;          /* Caution orange */
  --caution-bg: #FFFBEB;
  --danger: #DC2626;           /* Emergency red */
  --danger-bg: #FEF2F2;

  /* Layout Standards */
  --radius: 18px;              /* Soft rounded corners */
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.08); /* Premium hover shadow */
}

/* --- FONTS & DEFAULTS --- */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--body-text);
  background-color: var(--soft-bg);
}

/* --- TEXT & ACCENTS --- */
/* Add class "medical-eyebrow" to an Elementor Heading widget (HTML tag: span) */
.medical-eyebrow {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--medical-teal) !important;
  margin-bottom: 12px !important;
}

/* Add class "lead-text" to an Elementor Text Editor widget */
.lead-text p, .lead-text {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--body-text) !important;
  margin-bottom: 20px !important;
}

/* Add class "bold-subtitle" to an Elementor Heading widget (HTML tag: p) */
.bold-subtitle {
  font-size: 20px !important;
  color: var(--dark-text) !important;
  font-weight: 750 !important;
  margin-bottom: 12px !important;
}

/* --- CREDENTIALS CHIPS --- */
/* Add class "medical-chip-container" to the Elementor Inner Section or Column */
.medical-chip-container .elementor-widget-heading {
  margin-right: 8px !important;
  margin-bottom: 8px !important;
}

/* Add class "medical-chip" to an Elementor Heading widget (HTML tag: span or div) */
.medical-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background-color: var(--soft-teal) !important;
  border: 1px solid #BDEFE4 !important;
  color: var(--medical-teal) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

/* --- PREMIUM BUTTON STYLES --- */
/* Add these classes to Elementor Button widgets */
.wp-btn-primary a {
  background-color: var(--primary-blue) !important;
  color: var(--white) !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 14px !important;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.18) !important;
  border: 1px solid var(--primary-blue) !important;
  transition: all 0.2s ease !important;
}
.wp-btn-primary a:hover {
  background-color: var(--deep-blue) !important;
  border-color: var(--deep-blue) !important;
  transform: translateY(-1px);
}

.wp-btn-outline a {
  background-color: var(--white) !important;
  color: var(--primary-blue) !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 14px !important;
  border: 1.5px solid var(--primary-blue) !important;
  transition: all 0.2s ease !important;
}
.wp-btn-outline a:hover {
  background-color: var(--soft-blue) !important;
  transform: translateY(-1px);
}

.wp-btn-teal a {
  background-color: var(--medical-teal) !important;
  color: var(--white) !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 14px !important;
  box-shadow: 0 10px 25px rgba(15, 118, 110, 0.16) !important;
  border: 1px solid var(--medical-teal) !important;
  transition: all 0.2s ease !important;
}
.wp-btn-teal a:hover {
  background-color: #0B5F59 !important;
  border-color: #0B5F59 !important;
  transform: translateY(-1px);
}

.wp-btn-soft a {
  background-color: var(--soft-blue) !important;
  color: var(--deep-blue) !important;
  border-radius: 12px !important;
  font-weight: 750 !important;
  font-size: 14px !important;
  border: 1px solid #BFDBFE !important;
  transition: all 0.2s ease !important;
}
.wp-btn-soft a:hover {
  background-color: #DBEAFE !important;
  transform: translateY(-1px);
}

/* --- MEDICAL INFO CARDS --- */
/* Add class "doctor-card" to the Column holding the Doctor photo */
.doctor-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  padding: 20px !important;
  box-shadow: var(--shadow) !important;
}

/* Add class "doctor-photo-placeholder" to a Spacer or Image Box */
.doctor-photo-placeholder {
  min-height: 340px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(37, 99, 235, 0.14), transparent 32%),
    radial-gradient(circle at 65% 70%, rgba(15, 118, 110, 0.12), transparent 34%),
    linear-gradient(135deg, #DBEAFE, #F8FAFC) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  color: var(--muted-text) !important;
  border: 2px dashed #CBD5E1 !important;
  margin-bottom: 18px !important;
  padding: 24px !important;
  font-weight: 700 !important;
}

/* Add class "wp-chamber-card" to any Column or Inner Section for visiting details */
.wp-chamber-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-top: 5px solid var(--medical-teal) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s ease !important;
}
.wp-chamber-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px);
}

/* Add class "wp-problem-card" to Columns in the "What Problem Are You Facing?" section */
.wp-problem-card {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-top: 5px solid var(--primary-blue) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s ease !important;
}
.wp-problem-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px);
}

/* Add class "wp-trust-card" to Columns in the "Why Patients Look for Specialist Care" section */
.wp-trust-card {
  background: var(--white) !important;
  border: 1px solid #BDEFE4 !important; /* Greenish/teal border */
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s ease !important;
}
.wp-trust-card:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-2px);
}

/* Metadata label inside cards */
.meta-line {
  color: var(--muted-text) !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

/* Card Link Text */
.card-link {
  color: var(--primary-blue) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  display: inline-block !important;
  margin-top: 10px !important;
  transition: 0.2s ease !important;
}
.card-link:hover {
  color: var(--deep-blue) !important;
  padding-left: 4px;
}

/* --- LIST KEYS (CHECKMARKS) --- */
/* Add class "trust-list" to an Elementor Icon List widget */
.trust-list .elementor-icon-list-icon {
  background-color: var(--soft-teal) !important;
  color: var(--medical-teal) !important;
  border-radius: 50% !important;
  width: 22px !important;
  height: 22px !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 10px !important;
  margin-right: 10px !important;
}
.trust-list .elementor-icon-list-item {
  align-items: flex-start !important;
  font-size: 14px !important;
  margin-bottom: 8px !important;
}

/* --- ALERT & CAUTION BOXES --- */
/* Add class "wp-caution-box" to an Elementor Text Editor widget */
.wp-caution-box {
  background-color: var(--caution-bg) !important;
  border: 1px solid var(--caution) !important;
  border-left: 5px solid var(--caution) !important;
  color: var(--dark-text) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  font-size: 13.5px !important;
  margin-top: 15px !important;
  line-height: 1.5 !important;
}

/* Add class "wp-danger-box" to an Elementor Text Editor widget (e.g. for Emergencies) */
.wp-danger-box {
  background-color: var(--danger-bg) !important;
  border: 1px solid var(--danger) !important;
  border-left: 5px solid var(--danger) !important;
  color: var(--dark-text) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  font-size: 13.5px !important;
  margin-top: 15px !important;
  line-height: 1.5 !important;
}

/* --- APPOINTMENT REQUEST FORM --- */
/* Add class "wp-appointment-form" to the Column containing your Form widget */
.wp-appointment-form {
  background-color: var(--soft-blue) !important;
  border: 1px solid #BFDBFE !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
}
.wp-appointment-form h3 {
  color: var(--deep-blue) !important;
  margin-bottom: 18px !important;
}
.wp-appointment-form input,
.wp-appointment-form select,
.wp-appointment-form textarea {
  width: 100% !important;
  min-height: 46px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  background: var(--white) !important;
  font-family: inherit !important;
  color: var(--dark-text) !important;
  transition: border-color 0.2s ease !important;
}
.wp-appointment-form input:focus,
.wp-appointment-form select:focus,
.wp-appointment-form textarea:focus {
  border-color: var(--primary-blue) !important;
  outline: none !important;
}
.wp-appointment-form .privacy-note {
  font-size: 12.5px !important;
  color: var(--muted-text) !important;
  margin-top: 14px !important;
  line-height: 1.5 !important;
}

/* --- CUSTOM ELEMENTOR ACCORDION / TOGGLE STYLE --- */
/* Add class "wp-faq-accordion" to Elementor's Accordion widget */
.wp-faq-accordion .elementor-accordion-item {
  background-color: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}
.wp-faq-accordion .elementor-tab-title {
  padding: 18px 20px !important;
  font-weight: 750 !important;
  color: var(--dark-text) !important;
  cursor: pointer !important;
}
.wp-faq-accordion .elementor-tab-title.elementor-active {
  border-bottom: 1px solid var(--border) !important;
}
.wp-faq-accordion .elementor-tab-content {
  padding: 16px 20px !important;
  color: var(--body-text) !important;
  line-height: 1.6 !important;
}

/* --- FOOTER BRADING --- */
/* Add class "wp-site-footer" to the theme's footer area */
.wp-site-footer {
  background-color: var(--deep-blue) !important;
  color: #DBEAFE !important;
}
.wp-site-footer a {
  color: #DBEAFE !important;
  transition: color 0.2s ease !important;
}
.wp-site-footer a:hover {
  color: var(--white) !important;
}

/* --- MOBILE STICKY BOTTOM ACTIONS --- */
/* Place an HTML widget at the bottom of the page containing the sticky bar */
.wp-mobile-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10);
}
.wp-mobile-bottom-bar a,
.wp-mobile-bottom-bar button {
  min-height: 58px;
  border: 0;
  background: transparent;
  color: var(--primary-blue);
  font-weight: 800;
  font-size: 12px;
  display: grid;
  place-items: center;
  text-decoration: none;
  cursor: pointer;
}
.wp-mobile-bottom-bar .teal {
  color: var(--medical-teal);
}

/* Hide mobile bottom bar on desktop screen sizes */
@media (min-width: 720px) {
  .wp-mobile-bottom-bar {
    display: none !important;
  }
}/* End custom CSS */