/* =================================================
   Global Theme Color Variables
=================================================== */
:root {
  /* Bootstrap colors customization */
  --bs-primary: #293d5d;
  --bs-secondary: #293d5d;
  --bs-light: #000;
  --bs-dark: #000;
  --bs-body-bg: #ffffff;
  --bs-body-color: #333333;
  --bs-primary-bg: #293d5d;
  --bs-link-color: #666;
  --bs-link-hover-color: #000000;
  /* Custom branding colors */
  --ka-logo-color: #000000;
  --ka-primary-bg: #ffffff;
  --ka-secondary-bg: #293d5d;
}

/* Dark Mode Theme Customization */
[data-bs-theme="dark"] {
  /* Bootstrap colors for dark theme */
  --bs-primary: #293d5d;
  --bs-secondary: #000;
  --bs-light: #000;
  --bs-dark: #343a40;
  --bs-body-bg: #000000;
  --bs-body-color: #dadada;
  --bs-link-hover-color: #ffffff;
  /* Custom branding colors for dark mode */
  --ka-logo-color: #ffffff;
  --ka-primary-bg: #000000;
  --ka-secondary-bg: #293d5d;
}

/* =================================================
   Global Styles
=================================================== */
body { font-size: 1rem; font-family: 'Poppins', sans-serif;}

h1, h2, h3, h4, h5, h6 { /* Reserved for future heading customizations */}

a { color: var(--bs-link-color); text-decoration: none;}
a:hover { color: var(--bs-link-hover-color); text-decoration: none;}

section { padding: 80px 0;}

/* =================================================
   Header and Logo Styling
=================================================== */
.header { line-height: 60px; background-color: var(--ka-primary-bg);}

.logo svg { width: 200px; fill: var(--ka-logo-color);  cursor: pointer;}

/* =================================================
   Navigation Menu (Multi-level Menu)
=================================================== */

/* Top-level nav links styling */
/* Default Toggler Icon */
.navbar-toggler {
  border: none;
	line-height: 60px;
}

