.container--wrapper {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
 }

 /* Hero Section */
 .hero {
   background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
   padding: 100px 0;
   text-align: center;
   border-bottom: 4px solid #1fc602;
 }

 /* h1 {
   font-size: 2.8rem;
   color: #1a1a1a;
   margin-bottom: 20px;
   line-height: 1.2;
   font-weight: 700;
 } */

 .hero--wrapper{
  display: flex;
  justify-content: center;
  gap: 30px;

 }
  .hero--img {
    
  }
 .hero--img img {
  max-width: 450px;
  height: auto;
  border-radius: 20px;
 }

 .hero-subtitle {
   font-size: 1.25rem;
   color: #555;
   max-width: 800px;
   margin: 0 auto 30px;
   line-height: 1.6;
 }

 .symptoms--wrapper{
  display: flex;
  justify-content: center;
  gap: 30px;
 }
 .symptoms--img img {
  max-width: 450px;
  height: auto;
  border-radius: 20px;
 }

 .benefits-list {
   list-style: none;
   max-width: 600px;
   margin: 0 auto 0;
   padding: 0 20px 40px;
 }

 .benefits-list li {
   padding: 12px 0;
   padding-left: 35px;
   position: relative;
   font-size: 1.1rem;
   text-align: left;
 }

 .benefits-list li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: #1fc602;
   font-weight: bold;
   font-size: 1.3rem;
 }

 .hero-form {
   max-width: 500px;
   margin: 40px auto 0;
   background: white;
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
 }

 /* .form-group {
   margin-bottom: 20px;
 } */

 .form-group label {
   /* display: block; */
   /* margin-bottom: 8px; */
   font-weight: 600;
   color: #555;
 }

 .form-control {
   width: 100%;
   padding: 12px 15px;
   border: 1px solid #ddd;
   border-radius: 8px;
   font-size: 1rem;
 }

 .form-control:focus {
   outline: none;
   border-color: #1fc602;
   box-shadow: 0 0 0 3px rgba(31, 198, 2, 0.2);
 }

 .cta-button {
   display: inline-block;
   background-color: #1fc602;
   color: white;
   padding: 15px 35px;
   text-decoration: none;
   border-radius: 50px;
   font-weight: 600;
   font-size: 1.1rem;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(31, 198, 2, 0.3);
   border: none;
   cursor: pointer;
   max-width: 500px;
   width: 100%;
   margin-top: 0;
 }

 .cta-button:hover {
   background-color: #1aa802;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(31, 198, 2, 0.4);
 }

 /* Section Styles */
 section {
   padding: 60px 0;
 }

 h2 {
   font-size: 2rem;
   color: #1a1a1a;
   margin-bottom: 30px;
   text-align: center;
   position: relative;
   padding-bottom: 15px;
 }

 h2::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
   background-color: #1fc602;
   border-radius: 2px;
 }

 h3 {
   font-size: 1.5rem;
   color: #1fc602;
   margin-bottom: 20px;
 }

 /* Symptoms Block */
 .symptoms-list {
   list-style: none;
   max-width: 700px;
   margin: 0 auto;
   text-align: left;
 }

 .symptoms-list li {
   padding: 15px 0;
   padding-left: 40px;
   position: relative;
   font-size: 1.1rem;
   border-bottom: 1px solid #e0e0e0;
 }

 .symptoms-list li::before {
   content: '•';
   position: absolute;
   left: 0;
   color: #1fc602;
   font-weight: bold;
   font-size: 1.5rem;
 }

 .symptoms-conclusion {
   text-align: center;
   margin-top: 30px;
   font-size: 1.2rem;
   color: #1fc602;
   font-weight: 600;
 }

 /* Explanation Block */
 .explanation {
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
 }

 .explanation p {
   font-size: 1.1rem;
   color: #555;
   margin-bottom: 25px;
 }

 .infographic {
   /* background-color: #d1d1d1; */
   /* height: 300px; */
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   /* color: #666; */
   margin: 30px auto;
   max-width: 600px;
 }

 .infographic img {
   width: auto;
   height: 300px;
   border-radius: 20px;
 }

 /* Alternative Path Block */

 .alternative{
  padding-top: 0;
 }
 .alternative-path {
   background-color: #f0f9f0;
   border-left: 4px solid #1fc602;
   padding: 30px;
   border-radius: 0 8px 8px 0;
   max-width: 800px;
   margin: 0 auto;
 }

 /* System Block */
 .system-steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
   margin-top: 40px;
 }

 .system-step {
   background: white;
   padding: 25px;
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   position: relative;
   counter-increment: step;
 }

 .system-step::before {
   content: counter(step);
   position: absolute;
   top: -20px;
   left: 20px;
   width: 40px;
   height: 40px;
   background-color: #1fc602;
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   font-size: 1.2rem;
 }

 .system-step h3 {
   margin-top: 10px;
   color: #1fc602;
 }

 /* Program Block */
 .program-details {
   background-color: white;
   border-radius: 12px;
   box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   margin-top: 40px;
 }

 .program-header {
   background-color: #1fc602;
   color: white;
   padding: 20px;
   text-align: center;
 }
 .program-header h3{
  color: white ;
 }

 .program-body {
   padding: 30px;
 }

 .program-info {
   margin-bottom: 25px;
 }

 .program-info h3 {
   color: #1fc602;
   margin-bottom: 10px;
 }

 .program-features {
   list-style: none;
   padding-left: 10px;
 }

 .program-features li {
   padding: 8px 0;
   padding-left: 25px;
   position: relative;
 }

 .program-features li::before {
   content: '•';
   color: #1fc602;
   position: absolute;
   left: 0;
   font-weight: bold;
   font-size: 1.2rem;
 }

 .program-result {
   background-color: #f0f9f0;
   border-left: 4px solid #1fc602;
   padding: 20px;
   border-radius: 0 8px 8px 0;
   margin: 20px 0;
 }

 /* Components Block */
 .components-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px;
   margin-top: 40px;
 }

 .component-card {
   background: white;
   padding: 25px;
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   border-top: 4px solid #1fc602;
 }

 .component-card h3 {
   color: #1fc602;
   margin-bottom: 15px;
 }

 /* FAQ Block */
 .faq {
   max-width: 800px;
   margin: 0 auto;
 }

 .faq-item {
   margin-bottom: 25px;
   border-bottom: 1px solid #e0e0e0;
   padding-bottom: 20px;
 }

 .faq-question {
   font-weight: 600;
   color: #1fc602;
   font-size: 1.1rem;
   margin-bottom: 10px;
 }

 /* Final CTA Block */
 .final-cta {
  max-width: 1200px;
  margin: 0 auto;
   background-color: #1fc602;
   color: white;
   padding: 60px 0;
   text-align: center;
   border-radius: 30px;
 }

 .final-cta h2 {
   color: white;
 }

 .final-cta h2::after {
   background-color: white;
 }

 .final-cta h3 {
   color: white;
   font-size: 1.8rem;
   margin-bottom: 20px;
 }

 .final-form {
   max-width: 600px;
   margin: 30px auto 0;
   background: white;
   padding: 30px;
   border-radius: 12px;
   color: #333;
 }

 .final-form .form-group {
   margin-bottom: 15px;
 }

 .final-form .form-control {
   width: 100%;
   padding: 10px 15px;
   border: 1px solid #ddd;
   border-radius: 8px;
   font-size: 1rem;
 }

 .phone-highlight {
   font-size: 2.2rem;
   font-weight: 700;
   margin: 20px 0;
   display: block;
   color: white;
   text-decoration: none;
 }

 .phone-highlight:hover {
   text-decoration: underline;
 }
.img--wrapper{
  display: flex;
  justify-content: center;
  gap: 30px;
}
.img--wrapper img{
  max-width: 100%;
  width: auto;
  height: 300px;
  border-radius: 10px;
}
 /* Responsive */
 @media (max-width: 768px) {
   h1 {
     font-size: 2rem;
   }

   h2 {
     font-size: 1.5rem;
   }

   .hero {
     padding: 70px 0;
   }

   .hero-form {
     padding: 20px;
   }

   .system-step::before {
     top: -15px;
     left: 15px;
     width: 35px;
     height: 35px;
     font-size: 1rem;
   }
 }