.elementor-620 .elementor-element.elementor-element-04c9e07{--display:flex;--overlay-opacity:0.5;}.elementor-620 .elementor-element.elementor-element-04c9e07::before, .elementor-620 .elementor-element.elementor-element-04c9e07 > .elementor-background-video-container::before, .elementor-620 .elementor-element.elementor-element-04c9e07 > .e-con-inner > .elementor-background-video-container::before, .elementor-620 .elementor-element.elementor-element-04c9e07 > .elementor-background-slideshow::before, .elementor-620 .elementor-element.elementor-element-04c9e07 > .e-con-inner > .elementor-background-slideshow::before, .elementor-620 .elementor-element.elementor-element-04c9e07 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-0f11d7a *//* General Page Styles */
body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  background-color: #f7f7f7;
  color: #12324a;
  line-height: 1.6;
}

/* --- Hero Section --- */
.about-hero {
  position: relative;
  height: 500px;
  background-image: url('https://advantage-strategypartners.com/wp-content/uploads/2025/10/hero-about-new-251011-v1.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff; /* Default color for hero content */
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 50, 74, 0.45); /* Slightly darker overlay for better contrast */
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 20px;
}

.hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 700;
  color: #ffffff; /* Explicitly set white color */
  margin-bottom: 16px;
}

.hero-content p {
  font-size: 18px;
  line-height: 1.8;
  color: #ffffff; /* Explicitly set white color */
  margin-bottom: 24px;
}

.btn-hero {
  display: inline-block;
  background: #d6b86a;
  color: #12324a;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.btn-hero:hover {
  background: #bf9d5a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}


/* --- Disruption & Pain Points Section --- */
.disruption-section {
  background: linear-gradient(135deg, #f7f7f7 0%, #e8eaf0 100%);
  padding: 80px 20px;
}

.disruption-intro {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px;
}

.disruption-intro h2 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  color: #12324a;
  margin-bottom: 24px;
  line-height: 1.2;
}

.lead-text {
  font-size: 20px;
  color: #555;
  line-height: 1.7;
  font-weight: 400;
}

.pain-points-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.pain-point {
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
  border-top: 4px solid #d6b86a;
}

.pain-icon {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.pain-point h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  color: #12324a;
  margin-bottom: 16px;
}

.pain-desc {
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  font-style: italic;
}

.oliver-solution {
  color: #12324a;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  border-left: 3px solid #d6b86a;
  padding-left: 16px;
  text-align: left;
}

/* --- Philosophy Box Section --- */
.philosophy-box {
  background: #12324a;
  padding: 40px;
  border-radius: 12px;
  max-width: 800px;
  margin: 20px auto;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.philosophy-box h3 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: #d6b86a !important; /* Gold color */
  margin-bottom: 24px;
}

.philosophy-box p {
  font-size: 18px;
  line-height: 1.7;
  color: #ffffff !important; /* White color */
  margin-bottom: 16px;
  font-style: italic;
}

.philosophy-box .signature {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: #d6b86a !important; /* Gold color */
  font-size: 18px;
  margin-top: 24px;
}
/* About Details Section - Responsive Left-Right Layout */
.about-details {
  display: flex; /* Flexbox for alignment */
  gap: 40px; /* Space between image and text */
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  align-items: center; /* Vertically align content */
  padding: 40px 20px; /* Add spacing inside the section */
  background: #ffffff; /* White background for clarity */
  border-radius: 12px; /* Soft corners */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* Subtle shadow for clean elevation */
  max-width: 1100px;
  margin: 40px auto; /* Centralize */
}

/* Image Styling */
.about-image {
  flex: 1;
  min-width: 300px; /* Prevents shrinking too small */
  display: flex;
  justify-content: center;
}

.about-image img {
  width: 100%; /* Full width within its container */
  max-width: 500px; /* Limit for large screens */
  border-radius: 12px; /* Soft corners */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Text Formatting */
.about-text {
  flex: 2; /* Prioritize more space for text */
  min-width: 480px; /* Ensures text doesn’t overflow */
}

.about-text h3 {
  font-family: 'Playfair Display', serif; /* Elegant styling for headers */
  font-size: 28px; /* Attention-grabbing, works well with image size */
  color: #12324a; /* Navy for authority */
  margin-bottom: 16px;
}

.about-text p {
  color: #555; /* Muted dark gray for readability */
  font-size: 16px; /* Standard size for fluid reading */
  line-height: 1.8; /* Comfortable spacing between lines */
  margin-bottom: 20px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .about-details {
    flex-direction: column; /* Stack image and text vertically */
    text-align: center; /* Center-align the text for small screens */
  }

  .about-image {
    margin-bottom: 20px; /* Add spacing when stacked */
  }

  .about-text {
    min-width: auto;
    text-align: center;
  }

  .about-text h3 {
    font-size: 24px; /* Adjust for smaller screens */
  }

  .about-text p {
    font-size: 15px; /* Adjust text for mobile readability */
  }
}


/* --- Responsive Styles for Mobile --- */
@media (max-width: 768px) {
  /* General mobile scaling */
  body {
    font-size: 14px;
  }
  
  .hero-content h1 {
    font-size: 32px;
  }
  
  .hero-content p {
    font-size: 16px;
  }

  /* Pain points mobile view */
  .pain-points-grid {
    grid-template-columns: 1fr; /* Stack cards vertically */
  }

  /* Philosophy Box mobile view */
  .philosophy-box {
    padding: 30px 20px;
    max-width: 95%;
  }

  .philosophy-box h3 {
    font-size: 22px;
    color: #d6b86a !important; /* Explicitly set color for mobile */
  }

  .philosophy-box p {
    font-size: 16px;
    color: #ffffff !important; /* Explicitly set color for mobile */
  }
  
  .philosophy-box .signature {
    font-size: 16px;
    color: #d6b86a !important; /* Explicitly set color for mobile */
  }
}/* End custom CSS */