* {
    margin:0;
    box-sizing:border-box;
}

.about-banner {
      position: relative;
      width: 100%;
      height: 300px;
      background: url("Image/background-1.jpg") no-repeat center center/cover;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      overflow: hidden;
    }

    .about-banner::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 102, 255, 0.85); /* Blue transparent overlay */
      z-index: 1;
    }

    .about-banner .content {
      position: relative;
      z-index: 2;
      text-align: center;
    }

    .about-banner .content h1 {
      font-size: 42px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .about-banner .content p {
      font-size: 18px;
      color: #f0f0f0;
    }
    .g1 a{
        color: white;
        text-decoration: none;
        font-size: 19px;
    }
   
    /*about 1section*/
    
    .seo-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 80px;
  gap: 50px;
  flex-wrap: wrap;
}

.content {
  flex: 1;
  animation: fadeInUp 1s ease-in-out forwards;
  opacity: 0;
}

.content h2 {
  font-size: 36px;
  color: #111;
  margin-bottom: 10px;
}

.content h2 span {
  color: #6b72fb;
}

.line {
  width: 50px;
  height: 4px;
  background-color: #acb8ff;
  margin: 15px 0;
}

.content p {
  font-size: 16px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 20px;
}

.image-container {
  flex: 1;
  text-align: center;
}

.seo-image {
  width: 100%;
  max-width: 450px;
  animation: floatImage 3s ease-in-out infinite;
}

/* Animation Keyframes */
@keyframes floatImage {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
  .seo-section {
    flex-direction: column;
    padding: 40px 20px;

  }
  .seo-image {
    max-width: 300px;
  }
}
  .process-section {
      background: linear-gradient(to right, #00b4db, #8a2be2, #ff0080);
      padding: 80px 20px;
      text-align: center;
      color: #fff;
    }

    .process-section h4 {
      font-size: 18px;
      color: #ffffffcc;
      margin-bottom: 10px;
      letter-spacing: 1px;
    }

    .process-section h2 {
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 50px;
    }

    .process-steps {
      display: flex;
      justify-content: center;
      gap: 60px;
      flex-wrap: wrap;
    }

    .process-step {
      text-align: center;
      max-width: 180px;
    }

    .process-step .icon-circle {
      width: 100px;
      height: 100px;
      background-color: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .process-step .icon-circle:hover {
      transform: scale(1.1);
      background-color: rgba(255, 255, 255, 0.25);
    }

    .process-step img {
      width: 48px;
      height: 48px;
      filter: brightness(0) invert(1); /* makes icons white for dark bg */
    }

    .process-step p {
      font-size: 16px;
      font-weight: 500;
      color: #f5f5f5;
      margin-top: 10px;
    }
@media (max-width: 768px) {
    .process-section{
        padding: 30px 10px;
    }
}


/*vision*/
    .vision-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 10%;
      flex-wrap: wrap;
         
    }

   

    @keyframes slideInLeft {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .vision-left h2 {
      font-size: 36px;
      color: #5170e0;
      margin-bottom: 10px;
      font-weight: bold;
    }

    .vision-left p {
      font-size: 16px;
      color: #444;
      line-height: 1.7;
    }

    .checklist {
      margin-top: 20px;
    }

    .checklist li {
      list-style: none;
      margin: 10px 0;
      color: #222;
      font-size: 16px;
      position: relative;
      padding-left: 25px;
    }

    .checklist li::before {
      content: "✔";
      color: #0066ff;
      font-weight: bold;
      position: absolute;
      left: 0;
    }

    
    .vision-right img {
      max-width: 100%;
      height: auto;
      animation: floatUpDown 3s ease-in-out infinite;
    }

    @keyframes floatUpDown {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0px); }
    }

    @media (max-width: 768px) {
      .vision-section {
        flex-direction: column;
        text-align: center;
      
      }
      .vision-right {
        margin-top: 30px;
      }
    }
.vision-left {
  max-width: 600px;
  opacity: 0;
  transform: translateX(-50px);
  animation: slideInLeft 1s ease-out forwards;

  display: flex;              /* Keep elements stacked neatly */
  flex-direction: column;     /* Vertical layout */
  align-items: flex-start;    /* Align left (desktop) */
                /* Space between heading, paragraph, and button */
}

.vision-left .btn5 {
  padding: 14px 30px;
  background-color: #3c66fb;
  color: #f2f4f8;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none; /* Ensure no underline for LinkButton */
  display: inline-block;
}

.vision-left .btn5:hover {
  background-color: #3f3d3d;
  color: #f9a600;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 102, 255, 0.3);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .vision-left {
    align-items: center;  /* Center on mobile */
    text-align: center;
    margin-top:30px;
  }
}


.vision-right img {
    width:500px;
}