/* Change ONLY elements that have #709dd6 to #52b4e3 */

/* Text color */
*[style*="color: #709dd6"] {
    color: #52b4e3 !important;
}

/* Background color */
*[style*="background-color: #709dd6"] {
    background-color: #52b4e3 !important;
}

/* Border color */
*[style*="border-color: #709dd6"] {
    border-color: #52b4e3 !important;
}
/* ================================
   REPLACE "spalogo.png" WITH "imedlogo-2.png"
   ================================ */

/* Base Replacement: Force any <img> with src containing "spalogo.png"
   to use the new image instead. Maintain aspect ratio. */
img[src*="spalogo.png"] {
  content: url("/wp-content/uploads/2025/03/imedlogo-2.png") !important;
  width: auto !important;   /* fallback - can override in breakpoints */
  height: auto !important;  /* fallback - can override in breakpoints */
  max-width: 100% !important;
  display: inline-block !important;
}

/* ================================
   DESKTOP (min-width: 1025px)
   ================================ */
@media (min-width: 1025px) {
  img[src*="spalogo.png"] {
    /* Adjust the width/height for desktop if desired */
    width: 180px !important;  /* example: 180px wide */
    height: auto !important;  
    /* You can also position absolutely if needed, e.g.:
       position: absolute !important;
       top: 20px; left: 20px;
       ... but usually the theme's container handles that. */
  }
}

/* ================================
   TABLET (768px to 1024px)
   ================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  img[src*="spalogo.png"] {
    width: 150px !important;  /* smaller for tablets */
    height: auto !important;
  }
}

/* ================================
   MOBILE (max-width: 767px)
   ================================ */
@media (max-width: 767px) {
  img[src*="spalogo.png"] {
    width: 120px !important;  /* even smaller for phones */
    height: auto !important;
  }
}
/* ===========================================
   1) Replace <img src="...spalogo.png">
=========================================== */
img[src*="spalogo.png"] {
  content: url("/wp-content/uploads/2025/03/imedlogo-2.png") !important;
  /* Fallback sizing */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  display: inline-block !important;
}

/* ===========================================
   2) Replace background-image references 
      in ANY inline or external CSS 
=========================================== */
*[style*="spalogo.png"] {
  background-image: url("/wp-content/uploads/2025/03/imedlogo-2.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* If the theme uses something like .class { background: url("spalogo.png") } 
   in a separate CSS file, the above should override it. */

/* ===========================================
   3) Optional: Force dimension if 
      background was used as a "logo"
=========================================== */
/*
*[style*="spalogo.png"] {
  width: 200px !important;
  height: 80px !important;
  display: block !important;
  content: "";
}
*/

/* ===========================================
   4) Desktop/Tablet/Mobile Breakpoints
      - Adjust size & position for <img> usage
=========================================== */

/* ---------- Desktop (>= 1025px) ---------- */
@media (min-width: 1025px) {
  img[src*="spalogo.png"] {
    width: 180px !important; /* Example width */
    height: auto !important;
  }
  /* If the background was used, uncomment & adjust:
  *[style*="spalogo.png"] {
    width: 180px !important;
    height: 60px !important;
  }
  */
}

/* ---------- Tablet (768px - 1024px) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  img[src*="spalogo.png"] {
    width: 150px !important;
    height: auto !important;
  }
  /* For background usage:
  *[style*="spalogo.png"] {
    width: 150px !important;
    height: 50px !important;
  }
  */
}

/* ---------- Mobile (< 768px) ---------- */
@media (max-width: 767px) {
  img[src*="spalogo.png"] {
    width: 120px !important;
    height: auto !important;
  }
  /* For background usage:
  *[style*="spalogo.png"] {
    width: 120px !important;
    height: 40px !important;
  }
  */
}
/* 
  Custom Logo Adjustments
  This file allows you to manually adjust the logo's size and location.
  The image's height is set to auto to maintain the original aspect ratio.
  Update the width, top, and left values as needed for each device.
*/

/* Desktop view: 1024px and up */
@media only screen and (min-width: 1024px) {
  img[src*="imedlogo-2.png"] {
    width: 50px;      /* Adjust the logo's width for desktop */
    height: auto;      /* Maintain aspect ratio */
    position: absolute;
    top: 10px;         /* Vertical positioning */
    left: 90px;        /* Horizontal positioning */
  }
}

/* Tablet view: between 768px and 1023px */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  img[src*="imedlogo-2.png"] {
    width: 150px;      /* Adjust the logo's width for tablet */
    height: auto;      /* Maintain aspect ratio */
    position: absolute;
    top: 15px;         /* Vertical positioning */
    left: 15px;        /* Horizontal positioning */
  }
}

/* Mobile view: up to 767px */
@media only screen and (max-width: 767px) {
  img[src*="imedlogo-2.png"] {
    width: 100px;      /* Adjust the logo's width for mobile */
    height: auto;      /* Maintain aspect ratio */
    position: absolute;
    top: 10px;         /* Vertical positioning */
    left: 10px;        /* Horizontal positioning */
  }
}
/* ==========================================
   REPLACE "about-img.png" on page-id-18
   ========================================== */
body.page-id-18 img[src*="about-img.png"] {
  content: url("/wp-content/uploads/2025/03/about-us-imed.jpg") !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  display: inline-block !important;
}
/* =========================================
   1) Force topbar to have #59bfea
   ========================================= */
html body #topbar_section,
html body #topbar_section.scrolled,
html body #topbar_section.sticky,
html body #topbar_section.is-sticky,
html body #topbar_section.stickynavbar {
  background-color: #59bfea !important;
  background: #59bfea !important;
  opacity: 1 !important;
  filter: none !important;
  background-image: none !important;
  transition: none !important;
}

/* =========================================
   2) Force header elements to have #cecece
   (#header, #header-wrap, .head-bg, #nav-box, .header-nav-box)
   in all states (scrolled, sticky, etc.)
   ========================================= */
html body #header,
html body #header.scrolled,
html body #header.sticky,
html body #header.is-sticky,
html body #header.stickynavbar,
html body #header-wrap,
html body #header-wrap.scrolled,
html body #header-wrap.sticky,
html body #header-wrap.is-sticky,
html body #header-wrap.stickynavbar,
html body .head-bg,
html body .head-bg.scrolled,
html body .head-bg.sticky,
html body .head-bg.is-sticky,
html body .head-bg.stickynavbar,
html body #nav-box,
html body #nav-box.scrolled,
html body #nav-box.sticky,
html body #nav-box.is-sticky,
html body #nav-box.stickynavbar,
html body .header-nav-box,
html body .header-nav-box.scrolled,
html body .header-nav-box.sticky,
html body .header-nav-box.is-sticky,
html body .header-nav-box.stickynavbar {
  background-color: #cecece !important;
  background: #cecece !important;
  opacity: 1 !important;
  filter: none !important;
  background-image: none !important;
  transition: none !important;
}