:root{
  --max-width:1100px;
  --accent: #797b7e;
  --muted:#6b7280;
  --bg-1:#f6fbff;
  --bg-2:#f2f7f9;
  --card:#ffffff;
  --radius:14px;
  --container-pad:24px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

/* ===========================
   Global background video
   =========================== */

.bg-video{
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;        /* cover the viewport responsively */
  z-index: 0;               /* behind page content */
  pointer-events: none;     /* allow clicks through video */
  filter: saturate(0.98) contrast(0.98) brightness(0.92);
}

/* Make sure main elements sit above the video */
.site-header { z-index: 6; position: relative; }     /* header above video */
.hero, .hero-inner, .hero-overlay { z-index: 3; position: relative; }
.container, .section, .blog-card, #getpdf, #contact, #about { z-index: 4; position: relative; }

/* If you want a subtle overlay across the whole page (improves contrast), use this:
   note: .global-overlay is optional — if you add it, add <div class="global-overlay"></div> after the video in HTML */
.global-overlay{
  position: fixed;
  inset: 0;
  z-index: 1; /* just above video, below content */
  background: linear-gradient(180deg, rgba(10,12,20,0.12), rgba(10,12,20,0.22));
  pointer-events: none;
}

/* Ensure hero still fills viewport and content is centered */
.hero {
  min-height: 100vh;    /* hero fills screen */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;      /* small horizontal padding */
}

/* Keep white content cards fully opaque and unchanged */
.section.container > * {
  
  position: relative;  /* keep above video */
  z-index: 4;
}

/* Mobile tuning: reduce overlay strength and ensure cover */
@media (max-width: 900px) {
  .bg-video { filter: brightness(0.92); }
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, rgba(111,163,239,0.06), rgba(245,247,250,0.4));
  color:#0b1220;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}



/* layout container */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:20px;
}

/* Header / Nav */
.site-header{
  position:sticky;
  top:0;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(12,20,30,0.05);
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
}
.logo{
  font-weight:700;
  letter-spacing:0.4px;
  text-decoration:none;
  color:#0b1220;
  font-size:1.05rem;
}
.nav{
  display:flex;
  gap:16px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color:rgba(11,18,32,0.75);
  padding:8px 10px;
  border-radius:10px;
}
.nav a:hover, .nav a.active{
  background:rgba(111,163,239,0.12);
  color:var(--accent);
}

/* mobile menu button */
.menu-btn{display:none;background:none;border:none;font-size:1.2rem;cursor:pointer}

/* HERO */
.hero{
  min-height:68vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:80px 20px;
  
}
.hero-inner{max-width:900px}
.hero-title{
  font-size:clamp(1.6rem,3.6vw,3rem);
  margin:0 0 12px;
  letter-spacing:-0.02em;
}
.hero-sub{
  margin:0 0 18px;
  color:var(--muted);
  max-width:720px;
}
.cta{
  padding:12px 20px;
  background:var(--accent);
  color:white;
  text-decoration:none;
  border-radius:12px;
  display:inline-block;
  box-shadow: 0 6px 18px rgba(111,163,239,0.12);
}
/* Fix hero alignment after text update */
.hero .container {
  padding: 0 !important;
}

.hero-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* HERO VIDEO BACKGROUND FIX */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ensures full background coverage */
  z-index: 0;             /* behind everything */
  pointer-events: none;   /* don't block clicks */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.25); /* darkens video slightly so text pops */
  z-index: 1;
}

/* Hero content on top */
.hero-inner {
  position: relative;
  z-index: 2;  
}

/* Sections */
.section{
  padding:48px 0;
}
.about p {
  max-width: 740px;
  color: var(--muted);
}

/* ABOUT ME heading */
.about-title {
  display: block;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: black;
  
  margin-bottom: 20px;
  width: 100%;
}

/* ABOUT BOX — always centered */
.about-box {
  background: var(--card);
  border-radius: 12px;
  padding: 32px 24px;
  box-shadow: 0 6px 20px rgba(15,20,30,0.06);
  max-width: 1100px;          /* keeps it beautifully centered on large screens */
  margin: 0 auto 40px auto;  /* centers it horizontally */
  text-align: center;
       /* center text inside */
}

/* About text centered visually + justified for clean edges */
.about-box p {
  margin: 0 auto;
  max-width: 900px;
  text-align: justify;           /* justify full lines */
  text-align-last: center;       /* center the final line */
  -moz-text-align-last: center;  /* Firefox support */
  color: #475569;
}


/* Black underline for ABOUT ME */
.about-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: #000000;  /* black underline */
  margin: 8px auto 0 auto;
  border-radius: 2px;
}


/* Remove old rule that boxed everything */
#about.section {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* CONTACT TITLE same as BLOGS heading */
.contact-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: black;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
}

/* underline */
.contact-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: #000; /* black underline */
  margin: 8px auto 0 auto;
  border-radius: 2px;
}

/* CONTACT FORM white box */
#contact {
  background: var(--card);
  padding: 40px 30px;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  max-width: 1100px;
  margin: 0 auto 40px auto;
}


