/* ============================================ */
/* Responsive Styles for Energy Utilities Page  */
/* Breakpoints: 320px, 480px, 767px             */
/* ============================================ */

/* Container adjustments for all breakpoints */

@media (min-width: 768px) { 

}

@media (min-width: 992px) { 
   .steps-horizontal {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 40px;
          align-items: center;
          position: relative;
        }
}


@media (max-width: 767px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

    .hero3-wrapper {
      position: relative;
      margin-top: 80px;
  }

  .steps-horizontal {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 40px;
          align-items: center;
          position: relative;
        }
}

/* ---------- 767px and below ---------- */
@media (max-width: 767px) {
  /* Hero Section */
  .hero-3 .hero-style3 {
    padding: 40px 20px;
    text-align: center;
  }
  .hero-3 .hero-title {
    font-size: 2rem;
    line-height: 1.2;
  }
  .hero-3 .hero-text {
    font-size: 0.9rem;
  }
  .hero-3 .btn-group .th-btn {
    font-size: 0.85rem;
    padding: 8px 20px;
  }
  .hero3-featuredbox {
    flex-direction: column;
    align-items: center !important;
  }
  .hero-featured-item {
    margin-bottom: 15px;
    text-align: center;
  }
  .hero-3thumbs {
    display: none;
  }
  .scroll-down {
    display: none;
  }

  /* About Section */
  .geometric-approach .img-box3 .img1 img {
    width: 100%;
    height: auto;
  }
  .geometric-approach .sec-title {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  .geometric-approach .ps-xxl-3 {
    padding-left: 0;
  }
  .value-items-particular {
    text-align: center;
  }
  .particular-points {
    flex-wrap: wrap;
    justify-content: center;
    text-align: left;
  }
  .point-item {
    margin: 5px;
  }

  /* Focus Areas (Icon Cards) */
  .icon-category-row {
    flex-direction: column;
  }
  .icon-category-card {
    width: 100%;
    margin-bottom: 20px;
  }
  .icon-card-inner {
    padding: 20px;
  }
  .icon-title {
    font-size: 1.2rem;
  }
  .icon-desc {
    font-size: 0.85rem;
  }

  /* What We Do - Tabs */
  .wwd-compact-tabs-nav .wwd-compact-nav-row {
    flex-direction: column;
    gap: 10px;
  }
  .wwd-compact-tab {
    width: 100%;
    justify-content: center;
  }
  .wwd-ctab-text {
    font-size: 0.9rem;
  }
  .wwd-ctab-content .row {
    flex-direction: column;
  }
  .wwd-cvisual-box {
    margin-bottom: 20px;
  }
  .wwd-cimg {
    max-height: 200px;
    object-fit: cover;
  }
  .wwd-ctitle {
    font-size: 1.2rem;
  }
  .wwd-cdesc {
    font-size: 0.9rem;
  }
  .wwd-cfeature {
    font-size: 0.85rem;
  }

  /* Engineering Accelerators */
  .steps-horizontal {
    flex-direction: column;
    gap: 30px;
  }
  .step {
    width: 100%;
    text-align: center;
  }
  .step-icon {
    margin: 0 auto 15px;
  }

  /* CTA Banner */
  .zi-cta-banner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 30px 20px;
  }
  .zi-cta-content h4 {
    font-size: 1.2rem;
  }
  .zi-cta-content p {
    font-size: 0.85rem;
  }

  /* Light CTA Section */
  .cta-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }
  .cta-left h2 {
    font-size: 1.4rem;
  }
  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .light-cta-btn {
    width: 100%;
    justify-content: center;
  }
  .light-profile-card {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  .light-profile-image img {
    width: 100%;
    height: 100%;
  }
  .light-profile-info h4 {
    font-size: 1rem;
  }
  .light-profile-info p {
    font-size: 0.8rem;
  }
}

