/*
 * Prime Care Investment Pvt Ltd Website Styles
 *
 * This stylesheet defines the core look and feel for the Prime Care
 * corporate website. The design embraces a clean white background
 * across the site with dark blue accents to reinforce the brand’s
 * identity. Text is given a subtle gloss effect via text shadows
 * so that headings stand out without overpowering the minimal layout.
 */

:root {
  /* Brand colours derived from the Ocean Mist palette */
  /* The darkest tone becomes our base (header backgrounds and primary text) */
  /* Updated palette to reflect the new Prime Care brand colours */
  /*
   * Update the colour palette to align more closely with the refreshed
   * Prime Care branding.  We retain the rich teal (#06768d) as the
   * primary anchor colour and introduce a brighter blue from the
   * Ocean Mist palette (#4A90E2) for accents.  Darker teal tones are
   * used for hover states and secondary copy.  A very light blue
   * (#E1E5EA) softens section backgrounds.  The text colour is now
   * a deep navy (#264653) to maximise contrast and readability.
   */
  /* Updated palette to mirror the dark menu banner and turquoise highlight in the provided example */
  --primary-color: #031f40; /* deep navy for headers and key elements */
  --secondary-color: #f5f9fc; /* soft off‑white grey for backgrounds */
  --accent-color: #00bcd4; /* bright turquoise used for buttons, links and active menu */
  --accent-dark: #0095af; /* darker turquoise for hover states */
  --text-color: #26364c; /* charcoal for body text */
  --light-text: #2a3844; /* muted slate for secondary text */
  --white: #ffffff;
}

/* Global reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: var(--white);
  color: var(--text-color);
  line-height: 1.6;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Header */
header {
  /* Solid dark banner inspired by the provided menu screenshot */
  background-color: #031f40; /* rich navy backdrop */
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-bottom: none;
}

header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

header .logo {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--white);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);

  /* Prevent the brand name from wrapping onto multiple lines when space is tight
     by forcing the span to remain on a single line. This ensures the PRIME CARE
     text sits neatly beside the logo mark instead of splitting across lines. */
  white-space: nowrap;
}

header .logo img {
  /* Increase the height of the Prime Care logomark so it matches the height of the navigation buttons. */
  height: 60px;
  width: auto;
  margin-right: 0.75rem;
  vertical-align: middle;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
}

/* Allow menu items to hold submenus */
nav li {
  position: relative;
}

/* Dropdown menu container – hidden by default */
nav li .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(10px);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
  z-index: 1001;
}

/* Dropdown links styling */
.dropdown li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--primary-color);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown li a:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent-color);
}

/* Show dropdown on hover for desktop */
nav li:hover > .dropdown {
  display: block;
}

/* When a dropdown is explicitly opened on mobile, display the sub-menu */
nav li.dropdown-open > .dropdown {
  display: block;
}

/* Adjust dropdown styling for mobile devices */
@media (max-width: 768px) {
  nav li .dropdown {
    position: static;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 0;
  }
  .dropdown li a {
    color: var(--white);
    background: transparent;
  }
  .dropdown li a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-color);
  }
}

nav li + li {
  margin-left: 0;
}

nav a {
  /* Clean dark menu items with turquoise highlight on hover and active */
  font-weight: 500;
  /* Increase padding and remove horizontal margin so the active highlight spans the full menu height */
  padding: 0.7rem 1rem;
  margin: 0;
  display: inline-block;
  border-radius: 4px;
  background-color: transparent;
  color: var(--white);
  transition: background 0.3s, color 0.3s;
}

/* Active and hover states for menu links */
nav a:hover,
nav a.active {
  background-color: var(--accent-color);
  color: var(--white);
  text-decoration: none;
}

/* Hero slider */
.hero {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Ensure only the active slide can be clicked */
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;

  /* Prevent inactive slides from blocking clicks */
  pointer-events: none;
}

.slide.active {
  opacity: 1;

  /* Allow clicks only on the active slide */
  pointer-events: auto;
  z-index: 1;
}

.slide .overlay {
  /* Position the hero text towards the bottom of the slide with a dark backdrop for readability */
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.45);
  padding: 1.25rem 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
}

.slide .overlay h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.slide .overlay p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.btn {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  /* Buttons adopt the accent colour with white text for stronger contrast */
  background-color: var(--accent-color);
  color: var(--white);
  border-radius: 4px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: background 0.3s, color 0.3s;
}

.btn:hover {
  /* Darken the background slightly on hover to indicate interaction */
  background-color: var(--accent-dark);
  color: var(--white);
  text-decoration: none;
}