/* Light Theme: black icon */
[data-bs-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Dark Theme: white icon */
[data-bs-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.ka-nav .nav-link,
.ka-nav {
  line-height: 60px;
  font-size: 1rem;
  font-weight: 500;
}

/* Nav link hover styling */
.ka-nav .nav-link:hover,
.ka-nav .dropdown-item:hover {
  color: #0063A2 !important;
}

/* Dropdown menu base styling */
.ka-nav .dropdown-menu {
  padding: 0px;
  margin-top: 0 !important;
  border: 1px solid #dadada;
  border-top: none;
  border-radius: 0;
}

/* Dropdown items styling */
.ka-nav .dropdown-menu .dropdown-item {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 10px 16px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #333;
}

/* Add space between dropdown items */
.ka-nav .dropdown-menu .dropdown-item + .dropdown-item {
  margin-top: 0px;
}

/* Dropdown visibility behavior */
.ka-nav .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Show dropdown on hover with animation */
.ka-nav .dropdown:hover > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Transition for links and items */
.ka-nav .nav-link,
.ka-nav .dropdown-item {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Current active menu item */
.ka-nav .current_page_item > a {
  color: var(--bs-link-hover-color);
}

/* =================================================
   Hero Section
=================================================== */
/* ─── Hero Section ─── */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 87vh; /* ✅ Important: set a proper minimum height */
  background: linear-gradient(135deg, #ffe4e1, #e0f7fa);
  overflow: hidden;
}

/* Background Image */
.hero-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain; /* ✅ Fit inside without cropping */
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Text Content */
.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 2rem;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4);
}

/* Hero Text Styling */
.hero-content h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.hero-content p {
  font-size: 1.2rem;
  color: #f8f9fa;
  margin: 0;
}

/* Hide text on Mobile */
@media (max-width: 767.98px) {
  .hero-content {
    display: none !important;
  }

  .hero-section {
    min-height: 300px; /* smaller height on mobile */
  }
	.hero-bg {
    background-position: center bottom;
  }
}



/* =================================================
   Page Header Section
=================================================== */
.page-header {
  background: linear-gradient(135deg, #fdf2e9, #eef7f4);
  padding: 2.5rem 0;
  text-align: center;
}

.page-header h1 {
  color: #333333;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.page-header p {
  color: #555555;
  font-size: 1.1rem;
  margin: 0;
}

/* =================================================
   Footer Section
=================================================== */
footer {
  background-color: var(--ka-primary-bg);
  text-align: center;
  padding: 1.5rem 0;
  color: #777777;
  border-top: 1px solid #e0e0e0;
}

/* =================================================
   Row Wrapper Helper Class
=================================================== */
.row-wrapper {
  overflow-x: hidden;
  position: relative; /* Important for sticky elements or safe layout */
}

/* ==============================
Breadcrumb Styling
============================== */
.ka-breadcrumb-wrapper {text-align: center; margin: 0px 0;}

.ka-breadcrumb { display: inline-flex; list-style: none; padding: 0; margin: 0; gap: 8px;  flex-wrap: wrap;}

.ka-breadcrumb li {font-size: 16px; color: var(--bs-body-color);}

.ka-breadcrumb li::after { content: "›";  margin: 0 6px; color: #aaa;}

.ka-breadcrumb li:last-child::after {content: ""; }

.ka-breadcrumb a { color: var(--bs-link-color); text-decoration: none;  transition: color 0.3s ease;}

.ka-breadcrumb a:hover { color: var(--bs-link-hover-color);  text-decoration:none;}

/* ==============================
Photo Gallery Section
============================== */
#gallery {

}
.album-header {
  color: #007bff;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #007bff;
  display: inline-block;
  padding-bottom: .25rem;
}
.photo-card {
  background: #fff;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform .3s, box-shadow .3s;
}
.photo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.photo-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.photo-caption {
  padding: .75rem;
  font-size: .9rem;
  text-align: center;
  color: #555;
}

/* ==============================
Post Navigation Styling
============================== */
.post-nav-box {
  display: inline-block;
  padding: 1rem 1.5rem;
  background: #ffffff;
  border: 1px solid #dadada;
  border-radius: 1rem;
  text-decoration: none;
  color: var(--bs-body-color);
  transition: all 0.3s ease;
  max-width: 45%;
  min-width: 220px;
}

.post-nav-box:hover {
  background: var(--bs-primary);
  color: #ffffff;
  border-color: var(--bs-primary);
}

.post-nav-box small {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.post-nav-box span {
  display: block;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Optional: for better spacing on mobile */
@media (max-width: 768px) {
  .post-nav-box {
    max-width: 100%;
    width: 100%;
  }
}

/* ==============================
Blog List
============================== */

#blog .card,
#blog-list .card {
  border-radius: .75rem;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
#blog .card:hover,
#blog-list .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* ==============================
Patterns 
============================== */
.profile-card {
  padding: 30px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
}
.profile-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
}

/* ─── Growth Section ─── */
#growth-section {
  padding: 3rem 0;
  background: #f8f9fa;
}
.growth-column {
  background: #fff;
  border-radius: .75rem;
  border-top: 5px solid #007bff;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform .3s;
}
.growth-column:hover {
  transform: translateY(-5px);
}
.growth-column.fawad {
  border-top-color: #E91E63;
}
.growth-avatar {
  display: block;
  width: 300px;
  height:300px;
  margin: 3rem auto 5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #007bff;
}
.growth-column.fawad .growth-avatar {
  border-color: #E91E63;
}
.baby-name {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #007bff;
}
.growth-column.fawad .baby-name {
  color: #E91E63;
}

/* ─── Timeline Section ─── */
#timeline {
  position: relative;
  padding: 3rem 0;
  background: #f8f9fa;
}
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #E91E63;
  transform: translateX(-50%);
}
.timeline-row {
  position: relative;
  margin-bottom: 3rem;
}
.timeline-circle {
  position: absolute;
  top: 1rem;
  left: 50%;
  width: 16px;
  height: 16px;
  background: #f8f9fa;
  border: 4px solid #E91E63;
  border-radius: 50%;
  transform: translateX(-50%);
}
.year-row {
  text-align: center;
  margin-bottom: 2rem;
}
.year-circle {
  display: inline-block;
  background: #f8f9fa;
  color: #007bff;
  border: 4px solid #007bff;
  border-radius: 50%;
  padding: .5rem 1rem;
  font-weight: 600;
}
.timeline-content.card {
  margin-top: -0.5rem;
  border-left: 5px solid #007bff;
  transition: transform .3s, box-shadow .3s;
}
.timeline-content.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.timeline-content .card-body {
  background: #fff;
}
.timeline-content .card-title {
  color: #E91E63;
  font-size: 1.25rem;
  margin-bottom: .75rem;
}
.date-badge {
  font-size: .85rem;
  font-weight: 500;
}
.timeline-row:nth-child(odd) .timeline-item .timeline-content {
  margin-left: calc(50% + 1rem);
  margin-right: 1rem;
}
.timeline-row:nth-child(even) .timeline-item .timeline-content {
  margin-right: calc(50% + 1rem);
  margin-left: 1rem;
}