@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

html, body, h1, h2, h3, h4, h5, h6, button, input, textarea {
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Carousel Feature */
.mj-carousel-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* I can also fiddle to 21/9 if we wanna get real crazy */
  max-height: 88vh;       /* keeps big */
  min-height: 560px;      /* keeps substantial */
  overflow: hidden;
}

@media (max-width: 600px){
  .mj-carousel-wrap{
    aspect-ratio: auto;
    height: 70vh;
    min-height: 480px;
    max-height: 760px;
  }
}



.mj-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2.2s ease-in-out; /* fade timing, can update later if I want */
}

.mj-slide.active{
  opacity: 1;
}

.mj-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Desktop uses --posDesktop (or defaults to centered) */
  object-position: var(--posDesktop, 50% 50%);
}

@media (max-width: 600px){
  .mj-slide img{
    /* Mobile uses --posMobile (or defaults to centered) */
    object-position: var(--posMobile, 50% 50%);
  }
}



.mj-package-img{
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}

.mj-section-title{
  font-weight: 700;
  letter-spacing: 0.5px;
}

.mj-footer a{
  text-decoration: none;
}

.mj-social{
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.mj-social a{
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
}

.mj-social a:hover{
  background: rgba(255,255,255,0.22);
}

.mj-social svg{
  width: 22px;
  height: 22px;
  fill: #fff;
}

/* Soft blue section behind the embedded form */
.mj-soft-blue {
  background: #eaf3ff;          /* soft blue */
  padding: 28px 12px;
}

.mj-quote-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,0.08);
}


/* Mobile-only: give the hero overlay more space so text + button never clip */
@media (max-width: 600px){
  .mj-hero-overlay{
    padding: 18px 16px !important;
    width: calc(100% - 32px);
    max-width: 360px;
  }
}

/* ---------- NAV BAR STYLING ---------- */
.mj-topbar{
  background: #6f737a;          /* soft charcoal-grey */
  color: #fff;
}

.mj-topbar a{
  color: #fff !important;
}

.mj-topbar .w3-button:hover{
  background: rgba(255,255,255,0.15) !important;
}

.mj-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mj-logo{
  height: 52px;
  width: auto;
  vertical-align: middle;
}

/* "Mallory Jane Photography" text */
.mj-brand-text{
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
}

/* Subtle active pill */
.mj-nav-active{
  background: rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;
}

/* Mobile tuning */
@media (max-width: 600px){
  .mj-logo{ height: 44px; }
  .mj-brand-text{ font-size: 16px; letter-spacing: 1px; }
  .mj-mobile-links .w3-button{ padding: 10px 10px; }
}