.title {
  font-size: 65px;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
}

body {
  background-color: rgb(241, 226, 206) !important;
  font-family: "Inter", sans-serif !important;
}

/* navbar */
.container-fluid {
  background-color: burlywood
}

nav.navbar {
  background-color: burlywood !important;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.08);
}

.navbar-brand{
  display: flex;
  align-items: center;
  gap: 0.8em;
  white-space: nowrap;
  background-color: burlywood
}

.circle{
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  background-color: rgb(241, 226, 206);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.circle img{
  width: 90%;
  height: 90%;
  object-fit: contain;
}








.home-hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2em;
  padding-top: 4em;
}

/* icon + text row */
.hero-content {
  display: flex;
  align-items: center;
  gap: 1.5em;
}

/* icon */
.hero-icon {
  width: 8em;
  height: 8em;
  object-fit: contain;
}

/* text block */
.hero-text h1 {
  margin: 0 0 0.4em 0;
}

.hero-text p {
  margin: 0 auto;
  max-width: 32em;
  font-size: 1.25em;
}

/* button */
.hero-button {
  display: inline-block;
  padding: 0.8em 2em;
  border-radius: 1.5em;

  background-color: #2596be;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* mobile: stack icon above text */
@media (max-width: 40em) {
  .hero-content {
    flex-direction: column;
  }
}

.card {
  border: 0.15em solid #c89f6a;
  border-radius: 1em;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.card-header {
  background-color: burlywood !important;
  font-weight: 700;
}

.card-body {
  background-color: rgb(241, 226, 206);
}

.btn-primary {
  background-color: #2596be !important;
  border-color: #2596be !important;
}



.introduction-card {
  background-color:rgb(241, 226, 206) !important;
  max-width: 40em;
  margin: 1em auto; 
  font-size: 1.15em;
}

.inline-img {
  width: 6em !important; 
  height: 4em !important;
  vertical-align: middle;
  margin: 0 0.4em;
}

.inline-icon {
  width: 1.5em !important; 
  height: 1.5em !important;
  vertical-align: middle;
  margin: 0 0.4em;
}




/* First Steps */

/* page spacing */
.firststeps {
  max-width: 50em;
  margin: 3em auto;
  padding: 0 1em;
}

/* list boxes styling */
.first-steps .list-group-item {
  background-color: rgb(241, 226, 206) !important;
  border: 0.15em solid #c89f6a !important;  /* <-- brown instead of blue */
  border-radius: 1em;
  margin-bottom: 1em;
  padding: 1.2em 1.4em;
}


/* remove the “connected” look from bootstrap list-group */
.first-steps.list-group {
  border-radius: 0;
}

/* titles + text */
.step-title {
  margin: 0 0 0.5em 0;
  font-size: 1.2em;
  font-weight: 700;
}

.step-text {
  margin: 0;
}

/* optional: a subtle shadow */
.first-steps .list-group-item {
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.12);
}

.first-steps {
  counter-reset: step;
}

.first-steps .list-group-item {
  counter-increment: step;
}

.first-steps .step-title::before {
  content: counter(step) ". ";
  color: #2596be;       /* your blue */
  font-weight: 700;
}

.first-steps .step-title {
  color: #2596be;   /* <-- make title blue */
}


.step-images {
  display: flex;
  justify-content: center;
  gap: 2em;
  margin-top: 1.5em;
  flex-wrap: wrap; /* stacks on small screens */
}

.step-images figure {
  margin: 0;
  text-align: center;
  max-width: 10em;
}

.step-images img {
  width: 100%;
  border-radius: 0.5em;
}

.step-images figcaption {
  margin-top: 0.4em;
  font-size: 0.9em;
}

.inline-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin: 0 0.25em;
}

.list-image {
  width: 100%;
  max-width: 20em;
  height: auto;
  margin-top: 0.5em;
  border-radius: 0.5em;
}

.step-links {
  display: flex;
  justify-content: center;
  gap: 1.5em;
  margin-top: 1em;
  flex-wrap: wrap; /* stacks nicely on small screens */
}

/* Tracking */

/* Tracking page */
.tracking-page {
  max-width: 64em;
}

/* Header */
.tracking-header {
  text-align: center;
  margin-bottom: 2.2em;
}

.tracking-title {
  margin-bottom: 0.4em;
}

.tracking-intro {
  margin: 0 auto;
  max-width: 48em;
  font-size: 1.1em;
}

/* Sections */
.tracking-section {
  margin-top: 2.5em;
}