/* Forms */
.contact-form{
  max-width:620px;
  display:grid;
  gap:12px
}
.contact-form label{display:block}
.contact-form span{
  display:block;
  font-weight:600;
  margin-bottom:6px
}
.contact-form input, .contact-form textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(11,18,32,0.08);
  background:white;
  font-size:1rem;
}
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:white;
  font-weight:600;
  cursor:pointer
}
.form-msg{
  color:var(--muted);
  margin-top:6px
}

/* Footer */
.site-footer{
  padding:28px 0;
  text-align:center;
  color:var(--muted);
  border-top:1px solid rgba(12,20,30,0.03)
}


/* ================================
   Separate GET PDF & CONTACT white cards
   ================================ */

/* GET PDF title styling (same as Blogs) */
.getpdf-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #000;
  text-decoration: none;
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Black underline */
.getpdf-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: #000;
  margin: 8px auto 0 auto;
  border-radius: 2px;
}

.getpdf-box {
  background: var(--card);
  padding: 40px 32px;
  max-width: 1100px;   /* ⬅️ increased width */
  margin: 0 auto 40px auto;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,20,30,0.08);
  text-align: center;
  width: 100%;         /* allows full responsive scaling */
}


/* Subtext centered and softened */
.getpdf-subtext {
  color: #475569;
  margin-bottom: 20px;
}

/* Form layout (compact) */
.getpdf-form {
  display: grid;
  gap: 16px;
}

.getpdf-form label span {
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.getpdf-form input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(11,18,32,0.12);
  font-size: 1rem;
}

.getpdf-form .btn {
  width: 100%;
  padding: 12px;
}
/* Row: 3 columns (name, email, button) */
.pdf-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 20px;
  align-items: center;
}

/* Wrap label + input horizontally */
.pdf-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Inline labels */
.pdf-field label {
  font-weight: 600;
  white-space: nowrap;
}

/* Input styling */
.pdf-field input {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(11,18,32,0.12);
  font-size: 1rem;
  flex: 1;
}

/* Button */
.pdf-btn-wrapper {
  display: flex;
  align-items: center;
}

.pdf-btn {
  padding: 12px 20px;
  white-space: nowrap;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

/* MOBILE: stack vertically */
@media (max-width: 800px) {
  .pdf-row-3 {
    grid-template-columns: 1fr;
  }

  .pdf-field {
    flex-direction: column;
    align-items: flex-start;
  }

  .pdf-btn {
    width: 100%;
    margin-top: 10px;
  }
}
.blog-card {
  position: relative;
  cursor: pointer;
}

.blog-card .card-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  text-decoration: none;
  color: inherit;
  opacity: 0;   /* invisible */
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(0.9);  /* ⬅️ zoom out */
  object-position: center;
  border-radius: 12px;
}

#contact.section {
  background: var(--card);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 6px 20px rgba(15,20,30,0.06);
  max-width: 1100px;
  margin: 40px auto 0 auto;  /* spacing above Contact box */
}

/* Center headings + forms */
#getpdf, #contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Center forms */
#getpdf .contact-form,
#contact .contact-form {
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}

/* Keep labels left-aligned */
#getpdf .contact-form label,
#contact .contact-form label {
  text-align: left;
}

/* Mobile tweak */
@media (max-width:600px){
  #getpdf, #contact {
    padding-left:16px;
    padding-right:16px;
  }
}

/* Responsive */
@media (max-width:800px){
  .nav{display:none}
  .menu-btn{display:block}
  .header-inner{gap:8px}
  .hero{padding:60px 16px}
  .container{padding:16px}
}
/* Blog Card Grid */
.blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 20px;
}

/* Blog Card Style */
.blog-card {
  background: var(--card); /* SAME as Get PDF box */
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}


.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 50px rgba(0,0,0,0.10);
}

/* Blog Image */
.blog-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Coming Soon Image Placeholder */
.blog-img.coming-soon {
  background: linear-gradient(180deg, #c2c2c2, #9e9e9e);
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coming-icon {
  font-size: 48px;
  opacity: 0.7;
}

/* Blog Content Area */
.blog-content {
  padding: 22px;
}

.blog-content h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: #443426;
}

.blog-content p {
  color: #6b5d52;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Blog Tags */
.blog-tags {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-tags span {
  background: #f3f3f3;
  color: #4b4b4b;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 900px){
  .blog-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .blog-list {
    grid-template-columns: 1fr;
  }
}

/* Center & underline BLOGS section title */
#blogs h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Black underline */
#blogs h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: #000000;   /* BLACK underline */
  margin: 8px auto 0 auto;
  border-radius: 2px;
}
/* ================================
   HERO TEXT & BUTTON — WHITE STYLE
   ================================ */

.hero-title {
  color: #ffffff !important;       /* pure white title */
  text-shadow: 0 2px 12px rgba(0,0,0,0.35); /* improves readability on video */
}

.hero-sub {
  color: #f1f1f1 !important;       /* soft white */
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}

/* White CTA button */
.hero .cta {
  background: rgba(255,255,255,0.92) !important;
  color: #1a1a1a !important;       /* dark text */
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 600;
  display: inline-block;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  transition: 0.25s ease;
  border: none;
}

/* Hover effect */
.hero .cta:hover {
  background: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 26px rgba(0,0,0,0.28);
}

/* -------------------------
  Hero = full-screen (below header) & no overlap with first card
  ------------------------- */

/* 1) Define header height used to calculate hero height.
   If your header is a different height, change 72px to match. */
:root {
  --header-h: 72px; /* adjust if your header is taller/shorter */
}

/* make sure header has explicit height so calculation is accurate */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* keep other styles such as background, padding, etc. — do NOT set height here */
}


/* 2) Make the hero exactly viewport minus header height */
.hero {
  height: calc(100vh - var(--header-h)); /* fills the remaining viewport */
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px; /* small horizontal padding */
  box-sizing: border-box;
  position: relative;
  z-index: 3; /* content above overlays */
}

/* 3) Ensure hero inner content is vertically centered */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 12px;
}

