/* Custom CSS for Bespoke Vienna - tradition today */
/* Bootstrap CSS Import */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.11.0/css/flag-icons.min.css");
/*
 * IMPORTANT FONT IMPORT NOTE:
 * The path below is relative to this style.css file.
 * If 'webfonts/IMPRISHA/stylesheet.css' is not loading,
 * ensure that the font paths (e.g., url('imprint_shadow.ttf'))
 * INSIDE 'webfonts/IMPRISHA/stylesheet.css' are correct relative
 * to THAT stylesheet's location. For example, if font files are
 * in the same folder as 'webfonts/IMPRISHA/stylesheet.css', use just the filename (e.g., 'imprint_shadow.ttf').
 */
@import url("../webfonts/IMPRISHA/stylesheet.css"); /* Adjusted path for css folder */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.css");
@import url("https://use.typekit.net/xdh6nzt.css"); /* Changed from .com to .css */
/* Global font application */
body {
  font-family: "Myriad Pro", sans-serif; /* Myriad Pro for the rest of the body */
}
/* Consolidated Headings styling for h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'IMPRISHA', cursive !important; /* Apply IMPRISHA with !important */
  font-variant: small-caps;
  text-rendering: optimizeLegibility; /* Added to improve rendering of outlines */
  -webkit-font-smoothing: antialiased; /* For Webkit browsers (Chrome, Safari) */
  -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); /* Universal shadow for crispness */
}
/* Color Variables */ :root {
  --gold-bg: #D7B47D;
  --gold-text: #002051; /* Dark blue for text on gold */
  --blue-bg: #002051;
  --blue-text: #D7B47D; /* Gold for text on blue */
  --off-gold-bg: #FAEFE0;
  --off-blue-bg: #0A1A30;
  /* New gradient variables for section backgrounds */
  --section-bg-dark-gradient: linear-gradient(to right, #0A1A30, #002051, #0A1A30);
  --section-bg-light-gradient: linear-gradient(to right, #D7B47D, #FAEFE0, #D7B47D);
  /* Button colors for "Next Section" */
  --section-gold-button-bg: var(--blue-bg);
  --section-gold-button-text: var(--gold-bg);
  --section-blue-button-bg: var(--gold-bg);
  --section-blue-button-text: var(--blue-bg);
  /* Button colors for floating buttons (matching navbar theme) */
  --navbar-gold-button-bg: var(--gold-bg);
  --navbar-gold-button-text: var(--blue-bg);
  --navbar-blue-button-bg: var(--blue-bg);
  --navbar-blue-button-text: var(--gold-bg);
  /* Dropdown Divider */
  --dropdown-divider-color-light: #ced4da; /* Bootstrap default light divider */
  --dropdown-divider-color-dark: #495057; /* Darker gray for dark theme */
}
/* Transitions for smooth theme changes */
.transition-colors {
  transition: background-color 0.5s ease, color 0.5s ease;
}
/* Navbar Styling */
.navbar {
  padding: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Bootstrap shadow equivalent */
}
.navbar-brand {
  display: flex; /* Use flexbox to align logo and text horizontally */
  align-items: center; /* Vertically center items */
  padding-left: 0; /* Removed padding to the left, rely on icon margin for spacing */
  font-size: 1.5rem; /* Equivalent to text-2xl */
  font-weight: bold; /* Equivalent to font-bold */
}
.navbar-icon-logo {
  display: inline-block; /* Treat as inline block to allow dimensions and background */
  height: 45px; /* Slightly reduced fixed height for the icon logo */
  width: 45px; /* Set a fixed width for the icon logo container */
  background-image: url('../assets/img/brandlogo.svg'); /* Set static SVG background, adjusted path */
  background-size: contain; /* Ensure the image fits within the element */
  background-repeat: no-repeat;
  background-position: center; /* Center the icon within its container */
  margin-right: 10px; /* Space between icon and text logo */
  /* Removed transition for background-image as it's no longer dynamic */
}
.navbar-text-logo {
  height: 100%; /* Take 100% height of its parent (navbar-brand) */
  max-height: 40px; /* Adjust max-height as needed to fit navbar */
  width: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Align image vertically */
  font-family: "Imprint Shadow", serif; /* Apply Imprint Shadow font to the text logo */
}
.navbar-nav .nav-link {
  font-weight: 500; /* Equivalent to font-medium */
  transition: color 0.3s ease;
}
/* Navbar Theme - Light (Gold) */
.navbar.navbar-light-theme {
  background-color: var(--gold-bg);
  color: var(--gold-text);
}
.navbar.navbar-light-theme .navbar-brand {
  color: var(--gold-text);
}
.navbar.navbar-light-theme .nav-link {
  color: var(--navbar-gold-button-text); /* Blue for links on gold navbar */
}
.navbar.navbar-light-theme .nav-link:hover {
  text-decoration: underline;
}
.navbar.navbar-light-theme .dropdown-menu {
  background-color: var(--off-gold-bg); /* Lighter Gold */
  border: 1px solid var(--gold-text); /* Blue border */
}
.navbar.navbar-light-theme .dropdown-item {
  color: var(--gold-text); /* Blue text */
}
.navbar.navbar-light-theme .dropdown-item:hover {
  background-color: var(--blue-bg); /* Main Blue */
  color: var(--blue-text) !important; /* Gold text - IMPORTANT for specificity */
}
.navbar.navbar-light-theme .dropdown-divider {
  background-color: var(--dropdown-divider-color-light);
}
/* Navbar Theme - Dark (Blue) */
.navbar.navbar-dark-theme {
  background-color: var(--blue-bg);
  color: var(--blue-text);
}
.navbar.navbar-dark-theme .navbar-brand {
  color: var(--blue-text);
}
.navbar.navbar-dark-theme .nav-link {
  color: var(--navbar-blue-button-text); /* Gold for links on blue navbar */
}
.navbar.navbar-dark-theme .nav-link:hover {
  text-decoration: underline;
}
.navbar.navbar-dark-theme .dropdown-menu {
  background-color: var(--off-blue-bg); /* Darker Blue */
  border: 1px solid var(--blue-text); /* Gold border */
}
.navbar.navbar-dark-theme .dropdown-item {
  color: var(--blue-text); /* Gold text */
}
.navbar.navbar-dark-theme .dropdown-item:hover {
  background-color: var(--gold-bg); /* Main Gold */
  color: var(--gold-text) !important; /* Blue text - IMPORTANT for specificity */
}
.navbar.navbar-dark-theme .dropdown-divider {
  background-color: var(--dropdown-divider-color-dark);
}
/* Custom Navbar Toggler for Bootstrap Icons */
.navbar-toggler {
  border: 1px solid; /* Add a border */
  transition: border-color 0.5s ease; /* Smooth transition for border color */
  padding: 0.25rem 0.75rem; /* Default Bootstrap padding for toggler */
  font-size: 1.25rem; /* Default Bootstrap font size for toggler */
  line-height: 1; /* Default Bootstrap line height */
  background-color: transparent; /* Ensure transparent background */
}
/* Navbar Toggler Theme - Light (Gold Navbar) */
.navbar.navbar-light-theme .navbar-toggler {
  border-color: var(--navbar-gold-button-text); /* Blue border on gold navbar */
}
.navbar.navbar-light-theme .navbar-toggler .bi-list {
  color: var(--navbar-gold-button-text); /* Blue icon on gold navbar */
}
/* Navbar Toggler Theme - Dark (Blue Navbar) */
.navbar.navbar-dark-theme .navbar-toggler {
  border-color: var(--navbar-blue-button-text); /* Gold border on blue navbar */
}
.navbar.navbar-dark-theme .navbar-toggler .bi-list {
  color: var(--navbar-blue-button-text); /* Gold icon on blue navbar */
}
/* Section Styling */
.section-content {
  min-height: 100vh; /* Equivalent to min-h-screen */
  padding-top: 5rem; /* Equivalent to py-20 */
  padding-bottom: 5rem; /* Equivalent to py-20 */
  padding-left: 2rem; /* Equivalent to px-8 */
  padding-right: 2rem; /* Equivalent to px-8 */
  transition: background-color 0.5s ease, color 0.5s ease;
  /* Add scroll-margin-top to account for fixed navbar height */
  scroll-margin-top: 72px; /* Default for desktop, adjusted in media query for mobile */
}
.bottom-pad-25 {
  padding-bottom: 25px;
}
.top-pad-25 {
  padding-top: 25px;
}
.text-italic {
  font-style: italic;
}
.bg-dark-semi-transparent {
  background-color: rgba(10, 26, 48, 0.5);
}
.bg-light-semi-transparent {
  background-color: rgba(250, 239, 224, 0.5);
}

/* Adjust scroll-margin-top for smaller screens */
@media (max-width: 991.98px) { /* Bootstrap's lg breakpoint - 1px */
  .section-content {
    scroll-margin-top: 56px; /* Adjust for mobile navbar height */
  }
}
/* Section Theme - Light (Gold) */
.section-content.theme-light {
  background-image: var(--section-bg-light-gradient); /* Use new gradient variable */
  background-color: transparent; /* Ensure no solid background color interferes */
  color: var(--gold-text);
}
.section-content.theme-light h2, .section-content.theme-light a {
  color: var(--gold-text); /* Ensure headings and links match text color */
}
/* Section Theme - Dark (Blue) */
.section-content.theme-dark {
  background-image: var(--section-bg-dark-gradient); /* Use new gradient variable */
  background-color: transparent; /* Ensure no solid background color interferes */
  color: var(--blue-text);
}
.section-content.theme-dark h1, .section-content.theme-dark h2, .section-content.theme-dark a {
  color: var(--blue-text) !important; /* Ensure headings and links match text color */
}
/* Specific styling for background images */
#header, #why-vienna, #insights-media, #personalized-sourcing, #research-expert-services, #journal, #signature-package-1, #signature-package-2, #questionnaire, #meet-me, #imprint, #privacy-policy {
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position: bottom;
}
#header {
  background-image: url('../assets/img/start.jpg');
}
#why-vienna {
  background-image: url('../assets/img/about.jpg');
}
#insights-media {
  background-image: url('../assets/img/insights-media.jpg');
}
#personalized-sourcing {
  background-image: url('../assets/img/sourcing.jpg');
}
#research-expert-services {
  background-image: url('../assets/img/research.jpg');
}
#journal {
  background-image: url('../assets/img/journal.jpg');
}
#signature-package-1 {
  background-image: url('../assets/img/sigpak1.jpg');
}
#signature-package-2 {
  background-image: url('../assets/img/sigpak2.jpg');
}
#meet-me {
  background-image: url('../assets/img/home.jpg');
}
#questionnaire {
  background-image: url('../assets/img/questionnairbg.jpg');
}
#imprint {
  background-image: url('../assets/img/imprint.jpg');
}
#privacy {
  background-image: url('../assets/img/privacy.jpg');
}
/* Gradient Overlay for Header and Sourcing */
.gradient-overlay {
  position: absolute; /* Position relative to the parent section */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Ensure it's behind content but above background image */
}
/* Apply specific gradient colors based on section theme */
.section-content.theme-light .gradient-overlay { /* For light header theme */
  background: linear-gradient(to bottom, rgba(215, 180, 125, 0.3), rgba(215, 180, 125, 0.3)); /* Consistent 0.3 opacity */
}
.section-content.theme-dark .gradient-overlay { /* For dark header theme (if applicable, though header is fixed to odd) */
  background: linear-gradient(to bottom, rgba(0, 32, 81, 0.3), rgba(0, 32, 81, 0.3)); /* Consistent 0.3 opacity */
}
/* Lead text within sections */
.section-content .lead {
  font-size: 1.125rem; /* Equivalent to text-lg */
  line-height: 1.625; /* Equivalent to leading-relaxed */
}