.tracking-h2 {
  font-weight: 900;
  color: #2596be;
  margin-bottom: 0.8em;
}

.tracking-h3 {
  font-weight: 900;
  margin: 1.2em 0 0.8em;
}

/* Grid: 1 col small, 2 col medium+ */
.tracking-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
}

@media (min-width: 48em) {
  .tracking-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Card */
.tracking-card {
  background-color: rgb(241, 226, 206);
  border: 0.15em solid #c89f6a; /* brown frame */
  border-radius: 1em;
  padding: 1.1em 1.2em;
  box-shadow: 0 0.35em 1em rgba(0,0,0,0.12);

  display: flex;
  gap: 1.1em;
  align-items: flex-start;
}

/* Text area */
.tracking-card-text {
  flex: 1 1 auto;
  min-width: 0;
}

.tracking-card-title {
  margin: 0 0 0.4em 0;
  font-size: 1.12em;
  font-weight: 900;
}

.tracking-card-sub {
  margin: 0;
  opacity: 0.85;
}

/* Optional media area */
.tracking-card-media {
  flex: 0 0 12em;
  max-width: 12em;
}

.tracking-card-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.75em;
  border: 0.12em solid #2596be; /* blue accent */
  object-fit: cover;
}

/* Small screens: image goes below */
@media (max-width: 40em) {
  .tracking-card {
    flex-direction: column;
  }

  .tracking-card-media {
    max-width: 100%;
    flex: 0 0 auto;
  }

  .tracking-card-media img {
    max-width: 26em;
    margin: 0 auto;
  }
}

/* Premium note card */
.tracking-card-note {
  border-color: #2596be;
}

/* Jump dropdown */
.jump-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8em;
  flex-wrap: wrap;
  margin: 1.2em 0 2em;
}

.jump-label {
  font-weight: 900;
  color: #2596be;
}

.jump-select {
  max-width: 24em;
  border-radius: 1em;
  border: 0.15em solid #c89f6a;
  background-color: rgb(241, 226, 206);
}

/* Back-to-top button */
.back-top {
  display: inline-block;
  margin-top: 1.2em;
  padding: 0.6em 1.2em;
  border-radius: 1.4em;
  background-color: #2596be;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.back-top:hover {
  text-decoration: none;
  opacity: 0.92;
}





/** FAQ **/

/* FAQ page layout */
.faq-page {
  max-width: 55em;
}

.faq-title {
  text-align: center;
  margin-bottom: 0.5em;
}

.faq-intro {
  text-align: center;
  margin: 0 auto 2em;
  max-width: 40em;
  font-size: 1.1em;
}

/* accordion “card” styling */
.faq-accordion .accordion-item {
  background-color: rgb(241, 226, 206);
  border: 0.15em solid #c89f6a; /* brown border */
  border-radius: 1em;
  overflow: hidden;
  margin-bottom: 1em;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.12);
}

/* header button styling */
.faq-accordion .accordion-button {
  background-color: burlywood;
  font-weight: 700;
  color: #1a1a1a;
  padding: 1em 1.2em;
}

/* remove Bootstrap’s harsh focus ring */
.faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2em rgba(37, 150, 190, 0.25);
  border-color: transparent;
}

/* when opened: keep same background, but blue text for “active” feel */
.faq-accordion .accordion-button:not(.collapsed) {
  background-color: burlywood;
  color: #2596be;
}

/* answer area */
.faq-accordion .accordion-body {
  background-color: rgb(241, 226, 206);
  padding: 1.2em 1.2em;
  font-size: 1.05em;
}

/* nice spacing for lists inside answers */
.faq-accordion .accordion-body ul,
.faq-accordion .accordion-body ol {
  margin-top: 0.6em;
  margin-bottom: 0;
}



/** contact **/

/* Contact page layout */
.contact-page {
  max-width: 60em;
}

.contact-header {
  text-align: center;
  margin-bottom: 2em;
}

.contact-title {
  margin-bottom: 0.5em;
}

.contact-intro {
  margin: 0 auto;
  max-width: 42em;
  font-size: 1.1em;
}

/* card look consistent with your design */
.contact-card {
  background-color: rgb(241, 226, 206);
  border: 0.15em solid #c89f6a; /* brown */
  border-radius: 1em;
  padding: 1.4em;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.12);
}

.contact-card-title {
  margin: 0 0 1em 0;
  font-size: 1.2em;
  font-weight: 700;
  color: #2596be; /* blue accent */
}

