@media only screen and (max-width: 1102px) {
    .hero1 h1 {
    font-size: 25px;
    line-height: 40px ;
    }
    
}

@media only screen and (max-width: 919px)  {
    .hero1 h1 {
    font-size: 20px;
    line-height: 30px ;
    }

    .hero .firstp {
        font-size: 10px;
    }
}

@media only screen and (max-width: 735px) {
    .hero {
        flex-direction: column;
        gap: 30px;
     

    }

    .hero .hero1 {
        width: 100%;
        gap: 10px;
                align-items: center;
        text-align: center;
    }
    .hero1 h1 {
    font-size: 23px;
    line-height: 30px ;

    }

    .hero .hero2 {
        width: 100%;
    }

    header section .headerlink {
        display: none;
    }

    .footer-disclaimer {
        padding-bottom: 100px;
    }

    nav {
        display: flex;
    }

    .trusted {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 40px;
    }

    .trusted div {
        width: 90%;
        margin: auto;
    }
     .trusted div img {
        width: 25%;
     }

 
}

@media only screen and (max-width: 340px) {
    .lang-select__btn span {
        display: none;
    }

    
}



/* ==========================================================================
   Mobile Universe — responsive.css
   Breakpoints: 1200px / 992px / 768px / 480px
   Base styles in style.css are written for desktop; these queries adapt
   the layout down to smaller viewports.
   ========================================================================== */

/* ---------------- 1200px ---------------- */
@media (max-width: 1200px) {
  :root { --gutter: 28px; }

  .features-grid { grid-template-columns: 1fr 1fr; }
  .feature-col:first-child { grid-column: 1 / -1; }
  .feature-col:first-child .feature-card { min-height: 300px; }
}

/* ---------------- 992px ---------------- */
@media (max-width: 992px) {
  .solutions-grid { grid-template-columns: 1fr; }
  .stack-col { flex-direction: row; }
  .stack-card { min-height: 260px; }

  .specs-grid { grid-template-columns: 1fr; }
  .battery-card { padding-bottom: 60px; }
  .battery-media { position: static; width: 60%; margin-top: 24px; transform: none; }
  .battery-nav { position: static; margin-top: 20px; }
}

/* ---------------- 768px ---------------- */
@media (max-width: 768px) {
  /* Nav: collapse to hamburger */
  .nav-left .nav-link:not(.dropdown-link),
  .nav-right .contact-link { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-left { gap: 12px; }
  .nav-logo { font-size: 10px; }

  .herotwo .herotwo-heading { font-size: clamp(32px, 9vw, 44px);    letter-spacing: -0.03em;}

  .tag-float, .tag-otg { font-size: 12px; padding: 6px 12px; }
  .herotwo .herotwo-arrow-btn { left: auto; right: clamp(16px, 3vw, 40px); bottom: calc(clamp(16px, 3vw, 40px) + 90px); }
  .herotwo .herotwo-caption { flex-direction: column; align-items: flex-start; gap: 10px; }

  .features-grid { grid-template-columns: 1fr; }
  .feature-col:first-child { grid-column: auto; }
  .feature-card, .image-card img { min-height: 300px; }

  .stack-col { flex-direction: column; }

  .footer-bottom { flex-direction: column; gap: 18px; }
  .footer-heading { margin-bottom: 40px; }
}

/* ---------------- 480px ---------------- */
@media (max-width: 480px) {
  .nav-inner { padding: 14px 18px; }


  .herotwo .herotwo-heading { font-size: 30px; }
  .tag-sustainable, .tag-portable {  width: fit-content; }
  .tag-otg { bottom: px; }




  .solar-copy h3 { font-size: 24px; }
  .icon-circle { width: 60px; height: 60px; font-size: 12px; }

  .battery-copy h3 { font-size: 26px; }
  .charge-card h3 { font-size: 28px; }

  .chip-row { flex-wrap: wrap; }

  .footer-heading { font-size: 26px; }
}







@media (max-width: 992px) {


  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card:last-child { grid-column: span 2; max-width: 340px; margin: 0 auto; }
      .steps  .container {
    width: 90%;
  }
  .steps-grid { grid-template-columns: 1fr; gap: 40px; grid-auto-flow:dense; }
  .steps-phone { order: -1; }
  .steps-phone {justify-content: center;}
  .phone-frame--tall { max-width: 240px; }

  .get-grid { grid-template-columns: 1fr; text-align: center; }
  .get-text .section-sub { margin-left: auto; margin-right: auto; text-align: center; }
  .store-buttons { justify-content: center; }
  .get-phones { height: 280px; margin-bottom: 10px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: span 2; }
}


@media (max-width: 768px) {


  .feature-grid { grid-template-columns: 1fr; }
  .feature-card:last-child { grid-column: span 1; max-width: 100%; }

  .section-title { font-size: 1.7rem; }
  .steps {
    margin-top: 0px;
    margin-bottom: 0;
  }

  .steps-text h2 { font-size: 1.7rem; }
  .get-text h2 { font-size: 1.7rem; }
  .get { padding: 50px 24px; }

  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-brand { grid-column: span 1; }
  .footer-brand p { margin: 0 auto; }
  .footer-col ul { align-items: center; }
}

@media (max-width: 576px) {

  .step-list li { gap: 12px; }

  .get-phones { height: 220px; }
  .phone-frame--float { width: 150px; }

  .store-buttons { flex-direction: column; }
  .store-btn { justify-content: center; }
}