/* Section #1 */
.content-section-1 {
  overflow: hidden;
  width: 100%;
  background: #F0F7FF;
  padding: 1rem 0px;
  position: relative;
  z-index: 4;
  background-image: url("images/header-background-image.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 767px) {
.content-section-1 {
padding: 3rem 0px;
}
} 

.content-section-1-1 {
padding: 6rem 0px;
}

.content-section-1 h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.content-section-1 img {
  width: 100%;
  /* max-width: 500px; */
  margin: 0px auto;
  display: block;
}

.content-section-1 p {
  max-width: 630px;
  margin-bottom: 2rem;
  font-size: 1.25rem;
  line-height: 1.5;
}
.content-section-1 .copy {
  display: flex;
  align-items: center;
}
.content-section-1 .btn {
  margin-bottom: 20px;
}

/* Section #2 */
.content-section-2 {
  overflow: hidden;
  width: 100%;
  padding: 6rem 0px 6rem 0px;
  position: relative;
  z-index: 3;
  box-shadow: var(--shadow);
}

.content-section-2 .feature-card.active {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 2;
}

.content-section-2 .feature-card .feature-icon {
  width: 30px;
  position: relative;
  margin-right: 10px;
  top: -1px;
}
@media (max-width: 400px) {
  .content-section-2 .feature-card .feature-icon {
    display: none;
  }
}
.content-section-2 .feature-card h3 {
  background-color: var(--orange);
  padding: 20px 30px;
  color: var(--white);
  font-size: 18px;
  line-height: 26px;
  margin: 0;
}
.content-section-2 .feature-card p {
  padding: 20px 30px;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Section #3 - Propensity Modeling */
.content-section-propensity {
  overflow: hidden;
  width: 100%;
  background: #F0F7FF;
  padding: 6rem 0px;
  position: relative;
  z-index: 3;
  background-image: url("images/header-background-image.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scaleX(-1);
}

/* Flip the content back to normal */
.content-section-propensity > * {
  transform: scaleX(-1);
}

.content-section-propensity .row {
  align-items: center;
  justify-content: center;
}

.content-section-propensity .row > [class*="col-"] {
  padding: 0 2.5rem;
}

.content-section-propensity .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .content-section-propensity .image-container {
    margin-top: 0;
  }
}

.content-section-propensity .col-12 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-section-propensity h2 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.content-section-propensity img {
  width: 120%;
  display: block;
}

.content-section-propensity .copy {
  display: flex;
  align-items: center;
}

@media (max-width: 767px) {
  .content-section-propensity .copy {
    padding: 2rem 0 0;
  }
  .content-section-propensity img {
    width: 100%;
  }
  .content-section-propensity .row > [class*="col-"] {
    padding: 1rem;
  }
}

.content-section-propensity .expertise-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.content-section-propensity .expertise-list li {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  position: relative;
  padding-left: 2.5rem;
}

.content-section-propensity .expertise-list li:before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-size: 1.5rem;
}

.content-section-propensity .expertise-list li strong {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  color: var(--blue);
}

/* Section #3 - InfoTrust Section */
.content-section-3 {
  overflow: hidden;
  width: 100%;
  background-color: var(--blue);
  padding: 6rem 0px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
  color: var(--white);
  background-image: url("images/infotrust-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}


.content-section-3 .container-wrapper {
  height: 100%;
}

.content-section-3 .row {
  height: 100%;
}

.content-section-3 .infotrust-logo {
  width: 120px;
  margin-bottom: 20px;
}

.content-section-3 .copy {
  display: flex;
  align-items: center;
}

.content-section-3 p {
  max-width: 630px;
}

.content-section-3 .image {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: right;
}

.content-section-3 .image .combined-image {
  width: 100%;
  border-radius: 8px;
}

/* Expertise Section */
.content-section-3 .expertise-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.content-section-3 .expertise-list li {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    position: relative;
    padding-left: 2.5rem;
}

.content-section-3 .expertise-list li:before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--orange);
    font-size: 1.5rem;
}

.content-section-3 .expertise-list li strong {
    display: block;
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

/* Section #4 */
.content-section-4 {
  overflow: hidden;
  width: 100%;
  background: linear-gradient(135deg, var(--blue) 0%, #1a4b7c 100%);
  padding: 4rem 0;
  position: relative;
  z-index: 1;
  color: white;
}

.content-section-4 .gray-block > div {
  background-color: var(--light-gray);
  border-radius: 6px;
  padding: 40px;
  margin-bottom: 30px;
}

.content-section-4 .cta-block {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 2.5rem;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 700px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.content-section-4 h2 {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: white;
  font-weight: 600;
}

.content-section-4 .btn {
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  background: var(--orange);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  border: none;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.content-section-4 .btn:hover {
  transform: translateY(-2px);
  background: #ff6c3c;
  box-shadow: 0 6px 15px rgba(244, 93, 41, 0.4);
}

.content-section-4 .btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      120deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
  );
  transition: 0.5s;
}

.content-section-4 .btn:hover:before {
  left: 100%;
}

.content-section-4 .btn:active {
  transform: translateY(0) scale(0.98);
}

.content-section-4 h3 {
  text-transform: uppercase;
  font-size: 14px;
  line-height: 22px;
}

.content-section-4 .checkmark-list h3 {
  text-transform: uppercase;
  font-size: 14px;
  line-height: 22px;
}

.content-section-4 .checkmark-list li {
  list-style-image: url('data:image/svg+xml,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 40C17.2333 40 14.6333 39.475 12.2 38.425C9.76667 37.375 7.65 35.95 5.85 34.15C4.05 32.35 2.625 30.2333 1.575 27.8C0.525 25.3667 0 22.7667 0 20C0 17.2333 0.525 14.6333 1.575 12.2C2.625 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.625 12.2 1.575C14.6333 0.525 17.2333 0 20 0C21.6 0 23.1583 0.183333 24.675 0.55C26.1917 0.916667 27.65 1.45 29.05 2.15C29.55 2.41667 29.875 2.81667 30.025 3.35C30.175 3.88333 30.0833 4.38333 29.75 4.85C29.4167 5.31667 28.975 5.61667 28.425 5.75C27.875 5.88333 27.3333 5.81667 26.8 5.55C25.7333 5.05 24.625 4.66667 23.475 4.4C22.325 4.13333 21.1667 4 20 4C15.5667 4 11.7917 5.55833 8.675 8.675C5.55833 11.7917 4 15.5667 4 20C4 24.4333 5.55833 28.2083 8.675 31.325C11.7917 34.4417 15.5667 36 20 36C24.4333 36 28.2083 34.4417 31.325 31.325C34.4417 28.2083 36 24.4333 36 20C36 19.7333 35.9917 19.475 35.975 19.225C35.9583 18.975 35.9333 18.7167 35.9 18.45C35.8333 17.8833 35.9417 17.3417 36.225 16.825C36.5083 16.3083 36.9333 15.9667 37.5 15.8C38.0333 15.6333 38.5333 15.6833 39 15.95C39.4667 16.2167 39.7333 16.6167 39.8 17.15C39.8667 17.6167 39.9167 18.0833 39.95 18.55C39.9833 19.0167 40 19.5 40 20C40 22.7667 39.475 25.3667 38.425 27.8C37.375 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.375 27.8 38.425C25.3667 39.475 22.7667 40 20 40Z" fill="%23143755"/><path d="M17.1999 23.6L35.7999 4.95002C36.1665 4.58336 36.6249 4.39169 37.1749 4.37502C37.7249 4.35836 38.1999 4.55002 38.5999 4.95002C38.9665 5.31669 39.1499 5.78336 39.1499 6.35002C39.1499 6.91669 38.9665 7.38336 38.5999 7.75002L18.5999 27.8C18.1999 28.2 17.7332 28.4 17.1999 28.4C16.6665 28.4 16.1999 28.2 15.7999 27.8L10.0999 22.1C9.73319 21.7334 9.54986 21.2667 9.54986 20.7C9.54986 20.1334 9.73319 19.6667 10.0999 19.3C10.4665 18.9334 10.9332 18.75 11.4999 18.75C12.0665 18.75 12.5332 18.9334 12.8999 19.3L17.1999 23.6Z" fill="%2376AE00"/></svg>');
}

.content-section-4 .checkmark-list li p {
  transform: translate(15px, -28px);
  width: calc(100% - 30px);
}

.content-section-4 .checkmark-list ul {
  width: calc(100% - 15px);
  margin-left: 15px;
  margin-top: 30px;
}

.cta-section {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* box-shadow: var(--shadow); */
  margin-bottom: 6rem;
}

.cta-content {
  text-align: center;
  color: #FFFFFF;
  background: url('images/footer-bg.png') no-repeat center center;
  background-size: cover;
  border-radius: 25px;
  padding: 6rem 6rem;
}

.cta-content h2 {
  font-weight: 700;
  font-size: 40px;
  line-height: 49px;
  margin-bottom: 32px;
}

.cta-content p {
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 32px;
}

.cta-content p:last-child {
margin-bottom: 0px;
}

.cta-content a {
  color: #FFFFFF;
  text-decoration: underline;
}

.content-section-1-1 ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.content-section-1-1 li {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  padding-left: 2rem;
  position: relative;
}

.content-section-1-1 li:before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: bold;
}

.content-section-1-1 li strong {
  display: block;
  color: var(--blue);
  margin-bottom: 0.5rem;
}

/* Final CTA Section */
.content-section-4 .cta-text {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Enhanced CTA Button Styles */
.btn {
    padding: 1rem 2.5rem;
    font-size: 1.35rem;
    font-weight: 600;
    background: linear-gradient(135deg, var(--blue) 0%, #1a4b7c 100%);
    color: white;
    border: none;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #1a4b7c 0%, var(--blue) 100%);
    box-shadow: 0 6px 20px rgba(20, 55, 85, 0.3);
    color: white;
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.btn:hover:before {
    left: 100%;
}

/* Final CTA Button Specific Styles - only override what's different */
.content-section-4 .btn {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.content-section-4 .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(244, 93, 41, 0.4);
}

/* Dashboard and Gauge Positioning */
.dashboard-col {
  position: relative;
}

.dashboard-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Align to the right instead of center */
  justify-content: flex-end;
}
.dashboard-image {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  z-index: 1;
}

/* SVG Gauge Styles */
.gauge-container {
  position: absolute;
  left: -10%;
  bottom: -40px;
  transform: translateX(-50%);
  width: 80%;
  max-width: 400px;
  z-index: 2;
  display: none; /* Hidden by default */
}

.gauge {
  width: 100%;
  height: auto;
  filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.1));
}

/* Colored Sections */
.gauge-section {
  fill: none;
  stroke-width: 15;
  stroke-linecap: butt;
}

.red-section {
  stroke: #FB6A6A;
}

.yellow-section {
  stroke: #FCCB15;
}

.green-section {
  stroke: #62DB9D;
}

/* Needle Styles */
.gauge-needle {
  transform-origin: 100px 90px; /* Match center point from SVG */
  transform: rotate(-90deg);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.gauge-circle {
  fill: #143755;
  stroke: #FFFFFF;
  stroke-width: 1;
}

.gauge-pointer {
  fill: #143755;
}

.gauge-center-dot {
  fill: #FFFFFF;
}

@media (min-width: 1300px) {
  .gauge-container {
    display: block; /* Show the gauge */
  }
}

@media (max-width: 767px) {
  .dashboard-wrapper {
    margin-bottom: 60px;
  }

}

@media (max-width: 480px) {
  .dashboard-wrapper {
    margin-bottom: 80px;
  }
}

/* Footer */
.footer {
  background-color: var(--white);
  padding: 1.5rem 0;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-links {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--blue);
  text-decoration: none;
  margin: 0 1rem;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--orange);
  text-decoration: underline;
}

.footer-copyright {
  color: #6c757d;
  font-size: 0.85rem;
}

@media (max-width: 576px) {
  .footer-links {
    flex-direction: column;
  }
  
  .footer-links a {
    margin: 0.5rem 0;
  }
}

.content-section-2 h2 {
  margin-bottom: 2.5rem;
  position: relative;
  display: inline-block;
  font-weight: 700;
}

.content-section-2 h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0; /* Start with 0 width */
  height: 3px;
  background: var(--orange);
  border-radius: 3px;
  animation: expandUnderline 1.2s ease forwards;
  animation-delay: 0.3s; /* Short delay before starting */
}

@keyframes expandUnderline {
  0% {
    width: 0;
  }
  100% {
    width: 100px;
  }
}

.content-section-2 .feature-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 3px 8px rgba(0, 0, 0, 0.05);
  background-color: var(--white);
  border-radius: 6px;
  overflow: hidden;
  margin: 20px 0;
  transition: transform 0.3s ease-out, 
              box-shadow 0.3s ease,
              opacity 0.3s ease;
  transform: perspective(1000px) rotateX(0) rotateY(0) scale(1);
  position: relative;
  z-index: 1;
  opacity: 0.95;
  will-change: transform;
  transform-style: preserve-3d;
  cursor: pointer;
}