/* form elements */
.contact-input {
  border: 0.12em solid #c89f6a;
  border-radius: 0.75em;
  background-color: rgb(241, 226, 206);
}

.contact-input:focus {
  border-color: #2596be;
  box-shadow: 0 0 0 0.2em rgba(37, 150, 190, 0.25);
}

/* button consistent with hero-button */
.contact-button {
  display: inline-block;
  padding: 0.8em 1.6em;
  border-radius: 1.5em;
  border: 0.15em solid #2596be;
  background-color: #2596be;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.contact-button:hover {
  filter: brightness(0.95);
}

/* links */
.contact-link {
  color: #2596be;
  font-weight: 600;
  text-decoration: none;
}

.contact-link:hover {
  text-decoration: underline;
}

/* info block formatting */
.contact-info {
  display: grid;
  gap: 1em;
}

.contact-info-row {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 1em;
}

.contact-info-label {
  font-weight: 700;
}

.contact-info-value {
  line-height: 1.4;
}

.contact-divider {
  margin: 1.2em 0;
  border-top: 0.12em solid #c89f6a;
  opacity: 1;
}

.contact-subtitle {
  margin: 0 0 0.6em 0;
  font-size: 1.05em;
  font-weight: 700;
}

.contact-quicklinks {
  margin: 0;
  padding-left: 1.2em;
}

/* mobile */
@media (max-width: 40em) {
  .contact-info-row {
    grid-template-columns: 1fr;
  }
}


/** Annotation **/

/* Annotation page layout */
.annotation-page {
  max-width: 55em;
}

.annotation-title {
  text-align: center;
  margin-bottom: 0.5em;
}

.annotation-intro {
  text-align: center;
  margin: 0 auto 2em;
  max-width: 44em;
  font-size: 1.1em;
}

/* Accordion styled like your site */
.annotation-accordion .accordion-item {
  background-color: rgb(241, 226, 206);
  border: 0.15em solid #c89f6a; /* brown border */
  border-radius: 1em;
  overflow: hidden;
  margin-bottom: 1em;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.12);
}

.annotation-accordion .accordion-button {
  background-color: burlywood;
  font-weight: 700;
  color: #1a1a1a;
  padding: 1em 1.2em;
}

/* Open state */
.annotation-accordion .accordion-button:not(.collapsed) {
  background-color: burlywood;
  color: #2596be; /* blue accent */
}

/* Focus ring in your blue */
.annotation-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2em rgba(37, 150, 190, 0.25);
}

/* Body */
.annotation-accordion .accordion-body {
  background-color: rgb(241, 226, 206);
  padding: 1.2em 1.2em;
  font-size: 1.05em;
}

/* Premium hint box */
.annotation-note {
  border: 0.15em solid #2596be;
  border-radius: 0.75em;
  padding: 0.9em 1em;
  background-color: rgb(241, 226, 206);
}

/* Links */
.annotation-link {
  color: #2596be;
  font-weight: 700;
  text-decoration: none;
}

.annotation-link:hover {
  text-decoration: underline;
}

/* Inline icons (re-use your style) */
.inline-icon {
  display: inline-block;
  width: 36px;
  height: 36px;
}


/** Premium **/

/* Premium page layout */
.premium-page {
  max-width: 60em;
}

.premium-header {
  text-align: center;
  margin-bottom: 2em;
}

.premium-title {
  margin-bottom: 0.4em;
}

.premium-intro {
  margin: 0 auto;
  max-width: 46em;
  font-size: 1.1em;
}

/* Pricing box (big box under title) */
.premium-pricing {
  background-color: rgb(241, 226, 206);
  border: 0.15em solid #2596be;          /* your blue */
  border-radius: 1em;
  padding: 1.2em 1.4em;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.12);
  margin-bottom: 2.2em;
}

.premium-pricing-title {
  margin: 0 0 0.5em 0;
  font-size: 1.2em;
  font-weight: 800;
  color: #2596be;
}

.premium-pricing-text {
  margin: 0;
  font-size: 1.05em;
}

/* Section title */
.premium-section-title {
  margin: 0 0 1em 0;
  font-size: 1.25em;
  font-weight: 800;
}

/* Feature cards: built to survive adding images */
.premium-card {
  background-color: rgb(241, 226, 206);
  border: 0.15em solid #c89f6a;          /* brown border, matches your cards */
  border-radius: 1em;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.12);
  overflow: hidden;

  /* Key part: stable layout even with images */
  display: flex;
  align-items: stretch;
  gap: 1.2em;
  padding: 1.2em 1.2em;
  min-height: 10em;
}

