/* ==========================================================================

   1. CSS VARIABLES & BASE RESETS

   ========================================================================== */

:root {

  --m-red: #c51226;

  --m-red-dark: #a60f20;

  --m-dark: #0f172a;

  --m-yellow: #ffc400;

  --m-purple: #4a235a;

  --m-soft: #f8fafc;

  --m-line: #e2e8f0;

  --m-wrap: min(1180px, calc(100% - 40px));

}



*, *::before, *::after {

  box-sizing: border-box;

}



html, body {

  margin: 0;

  padding: 0;

  overflow-x: hidden;

  font-family: 'Poppins', 'Plus Jakarta Sans', Arial, sans-serif;

  color: #172033;

  background-color: #fff;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



/* Common Container */

.seo-wrap,

.mi-wrap,

.ap-wrap {

  width: var(--m-wrap);

  margin-left: auto;

  margin-right: auto;

}



/* ==========================================================================

   2. HEADER & NAVIGATION

   ========================================================================== */

.medco-site-header {

  position: relative;

  z-index: 9999;

  background: #fff;

  border-bottom: 1px solid #e5e7eb;

}



/* Top Notification Bar */

.mh-top {

  height: 38px;

  background: var(--m-dark);

  color: #fff;

  font-size: 10px;

  letter-spacing: 0.035em;

  display: flex;

  align-items: center;

}



.mh-top a {

  color: #fff;

  text-decoration: none;

  font-weight: 700;

}



.mh-top-inner {

  width: min(1280px, calc(100% - 40px));

  height: 100%;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 10px;

  font-weight: 600;

}



.mh-contact {

  display: flex;

  align-items: center;

  gap: 20px;

}



.mh-social {

  display: flex;

  align-items: center;

  gap: 7px;

}



.mh-social a {

  width: 25px;

  height: 25px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  background: rgba(255, 255, 255, 0.1);

  transition: 0.2s;

}



.mh-social a:hover {

  background: var(--m-yellow);

  transform: translateY(-1px);

}



.mh-social svg {

  width: 12px;

  height: 12px;

  fill: #fff;

}



.mh-social a:hover svg {

  fill: #111827;

}



/* Main Navigation Bar */

.mh-main {

  height: 76px;

  display: flex;

  align-items: center;

  gap: 28px;

  width: min(1280px, calc(100% - 40px));

  margin: auto;

}



.mh-logo img {

  width: 145px;

  height: auto;

}



.mh-nav {

  display: flex;

  align-items: center;

  gap: 27px;

  margin-left: auto;

}



.mh-nav > a,

.mh-drop > a {

  font-size: 14px;

  font-weight: 500;

  color: #1f2937;

  text-decoration: none;

  padding: 26px 0;

  white-space: nowrap;

}



.mh-nav > a:hover,

.mh-drop > a:hover {

  color: var(--m-red);

}



.mh-drop {

  position: relative;

}



.mh-drop > a b {

  color: #6b7280;

  font-size: 11px;

}



.mh-drop > div {

  position: absolute;

  top: 65px;

  left: -15px;

  background: #fff;

  min-width: 220px;

  padding: 10px;

  border-radius: 8px;

  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);

  opacity: 0;

  visibility: hidden;

  transform: translateY(8px);

  transition: 0.2s;

}



.mh-drop:hover > div {

  opacity: 1;

  visibility: visible;

  transform: none;

}



.mh-drop > div a {

  display: block;

  color: #475569;

  text-decoration: none;

  font-size: 12px;

  font-weight: 500;

  padding: 10px 12px;

  border-radius: 4px;

}



.mh-drop > div a:hover {

  background: #fff3f4;

  color: var(--m-red);

}



.mh-quote {

  background: var(--m-red);

  color: #fff;

  text-decoration: none;

  padding: 14px 24px;

  border-radius: 7px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.05em;

  white-space: nowrap;

}



.mh-toggle {

  display: none;

  border: 0;

  background: transparent;

  margin-left: auto;

  cursor: pointer;

  padding: 8px;

}



.mh-toggle span {

  display: block;

  width: 25px;

  height: 2px;

  background: var(--m-dark);

  margin: 5px 0;

}



/* ==========================================================================
   3. AI HUMANOID VOICE & CHAT ASSISTANT (NOURA - MEDCO SAUDI ARABIA)
   ========================================================================== */

/* Floating Launcher Button */
.medco-ai-system {
  position: relative;
  z-index: 999999;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

.medco-launcher-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999999;
  border: 0;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #fff;
  border-radius: 999px;
  padding: 6px 18px 6px 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.medco-launcher-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 45px rgba(217, 20, 43, 0.3), 0 0 0 2px rgba(255, 184, 0, 0.4);
}

.medco-launcher-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.medco-launcher-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid #FFB800;
}

.medco-online-badge {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  background: #10B981;
  border: 2px solid #0F172A;
  border-radius: 50%;
}

.medco-pulse-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 2px solid #10B981;
  animation: medcoPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
  pointer-events: none;
}

