@media screen and (max-width : 992px) {
    h3 {
        font-size: 1.2rem;
    }

    .nav-toggle {
        display: block;
        margin-right: 20px;
    }

    .main-nav {
        overflow: initial;
    }

    .nav-links {
        display: none;
        /* position: absolute;
background-color: white;
left: -100%;
top: 100%;
width: 100%;
padding-block: 20px; */
    }

    /* .nav-links.active {
  left: 0;
  }

  .nav-links ul{
    flex-direction: column;
  } */
    .examples-area {
        gap: 20px;
    }

    .examples-card {
        width: calc(50% - 10px);
        height: 180px;
    }

    .cta-section {
        padding-block: 100px;
    }

    .logos {
        gap: 10px;
    }

    .features-area {
        gap: 20px;
    }

    .big-feature-section {
        flex-wrap: wrap;
    }

    .feature-img img {
        width: 500px;
    }

    .feature-right {
        width: 100%;
        padding: 10px;
    }

}

@media screen and (max-width:775px) {
    .header-section {
        flex-direction: column-reverse;
    }

    .header-section .header-left {
        max-width: 100vw;
        text-align: center;
    }

    .primary-button {
        width: 100%;
        text-align: center;
    }

    .features-card {
        min-width: calc(50% - 10px);

    }

    .big-feature-section {
        flex-direction: row-reverse;
    }

    .footer-container {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .link-column {
        align-items: center;
    }

    .subfooter-container {
        flex-wrap: wrap;


    }

    .subfooter-container .p {
        width: 100%;
        /* background-color: aquamarine; */
        /* justify-content: space-evenly; */
        gap: 10px;
        /* display: block; */
        text-align: center;

    }

    .p .l {
        width: 31%;
        gap: 10px;
        text-align: center;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: .9rem;
    }

    .feature-img img {
        width: 100%;
    }
}

@media screen and (max-width: 479px) {
    :root {
        --padding-inline-section: 10px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }


    p {
        font-size: 1rem;
    }

    .features-card {
        min-width: 100%;
    }

    .examples-card {
        width: 100%;
    }

    .banner-text {
        font-size: 3vw;
    }


}