/*Hero Section*/
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  min-height: 80vh;
  padding: 40px 24px;
  gap: 40px;
}
  /*  starting professional services that you can afford- styling */
    /* Left and right text panels */
    .hero-left,
    .hero-right {
      flex: 1;
      display: flex;
      align-items: center;
    }

    /* Left text - aligned to right edge */
    .hero-left {
      justify-content: flex-end;
      text-align: right;
    }

    /* Right text - aligned to left edge */
    .hero-right {
      justify-content: flex-start;
      text-align: left;
    }

    /* Hero headings */
    .hero h1 {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(28px, 4vw, 52px);
      font-weight: 700;
      color: #0d1b2a;
      line-height: 1.2;
    }

    /* Center image */
    .hero-center img {
      height: clamp(180px, 25vw, 320px);
      width: auto;
      display: block;
    }

    /* Mobile: scale down, keep side by side */
        @media (max-width: 768px) {
          .hero {
            flex-direction: column;
            text-align: center;
            min-height: auto;
            padding: 40px 16px;
            gap: 24px;
          }

          /* Center both text panels on mobile */
          .hero-left,
          .hero-right {
            justify-content: center;
            text-align: center;
          }

          /* Image scales down on mobile */
          .hero-center img {
            height: clamp(140px, 40vw, 220px);
          }
        }

        /* Services Section */
          .services {
            display: flex;
            align-items: top;
            justify-content: space-between;
            padding: 60px 40px;
            gap: 40px;
            background-color: white;
          }

          /* Left text panel */
          .services-left {
            flex: 1;
            max-width: 40%;
          }

          /* Services headline */
          .services-left h2 {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(24px, 3vw, 42px);
            font-weight: 700;
            color: #0d1b2a;
            margin-bottom: 16px;
            line-height: 2;
          }

          /* Services paragraph */
          .services-left p {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(13px, 1.5vw, 16px);
            color: #555;
            line-height: 1.7;
          }

          /* Right icon grid - 2 columns */
          .services-grid {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 35px 10px;
            max-width: 680px;
          }

          /* Center the last icon when odd number */
          .service-item:last-child {
            grid-column: 1 / -1;
            justify-self: center;
          }

          /* Each service icon block */
          .service-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 10px;
          }

          /* Service icon image */
          .service-item img {
            height: clamp(40px, 5vw, 64px);
            width: auto;
          }

          /* Service label */
          .service-item p {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(12px, 1.2vw, 14px);
            font-weight: 600;
            color: #0d1b2a;
          }

          /*  Mobile: stack vertically */
          @media (max-width: 768px) {
            .services {
              flex-direction: column;
              padding: 40px 16px;
            }

            /* Full width on mobile */
            .services-left {
              max-width: 100%;
              text-align: center;
            }

            /* 3 columns still on mobile, just smaller */
            .services-grid {
              width: 100%;
              gap: 16px;
            }
          }



            /* Hero- review seection styling */
            /* Reviews Section*/
            .reviews {
              background-color: #f5f6f8;
              padding: 60px 40px;
              text-align: center;
            }

            /* Section title */
            .reviews-title {
              font-family: 'Poppins', sans-serif;
              font-size: clamp(22px, 3vw, 38px);
              font-weight: 700;
              color: #0d1b2a;
              margin-bottom: 40px;
            }

            /* 3 column grid */
            .reviews-grid {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 24px;
              max-width: 1100px;
              margin: 0 auto;
            }

            /* Individual review card */
            .review-card {
              background-color: white;
              border: 1px solid #e0e3e8;
              border-radius: 12px;
              padding: 28px 24px;
              display: flex;
              flex-direction: column;
              gap: 12px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
              text-align: left;
            }

            /* Star rating */
            .stars {
              color: #f5a623;
              font-size: 20px;
              letter-spacing: 2px;
            }

            /* Review text */
            .review-text {
              font-family: 'Poppins', sans-serif;
              font-size: clamp(13px, 1.3vw, 15px);
              color: #444;
              line-height: 1.7;
              flex: 1;
            }

            /* Reviewer name */
            .review-name {
              font-family: 'Poppins', sans-serif;
              font-size: clamp(12px, 1.2vw, 14px);
              font-weight: 700;
              color: #0d1b2a;
            }

            /* ── Mobile: stack cards vertically ── */
            @media (max-width: 768px) {
              .reviews {
                padding: 40px 16px;
              }

              /* Single column on mobile */
              .reviews-grid {
                grid-template-columns: 1fr;
              }
            }