.medco-pulse-ring.is-active-voice {
  border-color: #FFB800;
  animation: medcoVoicePulse 0.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes medcoPulse {
  0% { transform: scale(0.95); opacity: 0.9; }
  50% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

@keyframes medcoVoicePulse {
  0% { transform: scale(0.95); opacity: 1; }
  50% { transform: scale(1.28); opacity: 0.2; }
  100% { transform: scale(1.28); opacity: 0; }
}

.medco-launcher-label {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.medco-launcher-title {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.2px;
}

.medco-launcher-sub {
  font-size: 11px;
  color: #94A3B8;
  font-weight: 500;
}

.medco-voice-icon-pill {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(217, 20, 43, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

.medco-svg-mic {
  width: 17px;
  height: 17px;
  fill: #FFB800;
}

/* Chat Window */
.medco-chat-window {
  position: fixed;
  right: 24px;
  bottom: 88px;
  width: min(420px, calc(100vw - 32px));
  height: 600px;
  max-height: calc(100vh - 110px);
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000000;
  animation: medcoSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes medcoSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* RTL Support */
.medco-chat-window.is-rtl {
  direction: rtl;
  text-align: right;
}

.medco-chat-window.is-ltr {
  direction: ltr;
  text-align: left;
}

/* Chat Header */
.medco-chat-header {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  color: #FFFFFF;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #D9142B;
}

.medco-ch-advisor {
  display: flex;
  align-items: center;
  gap: 12px;
}

.medco-ch-avatar-box {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}

.medco-ch-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFB800;
}

.medco-ch-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #10B981;
  border: 2px solid #0F172A;
  border-radius: 50%;
}

.medco-ch-info {
  display: flex;
  flex-direction: column;
}

.medco-ch-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.medco-ch-name {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
}

.medco-ch-badge {
  font-size: 9px;
  font-weight: 700;
  background: #D9142B;
  color: #FFFFFF;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.medco-ch-role {
  font-size: 11px;
  color: #CBD5E1;
  font-weight: 500;
}

/* Audio Visualizer Wave */
.medco-voice-wave {
  display: none;
  align-items: center;
  gap: 2px;
  height: 14px;
  margin-top: 3px;
}

.medco-voice-wave.is-speaking {
  display: flex;
}

.wave-bar {
  display: block;
  width: 3px;
  background: #FFB800;
  border-radius: 2px;
  height: 4px;
  animation: wavePulse 0.7s ease-in-out infinite alternate;
}

.wave-bar:nth-child(2) { animation-delay: 0.15s; }
.wave-bar:nth-child(3) { animation-delay: 0.3s; }
.wave-bar:nth-child(4) { animation-delay: 0.45s; }
.wave-bar:nth-child(5) { animation-delay: 0.6s; }

@keyframes wavePulse {
  0% { height: 3px; }
  100% { height: 14px; }
}

/* Header Action Buttons */
.medco-ch-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.medco-ch-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.medco-ch-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.medco-lang-btn {
  background: #D9142B;
  color: #FFFFFF;
}

.medco-lang-btn:hover {
  background: #B91C1C;
}

.medco-close-btn {
  font-size: 14px;
  padding: 6px 10px;
}

/* Chat Body */
.medco-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.medco-chat-body::-webkit-scrollbar {
  width: 6px;
}

.medco-chat-body::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}

/* Messages */
.medco-msg {
  display: flex;
  margin-bottom: 2px;
  max-width: 92%;
}

.medco-msg-user {
  margin-left: auto;
}

.is-rtl .medco-msg-user {
  margin-left: 0;
  margin-right: auto;
}

.medco-msg-user .medco-bubble {
  background: linear-gradient(135deg, #D9142B, #B91C1C);
  color: #FFFFFF;
  border-radius: 16px 16px 2px 16px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  box-shadow: 0 4px 12px rgba(217, 20, 43, 0.2);
}

.is-rtl .medco-msg-user .medco-bubble {
  border-radius: 16px 16px 16px 2px;
}

.medco-msg-bot {
  margin-right: auto;
  width: 100%;
}

.is-rtl .medco-msg-bot {
  margin-right: 0;
  margin-left: auto;
}

.medco-bot-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.medco-bubble-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid #FFB800;
  margin-top: 2px;
}

.medco-bubble-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.medco-msg-bot .medco-bubble {
  background: #FFFFFF;
  color: #1E293B;
  border-radius: 16px 16px 16px 2px;
  padding: 12px 15px;
  font-size: 13.5px;
  line-height: 1.55;
  border: 1px solid #E2E8F0;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

.is-rtl .medco-msg-bot .medco-bubble {
  border-radius: 16px 16px 2px 16px;
}

.medco-bubble strong {
  color: #0F172A;
  font-weight: 700;
}

.medco-bubble a {
  color: #D9142B;
  font-weight: 700;
  text-decoration: underline;
}

.medco-bubble-meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.medco-replay-voice-btn {
  background: transparent;
  border: 0;
  color: #64748B;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.2s;
}

.medco-replay-voice-btn:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.medco-replay-voice-btn svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* Typing Indicator */
.medco-typing-dots {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 14px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.medco-typing-dots span {
  width: 6px;
  height: 6px;
  background: #94A3B8;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.medco-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.medco-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); background: #D9142B; }
}

/* Quick Replies Suggestions Bar */
.medco-chat-quick {
  padding: 8px 12px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
}

.medco-chat-quick::-webkit-scrollbar {
  height: 4px;
}

.medco-quick-btn {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #334155;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}

.medco-quick-btn:hover {
  background: #D9142B;
  color: #FFFFFF;
  border-color: #D9142B;
}

/* Input Form */
.medco-chat-form {
  padding: 10px 12px;
  background: #FFFFFF;
  border-top: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.medco-mic-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}

.medco-mic-btn:hover {
  background: #FEE2E2;
  border-color: #F87171;
}

.medco-mic-svg {
  width: 18px;
  height: 18px;
  fill: #475569;
}

.medco-mic-btn.is-listening {
  background: #EF4444;
  border-color: #DC2626;
}

.medco-mic-btn.is-listening .medco-mic-svg {
  fill: #FFFFFF;
}

.medco-mic-pulse {
  display: none;
}

.medco-mic-btn.is-listening .medco-mic-pulse {
  display: block;
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid #EF4444;
  animation: micRadar 1s infinite cubic-bezier(0, 0.2, 0.8, 1);
}

@keyframes micRadar {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.medco-chat-input {
  flex: 1;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
  background: #F8FAFC;
}

.medco-chat-input:focus {
  border-color: #D9142B;
  background: #FFFFFF;
  box-shadow: 0 0 0 2px rgba(217, 20, 43, 0.1);
}

.medco-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: #D9142B;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.medco-send-btn:hover {
  background: #B91C1C;
}

.medco-send-btn svg {
  width: 17px;
  height: 17px;
  fill: #FFFFFF;
  transform: rotate(45deg);
}

.is-rtl .medco-send-btn svg {
  transform: rotate(225deg);
}

/* Chat Footer Bar */
.medco-chat-footer-bar {
  background: #0F172A;
  color: #94A3B8;
  padding: 6px 12px;
  font-size: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.medco-chat-call-link {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
  color: #FFB800;
  text-decoration: none;
  font-weight: 700;
}

.medco-chat-call-link:hover {
  text-decoration: underline;
}

.medco-chat-dot {
  color: #475569;
}

/* Inline Lead Capture Card */
.medco-lead-card {
  width: 100%;
}

.medco-lead-inner {
  background: #FFFFFF;
  border: 1.5px solid #FFB800;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 15px rgba(255, 184, 0, 0.12);
}

.medco-lead-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 4px 0;
}

.medco-lead-sub {
  font-size: 11px;
  color: #64748B;
  margin: 0 0 10px 0;
}

.medco-inline-lead-form input {
  width: 100%;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  margin-bottom: 7px;
  box-sizing: border-box;
  font-family: inherit;
}

.medco-inline-lead-form input:focus {
  outline: none;
  border-color: #D9142B;
}

.medco-lead-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #D9142B, #B91C1C);
  color: #FFFFFF;
  border: 0;
  border-radius: 6px;
  padding: 9px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}

.medco-lead-submit-btn:hover {
  opacity: 0.92;
}

.medco-lead-status {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.4;
}

.medco-lead-success {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #86EFAC;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .medco-launcher-btn {
    right: 16px;
    bottom: 16px;
    padding: 4px;
    border-radius: 50%;
  }

  .medco-launcher-label,
  .medco-voice-icon-pill {
    display: none;
  }

  .medco-launcher-avatar-wrap {
    width: 44px;
    height: 44px;
  }

  .medco-chat-window {
    right: 12px;
    left: 12px;
    bottom: 72px;
    width: auto;
    height: calc(100vh - 90px);
    max-height: none;
    border-radius: 16px;
  }
}


/* ==========================================================================

   4. SEO & INSIGHTS LONG-FORM SECTIONS

   ========================================================================== */

.seo-page {

  font-family: 'Poppins', sans-serif;

  color: #172033;

}



/* Hero Section */

.seo-hero {

  min-height: 700px;

  position: relative;

  display: flex;

  align-items: center;

  color: #fff;

  overflow: hidden;

}



.seo-hero > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.seo-hero:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(3, 9, 16, 0.95), rgba(7, 20, 34, 0.78) 52%, rgba(7, 20, 34, 0.2)),

              linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent);

}



.seo-hero-grid {

  position: absolute;

  inset: 0;

  z-index: 1;

  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),

                    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);

  background-size: 64px 64px;

}



.seo-hero-copy {

  position: relative;

  z-index: 2;

  padding: 90px 0;

  max-width: 850px;

}



.seo-kicker {

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 11px;

  letter-spacing: 0.18em;

  font-weight: 700;

  color: var(--m-yellow);

}



.seo-kicker:before {

  content: "";

  width: 38px;

  height: 3px;

  background: var(--m-yellow);

}



.seo-hero h1 {

  font-size: clamp(40px, 6.5vw, 84px);

  line-height: 1.02;

  letter-spacing: -0.04em;

  margin: 22px 0;

}



.seo-hero h1 em {

  font-style: normal;

  color: var(--m-yellow);

}



.seo-hero-copy > p {

  max-width: 720px;

  color: #d1dbe4;

  font-size: 16px;

  line-height: 1.8;

}



.seo-actions {

  display: flex;

  gap: 12px;

  margin-top: 30px;

}



.seo-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 15px 22px;

  background: var(--m-red);

  color: #fff;

  text-decoration: none;

  font-size: 12px;

  font-weight: 700;

  border-radius: 4px;

  transition: 0.2s;

}



.seo-btn.alt {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.45);

}



.seo-btn:hover {

  filter: brightness(1.1);

}



/* Quick Stats Row */

.seo-stats {

  display: grid;

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

  background: #fff;

  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.09);

  position: relative;

  margin-top: -45px;

  z-index: 4;

  border-radius: 8px;

  overflow: hidden;

}



.seo-stats article {

  padding: 30px 24px;

  border-right: 1px solid #e5e7eb;

}



.seo-stats article:last-child {

  border-right: 0;

}



.seo-stats b {

  display: block;

  font-size: 26px;

  color: var(--m-red);

}



.seo-stats span {

  font-size: 12px;

  color: #64748b;

}



/* Intro Section */

.seo-intro {

  padding: 100px 0;

  display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  gap: 80px;

  align-items: start;

}



.seo-intro h2,

.seo-section h2,

.seo-dark h2,

.seo-gallery h2 {

  font-size: clamp(30px, 3.8vw, 50px);

  line-height: 1.1;

  letter-spacing: -0.035em;

  margin: 18px 0;

}



.seo-intro p,

.seo-section p,

.seo-gallery p {

  font-family: 'Plus Jakarta Sans', sans-serif;

  color: #64748b;

  line-height: 1.85;

  font-size: 15px;

  margin-bottom: 18px;

}



/* Promise Banner */

.seo-promise {

  background: var(--m-yellow);

  padding: 42px 48px;

  display: grid;

  grid-template-columns: 0.5fr 1fr 1.2fr;

  gap: 35px;

  align-items: center;

  margin-bottom: 90px;

  border-radius: 12px;

}



.seo-promise span {

  font-size: 11px;

  letter-spacing: 0.16em;

  font-weight: 800;

}



.seo-promise h3 {

  font-size: 26px;

  margin: 0;

  line-height: 1.2;

}



.seo-promise p {

  margin: 0;

  line-height: 1.65;

  font-size: 14px;

}



/* Dark Support Cards Section */

.seo-dark {

  background: #101820;

  color: #fff;

  padding: 85px 0;

}



