/* =========================
   📱 MOBILE <= 768px
========================= */

@media (max-width: 768px){

  /* NAVBAR */
  .navbar{
    padding: 5px 0 !important;
    min-height: 65px !important;
  }

  /* LOGO IMAGE */
  .logo-img{
    width: 45px !important;
    height: 45px !important;
  }

  /* LOGO TEXT */
  .logo{
    font-size: 18px !important;
    gap: 5px !important;
  }

  /* ICON */
  .logo i{
    font-size: 15px !important;
  }

  /* NAV LINKS */
  .nav-link{
    font-size: 15px !important;
    padding: 6px 0 !important;
  }

  /* TOGGLER */
  .navbar-toggler{
    padding: 4px 8px !important;
    font-size: 13px !important;
  }

  /* HERO */
  .hero{
    min-height: 60vh !important;
    padding: 100px 20px 50px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* HERO HEADING */
  .hero h1{
    font-size: 38px !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
  }

  /* HERO TEXT */
  .hero p{
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* SECTION */
  .section{
    padding: 50px 15px !important;
  }

  /* CARDS */
  .card{
    margin-bottom: 20px !important;
    border-radius: 15px !important;
    padding: 25px 20px !important;
  }

  /* SECTION HEADING */
  .section h2{
    font-size: 30px !important;
  }

  /* CONTAINER */
  .container{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

}

@media (max-width: 350px){

  .navbar{
    padding: 2px 0 !important;
    min-height: 55px !important;
  }

  .logo-img{
    width: 38px !important;
    height: 38px !important;
  }

  .logo{
    font-size: 15px !important;
    gap: 3px !important;
  }

  .logo i{
    font-size: 12px !important;
  }

  .nav-link{
    font-size: 13px !important;
  }

  .navbar-toggler{
    padding: 2px 5px !important;
    font-size: 11px !important;
  }

  .hero h1{
    font-size: 30px !important;
  }

  .hero p{
    font-size: 14px !important;
  }

}


/* =========================
   💻 DESKTOP >= 769px
========================= */

@media (min-width: 769px){

  .hero{
    min-height: 100vh !important;
  }

}
/* EXTRA SMALL DEVICES */
@media screen and (max-width: 350px){

  .navbar{
    padding: 0px !important;
    min-height: 50px !important;
  }

  .navbar .container{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .logo-img{
    width: 32px !important;
    height: 32px !important;
  }

  .logo{
    font-size: 13px !important;
    gap: 2px !important;
  }

  .logo i{
    font-size: 11px !important;
  }

  .navbar-toggler{
    padding: 1px 4px !important;
  }

  .navbar-toggler-icon{
    width: 18px !important;
    height: 18px !important;
  }

  .nav-link{
    font-size: 12px !important;
    padding: 3px 0 !important;
  }

}