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

@media(max-width:1200px){

  .hero-content h1{

    font-size:42px;

  }


  .dashboard-preview{

    width:420px;

  }


  .features-grid{

    grid-template-columns:
    repeat(2,1fr);

  }


  .pricing-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

}

/* Mobile Navbar */

@media(
  max-width:768px
){

  .nav-links{

    display:none;

  }


  .menu-toggle{

    display:block;

    cursor:pointer;

  }

}

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

@media(max-width:992px){

  nav{

    display:none;

  }


  .hero-section{

    flex-direction:column;

    text-align:center;

    gap:40px;

  }


  .hero-buttons{

    justify-content:center;

  }


  .dashboard-preview{

    width:100%;

    max-width:500px;

  }


  .stats-section{

    flex-wrap:wrap;

  }


  .contact-page{

    grid-template-columns:
    1fr;

  }


  .login-grid{

    grid-template-columns:
    1fr;

  }

}



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

@media(max-width:768px){

  .navbar{

    padding:15px 20px;

  }


  .logo-box img{

    width:140px;

  }


  .nav-right{

    gap:6px;

  }


  #langBtn{

    font-size:13px;

    padding:8px 10px;

  }


  .login-btn,

  .demo-btn{

    font-size:13px;

    padding:8px 12px;

  }



  /* Hero */

  .hero-section{

    padding:50px 20px;

  }


  .hero-content h1{

    font-size:32px;

    line-height:1.3;

  }


  .hero-content p{

    font-size:16px;

  }


  .hero-buttons{

    flex-direction:column;

  }


  .dashboard-preview{

    padding:15px;

  }



  /* Banner */

  .page-banner{

    padding:70px 20px;

  }


  .page-banner h1{

    font-size:32px;

  }



  /* Stats */

  .stats-section{

    flex-direction:column;

    align-items:center;

  }


  .stat-card{

    width:100%;

    max-width:300px;

    text-align:center;

  }



  /* Features */

  .features-grid{

    grid-template-columns:
    1fr;

  }



  /* Pricing */

  .pricing-grid{

    grid-template-columns:
    1fr;

  }



  /* Login */

  .login-grid{

    grid-template-columns:
    1fr;

  }



  /* Footer */

@media(max-width:768px){

  .footer-top h2{

    font-size:32px;

  }


  .footer-links{

    grid-template-columns:
    1fr;

  }


  .footer-bottom{

    flex-direction:column;

    gap:20px;

  }

}



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

@media(max-width:480px){

  .hero-content h1{

    font-size:26px;

  }


  .hero-content p{

    font-size:15px;

  }


  .primary-btn,

  .secondary-btn,

  .demo-btn{

    width:100%;

    text-align:center;

  }


  .contact-form-box input,

  .contact-form-box textarea{

    font-size:14px;

  }

}