.seo-dark-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 50px;

  margin-bottom: 50px;

}



.seo-dark-head p {

  max-width: 400px;

  color: #a7b2bc;

  line-height: 1.7;

  font-size: 14px;

}



.seo-cards {

  display: grid;

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

  border-top: 1px solid #38434c;

  border-left: 1px solid #38434c;

}



.seo-cards article {

  padding: 30px;

  min-height: 250px;

  border-right: 1px solid #38434c;

  border-bottom: 1px solid #38434c;

  transition: background 0.25s, transform 0.25s;

}



.seo-cards article:hover {

  background: var(--m-red);

  transform: translateY(-2px);

}



.seo-cards b {

  color: var(--m-yellow);

  font-size: 12px;

}



.seo-cards h3 {

  font-size: 19px;

  margin: 40px 0 14px;

  line-height: 1.25;

}



.seo-cards p {

  font-family: 'Plus Jakarta Sans', sans-serif;

  color: #aeb8c1;

  font-size: 13px;

  line-height: 1.65;

  margin: 0;

}



.seo-cards article:hover p {

  color: #fff;

}



/* Alternating Detail Sections */

.seo-section {

  padding: 70px 0;

}



.seo-section.alt {

  background: #f4f1e9;

}



.seo-section .seo-section-grid {

  background: #fff;

  padding: 30px;

  border: 1px solid #e6e8e9;

  border-radius: 20px;

  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

  align-items: center;

}



.seo-section.alt .seo-section-grid {

  background: rgba(255, 255, 255, 0.85);

}



.seo-section-grid.reverse > div:first-child {

  order: 2;

}



.seo-photo {

  height: 420px;

  position: relative;

  border-radius: 14px;

  overflow: hidden;

}



.seo-photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.seo-photo span {

  position: absolute;

  right: 15px;

  bottom: 15px;

  width: 105px;

  height: 105px;

  border-radius: 50%;

  background: var(--m-yellow);

  display: grid;

  place-items: center;

  text-align: center;

  font-size: 9px;

  font-weight: 800;

  transform: rotate(-7deg);

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

}



.seo-list {

  list-style: none;

  padding: 0;

  margin: 20px 0 0;

}



.seo-list li {

  padding: 12px 0 12px 28px;

  border-top: 1px solid #d9dde0;

  position: relative;

  font-size: 14px;

  font-weight: 600;

}



.seo-list li:before {

  content: "✓";

  position: absolute;

  left: 0;

  color: var(--m-red);

  font-weight: 900;

}



/* Slogan Band */

.seo-band {

  background: var(--m-red);

  color: #fff;

  padding: 24px 0;

}



.seo-band .seo-wrap {

  display: flex;

  justify-content: space-around;

  gap: 20px;

  flex-wrap: wrap;

  font-size: 11px;

  letter-spacing: 0.12em;

  font-weight: 700;

}



/* Gallery Section */

.seo-gallery {

  padding: 85px 0;

}



.seo-gallery-grid {

  display: grid;

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

  gap: 18px;

  margin-top: 40px;

}



.seo-gallery-grid figure {

  margin: 0;

  height: 380px;

  overflow: hidden;

  position: relative;

  border-radius: 10px;

  background: #e5e7eb;

}



.seo-gallery-grid img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.seo-gallery-grid figure:hover img {

  transform: scale(1.03);

}



.seo-gallery-grid figcaption {

  position: absolute;

  left: 15px;

  bottom: 15px;

  background: #fff;

  padding: 8px 12px;

  border-radius: 4px;

  font-size: 10px;

  font-weight: 700;

}



/* FAQ Section */

.seo-faq {

  padding: 85px 0;

  background: #f4f1e9;

}



.seo-faq details {

  border-top: 1px solid #cfd3d5;

  padding: 20px 0;

}



.seo-faq details:last-child {

  border-bottom: 1px solid #cfd3d5;

}



.seo-faq summary {

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  outline: none;

}



.seo-faq details p {

  max-width: 900px;

  color: #64748b;

  line-height: 1.75;

  margin: 14px 0 0;

  font-size: 14px;

}



/* Bottom CTA Banner */

.seo-cta {

  background: #42252c;

  color: #fff;

  padding: 70px 0;

}



.seo-cta h2 {

  font-size: clamp(32px, 4.2vw, 50px);

  line-height: 1.05;

  letter-spacing: -0.04em;

  margin: 18px 0;

  max-width: 850px;

}



.seo-cta p {

  max-width: 700px;

  color: #dfcbd0;

  line-height: 1.75;

  font-size: 15px;

  margin-bottom: 25px;

}



.seo-cta .seo-btn {

  background: var(--m-yellow);

  color: #111;

}



/* ==========================================================================

   5. CATALOG MODULE

   ========================================================================== */

.catalog {

  padding: 85px 0;

  background: #f5f2ea;

  font-family: 'Poppins', sans-serif;

}



.catalog-head {

  display: flex;

  justify-content: space-between;

  gap: 40px;

  align-items: flex-end;

  margin-bottom: 45px;

}



.catalog-head h2 {

  font-size: clamp(32px, 4.5vw, 56px);

  line-height: 1.05;

  letter-spacing: -0.04em;

  margin: 12px 0 0;

}



.catalog-head p {

  max-width: 420px;

  color: #64748b;

  line-height: 1.75;

  font-size: 14px;

}



.catalog-grid {

  display: grid;

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

  gap: 20px;

}



.catalog-card {

  background: #fff;

  border-radius: 8px;

  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.07);

  overflow: hidden;

  border-bottom: 4px solid var(--m-yellow);

}



.catalog-card figure {

  height: 250px;

  margin: 0;

  padding: 16px;

  background: #fff;

}



.catalog-card img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.catalog-card div {

  padding: 20px;

  border-top: 1px solid #edf0f2;

}



.catalog-card small {

  color: var(--m-red);

  font-weight: 700;

  letter-spacing: 0.1em;

  font-size: 11px;

}



.catalog-card h3 {

  font-size: 18px;

  margin: 6px 0 10px;

}



.catalog-card p {

  font: 13px/1.65 'Plus Jakarta Sans', sans-serif;

  color: #64748b;

  margin: 0;

}



/* ==========================================================================

   6. ABOUT MEDCO PAGE MODULES

   ========================================================================== */

.about-pro {

  font-family: 'Poppins', sans-serif;

  color: #172033;

}



.ap-hero {

  min-height: 540px;

  position: relative;

  display: flex;

  align-items: center;

  color: #fff;

  overflow: hidden;

}



.ap-hero > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.ap-hero:after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, rgba(7, 17, 28, 0.95), rgba(7, 17, 28, 0.72) 55%, rgba(7, 17, 28, 0.25));

}



.ap-hero-copy {

  position: relative;

  z-index: 2;

  max-width: 720px;

  padding: 80px 0;

}



.ap-label {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: #d9b94e;

  font-size: 11px;

  letter-spacing: 0.15em;

  font-weight: 700;

}



.ap-label:before {

  content: "";

  width: 28px;

  height: 2px;

  background: #d9b94e;

}



.ap-hero h1 {

  font-size: clamp(38px, 5.2vw, 68px);

  line-height: 1.05;

  letter-spacing: -0.04em;

  margin: 18px 0;

}



.ap-hero p {

  max-width: 650px;

  color: #d1dbe2;

  line-height: 1.75;

  font: 15px/1.7 'Plus Jakarta Sans', sans-serif;

}



.ap-hero-actions {

  display: flex;

  gap: 10px;

  margin-top: 25px;

}



.ap-facts {

  display: grid;

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

  gap: 14px;

  margin-top: -36px;

  position: relative;

  z-index: 3;

}



.ap-facts article {

  background: #fff;

  border: 1px solid #e6e9eb;

  border-radius: 10px;

  padding: 22px 18px;

  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);

}



.ap-facts b {

  display: block;

  font-size: 24px;

  color: var(--m-red);

}



.ap-facts span {

  font-size: 11px;

  color: #64748b;

}



.ap-overview {

  padding: 85px 0;

  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 60px;

  align-items: center;

}



.ap-overview h2 {

  font-size: clamp(30px, 3.8vw, 48px);

  line-height: 1.1;

  letter-spacing: -0.04em;

  margin: 14px 0;

}



.ap-overview p {

  font: 14px/1.8 'Plus Jakarta Sans', sans-serif;

  color: #64748b;

}



.ap-image-stack {

  position: relative;

  height: 440px;

}



.ap-image-stack > img {

  width: 88%;

  height: 400px;

  object-fit: cover;

  border-radius: 14px;

}



.ap-image-stack aside {

  position: absolute;

  right: 0;

  bottom: 0;

  width: 50%;

  background: var(--m-red);

  color: #fff;

  padding: 20px;

  border-radius: 10px;

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

}



.ap-image-stack aside b {

  display: block;

  font-size: 22px;

}



