@media (max-width: 768px) {
  .info-title {
    font-size: 26px;
  }

  .info-subtitle {
    font-size: 14px;
  }

  .info-meta {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .takeaway-card {
    padding: 30px 20px;
  }

  .takeaway-content {
    flex-direction: column;
    text-align: center;
  }

  .takeaway-text h3 {
    font-size: 20px;
  }

  .takeaway-text p {
    font-size: 15px;
  }
}

@media (max-width: 1200px) {
  .benefit-card {
    max-width: 100%; 
    padding: 20px;   
  }
}


@media (max-width: 991px) {
  .benefits-section {
    padding: 60px 0;
  }

  .benefits-main-title {
    font-size: 30px;
    margin-bottom: 40px;
  }

  .benefit-card {
    max-height: none; 
    height: auto;
    min-height: 214px;
    margin-bottom: 20px;
  }
}


@media (max-width: 767px) {
  .benefits-section {
    padding: 40px 0;
  }

  .benefits-main-title {
    font-size: 26px;
    margin-bottom: 30px;
  }

  .benefit-card {
    max-width: 100%;
    padding: 25px 20px;
   
    box-shadow: 0px 2px 8px 0px #00000010; 
  }

  .benefit-stat {
    font-size: 28px;
  }

  .benefit-label {
    margin-bottom: 10px;
  }
}

@media (max-width: 1200px) {
  .economic-card {
    max-width: 100%;
    height: auto;
    max-height: none;
    padding: 30px;
  }
}

@media (max-width: 991px) {
  .economic-section {
    padding: 60px 0;
  }

  .economic-main-title {
    font-size: 32px;
    margin-bottom: 40px;
  }

  .eco-desc {
    max-width: 100%;
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .economic-section {
    padding: 40px 0;
  }

  .economic-main-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .economic-card {
    padding: 25px 20px;
  }

  .eco-title {
    font-size: 20px;
  }

  .eco-desc {
    font-size: 15px;
  }

  .eco-list {
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .eco-item {
    flex-direction: row;
    align-items: center;
  }

  .eco-label {
    font-size: 14px;
  }

  .eco-value {
    font-size: 16px;
  }
}

@media (max-width: 1200px) {
  .essential-banner {
    max-width: 95%;
    height: auto;
    padding: 60px 30px;
  }
}

@media (max-width: 991px) {
  .essential-title {
    font-size: 32px;
  }

  .essential-subtitle {
    font-size: 15px;
    max-width: 90%;
  }
}

@media (max-width: 767px) {
  .essential-section {
    padding: 40px 0;
  }

  .essential-banner {
    padding: 50px 20px;
  }

  .essential-title {
    font-size: 26px;
    line-height: 1.3;
  }

  .essential-subtitle {
    font-size: 14px;
    opacity: 0.8;
  }
}

@media (max-width: 480px) {
  .essential-title {
    font-size: 22px;
  }
  
  .essential-banner {
    padding: 40px 15px;
  }
}


@media (max-width: 1200px) {
  .infra-img, 
  .infra-cards-container, 
  .infra-card {
    max-width: 100%;
  }

  .infra-card {
    max-height: none;
    height: auto;
  }
}

@media (max-width: 991px) {
  .infrastructure-section {
    padding: 60px 0;
  }

  .infra-main-title {
    font-size: 32px;
    margin-bottom: 40px;
    text-align: center;
  }

  .infra-image-wrapper {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
  }

  .infra-img {
    max-height: 450px;
    border-radius: 4px;
  }

  .infra-card {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .infrastructure-section {
    padding: 40px 0;
  }

  .infra-main-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .infra-img {
    max-height: 350px;
  }

  .infra-card-title {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .infra-list li {
    font-size: 14px;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .infra-img {
    max-height: 250px;
  }

  .infra-card {
    padding: 20px;
  }

  .infra-card-title {
    font-size: 18px;
  }
}


/* Tablet and Small Desktops */
@media (max-width: 1200px) {
  .insights-card {
    max-width: 95%;
    padding: 40px 30px;
  }
}

/* Tablets and Large Phones */
@media (max-width: 991px) {
  .insights-section {
    padding: 60px 0;
  }

  .insights-main-title {
    font-size: 32px;
    margin-bottom: 40px;
  }

  .chart-container {
    height: 350px; /* Reducing height to fit tablet screens better */
  }
}

/* Mobile Phones */
@media (max-width: 767px) {
  .insights-section {
    padding: 40px 0;
  }

  .insights-main-title {
    font-size: 26px;
    margin-bottom: 30px;
  }

  .insights-card {
    padding: 30px 20px;
  }

  .chart-title {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .chart-container {
    height: 300px; /* Compact height for mobile */
  }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
  .insights-main-title {
    font-size: 22px;
  }

  .chart-container {
    height: 250px;
  }
}

@media (max-width: 1200px) {
  .future-card {
    max-width: 100%;
    padding: 40px 25px;
  }
}

@media (max-width: 991px) {
  .future-main-title {
    font-size: 32px;
    margin-bottom: 40px;
    text-align: center;
  }

  .future-card {
    padding: 30px 20px;
    min-height: 140px;
  }

  .future-card-title {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .future-models-section {
    padding: 40px 0;
  }

  .future-main-title {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .future-card {
    text-align: center;
    margin: 0 auto;
  }
  
  .future-card-desc {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .future-main-title {
    font-size: 24px;
  }

  .future-card {
    padding: 25px 15px;
  }
}

@media (max-width: 1200px) {
  .forward-card {
    max-width: 95%;
    max-height: none;
    height: auto;
    padding: 40px 30px;
  }
}

@media (max-width: 991px) {
  .forward-section {
    padding: 60px 0;
  }

  .forward-title {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .forward-text {
    font-size: 15px;
    line-height: 1.6;
  }
}

@media (max-width: 767px) {
  .forward-section {
    padding: 40px 0;
  }

  .forward-card {
    padding: 30px 20px;
    text-align: center;
  }

  .forward-title {
    font-size: 24px;
  }

  .forward-text {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .forward-link {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .forward-title {
    font-size: 22px;
  }
}




@media (max-width: 992px) {
  .insight-image {
    max-height: 250px; 
  }
}

@media (max-width: 768px) {
  .related-insights {
    padding: 40px 20px; 
  }

  .section-title {
    font-size: 28px; 
    margin-bottom: 25px;
  }

  .insight-image {
    max-width: 100%; 
    max-height: none; 
    aspect-ratio: 16 / 9; 
  }

  .insight-header {
    font-size: 16px; 
    margin-bottom: 8px;
  }

  .insight-text {
    font-size: 14px;
    line-height: 1.5;
  }
  
  
  .insight-card {
    margin-bottom: 30px;
  }
}