/* ----------------------------------------------------------------- */
/* Next Section Button Styling (STREAMLINED THEME LOGIC)             */
/* ----------------------------------------------------------------- */
.btn-next-section, .btn-next-entry, .btn-prev-entry {
  transition: all 0.3s ease;
  min-width: 180px; /* Ensures consistent width for all these buttons */
  border: 1px solid transparent; /* Added base transparent border for smooth transition */
}
/* 1. NON-HOVER STATE */
/* Button Theme - Light Section (Blue button with Gold text) */
.section-content.theme-light .btn-next-section, .section-content.theme-light .btn-next-entry, .section-content.theme-light .btn-prev-entry {
  background-color: var(--section-gold-button-bg); /* Dark Blue BG */
  color: var(--section-gold-button-text) !important; /* Gold Text - Added !important for robustness */
  border-color: var(--section-gold-button-bg); /* Dark Blue Border */
}
/* Button Theme - Dark Section (Gold button with Blue text) */
.section-content.theme-dark .btn-next-section, .section-content.theme-dark .btn-next-entry, .section-content.theme-dark .btn-prev-entry {
  background-color: var(--section-blue-button-bg); /* Gold BG */
  color: var(--section-blue-button-text) !important; /* Dark Blue Text - ADDED !important (The Fix) */
  border-color: var(--section-blue-button-bg); /* Gold Border */
}