.ap-image-stack aside span {

  font-size: 11px;

  line-height: 1.5;

}



/* Values & Mission */

.ap-values {

  background: #f3f0e9;

  padding: 80px 0;

}



.ap-section-title {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 40px;

  margin-bottom: 35px;

}



.ap-card-grid {

  display: grid;

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

  gap: 16px;

}



.ap-card {

  background: #fff;

  padding: 24px;

  border-radius: 12px;

  border: 1px solid #e6e6e2;

  min-height: 200px;

}



.ap-mv {

  padding: 80px 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

}



.ap-mv article {

  border-radius: 14px;

  padding: 34px;

  min-height: 270px;

}



.ap-mv article:first-child {

  background: #182623;

  color: #fff;

}



.ap-mv article:last-child {

  background: var(--m-red);

  color: #fff;

}



/* Detail Navigation and Accordion */

.ap-detail {

  padding: 80px 0;

  background: #fff;

}



.ap-detail-grid {

  display: grid;

  grid-template-columns: 0.65fr 1.35fr;

  gap: 60px;

}



.ap-detail-nav {

  position: sticky;

  top: 30px;

  align-self: start;

  background: #f5f2ec;

  border-radius: 12px;

  padding: 22px;

}



.ap-detail-nav a {

  display: block;

  padding: 10px 0;

  border-bottom: 1px solid #dcdedc;

  color: #475569;

  text-decoration: none;

  font-size: 12px;

}



.ap-accordion details {

  border: 1px solid #e3e7e8;

  border-radius: 10px;

  padding: 0 18px;

  margin-bottom: 12px;

  background: #fff;

}



.ap-accordion summary {

  cursor: pointer;

  padding: 18px 0;

  font-size: 15px;

  font-weight: 700;

}



/* Timeline Section */

.ap-timeline {

  padding: 80px 0;

  background: #1e2825;

  color: #fff;

}



.ap-timeline-row {

  display: grid;

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

  gap: 1px;

  background: #4a5752;

  margin-top: 30px;

  border-radius: 8px;

  overflow: hidden;

}



.ap-timeline article {

  background: #1e2825;

  padding: 24px;

}



.ap-timeline b {

  color: #d6b454;

  font-size: 20px;

}



.ap-timeline h3 {

  font-size: 14px;

  margin: 12px 0 6px;

}



.ap-timeline p {

  font: 12px/1.6 'Plus Jakarta Sans', sans-serif;

  color: #a9b7b1;

  margin: 0;

}



/* ==========================================================================

   7. FOOTER MODULE

   ========================================================================== */

.refined-footer {

  background: #1e2825;

  color: #fff;

}



.rf-main {

  width: var(--m-wrap);

  margin: auto;

  padding: 55px 0 40px;

  display: grid;

  grid-template-columns: 0.85fr 1.65fr;

  gap: 65px;

}



/* Updated footer logo rules */

.rf-brand a {

  display: inline-block;

  line-height: 0;

}



.rf-brand img {

  width: 185px !important;

  max-width: 100% !important;

  height: auto !important;

  max-height: 70px !important;

  object-fit: contain !important;

  margin-bottom: 18px !important;

  display: block !important;

  background: transparent !important;

  padding: 0 !important;

  filter: none !important;

}



.rf-brand p {

  color: #aebdb7;

  font-size: 13px;

  line-height: 1.7;

  max-width: 320px;

  margin: 14px 0 18px;

}



.rf-badge {

  display: inline-flex;

  background: #c9a544;

  color: #17201d;

  padding: 6px 10px;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.08em;

  border-radius: 4px;

}



.rf-links {

  display: grid;

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

  gap: 35px;

}



.rf-links h4 {

  color: #d6b454;

  font-size: 11px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  margin: 0 0 16px;

}



.rf-links a {

  display: block;

  color: #d6dfdb;

  font-size: 13px;

  margin: 10px 0;

  text-decoration: none;

}



.rf-links a:hover {

  color: #fff;

}



.rf-links p {

  color: #91a19a;

  font-size: 12px;

  line-height: 1.7;

  margin: 0 0 12px;

}



.rf-contact {

  display: inline-block;

  background: var(--m-red);

  padding: 8px 12px;

  color: #fff;

  border-radius: 4px;

}



.rf-bottom {

  border-top: 1px solid #36433e;

  width: var(--m-wrap);

  margin: auto;

  padding: 18px 0;

  display: flex;

  justify-content: space-between;

  color: #83938c;

  font-size: 10px;

  letter-spacing: 0.06em;

}



/* ==========================================================================

   8. MEDIA QUERIES (RESPONSIVENESS)

   ========================================================================== */



/* --- Tablet / Medium Screen (max-width: 1020px) --- */

@media (max-width: 1020px) {

  .mh-top {

    display: none;

  }

  

  .mh-main {

    height: 70px;

  }



  .mh-toggle {

    display: block;

  }



  .mh-quote {

    display: none;

  }



  .mh-nav {

    display: none;

    position: absolute;

    top: 70px;

    left: 0;

    right: 0;

    background: #fff;

    padding: 20px;

    flex-direction: column;

    align-items: stretch;

    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14);

    gap: 0;

  }



  .mh-nav.open {

    display: flex;

  }



  .mh-nav > a,

  .mh-drop > a {

    display: block;

    padding: 12px 0;

    border-bottom: 1px solid #f1f5f9;

  }



  .mh-drop > div {

    position: static;

    display: none;

    opacity: 1;

    visibility: visible;

    transform: none;

    box-shadow: none;

    border-left: 2px solid var(--m-red);

    margin: 5px 0 10px 10px;

    padding: 6px 12px;

  }



  .mh-drop.open > div {

    display: block;

  }



  .seo-intro,

  .seo-section .seo-section-grid {

    grid-template-columns: 1fr;

    gap: 35px;

  }



  .seo-section-grid.reverse > div:first-child {

    order: 0;

  }



  .seo-promise {

    grid-template-columns: 1fr;

    gap: 20px;

  }



  .seo-cards {

    grid-template-columns: 1fr 1fr;

  }



  .seo-dark-head {

    display: block;

  }



  .seo-dark-head h2 {

    margin-bottom: 10px;

  }



  .seo-gallery-grid {

    grid-template-columns: 1fr 1fr;

  }



  .seo-gallery-grid figure:first-child {

    grid-column: 1 / -1;

  }

}



/* --- Tablet Small (max-width: 850px) --- */

@media (max-width: 850px) {

  .catalog-grid {

    grid-template-columns: 1fr 1fr;

  }



  .catalog-head {

    display: block;

  }



  .rf-main {

    grid-template-columns: 1fr;

    gap: 40px;

  }



  .rf-links {

    grid-template-columns: 1fr 1fr;

  }



  .ap-overview,

  .ap-detail-grid {

    grid-template-columns: 1fr;

    gap: 35px;

  }



  .ap-facts {

    grid-template-columns: 1fr 1fr;

  }



  .ap-card-grid {

    grid-template-columns: 1fr 1fr;

  }



  .ap-section-title {

    display: block;

  }



  .ap-detail-nav {

    display: none;

  }



  .ap-timeline-row {

    grid-template-columns: 1fr 1fr;

  }

}



/* --- Mobile Standard (max-width: 650px) --- */

@media (max-width: 650px) {

  :root {

    --m-wrap: calc(100% - 30px);

  }



  .mh-main {

    width: calc(100% - 30px);

  }



  .mh-logo img {

    width: 125px;

  }



  .seo-hero {

    min-height: 560px;

  }



  .seo-hero h1 br {

    display: none;

  }



  .seo-hero-copy {

    padding: 60px 0;

  }



  .seo-actions {

    flex-direction: column;

    align-items: stretch;

  }



  .seo-stats {

    grid-template-columns: 1fr 1fr;

    margin-top: -30px;

  }



  .seo-stats article {

    padding: 20px 15px;

  }



  .seo-intro,

  .seo-section,

  .seo-gallery,

  .seo-faq,

  .catalog,

  .ap-overview,

  .ap-values,

  .ap-mv,

  .ap-detail,

  .ap-timeline {

    padding: 60px 0;

  }



  .seo-section .seo-section-grid {

    padding: 20px;

    gap: 25px;

  }



  .seo-photo {

    height: 320px;

  }



  .seo-promise {

    padding: 26px 20px;

  }



  .seo-gallery-grid {

    grid-template-columns: 1fr;

  }



  .seo-gallery-grid figure:first-child {

    grid-column: auto;

  }



  .catalog-grid {

    grid-template-columns: 1fr;

  }



  .ap-mv {

    grid-template-columns: 1fr;

  }



  .ap-image-stack {

    height: 360px;

  }



  .ap-image-stack > img {

    height: 320px;

    width: 100%;

  }



  .ap-image-stack aside {

    width: 70%;

    padding: 16px;

  }



  .rf-links {

    grid-template-columns: 1fr;

    gap: 24px;

  }



  .rf-bottom {

    flex-direction: column;

    gap: 8px;

    text-align: center;

  }

}