.content-section-2 .feature-card.active {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  z-index: 2;
  opacity: 1;
}

/* Subtle glow effect for active cards */
.content-section-2 .feature-card.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  box-shadow: 0 0 25px 5px rgba(255, 255, 255, 0.3);
  opacity: 0;
  z-index: -1;
  animation: cardGlow 2s ease-in-out;
}

@keyframes cardGlow {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Card-specific colors for headers */
.content-section-2 .feature-card.card-1 h3 {
  background-color: var(--orange);
  transition: background-color 0.3s ease;
}

.content-section-2 .feature-card.card-2 h3 {
  background-color: var(--orange);
  transition: background-color 0.3s ease;
}

.content-section-2 .feature-card.card-3 h3 {
  background-color: var(--orange);
  transition: background-color 0.3s ease;
}

/* Hover effects for card headers */
.content-section-2 .feature-card.card-1:hover h3 {
  background-color: #ff6c3c; /* Slightly brighter orange */
}

.content-section-2 .feature-card.card-2:hover h3 {
  background-color: var(--orange);
}

.content-section-2 .feature-card.card-3:hover h3 {
  background-color: var(--orange);
}

/* Add subtle shine effect */
.content-section-2 .feature-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s ease, transform 1s ease;
}

.content-section-2 .feature-card:hover::before {
  opacity: 1;
  transform: rotate(30deg) translate(10%, 10%);
}