/* 2. UNIFIED VISUAL EFFECTS (Hover/Focus) - Scale, Shadow, Opacity */
.btn-next-section:hover, .btn-next-entry:hover, .btn-prev-entry:hover,
.btn-next-section:focus, .btn-next-entry:focus, .btn-prev-entry:focus {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 1; /* Full opacity on hover/focus */
}

/* 3. HOVER STATE (Inversed Off-Colors) */
/* Light Theme Button Hover: Should be Off-Gold BG, Dark Blue Text */
.section-content.theme-light .btn-next-section:hover,
.section-content.theme-light .btn-next-entry:hover,
.section-content.theme-light .btn-prev-entry:hover {
  background-color: var(--off-gold-bg) !important; 
  color: var(--blue-bg) !important; 
  border-color: var(--blue-bg) !important; 
}

/* Dark Theme Button Hover: Should be Dark Blue BG, Gold Text */
.section-content.theme-dark .btn-next-section:hover,
.section-content.theme-dark .btn-next-entry:hover,
.section-content.theme-dark .btn-prev-entry:hover {
    background-color: var(--blue-bg) !important; 
    color: var(--gold-bg) !important; 
    border-color: var(--gold-bg) !important; 
}

/* 4. THEME-SPECIFIC FOCUS RINGS */
/* Light Theme Focus: Dark blue focus ring */
.section-content.theme-light .btn-next-section:focus, .section-content.theme-light .btn-next-entry:focus, .section-content.theme-light .btn-prev-entry:focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 32, 88, 0.25) !important;
}
/* Dark Theme Focus: Light gold focus ring */
.section-content.theme-dark .btn-next-section:focus, .section-content.theme-dark .btn-next-entry:focus, .section-content.theme-dark .btn-prev-entry:focus {
    box-shadow: 0 0 0 0.25rem rgba(215, 180, 125, 0.5) !important;
}
/* --- END OF Next Section Button Styling --- */


