@media only screen and (max-width: 992px) {
    .nav-toggle
    {
        display: block;
        margin-right: 20px;
        font-size: 30px;

    }
    .nav-links{
        position: absolute;
        background-color: #fff;
        top: 100%;
        width: 100%;
        padding-block: 20px;
        left: -100%;
        transition: 0.2s ease-in-out;

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

    }

    .nav-links ul
    {
        flex-direction: column;
    }
    .main-nav
    {
        overflow: initial;
    }
    .example-card
    {
        width:calc( 50% - 10px) ;
        height: 180px;
    }
    .examplle-area
    {
        gap: 20px;
    }

    .cta-section
     {
        padding: 80px;
    }
   h3
   {
    font-size: 1.2rem;
   }


}

@media only screen and (max-width: 767px) {

    .header-sec
    {
        flex-direction: column-reverse;
    }
    .header-left
    {
        width: 100%;
        text-align: center;
    }
    .primary-btn
    {
        width: 100%;
    }
    .feature-card
    {
        min-width:calc(50% - 10px);
    }
    .big-feature-container,#secound-big-feature
    {
        flex-direction: column;
    }
    .footer-container
{
   flex-direction: column;
   gap: 40px;
   text-align: center;
   align-items: center;
}
.link-column
{
 align-items: stretch;
}

}

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

}
h1{
    font-size: 2rem;
}
h2{
    font-size: 1.5rem;
}
h3{
    font-size: 1.5rem;
}
p
{
    font-size: 1rem;
}
.feature-card
    {
        min-width:100%;
    }
    .example-card
    {
        min-width:100%;
    }

}