/* ================= GLOBAL RESPONSIVE ================= */

@media(max-width:1200px){
  .container{
    width:95%;
  }
}

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

@media(max-width:900px){

  /* HEADER */
  .header-flex{
    flex-direction:column;
    align-items:flex-start;
  }

  .search{
    width:100%;
  }

  /* HERO */
  .hero-flex{
    flex-direction:column;
    text-align:center;
    gap:30px;
  }

  /* GRID */
  .grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* CALCULATOR */
  .calc-container{
    flex-direction:column;
  }

  /* RELATED */
  .related-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

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

@media(max-width:600px){

  /* HERO */
  .hero h1{
    font-size:1.8rem;
  }

  .hero p{
    font-size:0.95rem;
  }

  /* GRID */
  .grid{
    grid-template-columns:1fr;
  }

  /* BUTTON */
  .calc-btn{
    padding:10px;
    font-size:14px;
  }

  /* RESULT */
  .result{
    font-size:1.5rem;
  }

  /* RELATED */
  .related-grid{
    grid-template-columns:1fr;
  }

  /* VISUAL BOX */
  .visual-box{
    font-size:12px;
    padding:8px;
  }

}

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

@media(max-width:400px){

  .hero h1{
    font-size:1.5rem;
  }

  .logo{
    font-size:1.2rem;
  }

  .footer-top{
    gap:15px;
    font-size:13px;
  }

}