/* ---------------------------------------------------------------- */
/* STYLING FOR .btn-primary: NOW THEME-AWARE (MATCHING FORM BUTTONS) */
/* *** NOTE: Increased specificity (a.btn-primary) to fix color issue *** */
/* ---------------------------------------------------------------- */

/* 1. DARK LOOK (DEFAULT, used in theme-light sections like vienna.html/sigpak1.html) */

/* Target <a> and <button> elements with .btn-primary inside any section */
.section-content a.btn-primary, 
.section-content button.btn-primary, 
a.btn-primary,
button.btn-primary {
    background-color: var(--blue-bg) !important; /* Dark blue background - FORCED */
    color: var(--gold-bg) !important; /* Gold text - FORCED */
    border-color: var(--blue-bg) !important;
    transition: all 0.3s ease;
}

/* Hover/Focus Styles for DARK LOOK */
.section-content a.btn-primary:hover, .section-content button.btn-primary:hover, 
a.btn-primary:hover, button.btn-primary:hover {
    background-color: var(--off-gold-bg) !important; /* Off-gold background on hover */
    color: var(--blue-bg) !important; /* Dark blue text on hover */
    border-color: var(--blue-bg) !important; /* Dark blue border */
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.section-content a.btn-primary:focus, .section-content button.btn-primary:focus,
a.btn-primary:focus, button.btn-primary:focus {
    background-color: var(--blue-bg) !important;
    color: var(--gold-bg) !important;
    border-color: var(--blue-bg) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 32, 88, 0.25) !important;
}