/* --- Mobile Small (max-width: 420px) --- */

@media (max-width: 420px) {

  :root {

    --m-wrap: calc(100% - 24px);

  }



  .mh-main {

    width: calc(100% - 24px);

  }



  .seo-stats {

    grid-template-columns: 1fr;

  }



  .seo-stats article {

    border-right: 0;

    border-bottom: 1px solid #e5e7eb;

  }



  .seo-stats article:last-child {

    border-bottom: 0;

  }



  .seo-cards {

    grid-template-columns: 1fr;

  }



  .ap-facts {

    grid-template-columns: 1fr;

  }



  .ap-card-grid {

    grid-template-columns: 1fr;

  }



  .ap-timeline-row {

    grid-template-columns: 1fr;

  }



  .ap-image-stack aside {

    width: 85%;

  }

}



/* ==========================================================================

   UNIFIED MEDCO HEADER & FOOTER STYLESHEET (CONSOLIDATED)

   All responsive styling, warm architectural footer, and white navigation header.

   ========================================================================== */



/* --- 1. Base Header & Navigation Tokens --- */

:root{

  --medco-yellow:#F9CC38;

  --medco-yellow-hover:#FFE69A;

  --medco-navy:#061B2C;

  --medco-text:#20242A;

}



/* Remove old top utility strip */

.mh-top{display:none!important}



.medco-site-header{

  width:100%!important;

  position:relative!important;

  z-index:9999!important;

  background:#fff!important;

  box-shadow:0 4px 14px rgba(15,23,42,.07)!important;

}



.mh-main{

  width:100%!important;

  max-width:none!important;

  min-height:80px!important;

  margin:0!important;

  padding:0 24px!important;

  box-sizing:border-box!important;

  display:flex!important;

  align-items:center!important;

  gap:14px!important;

  background:#fff!important;

}



.mh-logo{flex:0 0 auto!important}

.mh-logo img{

  display:block!important;

  width:auto!important;

  max-width:155px!important;

  max-height:60px!important;

  object-fit:contain!important;

}



.mh-nav{

  flex:1 1 auto!important;

  display:flex!important;

  align-items:center!important;

  justify-content:center!important;

  gap:4px!important;

  min-width:0!important;

  white-space:nowrap!important;

  overflow:visible!important;

}



.mh-nav>a,

.mh-drop>a{

  display:inline-flex!important;

  align-items:center!important;

  gap:6px!important;

  min-height:42px!important;

  padding:8px 8px!important;

  border-radius:10px!important;

  color:var(--medco-text)!important;

  font-size:13.5px!important;

  font-weight:600!important;

  line-height:1!important;

  text-decoration:none!important;

  transition:background .18s ease,color .18s ease!important;

}



.mh-menu-icon{

  width:18px!important;

  height:18px!important;

  flex:0 0 18px!important;

  fill:var(--medco-yellow)!important;

  stroke:none!important;

  background:none!important;

  border:0!important;

  box-shadow:none!important;

  filter:none!important;

}



.mh-nav>a:hover,

.mh-drop>a:hover{

  background:#FFF9E4!important;

  color:#111820!important;

}

.mh-nav>a:hover .mh-menu-icon,

.mh-drop>a:hover .mh-menu-icon{

  fill:var(--medco-yellow-hover)!important;

}



.mh-drop{position:relative!important;flex:0 0 auto!important}

.mh-drop>div{

  position:absolute!important;

  top:calc(100% + 8px)!important;

  left:0!important;

  min-width:190px!important;

  padding:8px!important;

  background:#fff!important;

  border:1px solid rgba(15,23,42,.08)!important;

  border-radius:12px!important;

  box-shadow:0 16px 34px rgba(15,23,42,.12)!important;

  opacity:0!important;

  visibility:hidden!important;

  transform:translateY(6px)!important;

  transition:.18s ease!important;

}

.mh-drop:hover>div,

.mh-drop.open>div{

  opacity:1!important;

  visibility:visible!important;

  transform:none!important;

}

.mh-drop>div a{

  display:block!important;

  padding:10px 12px!important;

  border-radius:8px!important;

  color:#20242A!important;

  font-size:13px!important;

  text-decoration:none!important;

}

.mh-drop>div a:hover{background:#FFF7D8!important}



/* About Us: no arrow on desktop */

@media(min-width:1024px){

  .mh-drop:first-of-type>a b{display:none!important}

}



.mh-quote{

  flex:0 0 auto!important;

  min-height:44px!important;

  padding:10px 14px!important;

  display:inline-flex!important;

  align-items:center!important;

  justify-content:center!important;

  border-radius:11px!important;

  white-space:nowrap!important;

  font-size:13px!important;

  font-weight:700!important;

  text-decoration:none!important;

}



.mh-toggle{display:none!important}



/* Keep all items visible on narrower desktop */

@media(min-width:1024px) and (max-width:1220px){

  .mh-main{padding:0 14px!important;gap:8px!important}

  .mh-logo img{max-width:132px!important;max-height:54px!important}

  .mh-nav{gap:1px!important}

  .mh-nav>a,.mh-drop>a{font-size:12px!important;padding:7px 5px!important;gap:4px!important}

  .mh-menu-icon{width:15px!important;height:15px!important;flex-basis:15px!important}

  .mh-quote{font-size:12px!important;padding:9px 10px!important}

}



/* Mobile */

@media(max-width:1023px){

  .mh-main{

    min-height:68px!important;

    padding:0 14px!important;

    justify-content:space-between!important;

  }

  .mh-logo img{max-width:138px!important;max-height:52px!important}

  .mh-quote{display:none!important}



  .mh-toggle{

    display:flex!important;

    width:40px!important;

    height:40px!important;

    padding:0!important;

    margin-left:auto!important;

    border:0!important;

    border-radius:0!important;

    background:transparent!important;

    box-shadow:none!important;

    flex-direction:column!important;

    align-items:center!important;

    justify-content:center!important;

    gap:5px!important;

    cursor:pointer!important;

  }

  .mh-toggle span{

    display:block!important;

    width:24px!important;

    height:2px!important;

    margin:0!important;

    border-radius:2px!important;

    background:#171B20!important;

  }



  .mh-nav{

    display:none!important;

    position:absolute!important;

    top:100%!important;

    left:10px!important;

    right:10px!important;

    width:auto!important;

    max-height:calc(100vh - 85px)!important;

    overflow-y:auto!important;

    padding:10px!important;

    background:#fff!important;

    border:1px solid rgba(15,23,42,.08)!important;

    border-radius:14px!important;

    box-shadow:0 18px 42px rgba(15,23,42,.14)!important;

    flex-direction:column!important;

    align-items:stretch!important;

    gap:3px!important;

    white-space:normal!important;

  }

  .mh-nav.open{display:flex!important}

  .mh-nav>a,.mh-drop>a{

    width:100%!important;

    box-sizing:border-box!important;

    justify-content:flex-start!important;

    min-height:46px!important;

    padding:11px 12px!important;

    font-size:14px!important;

    gap:10px!important;

  }

  .mh-menu-icon{width:19px!important;height:19px!important;flex:0 0 19px!important}

  .mh-drop{width:100%!important}

  .mh-drop>div{

    display:none!important;

    position:static!important;

    width:calc(100% - 18px)!important;

    min-width:0!important;

    margin:2px 0 5px 18px!important;

    padding:3px 0 3px 8px!important;

    border:0!important;

    border-left:2px solid var(--medco-yellow)!important;

    border-radius:0!important;

    box-shadow:none!important;

    opacity:1!important;

    visibility:visible!important;

    transform:none!important;

  }

  .mh-drop.open>div{display:block!important}

  .mh-drop>div a{padding:9px 10px!important;font-size:13px!important}

}



/* FINAL ICON COLOR + CONTACT ICON */

.mh-nav>a .mh-menu-icon,

.mh-drop>a .mh-menu-icon{

  fill:#D94A4F!important;

  stroke:none!important;

  background:none!important;

  border:0!important;

  box-shadow:none!important;

  filter:none!important;

  transition:fill .18s ease!important;

}

.mh-nav>a:hover .mh-menu-icon,

.mh-drop>a:hover .mh-menu-icon{

  fill:#F9CC38!important;

  stroke:none!important;

}

.mh-contact-svg{

  width:18px!important;

  height:18px!important;

  flex:0 0 18px!important;

  fill:#FFFFFF!important;

}

.mh-quote{

  gap:7px!important;

}





/* 3D SOFT-RED ICONS + DARK-YELLOW HOVER */

.mh-nav>a .mh-menu-icon,

.mh-drop>a .mh-menu-icon{

  fill:#D94A4F!important;

  stroke:none!important;

  filter:drop-shadow(0 2px 1px rgba(104,20,24,.22))!important;

  transform:translateY(0)!important;

  transition:

    fill .18s ease,

    filter .18s ease,

    transform .18s ease!important;

}



.mh-nav>a:hover,

.mh-drop>a:hover{

  background:#D9AA1C!important;

  color:#111111!important;

  box-shadow:none!important;

  transform:translateY(-1px)!important;

}



.mh-nav>a:hover span,

.mh-drop>a:hover span,

.mh-drop>a:hover b{

  color:#111111!important;

}



.mh-nav>a:hover .mh-menu-icon,

.mh-drop>a:hover .mh-menu-icon{

  fill:#111111!important;

  filter:none!important;

  transform:translateY(-1px)!important;

}



/* Contact Us headset stays white */

.mh-contact-svg{

  width:18px!important;

  height:18px!important;

  flex:0 0 18px!important;

  fill:#FFFFFF!important;

  filter:none!important;

}



.mh-quote{

  gap:7px!important;

}





/* REFINED ICON + HOVER COLORS */

.mh-nav>a .mh-menu-icon,

.mh-drop>a .mh-menu-icon{

  fill:#D94A4F!important;

  stroke:none!important;

  filter:drop-shadow(0 1px 0 rgba(120,20,26,.12))!important;

  transform:none!important;

}



.mh-nav>a:hover,

.mh-drop>a:hover{

  background:#F8CB36!important;

  color:#111111!important;

  box-shadow:none!important;

  transform:translateY(-1px)!important;

}



.mh-nav>a:hover span,

.mh-drop>a:hover span,

.mh-drop>a:hover b{

  color:#111111!important;

}



.mh-nav>a:hover .mh-menu-icon,

.mh-drop>a:hover .mh-menu-icon{

  fill:#111111!important;

  filter:none!important;

  transform:none!important;

}





/* CONTACT US — CLEAN WHITE HEADSET ICON */

.mh-contact-svg{

  width:17px!important;

  height:17px!important;

  flex:0 0 17px!important;

  fill:#FFFFFF!important;

  stroke:none!important;

  filter:none!important;

  background:none!important;

  box-shadow:none!important;

}

.mh-quote{

  gap:9px!important;

  align-items:center!important;

}



/* --- 2. Premium Header Refinements & Architectural Warm Footer --- */

/* =========================================================

   MEDCO PREMIUM HEADER / SOCIAL STRIP / 3D YELLOW ICONS

   ========================================================= */

:root{

  --medco-yellow:#F9CC38;

  --medco-yellow-dark:#D9AA1C;

  --medco-yellow-light:#FFE27A;

  --medco-navy:#061B2C;

  --medco-navy-2:#0B263B;

  --medco-white:#FFFFFF;

}



/* Compact top social strip */

.medco-social-strip{

  width:100%;

  min-height:34px;

  background:linear-gradient(90deg,#F9CC38 0%,#FFD95A 48%,#F7C52D 100%);

  border-bottom:1px solid rgba(6,27,44,.12);

  position:relative;

  z-index:10000;

}

.medco-social-inner{

  width:100%;

  max-width:1480px;

  min-height:34px;

  margin:0 auto;

  padding:0 24px;

  box-sizing:border-box;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

}

.medco-social-note{

  color:#102131;

  font-size:11px;

  font-weight:800;

  letter-spacing:.08em;

  text-transform:uppercase;

  white-space:nowrap;

}

.medco-social-actions{

  display:flex;

  align-items:center;

  gap:6px;

  margin-left:auto;

}

.medco-social-label{

  margin-right:6px;

  color:#102131;

  font-size:11px;

  font-weight:800;

  letter-spacing:.05em;

  text-transform:uppercase;

}

.medco-social-link{

  width:25px;

  height:25px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border-radius:7px;

  color:#071B2B!important;

  background:rgba(255,255,255,.35);

  border:1px solid rgba(6,27,44,.16);

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.75),

    0 2px 4px rgba(72,53,0,.14);

  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;

}

.medco-social-link:hover{

  transform:translateY(-2px);

  background:#fff;

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,1),

    0 5px 12px rgba(72,53,0,.2);

}