.animated-bullets .bullet-item,
.numbered-list .bullet-item {
  opacity: 0;
  transform: translateY(20px);
  position: relative;
  transition: none; /* No transition initially */
}

/* Animation for bullets coming into view */
.animated-bullets .bullet-item.animate-in,
.numbered-list .bullet-item.animate-in {
  animation: fadeInUp 0.8s ease forwards;
}

/* The animation */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Add a subtle entrance effect for the bullet points */
.animated-bullets .bullet-item:before {
  animation: scaleDot 0.4s ease forwards;
  animation-delay: inherit; /* Use the same delay as the parent */
  transform: scale(0);
}

/* Animation for the bullet dots */
@keyframes scaleDot {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Numbered List Specific Styling */
.numbered-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  counter-reset: item;
}

.numbered-list .bullet-item {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  position: relative;
  padding-left: 3.5rem;
  counter-increment: item;
}

.numbered-list .bullet-item:before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--orange);
  width: 2.5rem;
  text-align: center;
  line-height: 1.2;
  animation: scaleDot 0.4s ease forwards;
  animation-delay: inherit; /* Use the same delay as the parent */
  transform: scale(0);
}

/* Line connecting the numbers */
.numbered-list .bullet-item:after {
  content: '';
  position: absolute;
  left: 1.25rem;
  top: 2.5rem;
  bottom: -0.5rem;
  width: 1px;
  background-color: rgba(244, 93, 41, 0.2); /* Light orange */
  display: block;
}

.numbered-list .bullet-item:last-child:after {
  display: none;
}