:root{
  --navbar-height: 56px; 
  --color-1: #272757; 
  --color-2: #8686AC; 
  --color-3: #0F0E47; 
  --color-4: #50581; 
}

/* global */
html, body { height:100%; }
body{
  padding-top: var(--navbar-height);        
  background: linear-gradient(135deg, var(--color-3) 0%, var(--color-1) 70%);
  color: var(--color-2);
  font-family: "Iceberg", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.navbar{
  background: linear-gradient(90deg, var(--color-3), var(--color-1)) !important;
}
/* keep brand (name + pen) locked together and vertically centered */
.navbar-brand{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap; /* prevent wrapping between name and icon */
  padding: 0.25rem 0;
}
.navbar .name, .navbar-brand .name { 
  color: var(--color-2); 
  margin: 0; 
  font-size: 1.25rem;
  line-height: 1;
}
.navbar-brand svg{
  width: 1.6rem;
  height: 1.6rem;
  flex: 0 0 auto;
  color: var(--color-2);
}

/* ensure the brand stays visible and aligned even when navbar collapses */
@media (max-width: 767.98px){
  .navbar-brand .name { font-size: 1.1rem; }
}

/* name styles */
.name{
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* carousel: full visible area under navbar */
#myCarousel,
#myCarousel .carousel-inner,
#myCarousel .carousel-item,
#myCarousel .bd-placeholder-img {
  min-height: calc(100vh - var(--navbar-height));
  height: calc(100vh - var(--navbar-height));
}

/* make carousel images fill the visible carousel area and crop neatly */
#myCarousel .carousel-img {
  width: 100%;
  height: calc(100vh - var(--navbar-height));
  object-fit: cover;
  display: block;
}

/* smaller screens: reduce height so carousel stays usable */
@media (max-width: 767.98px){
  :root{ --navbar-height: 112px; }
  #myCarousel,
  #myCarousel .carousel-inner,
  #myCarousel .carousel-item,
  #myCarousel .bd-placeholder-img {
    min-height: 60vh;
    height: 60vh;
  }
  #myCarousel .carousel-img {
    height: 60vh;
  }
}

/* SVG placeholder fills */
.bd-placeholder-img rect,
.featurette-image rect {
  fill: var(--color-2) !important;
}

/* caption readability */
.carousel-caption {
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* feature grid: equal height columns and bottom-aligned CTA */
.row.mt-5 {
  align-items: stretch; /* make all columns the same height */
}
.row.mt-5 > .col-lg-4 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;     /* horizontally center each column's content */
  text-align: center;      /* center inline content (headings, paragraphs) */
  padding: 1rem;
}
.row.mt-5 > .col-lg-4 svg {
  width: 120px;            /* force a consistent icon size */
  height: auto;
  display: block;
  margin: 0 auto 0.5rem;
  flex: 0 0 auto;
}
.row.mt-5 > .col-lg-4 > h2,
.row.mt-5 > .col-lg-4 > p {
  margin-top: 0.5rem;
  max-width: 34rem;
}
.row.mt-5 > .col-lg-4 > p:last-child {
  margin-top: auto; /* push the final button to the bottom so CTAs align */
}

.text-body-secondary {
  color:#0F0E47 !important;
}

/* buttons */
.btn-primary {
  background: var(--color-1);
  border-color: transparent;
  color: var(--color-2);
}
.btn-secondary {
  background: var(--color-2);
  color: #0f0f0f;
  border-color: transparent;
}

/* footer */
footer { color: var(--color-2); }

/* responsive tweaks */
@media (max-width: 767.98px){
  :root{ --navbar-height: 112px; }
  #myCarousel,
  #myCarousel .carousel-inner,
  #myCarousel .carousel-item,
  #myCarousel .bd-placeholder-img {
    min-height: 60vh;
    height: 60vh;
  }
}

/* smooth scrolling and offset for fixed navbar */
html {
  scroll-behavior: smooth;
}
.scroll-offset,
[id] { /* ensure headings don't hide under the fixed navbar when targeted */
  /* reduce extra gap so anchors land at the expected spot */
  scroll-margin-top: calc(var(--navbar-height) + 0.5rem);
}