/* 2. LIGHT LOOK (OVERRIDE for theme-dark sections) */
.section-content.theme-dark a.btn-primary,
.section-content.theme-dark button.btn-primary {
    background-color: var(--gold-bg) !important; /* Gold background - FORCED */
    color: var(--blue-bg) !important; /* Dark blue text - FORCED */
    border-color: var(--gold-bg) !important;
}

/* Hover/Focus Styles for LIGHT LOOK */
.section-content.theme-dark a.btn-primary:hover, 
.section-content.theme-dark button.btn-primary:hover {
    background-color: var(--blue-bg) !important; /* Dark Blue BG */
    color: var(--gold-bg) !important; /* Gold Text */
    border-color: var(--gold-bg) !important; /* Gold Border/Frame */
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.section-content.theme-dark a.btn-primary:focus,
.section-content.theme-dark button.btn-primary:focus {
    background-color: var(--gold-bg) !important;
    color: var(--blue-bg) !important;
    border-color: var(--blue-bg) !important;
    /* Use a lighter gold focus ring for contrast on dark background */
    box-shadow: 0 0 0 0.25rem rgba(215, 180, 125, 0.5) !important;
}


/* --- END OF .btn-primary STYLING --- */

/* Footer Styling */
.footer-content {
  padding-top: 2rem; /* Equivalent to py-8 */
  padding-bottom: 2rem; /* Equivalent to py-8 */
  padding-left: 2rem; /* Equivalent to px-8 */
  padding-right: 2rem; /* Equivalent to px-8 */
  /* Removed default background and color here to allow theme classes to control it */
  transition: background-color 0.5s ease, color 0.5s ease;
}
/* Footer Theme - Light (Gold) */
.footer-content.theme-light {
  background-color: var(--gold-bg);
  color: var(--gold-text); /* Dark blue text on gold */
}
/* Footer Theme - Dark (Blue) */
.footer-content.theme-dark {
  background-color: var(--blue-bg);
  color: var(--blue-text); /* Gold text on blue */
}
.footer-content a {
  color: inherit; /* Inherit color from parent for links */
}
.footer-content a:hover {
  text-decoration: underline;
}
.footer-content .text-current {
  color: inherit; /* Ensure '|' separator also inherits color */
}
/* Floating Buttons Container */
.fixed-buttons-container {
  position: fixed;
  top: 50%;
  right: 5px; /* Added a small right offset */
  transform: translateY(-50%);
  z-index: 1050; /* Higher than navbar, Bootstrap z-index for fixed elements */
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* Equivalent to space-y-2 */
}
.floating-btn {
  width: 3rem; /* Equivalent to w-12 */
  height: 3rem; /* Equivalent to h-12 */
  padding: 0.5rem; /* Equivalent to p-2 */
  display: flex;
  align-items: center;
  justify-content: center;
  border: none; /* Remove default button border */
  transition: all 0.3s ease, opacity 0.3s ease; /* Added opacity to transition */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Bootstrap shadow equivalent */
  border-top-left-radius: 0.5rem; /* Equivalent to rounded-l-lg */
  border-bottom-left-radius: 0.5rem; /* Equivalent to rounded-l-lg */
  border-top-right-radius: 0; /* Squared right edge */
  border-bottom-right-radius: 0; /* Squared right edge */
  opacity: 0.7; /* Initial opacity for a softer look */
}
.floating-btn:hover {
  transform: scale(1.1);
  opacity: 1; /* Full opacity on hover */
}
/* Floating Button Theme - Light Navbar (Gold button, Blue chevron) */
.navbar-light-theme ~ main + .fixed-buttons-container .floating-btn {
  background-color: var(--navbar-gold-button-bg);
  color: var(--navbar-gold-button-text);
}
/* Floating Button Theme - Dark Navbar (Blue button, Gold chevron) */
.navbar-dark-theme ~ main + .fixed-buttons-container .floating-btn {
  background-color: var(--navbar-blue-button-bg);
  color: var(--navbar-blue-button-text);
}
/* Hide by default, shown by JS */
.d-none {
  display: none !important;
}
/* Ensure body has min-height for full-page scrolling */
html, body {
  height: 100%;
}
body {
  overflow-x: hidden; /* Prevent horizontal scroll from parallax */
}
/* Adjust padding for main content to account for fixed navbar */
main {
  padding-top: 56px; /* Default Bootstrap navbar height, adjust if needed */
}
@media (min-width: 992px) { /* Adjust for larger screens if navbar height changes */
  main {
    padding-top: 72px; /* Example: if navbar is taller on desktop */
  }
}
/* Card Image Styling */
.journal-card-img {
  width: 100%;
  height: 250px;
  object-fit: cover; /* Crop images to cover the area */
  object-position: center;
}
.portrait-card-img {
  width: 100%;
  height: auto; /* Let the height be determined by aspect ratio */
}
/* Journal Carousel Specific Styles */
.carousel-container {
  width: 75%;
  position: relative; /* For positioning prev/next buttons */
  overflow: hidden; /* Hide overflowing slides */
  scroll-margin-top: 72px; /* Ensure it scrolls correctly after navbar */
}
.carousel-inner-custom {
  display: flex; /* Arrange slides horizontally */
  transition: transform 0.5s ease-in-out; /* Smooth sliding transition */
}
.journal-slide {
  flex-shrink: 0; /* Prevent slides from shrinking */
  width: 100%; /* Each slide takes full width of container */
  /* section-content already defines min-height: 100vh, padding, etc. */
}
/* Navbar adjustments for small screens */
@media (max-width: 767.98px) { /* Bootstrap's sm breakpoint - 1px */
  .navbar {
    padding: 0.5rem 1rem; /* Reduce vertical padding */
  }
  .navbar-brand {
    /* Allow brand to take less space */
    flex-shrink: 1; /* Allow it to shrink */
    min-width: 0; /* Allow it to shrink to minimum content size */
    margin-right: auto; /* Push toggler to the right */
  }
  .navbar-icon-logo {
    height: 30px; /* Smaller icon height */
    width: 30px; /* Smaller icon width */
    margin-right: 5px; /* Reduce margin */
  }
  .navbar-text-logo {
    max-height: 25px; /* Smaller text logo height */
    /* Ensure text logo can shrink */
    flex-shrink: 1;
    min-width: 0;
  }
  .navbar-toggler {
    margin-left: 0.5rem; /* Add some margin to separate from logo */
  }
}
/* --- Custom Navbar Dropdown Modifications --- */
/* Base transition and styling for the dropdown arrow */
.navbar .dropdown-toggle::after {
  transition: transform 0.3s ease-in-out;
  vertical-align: middle;
  border-top: .4em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}
/* Change cursor for dropdown toggles that don't navigate */
.navbar .nav-item.dropdown > .dropdown-toggle {
  cursor: default;
}
.navbar .nav-item.dropdown > .dropdown-toggle:hover {
  text-decoration: none;
}
/* Rotate arrow on mobile when dropdown is clicked (uses Bootstrap's .show class) */
.navbar .dropdown-toggle.show::after {
  transform: rotate(180deg);
}
/* On desktop screens, enable hover for dropdown and rotate arrow */
@media (min-width: 992px) {
  /* Show dropdown menu on hover */
  .navbar .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Adjust if there's an unwanted gap */
    animation: fadeIn 0.2s ease-out; /* Add a subtle fade-in animation */
  }
  /* Rotate arrow on hover */
  .navbar .nav-item.dropdown:hover > .dropdown-toggle::after {
    transform: rotate(180deg);
  }
}
/* Fade-in animation for the dropdown menu */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* --- Custom Media Page Styles --- */
hr.divider {
  height: 0.2rem;
  max-width: 4rem;
  margin: 1.5rem auto;
  border: 0;
  opacity: 1;
}
.theme-light hr.divider {
  background-color: var(--blue-bg);
}
.theme-dark hr.divider {
  background-color: var(--gold-bg);
}
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.video-container iframe, .video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* --- Utility Classes --- */
.border-dashed {
  border-style: dashed !important;
}
.text-italic {}
/* Specific styling for journal entry text */
.journal-text-content p { /* Apply to all journal entry paragraphs */
  font-size: 1.5rem; /* Default font size */
  line-height: 1.7; /* Adjust line height for better readability with larger text */
  text-align: justify; /* Default justified alignment */
}
.journal-entry h3.lead { /* Targeting the h3 with lead class */
  font-size: 1.2rem; /* Set h3 font size */
  font-weight: bold;
  text-align: center;
}
.journal-entry h2.lead { /* Targeting the h2 with lead class */
  font-size: 2.5rem; /* Set h2 font size */
  font-weight: normal; /* Use normal font weight */
  text-align: center;
}
/* Responsive adjustments for small devices */
@media (max-width: 767.98px) { /* Bootstrap's sm breakpoint - 1px */
  .journal-text-content p {
    font-size: 1.1rem; /* Reduce font size on small devices */
    text-align: left; /* Align text left on small devices */
  }
  .journal-march-2025 h3.lead {
    font-size: 1.1rem; /* Adjust h3 size for small screens */
  }
  .journal-march-2025 h2.lead {
    font-size: 1.8rem; /* Adjust h2 size for small screens */
  }
}
/* Styling for the image modal */
.modal-body img {
  max-width: 100%;
  max-height: 80vh; /* Limit height to viewport height */
  object-fit: contain; /* Ensure image fits without cropping */
}
/* In style.css */
#meet-me .gradient-overlay {
    pointer-events: none;
}
#professional-services .card-header {
  /* This forces all headers to be at least this tall. */
  /* Adjust the value to fit your longest header text. */
  min-height: 4.5rem; 
  
  /* Optional: These lines use flexbox to vertically center the text */
  /* within the now-taller header, which often looks cleaner. */
  display: flex;
  align-items: center;
  justify-content: center;
}
  .img-wrapper {
    height: 200px; /* Adjust this height to your desired size */
    overflow: hidden;
  }

  .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* Fix for fixed header obscuring anchor links */