/* Text area */
.premium-card-content {
  flex: 1 1 auto;
  min-width: 0; /* prevents flex overflow */
}

.premium-card-title {
  margin: 0 0 0.5em 0;
  font-size: 1.15em;
  font-weight: 800;
  color: #2596be;
}

.premium-card-text {
  margin: 0;
  line-height: 1.45;
  font-size: 1.02em;
}

/* Optional image slot */
.premium-card-media {
  flex: 0 0 12em;         /* consistent width */
  max-width: 12em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-card-media img {
  width: 100%;
  height: auto;
  border-radius: 0.75em;
  border: 0.12em solid #c89f6a;
  object-fit: cover;
}

/* Small screens: stack image below text automatically */
@media (max-width: 48em) {
  .premium-card {
    flex-direction: column;
  }

  .premium-card-media {
    flex: 0 0 auto;
    max-width: 100%;
  }

  .premium-card-media img {
    max-width: 26em;
    margin: 0 auto;
  }
}

/* Footnote */
.premium-footnote {
  margin-top: 2em;
}

.premium-footnote-text {
  font-size: 0.95em;
  opacity: 0.9;
}


/** Personalisation **/

/* Personalisation page */
.personalisation-page {
  max-width: 62em;
}

/* Header */
.pers-header {
  text-align: center;
  margin-bottom: 2em;
}

.pers-title {
  margin-bottom: 0.4em;
}

.pers-intro {
  margin: 0 auto;
  max-width: 48em;
  font-size: 1.1em;
}

/* Tip box (different vibe than premium) */
.pers-tip {
  background-color: burlywood;
  border: 0.15em solid #c89f6a; /* brown */
  border-radius: 1em;
  padding: 1.2em 1.4em;
  box-shadow: 0 0.25em 0.75em rgba(0,0,0,0.08);
  margin-bottom: 2em;
}

.pers-tip-title {
  margin: 0 0 0.5em 0;
  font-weight: 800;
  font-size: 1.2em;
}

.pers-tip-text {
  margin: 0;
  font-size: 1.05em;
}

/* Section title */
.pers-section-title {
  margin: 0 0 1em 0;
  font-weight: 800;
  font-size: 1.25em;
}

/* Panels: robust with optional images, NOT the same layout as premium */
.pers-panel {
  background-color: rgb(241, 226, 206);
  border: 0.15em solid #c89f6a; /* brown */
  border-radius: 1em;
  overflow: hidden;
  margin-bottom: 1em;
  box-shadow: 0 0.4em 1em rgba(0,0,0,0.12);
}

/* Top bar */
.pers-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.9em 1.2em;
  background-color: rgb(241, 226, 206);
  border-bottom: 0.12em solid #c89f6a;
}

.pers-panel-title {
  margin: 0;
  font-weight: 900;
  font-size: 1.15em;
  color: #2596be; /* blue headline */
}

/* Badge */
.pers-badge {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 0.9em;
  padding: 0.35em 0.7em;
  border-radius: 999em;
  border: 0.12em solid #2596be;
  color: #2596be;
  background-color: rgb(241, 226, 206);
}

.pers-badge-free {
  border-color: #c89f6a;
  color: #6b4a1f;
}

/* Body: text left, image slot right (optional), collapses nicely on small screens */
.pers-panel-body {
  display: flex;
  gap: 1.2em;
  padding: 1.1em 1.2em 1.2em;
  align-items: flex-start;
}

.pers-panel-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.02em;
  line-height: 1.45;
}

.pers-panel-media {
  flex: 0 0 13em;
  max-width: 13em;
}

.pers-panel-media img {
  width: 100%;
  height: auto;
  border-radius: 0.75em;
  border: 0.12em solid #c89f6a;
  object-fit: cover;
  display: block;
}

/* Links */
.pers-link {
  color: #2596be;
  font-weight: 800;
  text-decoration: none;
}

.pers-link:hover {
  text-decoration: underline;
}

/* Small screens: image stacks below */
@media (max-width: 48em) {
  .pers-panel-body {
    flex-direction: column;
  }

  .pers-panel-media {
    max-width: 100%;
    flex: 0 0 auto;
  }

  .pers-panel-media img {
    max-width: 28em;
    margin: 0 auto;
  }
}

/* Footnote */
.pers-footnote {
  margin-top: 2em;
}

.pers-footnote-text {
  font-size: 0.95em;
  opacity: 0.9;
}