@media(max-width:900px){
.nav-toggle{display:block}.nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:#07110f;padding:20px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--border)}
.nav-links.open{display:flex}.grid-3,.grid-4,.footer-grid{grid-template-columns:1fr}
section{padding:70px 0}.hero-inner{padding:60px 0}
}

/* =========================================
   WHY HYDROGEN RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .why-hydrogen-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .why-hydrogen-section {
        padding: 80px 0 90px;
    }

    .why-hydrogen-heading {
        margin-bottom: 40px;
    }

    .why-hydrogen-heading h2 {
        font-size: 34px;
    }

    .why-hydrogen-heading p {
        font-size: 17px;
    }

    .why-hydrogen-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .why-hydrogen-section {
        padding: 65px 0 70px;
    }

    .why-hydrogen-heading {
        margin-bottom: 30px;
    }

    .section-eyebrow {
        font-size: 12px;
        letter-spacing: 2.5px;
    }

    .why-hydrogen-heading h2 {
        font-size: 30px;
    }

    .why-hydrogen-heading p {
        font-size: 16px;
    }

    .why-hydrogen-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hydrogen-feature-card {
        height: auto;
        min-height: 260px;
    }

}

/* =========================================
   SOLUTIONS RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .solutions-section {
        padding: 80px 0;
    }

    .solutions-heading {
        margin-bottom: 45px;
    }

    .solutions-heading h2 {
        font-size: 34px;
    }

    .solution-row {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
        margin-bottom: 70px;
    }

    .solution-image img {
        height: 300px;
    }

    .solution-content h3 {
        font-size: 22px;
    }

}


/* =========================================
   TABLET / MOBILE
========================================= */

@media (max-width: 767px) {

    .solutions-section {
        padding: 60px 0;
    }

    .solutions-heading {
        margin-bottom: 35px;
    }

    .section-label {
        font-size:14px;
        letter-spacing: 3px;
    }

    .solutions-heading h2 {
        font-size: 30px;
    }

    .solutions-heading p {
        font-size: 14px;
    }


    .solution-row,
    .solution-row-reverse {
        display: flex;
        flex-direction: column;
        gap: 30px;

        margin-bottom: 60px;
    }

    .solution-row-reverse .solution-content,
    .solution-row-reverse .solution-image {
        order: initial;
    }


    .solution-content {
        width: 100%;
    }

    .solution-content h3 {
        font-size: 23px;
    }


    .solution-image {
        width: 100%;
    }

    .solution-image img {
        width: 100%;
        height: 280px;
    }


    .solution-features {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .solution-stats {
        grid-template-columns: 1fr;
    }

    .solution-stat {
        min-height: auto;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .solutions-section {
        padding: 50px 0;
    }

    .solutions-heading h2 {
        font-size: 27px;
    }

    .solution-content h3 {
        font-size: 21px;
    }

    .solution-image img {
        height: 230px;
    }

    .solution-btn {
        width: auto;
        min-height: 42px;
    }

}

/* =========================================
   TECHNOLOGY RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .technology-section {
        padding: 75px 0;
    }

    .technology-container {
        max-width: 90%;
    }

    .technology-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    .technology-card:nth-child(3n) {
        border-right: 1px solid rgba(166, 190, 220, 0.35);
    }

    .technology-card:nth-child(2n) {
        border-right: none;
    }


    .technology-card:nth-child(n+4) {
        border-bottom: 1px solid rgba(166, 190, 220, 0.35);
    }

    .technology-card:nth-child(n+5) {
        border-bottom: none;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .technology-section {
        padding: 60px 0;
    }

    .technology-container {
        max-width: 90%;
    }


    .technology-heading {
        margin-bottom: 28px;
    }


    .technology-heading h2 {
        font-size: 24px;
    }


    .technology-heading p {
        font-size: 12px;
    }


    .technology-grid {
        grid-template-columns: 1fr;
    }


    .technology-card,
    .technology-card:nth-child(3n),
    .technology-card:nth-child(2n) {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid rgba(166, 190, 220, 0.35);
    }


    .technology-card:last-child {
        border-bottom: none;
    }


    .technology-card {
        padding: 24px 20px;
    }


    .technology-card h3 {
        font-size: 13px;
    }


    .technology-card p {
        max-width: none;

        font-size: 12px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .technology-section {
        padding: 50px 0;
    }

    .technology-heading h2 {
        font-size: 22px;
    }

    .technology-label {
        font-size: 11px;
        letter-spacing: 2.5px;
    }

}