/* ---------- 480px and below ---------- */
@media (max-width: 480px) {
  /* Hero */
  .hero-3 .hero-title {
    font-size: 1.5rem;
  }
  .hero-3 .hero-text {
    font-size: 0.8rem;
  }

  /* About */
  .geometric-approach .sec-title {
    font-size: 1.2rem;
  }
  .geometric-approach .sub-title {
    font-size: 0.8rem;
  }
  .geometric-approach .mb-20 {
    margin-bottom: 15px;
  }

  /* Focus Areas */
  .icon-categories-grid .title-area .sec-title {
    font-size: 1.2rem;
  }
  .icon-title {
    font-size: 1rem;
  }
  .icon-desc {
    font-size: 0.75rem;
  }

  /* What We Do */
  .wwd-compact-section .sec-title {
    font-size: 1.2rem;
  }
  .wwd-ctab-icon svg {
    width: 16px;
    height: 16px;
  }
  .wwd-ctab-text {
    font-size: 0.8rem;
  }
  .wwd-ctitle {
    font-size: 1rem;
  }
  .wwd-cimg {
    max-height: 150px;
  }
  .wwd-cfeature {
    font-size: 0.75rem;
  }

  /* Accelerators */
  .accelerators-horizontal .sec-title {
    font-size: 1.2rem;
  }
  .step-card h3 {
    font-size: 1rem;
  }
  .step-card p {
    font-size: 0.75rem;
  }

  /* CTA Banner */
  .zi-cta-content h4 {
    font-size: 1rem;
  }
  .zi-cta-button {
    font-size: 0.8rem;
    padding: 8px 15px;
  }

  /* Light CTA */
  .cta-left h2 {
    font-size: 1.2rem;
  }
  .light-cta-btn {
    font-size: 0.8rem;
  }
  .light-profile-info p {
    font-size: 0.7rem;
  }
}

/* ---------- 320px and below ---------- */
@media (max-width: 320px) {
  /* Hero */
  .hero-3 .hero-style3 {
    padding: 30px 15px;
  }
  .hero-3 .hero-title {
    font-size: 1.6rem;
  }
  .hero-3 .hero-text {
    font-size: 0.7rem;
  }

  /* About */
  .geometric-approach .sec-title {
    font-size: 1rem;
  }
  .geometric-approach p {
    font-size: 0.8rem;
  }
  .point-item {
    font-size: 0.75rem;
    padding: 2px 8px;
  }

  /* Focus Areas */
 
  .icon-title {
    font-size: 0.9rem;
  }
  .icon-desc {
    font-size: 0.7rem;
  }

  /* What We Do */
  .wwd-ctab-text {
    font-size: 0.7rem;
  }
  .wwd-cdesc {
    font-size: 0.8rem;
  }
  .wwd-cfeature {
    font-size: 0.7rem;
  }

  /* Accelerators */
  .step-icon svg {
    width: 32px;
    height: 32px;
  }
  .step-card h3 {
    font-size: 0.9rem;
  }
  .step-card p {
    font-size: 0.7rem;
  }

  /* CTA Banner */
  .zi-cta-banner {
    padding: 20px 15px;
  }
  .zi-cta-content p {
    font-size: 0.7rem;
  }

  /* Light CTA */
  .cta-left h2 {
    font-size: 1rem;
  }
  .light-cta-btn {
    font-size: 0.7rem;
  }
  .light-profile-info h4 {
    font-size: 0.9rem;
  }
  .light-profile-info p {
    font-size: 0.65rem;
  }
}




/* ---------- 480px and below ---------- */
@media (max-width: 480px) {
  .wwd-compact-tab {
    padding: 10px 12px;
  }

  .wwd-ctab-icon svg {
    width: 16px;
    height: 16px;
  }

  .wwd-ctab-text {
    font-size: 0.85rem;
  }

  .wwd-ctitle {
    font-size: 1.1rem;
  }

  .wwd-cimg {
    max-height: 180px;
  }

  .wwd-cdesc {
    font-size: 0.85rem;
  }

  .wwd-cfeature {
    padding: 4px 10px;
    font-size: 0.75rem;
  }

  .wwd-cfeat-text {
    font-size: 0.75rem;
  }
}

/* ---------- 320px and below ---------- */
@media (max-width: 320px) {
  .wwd-compact-tab {
    padding: 8px 10px;
  }

  .wwd-ctab-text {
    font-size: 0.75rem;
  }

  .wwd-ctitle {
    font-size: 1rem;
  }

  .wwd-cimg {
    max-height: 150px;
  }

  .wwd-cdesc {
    font-size: 0.8rem;
  }

  .wwd-cfeature {
    padding: 3px 8px;
    font-size: 0.7rem;
  }

  .wwd-cfeat-text {
    font-size: 0.7rem;
  }

  /* Adjust spacing */
  .wwd-compact-tabs-nav {
    margin-bottom: 20px;
  }

  .wwd-ccontent-box {
    margin-top: 0;
  }
}