/* =========================================================
   Nutrition Cure World - Simple Blue Theme
   One color only: blue. Everything else is white or grey.
   ========================================================= */

/* ---------- 1. Colors and basics ---------- */
:root {
  --blue: #1d64d8;        /* main color */
  --blue-dark: #154ba6;   /* hover color */
  --blue-light: #eef4fe;  /* soft background */
  --text: #1f2937;        /* main text */
  --muted: #6b7280;       /* light text */
  --border: #e5e7eb;      /* lines and borders */
}

body {
  font-family: "Inter", sans-serif;
  color: var(--text);
  line-height: 1.7;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: 1.3;
}

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

a:hover {
  color: var(--blue-dark);
}

img {
  max-width: 100%;
}

/* ---------- 2. Buttons ---------- */
.btn-main {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  border: 2px solid var(--blue);
  padding: 10px 26px;
  border-radius: 6px;
  font-weight: 600;
}

.btn-main:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: #fff;
}

.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
  padding: 10px 26px;
  border-radius: 6px;
  font-weight: 600;
}

.btn-outline:hover {
  background: var(--blue);
  color: #fff;
}

/* white button for the blue CTA box */
.btn-white {
  display: inline-block;
  background: #fff;
  color: var(--blue);
  padding: 10px 26px;
  border-radius: 6px;
  font-weight: 600;
}

.btn-white:hover {
  background: var(--blue-light);
}

/* ---------- 3. Top bar and menu ---------- */
.top-bar {
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  padding: 8px 0;
}

.top-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.top-bar a {
  color: #fff;
}

.navbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}

/* logo in one line */
.logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

.logo i {
  margin-right: 6px;
}

.navbar .nav-link {
  color: var(--text);
  font-weight: 500;
  margin: 0 8px;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--blue);
}

/* ---------- 4. Sections ---------- */
.section {
  padding: 80px 0;
}

.section-light {
  background: var(--blue-light);
}

.section-title {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}

.label {
  display: inline-block;
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.text-blue {
  color: var(--blue);
}

.rounded-img {
  border-radius: 10px;
  width: 100%;
  object-fit: cover;
}

/* ---------- 5. Hero (home page) ---------- */
.hero {
  padding: 90px 0;
  background: var(--blue-light);
}

.hero h1 {
  font-size: 46px;
  margin-bottom: 20px;
}

.hero h1 span {
  color: var(--blue);
}

.hero p {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 30px;
}

.hero img {
  height: 460px;
}

/* ---------- 6. Page banner (inner pages) ---------- */
.page-banner {
  background: var(--blue);
  color: #fff;
  padding: 70px 0;
  text-align: center;
}

.page-banner h1 {
  font-size: 40px;
}

.page-banner p {
  max-width: 620px;
  margin: 10px auto 0;
  opacity: 0.9;
}

.page-banner a {
  color: #fff;
}

/* ---------- 7. Cards (services, blog, why us) ---------- */
.card-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s;
}

.card-box:hover {
  box-shadow: 0 10px 30px rgba(29, 100, 216, 0.12);
}

.card-box img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.card-body-box {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-body-box p {
  color: var(--muted);
  flex-grow: 1;
}

.card-body-box .btn-outline {
  align-self: flex-start;
}

/* small icon circle */
.icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.simple-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
  height: 100%;
}

.simple-box p {
  color: var(--muted);
  margin: 0;
}

/* tick list */
.tick-list {
  list-style: none;
  padding: 0;
}

.tick-list li {
  margin-bottom: 10px;
}

.tick-list i {
  color: var(--blue);
  margin-right: 8px;
}

/* ---------- 8. Testimonials ---------- */
.testimonial {
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  height: 100%;
}

.testimonial .stars {
  color: var(--blue);
  margin-bottom: 12px;
}

.testimonial p {
  font-style: italic;
  color: var(--muted);
}

.testimonial img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}

/* ---------- 9. Team ---------- */
.team-card {
  text-align: center;
}

.team-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 14px;
}

.team-card span {
  color: var(--muted);
  font-size: 14px;
}

/* ---------- 10. FAQ ---------- */
.accordion-button:not(.collapsed) {
  background: var(--blue-light);
  color: var(--blue);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
}

/* ---------- 11. CTA ---------- */
.cta-box {
  background: var(--blue);
  color: #fff;
  border-radius: 12px;
  padding: 60px 40px;
  text-align: center;
}

.cta-box p {
  max-width: 560px;
  margin: 10px auto 26px;
  opacity: 0.9;
}

/* ---------- 12. Blog post and legal pages ---------- */
.article h2 {
  font-size: 24px;
  margin-top: 32px;
}

.article blockquote {
  border-left: 4px solid var(--blue);
  background: var(--blue-light);
  padding: 18px 22px;
  border-radius: 6px;
  font-style: italic;
}

.post-meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 8px;
}

.sidebar-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 24px;
}

.sidebar-box a {
  display: block;
  color: var(--text);
  padding: 6px 0;
}

.sidebar-box a:hover {
  color: var(--blue);
}

/* ---------- 13. Forms ---------- */
.form-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 100, 216, 0.15);
}

.form-check-input:checked {
  background-color: var(--blue);
  border-color: var(--blue);
}

/* message shown after the form is sent */
.form-message {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 6px;
  background: var(--blue-light);
  color: var(--blue);
}

/* contact details */
.contact-item {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.contact-item .icon {
  flex-shrink: 0;
  margin: 0;
}

.contact-item p {
  margin: 0;
}

.map {
  width: 100%;
  height: 380px;
  border: 0;
  border-radius: 10px;
}

/* ---------- 14. Footer ---------- */
.footer {
  background: #0f172a;
  color: #cbd5e1;
  padding: 60px 0 0;
}

.footer h5 {
  color: #fff;
  margin-bottom: 18px;
}

.footer a {
  color: #cbd5e1;
  display: block;
  margin-bottom: 8px;
}

.footer a:hover {
  color: #fff;
}

.footer .logo {
  color: #fff;
}

.footer .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  margin-right: 6px;
}

.footer-bottom {
  border-top: 1px solid #1e293b;
  margin-top: 40px;
  padding: 20px 0;
  text-align: center;
  font-size: 14px;
}

/* ---------- 15. Mobile ---------- */
@media (max-width: 991px) {
  .hero h1 {
    font-size: 34px;
  }

  .hero img {
    height: 320px;
    margin-top: 30px;
  }

  .section {
    padding: 60px 0;
  }
}