/* Generic section styling */
.section {
  padding: 4rem 1rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.stat-item {
  flex: 1 1 160px;
  margin: 1rem 0;
  text-align: center;
  /* Ensure that each stat item aligns its heading to the top and subtitle to the bottom
     for consistent spacing.  Using flexbox here allows the heading to stick to the top and
     the paragraph to the bottom within the available height. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.stat-item h3 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.stat-item p {
  font-size: 1rem;
  color: var(--light-text);
}

.highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.highlight-card {
  flex: 1 1 calc(33.333% - 1rem);
  background-color: var(--secondary-color);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-card:hover {
  /*  background-color: rgb(161, 233, 255);*/
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.highlight-card i {
  font-size: 2rem;
  /* Use the accent colour for icons so they stand out against the muted cards */
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.highlight-card h4 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.highlight-card p {
  font-size: 0.95rem;
  color: var(--light-text);
  margin-bottom: 1rem;
}

.highlight-card a {
  font-weight: 600;
  /* Buttons and links on cards use the accent colour to draw attention */
  color: var(--accent-color);
}

/* Page hero */
/* Generic page hero styling: vertical stack by default */
.page-hero {
  background-color: var(--secondary-color);
  padding: 3rem 1rem;
  text-align: center;
  align-items: center;
}

/* Container to wrap hero heading and tagline so a logo can float beside it on larger screens */
.page-hero .hero-content {
  max-width: 800px;
  margin: 0 auto;
}

/* Adjust page hero layout on wider screens: align text left and place logo to the right */
@media (min-width: 768px) {
  /* On wider screens, allow the hero to display its logo and text side by side while
     keeping the heading and tagline centred. Use a flex container with centred
     alignment and provide spacing between the logo and text. */
  .page-hero {
    align-items: center;
    justify-content: center;
    gap: 2rem;
    text-align: center;
  }
  .page-hero h1,
  .page-hero p {
    text-align: center;
  }
  .page-hero .hero-content {
    flex: none;
    /* max-width: 800px;*/
    /* margin-left: 50;*/
    text-align: center;
  }
  .page-hero img.outlet-logo {
    /* Keep the logo to the left of the text and provide separation via gap */
    order: 0;
    margin-left: 900px;
    max-width: 150px;
    height: auto;
  }
}

.page-hero h1 {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
}

.page-hero p {
  font-size: 1.1rem;
  color: var(--light-text);
}

/* Centre headings across the site for a balanced and unified appearance */
.section h2,
.section h3,
.section h4 {
  text-align: center;
  width: 100%;
}

.page-hero h1,
.page-hero p {
  /* Override the left alignment set in the media query for small screens */
  text-align: center;
  width: 100%;
}

/* Value cards for About page */
.values {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 2rem;
}

.value-card {
  flex: 1 1 calc(20% - 1rem);
  background-color: var(--secondary-color);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
  background-color: var(--accent-color);
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.value-card i {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.value-card h3 {
  font-size: 1.25rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.value-card p {
  font-size: 0.95rem;
  color: var(--light-text);
}

/* Outlets page */
.outlets-list {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  /* Centre the outlet cards within the available space so that
     rows with fewer items are horizontally centred rather than
     left‑aligned. */
  justify-content: center;
}

.outlet-card {
  background-color: var(--secondary-color);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;

  /* Ensure equal height cards with flex */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.outlet-card img {
  max-height: 40px; /* same height for all images */
  object-fit: contain; /* keeps aspect ratio */
  margin-top: auto; /* push image to bottom */
}
/*
.outlet-card {
  background-color: var(--secondary-color);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  /* Centre align the contents of each outlet card so the
     headings, text and links are aligned neatly in the middle. */
/*text-align: center;*/

.outlet-card:hover {
  background-color: var(--accent-color);
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.outlet-card h4 {
  font-size: 1.15rem;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
}

.outlet-card p {
  font-size: 0.9rem;
  color: var(--light-text);
  margin-bottom: 0.5rem;
}

.outlet-card a {
  font-weight: 600;
  color: var(--primary-color);
  display: inline-block;
  margin-top: 0.5rem;
}

/* Product portfolio cards */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.portfolio-card {
  background-color: var(--secondary-color);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card:hover {
  background-color: var(--accent-color);
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.portfolio-card i {
  font-size: 2rem;
  /* Portfolio icons use the accent colour for a lively touch */
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

/* Use image icons in portfolio cards instead of FontAwesome when provided. Ensure
   consistent sizing and spacing. Images are sized explicitly and keep their
   aspect ratio via object-fit. */
.portfolio-card img.portfolio-icon {
  width: 70px;
  height: 70px;
  margin-bottom: 0.5rem;
  object-fit: contain;
}

.portfolio-card h3 {
  font-size: 1.25rem;
  color: var(--primary-color);
  margin-bottom: 0.25rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.portfolio-card p {
  font-size: 0.9rem;
  color: var(--light-text);
  margin-bottom: 0.5rem;
}

/* Forms */
.form {
  max-width: 600px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form input,
.form select,
.form textarea {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.form textarea {
  resize: vertical;
  min-height: 120px;
}

.form button {
  padding: 0.75rem 1.5rem;
  /* Form buttons share the same accent colour as general buttons */
  background-color: var(--accent-color);
  color: var(--white);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.form button:hover {
  /* Use the darker accent on hover */
  background-color: var(--accent-dark);
}

/* Footer */
.footer {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 2rem 1rem;
  margin-top: 2rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-col {
  flex: 1 1 240px;
}

.footer-col h4 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--white);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  color: var(--white);
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
}

.social-icons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Style social icons as circular buttons with white glyphs on subtle backgrounds */
.social-icons a {
  color: var(--white);
  background-color: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition: background-color 0.3s;
}

.social-icons a:hover {
  background-color: var(--accent-color);
  color: var(--white);
}

/* Custom images placed inside social icon links should scale appropriately
   within the circular button. Ensure they are centred and maintain aspect
   ratio. */
/* Standard size and invert filter for inline social icons */
.social-icons a img.social-icon-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  /* Invert the icon colours so that dark icons in the provided PNGs
     become light when displayed against dark backgrounds. Brightness is
     not altered here to preserve contrast within the icon detail. */
  filter: invert(1);
}

/*
 * Contact page social icons use the same styling as the global footer icons.
 * By not overriding the default .social-icons rules here, icons will appear
 * with white glyphs on semi‑transparent backgrounds and brighten on hover.
 */

/* Mobile navigation toggle button */
/* Navigation toggle: top-right and above the dropdown */
.nav-toggle {
  display: none; /* make sure it shows */
  cursor: pointer;
  color: var(--white);
  font-size: 1.5rem;
  padding: 0.25rem 0.5rem; /* touch target */
  margin-left: auto; /* push to the right edge */
  position: relative; /* create stacking context */
  z-index: 1100; /* above nav ul (which is absolute) */
}

/* Responsive navigation */
@media (max-width: 768px) {
  nav ul {
    /* Hide menu by default on small screens */
    display: none;
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: #031f40; /* match the dark header background */
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  nav ul.open {
    display: flex;
  }
  nav li + li {
    margin-left: 0;
  }
  nav li {
    margin: 0;
  }
  nav li a {
    margin: 0.5rem 1rem;
    display: block;
  }
  .nav-toggle {
    display: block;
  }
  header .container {
    position: relative;
  }
}

.footer-bottom {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.9rem;
  color: #ddd;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
}

/* Brands grid styling */
/* Brand gallery styling: a flexible grid of glassy cards for each logo */
.brand-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  justify-items: center;
  align-items: center;
  margin-top: 1rem;
}

.brand-item {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  padding: 0.01rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brand-item img {
  max-width: 100%;
  max-height: 200px;
  height: auto;
  object-fit: contain;
  /* subtle shadow around logos */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.brand-item:hover {
  background-color: var(--accent-color);
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Welcome modal styling */
.welcome-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.welcome-modal.hidden {
  display: none;
}

.welcome-modal .welcome-content {
  background-color: rgba(255, 255, 255, 0.92);
  padding: 2rem 2.5rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.welcome-modal .welcome-content h2 {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.welcome-modal .welcome-content p {
  font-size: 1.1rem;
  color: var(--text-color);
  margin-bottom: 1.5rem;
}

/* Positioning for the 10-year anniversary badge overlay in the hero */
.ten-year-logo {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 120px;
  height: auto;
  opacity: 0.9;
  pointer-events: none;
}

/* Care Plus logo overlay on hero slides */
.careplus-logo-overlay {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: 80px;
  height: auto;
  opacity: 0.95;
  pointer-events: none;
}

/* Care Plus logo styling on the outlets page */
/* Logo displayed on the outlets page hero */
.outlet-logo {
  max-width: 140px;
  height: auto;
  /* On small screens the logo centers below the heading */
  display: block;
  margin: 1rem auto 0 auto;
}

@media (min-width: 768px) {
  .outlet-logo {
    /* Align to the right of the heading on larger screens */
    margin: 0;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .highlight-card,
  .portfolio-card {
    flex: 1 1 calc(50% - 1rem);
  }
  .value-card {
    flex: 1 1 calc(50% - 1rem);
  }
  .stats {
    flex-direction: column;
    align-items: center;
  }
  .stat-item {
    flex: 1 1 100%;
  }
  .footer-container {
    flex-direction: column;
    text-align: center;
  }
  .footer-col {
    flex: 1 1 100%;
  }
}

/* Follow Us section styles */
.follow-us-section {
  background-color: var(--primary-color);
  color: var(--white);
  text-align: center;
  padding: 1.5rem 0;
}
.follow-us-section .social-handle {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.follow-us-section .social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.follow-us-section .social-icons img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}