/* 4) Prevent the first content card from overlapping hero */
/* Remove any negative margins you previously added for overlap */
.hero + .section > *,
.hero + .section.container > * {
  margin-top: 0 !important;    /* ensure the card begins AFTER the hero */
  padding-top: 36px;           /* keep internal spacing inside the card */
  padding-bottom: 36px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* 5) Keep hero video + overlays behind content (no changes needed if already set) */
.bg-video, .video-overlay, .gradient-overlay {
  /* already positioned fixed — kept as-is */
}

/* 6) Mobile adjustments so hero still fits well under header */
@media (max-width: 900px) {
  :root { --header-h: 64px; } /* slightly smaller on mobile if needed */
  .hero {
    height: calc(100vh - var(--header-h));
    min-height: calc(100vh - var(--header-h));
    padding: 20px;
  }
  .hero-inner { padding: 20px; }
  .hero + .section > * { padding-top: 24px; padding-left: 16px; padding-right:16px; }
}


/* Everything after the hero has a solid white background */
.page-content {
  background: white;
  position: relative;
  z-index: 5;         /* sits above video + overlays */
  padding-top: 40px;  /* spacing before About Me starts */
}

/* Prevent video/overlays from showing behind this section */
.page-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: -1;
}
/* ===========================
   Soft page background (not white)
   Keep hero -> page transition intact
   =========================== */

/* Gentle pastel that matches your purple-blue theme */
:root {
  --page-bg: #cdccd3;      /* very light lavender */
  --page-bg-2: #e1dee6;    /* subtle top tint for depth */
  --divider-fill: #ecebf6; /* matches page background so divider blends */
}
/* Highlight box inside blog posts */
.highlight-box {
  background: #e3e2e8;                 /* soft beige like your screenshot */
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 6px solid #525255;       /* warm brown accent bar */
  font-size: 1.15rem;
  font-style: italic;
  color: #2c2323;                       /* deep brown text */
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* page-content uses a subtle two-stop gradient instead of white */
.page-content {
  background: linear-gradient(180deg, var(--page-bg-2) 0%, var(--page-bg) 100%);
  position: relative;
  z-index: 5;
  padding-top: 40px;
  transition: background 300ms ease;
}

/* Make sure the pseudo overlay (if present) doesn't force white */
.page-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* removed forced white */
  z-index: -1;
}

/* Make the hero-divider blend smoothly into the new page-bg */
.hero-divider path {
  fill: var(--divider-fill);
  transition: opacity 450ms ease, fill 300ms ease;
}

/* When the page is revealed, slightly tint divider to create softness */
body.scrolled-past-hero .hero-divider path {
  /* keep it blended but subtly fade - no abrupt white */
  opacity: 1;
  fill: var(--divider-fill);
}

/* Ensure content cards remain pure white for contrast */
.section.container > * {
  
  z-index: 6;
}

/* Optional: if you want the page background to be slightly warmer or bluer,
   change the two root colors above:
   - warmer: --page-bg: #fff6f2; --page-bg-2: #fff9f6;
   - cooler: --page-bg: #f3f7ff; --page-bg-2: #eef4ff;
*/

/* Small mobile tweak: reduce top padding so it doesn't look too spaced */
@media (max-width: 720px) {
  .page-content { padding-top: 28px; }
}
/* ============================
   BLOG ARTICLE WHITE BOX
   ============================ */

/* Blog post white content box */
.post-box {
  background: #ffffff;
  padding: 32px 28px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  max-width: 1100px;   /* ⬅️ WIDER BOX */
  margin: 0 auto 40px auto;
}
.nav-btn {
  padding: 12px 24px;          /* uniform padding */
  min-height: 44px;            /* ensures equal button height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 1rem;
  line-height: 1;              /* prevents tall text */
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: 0.25s ease;
}

.nav-btn:hover {
  background: #1f1f20;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}


.nav-btn:active {
  transform: translateY(-1px);
}


.post-content h2 {
  margin-top: 24px;
  margin-bottom: 10px;
  color: #222;
  font-size: 1.4rem;
}

.post-content p {
  color: #444;
  line-height: 1.7;
  margin-bottom: 14px;
  text-align: justify;
  text-align-last: left;
}

.post-nav {
  margin-top: 28px;
  text-align: left;
}