@media screen and (max-width: 991px) 
{
    h3
    {
        font-size: 1.2rem;
    }
   
    .nav-toggle
    {
       display: block;
       margin-right: 20px;
    }       
    
    .dark
{
    /* --primary-text-color: #0f8ded;
    --secondary-text-color: #91c1ee;
    --accent-color: #088cf1;
    --accent-color-dark: #0e8ced; */
    --primary-text-color: #fff;
    --secondary-text-color: #ddd;
    background-color:#111;
    /* --primary-text-color: #d9d2c3;
    --secondary-text-color: #888171;
    background-color:#01061d; */
    /* --primary-text-color: #ffffff;
    --secondary-text-color: #CACACA;
    background-color:#111; */
}

    .main-nav
    {
      overflow: initial;
    }

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

    .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: 80px;
    }
}

@media screen and (max-width: 767px) 
{
   .primary-button
   {
      width: 100%;
   }

   .header-section
   {
      flex-direction: column-reverse;
   }   

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

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

   .big-feature-container, #second-big-feature
   {
      flex-direction: column;
   }

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

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

@media 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;
   }

   .features-card
   {
      /* flex-direction: column; */
      min-width: 100%;
      gap: 0px;
      /* min-width: 50%; */
   }

   .examples-card
   {
      width: 100%;
      gap: 0px;
   }

}