.medco-social-link svg{

  width:14px;

  height:14px;

  fill:currentColor;

}



/* Main menu icons: premium yellow + strong 3D depth */

.mh-nav>a .mh-menu-icon,

.mh-drop>a .mh-menu-icon{

  fill:#F9CC38!important;

  stroke:none!important;

  filter:

    drop-shadow(0 1px 0 #9E7410)

    drop-shadow(0 2px 1px rgba(81,58,0,.28))

    drop-shadow(0 4px 5px rgba(249,204,56,.16))!important;

  transform:translateY(-1px) scale(1.05)!important;

  transition:fill .18s ease,filter .18s ease,transform .18s ease!important;

}

.mh-nav>a:hover,

.mh-drop>a:hover{

  background:#FFF5C7!important;

  color:#111820!important;

  box-shadow:

    inset 0 0 0 1px rgba(217,170,28,.18),

    0 5px 12px rgba(249,204,56,.10)!important;

  transform:translateY(-1px)!important;

}

.mh-nav>a:hover .mh-menu-icon,

.mh-drop>a:hover .mh-menu-icon{

  fill:#D9AA1C!important;

  filter:

    drop-shadow(0 1px 0 #80600B)

    drop-shadow(0 2px 2px rgba(81,58,0,.24))!important;

  transform:translateY(-2px) scale(1.08)!important;

}

.mh-nav>a:hover span,

.mh-drop>a:hover span,

.mh-drop>a:hover b{

  color:#111820!important;

}



/* Header slightly more premium */

.medco-site-header{

  border-bottom:1px solid rgba(6,27,44,.07)!important;

}

.mh-main{

  min-height:82px!important;

}

.mh-logo img{

  max-width:164px!important;

  max-height:62px!important;

}

.mh-quote{

  background:linear-gradient(135deg,#071B2B,#10334D)!important;

  color:#fff!important;

  border:1px solid rgba(255,255,255,.08)!important;

  box-shadow:0 8px 18px rgba(6,27,44,.16)!important;

}

.mh-quote:hover{

  background:linear-gradient(135deg,#F9CC38,#DDAF24)!important;

  color:#071B2B!important;

}

.mh-quote:hover .mh-contact-svg{fill:#071B2B!important}



/* =========================================================

   MEDCO ARCHITECTURAL WARM FOOTER (MATCHING REFERENCE IMAGE)

   ========================================================= */

.medco-footer.refined-footer,

.medco-footer.medco-warm-footer {

  position: relative !important;

  width: 100% !important;

  background-color: #FFF6DF !important;

  background-image:

    linear-gradient(180deg, rgba(255, 248, 233, 0.95) 0%, rgba(255, 245, 224, 0.88) 50%, rgba(255, 241, 206, 0.70) 100%),

    url('assets/img/footer-skyline-bg.jpg') !important;

  background-position: center bottom !important;

  background-size: cover !important;

  background-repeat: no-repeat !important;

  border-top: 3.5px solid #F9CC38 !important;

  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04) !important;

  color: #22262E !important;

  font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif !important;

  overflow: hidden !important;

}



.medco-footer.refined-footer:before,

.medco-footer.medco-warm-footer:before {

  display: none !important;

}



/* Industrial Corner Slant in Top Right */

.medco-footer-top-accent {

  position: absolute !important;

  top: 0 !important;

  right: 0 !important;

  width: 220px !important;

  height: 44px !important;

  pointer-events: none !important;

  z-index: 10 !important;

  overflow: hidden !important;

}



.medco-footer-top-accent svg {

  width: 100% !important;

  height: 100% !important;

  display: block !important;

}



/* Container */

.rf-main,

.medco-footer-container {

  max-width: 1440px !important;

  margin: 0 auto !important;

  padding: 68px 40px 52px !important;

  display: grid !important;

  grid-template-columns: 1.25fr 0.95fr 1.15fr 1.35fr !important;

  gap: 36px !important;

  box-sizing: border-box !important;

  position: relative !important;

  z-index: 2 !important;

}



/* Column Dividers */

.medco-footer-col {

  position: relative !important;

  box-sizing: border-box !important;

}



.medco-footer-col:not(.medco-footer-col-last) {

  border-right: 1px solid rgba(215, 175, 75, 0.45) !important;

  padding-right: 32px !important;

}



/* Brand Column */

.medco-f-logo-link {

  display: inline-block !important;

  text-decoration: none !important;

}



.medco-f-logo {

  max-width: 175px !important;

  max-height: 72px !important;

  width: auto !important;

  height: auto !important;

  display: block !important;

  object-fit: contain !important;

  margin-bottom: 22px !important;

  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08)) !important;

}



.medco-f-desc {

  max-width: 320px !important;

  margin: 0 0 24px 0 !important;

  font-size: 14px !important;

  line-height: 1.62 !important;

  font-weight: 500 !important;

  color: #2D323A !important;

}



.medco-f-badge {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 9px 24px !important;

  border-radius: 9999px !important;

  background: #FFE896 !important;

  border: 1.5px solid #E5B224 !important;

  color: #1A1C20 !important;

  font-size: 12px !important;

  font-weight: 800 !important;

  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;

  box-shadow: 0 2px 6px rgba(229, 178, 36, 0.18) !important;

}



/* Headings & Yellow Accent Bars */

.medco-f-heading {

  margin: 0 !important;

  color: #171A21 !important;

  font-size: 15px !important;

  font-weight: 800 !important;

  letter-spacing: 0.05em !important;

  text-transform: uppercase !important;

  line-height: 1.2 !important;

}



.medco-f-heading-bar {

  width: 38px !important;

  height: 3.5px !important;

  background: #F9CC38 !important;

  border-radius: 2px !important;

  margin: 9px 0 22px 0 !important;

}



/* Link Lists */

.medco-f-nav-list {

  list-style: none !important;

  padding: 0 !important;

  margin: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 13px !important;

}



.medco-f-nav-list li {

  margin: 0 !important;

  padding: 0 !important;

}



.medco-f-nav-list a {

  color: #272C35 !important;

  font-size: 14.5px !important;

  font-weight: 500 !important;

  line-height: 1.4 !important;

  text-decoration: none !important;

  display: inline-block !important;

  transition: color 0.18s ease, transform 0.18s ease !important;

}



.medco-f-nav-list a:hover {

  color: #C91626 !important;

  transform: translateX(3px) !important;

}



/* Contact Column */

.medco-f-contact-items {

  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

  margin-bottom: 22px !important;

}



.medco-f-contact-row {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

}



.medco-f-contact-row.medco-f-align-start {

  align-items: flex-start !important;

}



.medco-f-circle-icon {

  width: 34px !important;

  height: 34px !important;

  min-width: 34px !important;

  border-radius: 50% !important;

  background: #F9CC38 !important;

  color: #171A21 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  box-shadow: 0 2px 6px rgba(249, 204, 56, 0.35) !important;

  flex-shrink: 0 !important;

}



.medco-f-circle-icon svg {

  display: block !important;

  fill: currentColor !important;

}



.medco-f-contact-text {

  color: #272C35 !important;

  font-size: 14.5px !important;

  font-weight: 500 !important;

  line-height: 1.45 !important;

  text-decoration: none !important;

}



.medco-f-phone-link {

  font-weight: 700 !important;

  color: #171A21 !important;

  letter-spacing: 0.02em !important;

}



.medco-f-phone-link:hover,

.medco-f-contact-text:hover {

  color: #C91626 !important;

}



.medco-f-addr div {

  white-space: nowrap !important;

}



/* CTA Action Button */

.medco-f-action-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 7px !important;

  width: 100% !important;

  max-width: 250px !important;

  min-height: 46px !important;

  padding: 12px 22px !important;

  border-radius: 8px !important;

  background: #F9CC38 !important;

  color: #11141A !important;

  font-size: 14.5px !important;

  font-weight: 800 !important;

  letter-spacing: 0.02em !important;

  text-decoration: none !important;

  box-shadow: 0 4px 14px rgba(230, 175, 20, 0.28) !important;

  transition: all 0.2s ease !important;

  border: none !important;

  margin-bottom: 22px !important;

  box-sizing: border-box !important;

}



.medco-f-action-btn:hover {

  background: #F1BF24 !important;

  color: #000000 !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 6px 18px rgba(230, 175, 20, 0.4) !important;

}



.medco-f-btn-arrow {

  font-size: 16px !important;

  line-height: 1 !important;

  font-weight: 900 !important;

  display: inline-block !important;

  transition: transform 0.2s ease !important;

}



.medco-f-action-btn:hover .medco-f-btn-arrow {

  transform: translate(2px, -2px) !important;

}



/* Social Row */

.medco-f-social-row {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  margin: 0 !important;

}



.medco-f-social-row a {

  width: 44px !important;

  height: 44px !important;

  min-width: 44px !important;

  margin: 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  border-radius: 9px !important;

  background: rgba(249, 204, 56, 0.22) !important;

  border: 1.5px solid rgba(225, 175, 45, 0.5) !important;

  color: #171A21 !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

  box-shadow: 0 2px 5px rgba(230, 180, 40, 0.08) !important;

}



.medco-f-social-row a:hover {

  background: #F9CC38 !important;

  border-color: #E2AD17 !important;

  color: #000000 !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 5px 12px rgba(240, 180, 20, 0.3) !important;

}



.medco-f-social-row svg {

  width: 17px !important;

  height: 17px !important;

  fill: currentColor !important;

  display: block !important;

}



/* Dark Bottom Copyright Bar */

.rf-bottom,

.medco-footer-bottom {

  width: 100% !important;

  background: #1E2126 !important;

  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;

  padding: 22px 36px !important;

  box-sizing: border-box !important;

  position: relative !important;

  z-index: 2 !important;

}



.medco-footer-bottom-inner {

  width: 100% !important;

  flex: 1 1 100% !important;

  max-width: 1440px !important;

  margin: 0 auto !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 20px !important;

  box-sizing: border-box !important;

}



.medco-f-copy,

.medco-f-country {

  color: #C0C4CC !important;

  font-size: 13.5px !important;

  font-weight: 500 !important;

  letter-spacing: 0.01em !important;

  line-height: 1.4 !important;

}



/* Responsive */

@media (max-width: 1120px) {

  .rf-main,

  .medco-footer-container {

    grid-template-columns: 1fr 1fr !important;

    gap: 40px !important;

    padding: 50px 24px 40px !important;

  }

  .medco-footer-col:nth-child(2) {

    border-right: none !important;

    padding-right: 0 !important;

  }

  .medco-footer-col:nth-child(1) {

    padding-right: 24px !important;

  }

  .medco-footer-col:nth-child(3) {

    padding-right: 24px !important;

  }

}



@media (max-width: 680px) {

  .rf-main,

  .medco-footer-container {

    grid-template-columns: 1fr !important;

    gap: 34px !important;

    padding: 44px 20px 36px !important;

  }

  .medco-footer-col {

    border-right: none !important;

    padding-right: 0 !important;

    border-bottom: 1px solid rgba(215, 175, 75, 0.35) !important;

    padding-bottom: 28px !important;

  }

  .medco-footer-col-last {

    border-bottom: none !important;

    padding-bottom: 0 !important;

  }

  .medco-f-action-btn {

    max-width: 100% !important;

  }

  .rf-bottom,

  .medco-footer-bottom {

    padding: 18px 20px !important;

  }

  .medco-footer-bottom-inner {

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 8px !important;

  }

}



/* --- 3. Fixed Header Positioning & Header Spacer Specifications --- */

/* FINAL REQUESTED HEADER SPEC */

#medco-header{

  position:fixed!important;

  top:0!important;

  left:0!important;

  right:0!important;

  width:100%!important;

  z-index:99999!important;

  background:#fff!important;

  box-shadow:0 4px 20px rgba(15,23,42,.08)!important;

  transition:all .25s ease!important;

}