/* This ensures that when the page scrolls to #responseMessage, */
/* it leaves a cushion of space (100px) below the fixed navbar. */
#responseMessage {
    scroll-margin-top: 100px;
}
/* Custom Fix: Reduce horizontal padding on extra-small devices to maximize content width */
@media (max-width: 575.98px) {
  .section-content {
    /* Reduce side padding from 2rem (32px) to 0.75rem (12px), 
       which is closer to Bootstrap's default p-3 or p-4 */
    padding-left: 0.5rem !important; 
    padding-right: 0.5rem !important;
  }
  /* Systemic reduction of main headings on extra-small screens */
  h1, .h1 {
    font-size: 2.25rem !important; /* Standard size is often 2.5rem - 3rem */
  }
  h2, .h2 {
    font-size: 1.75rem !important; /* Standard size is often 2rem */
  }
  h3, .h3 {
    font-size: 1.35rem !important; /* Standard size is often 1.75rem */
  }
  h4, .h4 {
    font-size: 1.1rem !important; /* Standard size is often 1.5rem */
  }
  
  /* You may also want to slightly increase body/paragraph text for better readability on mobile */
  body {
    font-size: 0.75rem; /* Slightly larger base text than the default 1rem (16px) */
  }
	.lead {
		font-size: 0.75rem !important;
		font-weight: normal !important;
  }
	.fw-bold {
		font-size: 0.75rem !important;
		font-weight: normal !important;
  }
  /* Reduce padding on the navigation bar to save vertical space */
  .navbar-nav .nav-link {
    padding-left: 0.75rem !important; 
    padding-right: 0.75rem !important;
  }
}
/* Custom color for the Modal Close Button (the "X") */
.modal .btn-close {
  /* Set the color of the X symbol to the custom hex code */
  color: #002851; 
  /* Use !important to override Bootstrap's default settings */
  opacity: 1 !important; 
}

/* Also ensure the color changes correctly on hover/focus states */
.modal .btn-close:hover,
.modal .btn-close:focus {
  color: #002851;
  opacity: 0.8 !important; /* Slightly reduce opacity on hover for feedback */
}