:root {
  /* Brand Colors based on prompt and screenshot */
  --primary-blue: #041b31;
  --accent-red: #e31e24;
  --text-dark: #333333;
  --text-grey: #666666;
  --font-heading: "Cormorant Garamond", serif;
  --font-body: "DM Sans", sans-serif;
}
/* -------------------------
   Filtered Insights Section 
   ------------------------- */
.insights-page-heading {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.3;
}

.insights-page-desc {
  font-family: var(--font-body);
  color: var(--text-grey);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Filter Tab Buttons */
.filter-btn {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #888888; /* Muted grey for inactive tabs */
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  border-color: rgba(0, 0, 0, 0.2);
  color: var(--text-dark);
}

.filter-btn.active {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background-color: rgba(200, 16, 46, 0.02); /* Extremely faint red tint */
}

/* New Date Element for Cards */
.insight-date {
  display: block;
  font-family: var(--font-body);
  color: var(--accent-red);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Add smooth transition for the filtering logic */
.insight-item {
  transition:
    opacity 0.4s ease-in-out,
    transform 0.4s ease-in-out;
}

@media (max-width: 768px) {
  .insights-page-heading {
    font-size: 2.2rem;
  }
  .filter-btn {
    padding: 8px 16px;
    font-size: 0.6rem;
    flex-grow: 1; /* Makes buttons span nicely on mobile */
    text-align: center;
  }
}

/* -------------------------
   Contact / How We Can Help Section 
   ------------------------- */

/* Header Text */
.contact-heading {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.2;
}

.contact-desc {
  font-family: var(--font-body);
  color: var(--text-grey);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 700px;
}

/* Left Column: Form Styling */
.form-title {
  color: var(--accent-red);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.custom-contact-form .form-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 5px;
}

.custom-contact-form .custom-input {
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-dark);
  background-color: transparent;
  transition: border-color 0.3s ease;
  box-shadow: none !important; /* Overrides bootstrap focus ring */
}

.custom-contact-form .custom-input::placeholder {
  color: #b0b0b0;
  font-weight: 400;
}

.custom-contact-form .custom-input:focus {
  border-bottom: 1px solid var(--accent-red);
}

.custom-contact-form textarea.custom-input {
  resize: vertical;
  min-height: 80px;
}

/* Right Column: Info Grid Styling */
.contact-info-box {
  background-color: var(--primary-blue);
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease;
}

.contact-info-box:hover {
  transform: translateY(-3px);
}

.info-icon {
  color: var(--accent-red);
  margin-bottom: 1.2rem;
}

.info-icon svg {
  width: 28px;
  height: 28px;
}

.info-subtitle {
  color: var(--accent-red);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.info-text {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

/* -------------------------
   Responsive Adjustments
   ------------------------- */
@media (max-width: 991px) {
  .contact-heading {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .contact-heading {
    font-size: 2.2rem;
  }
  .contact-info-box {
    padding: 30px 15px;
  }
}

/* -------------------------
   Our Process Section
   ------------------------- */
.process-section {
  background-color: #f9f9fa; /* Consistent off-white background */
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* Subtle separation if placed below white section */
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.process-step:hover {
  transform: translateY(-5px); /* Subtle lift on hover */
}

.process-number {
  font-family: var(--font-body);
  font-size: 3.5rem;
  font-weight: 700;
  color: #c8102e30;
  line-height: 1;
  margin-bottom: 1.2rem;
}

.process-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--text-dark);
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.process-desc {
  font-family: var(--font-body);
  color: var(--text-grey);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 260px; /* Constrains width to create the stacked text look from screenshot */
  margin: 0 auto;
}

/* -------------------------
   Responsive Adjustments
   ------------------------- */
@media (max-width: 768px) {
  .process-step {
    margin-bottom: 1rem;
  }
  .process-number {
    font-size: 3rem;
  }
}

/* ---------------------------------
   NEW SPLIT FOOTER SECTION STYLES
   --------------------------------- */
.split-footer {
  overflow: hidden; /* Prevents horizontal scroll on small screens */
}

/* --- Left Column: Dark Content --- */
.footer-main-content {
  background-color: var(--primary-blue);
  color: rgba(255, 255, 255, 0.6);
}
/* All the styles for the content inside this column (logo, links, etc.) 
   are already defined from our previous footer build and can be reused. 
   Just ensure they are present in your stylesheet. */

/* --- Right Column: Light Form --- */
.footer-form-col {
  background-color: #f9f9fa; /* Off-white background */
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-container {
  width: 80%;
  padding: 4rem 2rem;
}

.form-eyebrow {
  color: var(--accent-red);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2.5rem;
}

/* Minimalist Form Field Styling */
.form-label-styled {
  color: var(--accent-red);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.form-control-styled {
  display: block;
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  color: var(--text-grey);
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.form-control-styled::placeholder {
  color: #b0b0b0;
}

.form-control-styled:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--accent-red);
}

textarea.form-control-styled {
  resize: vertical;
}

/* Responsive Adjustments for the Split Footer */
@media (max-width: 991px) {
  /* On tablets and below, the form stacks under the main footer */
  .form-container {
    max-width: 100%;
  }
}

/* ---------------------------------
   Explore Other Services (Light Theme)
   --------------------------------- */
.cross-sell-section {
  background-color: #f9f9fa; /* Light off-white background */
  color: var(--text-dark);
  position: relative;
  overflow: hidden;
}

/* Geometric watermark adapted for light background */
.cross-sell-section::before,
.cross-sell-section::after {
  content: "";
  position: absolute;
  top: -10%;
  width: 15vw;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.02); /* Very faint dark watermark */
  z-index: 0;
  pointer-events: none;
}

.cross-sell-section::before {
  left: 50%;
  transform-origin: top left;
  transform: rotate(25deg);
}

.cross-sell-section::after {
  right: 50%;
  transform-origin: top right;
  transform: rotate(-25deg);
}

/* Intro Text Styling */
.cross-sell-eyebrow {
  color: var(--accent-red);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  display: block;
}

.cross-sell-heading {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  color: var(--text-dark); /* Dark text */
  font-weight: 400;
  line-height: 1.2;
}

.cross-sell-desc {
  font-family: var(--font-body);
  color: var(--text-grey); /* Grey text */
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Interactive Cards (Light Theme) */
.cross-sell-card {
  display: block;
  text-decoration: none;
  background-color: #ffffff; /* Pure white cards */
  border: 1px solid rgba(0, 0, 0, 0.08); /* Subtle grey border */
  padding: 50px 40px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hover State (Light Theme) */
.cross-sell-card:hover {
  background-color: #ffffff;
  transform: translateY(-8px);
  border-color: rgba(0, 0, 0, 0.15); /* Slightly darker border on hover */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06); /* Soft dark shadow */
}

.cross-card-number {
  font-family: var(--font-body);
  font-size: 3.5rem;
  color: #c8102e30;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
}

.cross-card-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  color: var(--text-dark); /* Dark heading text */
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  transition: color 0.3s ease;
}

.cross-card-title .text-red {
  color: var(--accent-red);
}

/* Animated Arrow Logic (Remains the same) */
.hover-arrow {
  width: 24px;
  height: 24px;
  color: var(--accent-red);
  margin-left: 10px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  vertical-align: middle;
  margin-bottom: 5px;
}

.cross-sell-card:hover .hover-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* -------------------------
   Responsive Adjustments
   ------------------------- */
@media (max-width: 991px) {
  .cross-sell-heading {
    font-size: 2.8rem;
  }
  .cross-sell-card {
    padding: 40px 30px;
  }
  .cross-card-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .cross-sell-heading {
    font-size: 2.2rem;
  }
  .cross-sell-card {
    padding: 35px 25px;
  }
  .cross-card-number {
    font-size: 3rem;
  }
  .hover-arrow {
    opacity: 1;
    transform: translateX(0);
    width: 20px;
  }
}

/* -------------------------
   Packages css
   ------------------------- */

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1350px !important;
  }
}

/* ---------------------------------
   Startup Legal Foundation Section
   --------------------------------- */
.legal-foundation-section {
  background-color: #f9f9fa;
}

.legal-foundation-eyebrow {
  color: var(--accent-red);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.legal-foundation-heading {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  color: var(--text-dark);
  font-weight: 400;
  line-height: 1.25;
}

.legal-foundation-text {
  font-family: var(--font-body);
  color: var(--text-grey);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 0;
}

.legal-foundation-text .text-red {
  color: var(--accent-red);
}

@media (max-width: 991px) {
  .legal-foundation-heading {
    font-size: 2.4rem;
  }
}

@media (max-width: 768px) {
  .legal-foundation-heading {
    font-size: 2rem;
  }
}

/* ---------------------------------
   Investor Ready Section
   --------------------------------- */
.investor-ready-section {
  background-color: var(--primary-blue);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Geometric watermark */
.investor-ready-section::before,
.investor-ready-section::after {
  content: "";
  position: absolute;
  top: -10%;
  width: 150px;
  height: 120%;
  background-color: rgba(255, 255, 255, 0.015);
  z-index: 0;
  pointer-events: none;
}

.investor-ready-section::before {
  left: 50%;
  transform-origin: top left;
  transform: rotate(25deg);
}

.investor-ready-section::after {
  right: 50%;
  transform-origin: top right;
  transform: rotate(-25deg);
}

.investor-ready-section .container {
  position: relative;
  z-index: 1;
}

.investor-ready-eyebrow {
  color: var(--accent-red);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.investor-ready-heading {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.25;
}

.investor-ready-desc {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.95rem;
}

/* Check items grid */
.investor-checks-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.investor-check-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 24px;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

.investor-check-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.investor-check-item svg {
  color: var(--accent-red);
  flex-shrink: 0;
}

.investor-check-item span {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 500;
}

.investor-ready-footer {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  font-style: italic;
}

@media (max-width: 991px) {
  .investor-ready-heading {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .investor-ready-heading {
    font-size: 2rem;
  }

  .investor-checks-wrapper {
    gap: 10px;
  }

  .investor-check-item {
    padding: 10px 18px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .investor-check-item {
    width: 100%;
    justify-content: center;
  }
}