#medco-header-spacer{

  display:block!important;

  width:100%!important;

  height:118px;

  pointer-events:none;

  visibility:hidden;

}

.medco-social-strip{

  min-height:38px!important;

  background:#F4D03F!important;

  border-top:0!important;

  border-bottom:1px solid rgba(0,0,0,.08)!important;

  box-shadow:none!important;

}

.medco-social-inner{

  min-height:35px!important;

  max-width:none!important;

  padding:0 5%!important;

}

.medco-social-note{display:none!important}

.medco-social-actions{

  width:100%!important;

  margin:0!important;

  justify-content:flex-end!important;

  gap:13px!important;

}

.medco-social-label{display:none!important}

.medco-social-link{

  width:24px!important;

  height:24px!important;

  padding:0!important;

  border:0!important;

  border-radius:0!important;

  background:transparent!important;

  color:#000000!important;

  box-shadow:none!important;

}

.medco-social-link:hover{

  background:transparent!important;

  color:#333333!important;

  transform:translateY(-1px)!important;

  box-shadow:none!important;

}

.medco-social-link svg{

  width:16px!important;

  height:16px!important;

  fill:#000000!important;

}

.medco-social-link:hover svg{

  fill:#333333!important;

}



/* Restore soft-red 3D main navigation icons */

.mh-nav>a .mh-menu-icon,

.mh-drop>a .mh-menu-icon{

  fill:#D94A4F!important;

  stroke:none!important;

  filter:

    drop-shadow(0 1px 0 rgba(117,22,27,.18))

    drop-shadow(0 2px 2px rgba(117,22,27,.16))!important;

  transform:none!important;

}

.mh-nav>a:hover .mh-menu-icon,

.mh-drop>a:hover .mh-menu-icon{

  fill:#C93F45!important;

  filter:drop-shadow(0 2px 2px rgba(117,22,27,.18))!important;

  transform:translateY(-1px)!important;

}



/* Keep clean white navigation; no yellow menu blocks */

.mh-nav>a:hover,

.mh-drop>a:hover{

  background:#FFF6F6!important;

  color:#111820!important;

  box-shadow:none!important;

}



/* Restore original Contact Us appearance from supplied component */

.mh-quote{

  background:var(--medco-yellow)!important;

  color:#111820!important;

  border:0!important;

  box-shadow:none!important;

}

.mh-quote:hover{

  background:var(--medco-yellow-hover)!important;

  color:#111820!important;

}

.mh-contact-svg,

.mh-quote:hover .mh-contact-svg{

  fill:#FFFFFF!important;

}



@media(max-width:720px){

  .medco-social-strip{min-height:34px!important}

  .medco-social-inner{min-height:31px!important;padding:0 14px!important}

  .medco-social-actions{gap:12px!important}

}



/* --- 4. White Main Menu Final Specifications --- */

/* ===== FINAL WHITE MAIN MENU ONLY ===== */

/* Do NOT alter .medco-social-strip or its contents */



.mh-main{

  min-height:92px!important;

  padding:0 30px!important;

  gap:18px!important;

}



.mh-logo img{

  max-width:160px!important;

  max-height:62px!important;

}



.mh-nav{

  gap:8px!important;

  align-items:stretch!important;

}



.mh-nav>a,

.mh-drop>a{

  min-width:76px!important;

  min-height:66px!important;

  padding:9px 8px 8px!important;

  display:flex!important;

  flex-direction:column!important;

  align-items:center!important;

  justify-content:center!important;

  gap:5px!important;

  border-radius:10px!important;

  color:#1C222A!important;

  font-size:12.5px!important;

  font-weight:700!important;

  line-height:1.08!important;

  text-align:center!important;

  background:transparent!important;

  box-shadow:none!important;

}



.mh-nav>a span,

.mh-drop>a span{

  display:block!important;

  white-space:nowrap!important;

}



.mh-menu-icon{

  width:23px!important;

  height:23px!important;

  flex:0 0 23px!important;

  fill:#D94A4F!important;

  stroke:none!important;

  filter:

    drop-shadow(0 1px 0 rgba(118,22,27,.16))

    drop-shadow(0 2px 2px rgba(118,22,27,.13))!important;

  transform:none!important;

}



.mh-drop>a{

  position:relative!important;

}

.mh-drop>a b{

  position:absolute!important;

  right:6px!important;

  bottom:9px!important;

  font-size:12px!important;

  line-height:1!important;

  color:#56616D!important;

}



/* keep first About arrow hidden on desktop, preserve existing behavior */

@media(min-width:1024px){

  .mh-drop:first-of-type>a b{display:none!important}

}



.mh-nav>a:hover,

.mh-drop>a:hover{

  background:#FFF6F6!important;

  color:#111820!important;

  box-shadow:inset 0 0 0 1px rgba(217,74,79,.08)!important;

  transform:translateY(-1px)!important;

}



.mh-nav>a:hover .mh-menu-icon,

.mh-drop>a:hover .mh-menu-icon{

  fill:#C83E44!important;

  filter:

    drop-shadow(0 1px 0 rgba(105,18,23,.18))

    drop-shadow(0 3px 3px rgba(105,18,23,.14))!important;

  transform:translateY(-1px)!important;

}



/* CONTACT US - red gradient + icon */

.mh-quote{

  min-height:50px!important;

  padding:0 22px!important;

  gap:9px!important;

  border-radius:12px!important;

  background:linear-gradient(135deg,#D91F2B 0%,#C90F1F 55%,#B80C19 100%)!important;

  color:#FFFFFF!important;

  border:1px solid rgba(143,0,12,.18)!important;

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.18),

    0 7px 18px rgba(190,18,31,.18)!important;

  font-size:13px!important;

  font-weight:800!important;

  letter-spacing:.04em!important;

}



.mh-quote .mh-contact-svg{

  width:19px!important;

  height:19px!important;

  flex:0 0 19px!important;

  fill:#FFFFFF!important;

  filter:drop-shadow(0 1px 1px rgba(95,0,8,.18))!important;

}



.mh-quote:hover{

  background:linear-gradient(135deg,#EA2B38 0%,#D41727 55%,#C20E1D 100%)!important;

  color:#FFFFFF!important;

  transform:translateY(-1px)!important;

  box-shadow:

    inset 0 1px 0 rgba(255,255,255,.22),

    0 9px 22px rgba(190,18,31,.24)!important;

}



.mh-quote:hover .mh-contact-svg{

  fill:#FFFFFF!important;

}



/* dropdown alignment for vertical icon nav */

.mh-drop>div{

  top:calc(100% + 4px)!important;

}



/* narrower desktops */

@media(min-width:1024px) and (max-width:1280px){

  .mh-main{padding:0 16px!important;gap:10px!important}

  .mh-logo img{max-width:138px!important;max-height:55px!important}

  .mh-nav{gap:2px!important}

  .mh-nav>a,.mh-drop>a{

    min-width:65px!important;

    padding:8px 5px 7px!important;

    font-size:11.5px!important;

  }

  .mh-menu-icon{

    width:20px!important;

    height:20px!important;

    flex-basis:20px!important;

  }

  .mh-quote{

    padding:0 14px!important;

    font-size:12px!important;

  }

}



/* mobile: return menu items to row layout for usability */

@media(max-width:1023px){

  .mh-main{

    min-height:68px!important;

    padding:0 14px!important;

  }

  .mh-nav>a,

  .mh-drop>a{

    min-width:0!important;

    min-height:46px!important;

    width:100%!important;

    padding:11px 12px!important;

    flex-direction:row!important;

    justify-content:flex-start!important;

    gap:10px!important;

    font-size:14px!important;

    text-align:left!important;

  }

  .mh-menu-icon{

    width:19px!important;

    height:19px!important;

    flex:0 0 19px!important;

  }

  .mh-drop>a b{

    position:static!important;

    margin-left:auto!important;

  }

}



/* --- 5. Menu Alignment & Footer Fine-Tuning --- */

/* ===== FINAL MENU ALIGNMENT ===== */

@media(min-width:1024px){

  .mh-main{

    padding-left:24px!important;

    padding-right:30px!important;

  }



  .mh-nav{

    justify-content:flex-end!important;

    margin-left:auto!important;

    gap:7px!important;

  }



  .mh-nav>a,

  .mh-drop>a{

    min-width:72px!important;

  }



  /* no chevron / V marker anywhere */

  .mh-drop>a b{

    display:none!important;

  }



  /* desktop dropdown behaves like Who We Are: hover only */

  .mh-drop.open>div{

    opacity:0!important;

    visibility:hidden!important;

    transform:translateY(6px)!important;

  }



  .mh-drop:hover>div{

    opacity:1!important;

    visibility:visible!important;

    transform:none!important;

  }

}



/* Mobile dropdown still works by click */

@media(max-width:1023px){

  .mh-drop>a b{display:none!important}

  .mh-drop.open>div{

    display:block!important;

    opacity:1!important;

    visibility:visible!important;

    transform:none!important;

  }

}





/* --- AUTO-HIDE TOP YELLOW SOCIAL STRIP AFTER SCROLLING --- */
#medco-header .medco-social-strip {
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease, min-height 0.35s ease, border-bottom 0.2s ease !important;
  max-height: 50px;
  overflow: hidden;
}

#medco-header.is-scrolled .medco-social-strip,
.medco-social-strip.hide-on-scroll {
  max-height: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  transform: translateY(-100%) !important;
  pointer-events: none !important;
}

#medco-header {
  transition: all 0.3s ease !important;
}


/* --- CUSTOM FOOTER SKYLINE BACKGROUND --- */
.medco-footer.refined-footer,
.medco-footer.medco-warm-footer {
  background-color: #FAF4E6 !important;
  background-image:
    linear-gradient(180deg, rgba(254, 250, 240, 0.90) 0%, rgba(253, 247, 233, 0.72) 45%, rgba(250, 241, 220, 0.40) 100%),
    url('../img/footer-skyline-bg.webp'),
    url('../img/footer-skyline-bg.jpg'),
    url('../../images/footer-skyline-bg.webp') !important;
  background-position: center bottom !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}


/* --- MOBILE PHONE MENU CONTACT US ITEM --- */
@media (min-width: 1025px) {
  .mh-phone-contact {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .mh-phone-contact {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }
}

/* --- HERO VIDEO & POSTER GUARANTEE --- */
.medco-video-frame {
  position: relative !important;
  overflow: hidden !important;
  background-color: #0f172a !important;
}
.medco-home-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 2 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.medco-video-shade {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}