@import url(../main.css);

/* ==================================================
   TABLET (Bootstrap md)
   768px → 1199px
   ================================================== */



  /* ---------- Typography ---------- */

  :root{
    --font-size-base: 15px;

    --fs-h1: 2.2rem;
    --fs-h2: 1.9rem;
    --fs-h3: 1.6rem;
    --fs-h4: 1.35rem;
    --fs-h5: 1.15rem;
    --fs-h6: 1rem;

    --fs-body: 0.95rem;
    --fs-sm: 0.85rem;
  }

  /* ---------- Header ---------- */

  .top-of-nav{
    gap: 6rem;
    height: 45px;
  }

  .top-of-nav a{
    font-size: 0.85rem;
  }

  .my-navbar{
    height: 60px;
    padding-inline: 2rem;
  }

  .navbar-brand{
    font-size: 1.15rem;
  }

  /* ---------- Mobile Drawer ---------- */

  .mobile-menu{
    width: 320px;
  }

  .mobile-nav-links li a{
    height: 62px;
    font-size: 1rem;
  }

  /* ---------- Search ---------- */

  .search-area{
    margin-top: 2rem;
    padding-inline: 2rem;
  }

  .search-input{
    gap: 1rem;
  }

  .big-input-division{
    max-width: 650px;
  }

  .accurate-search-input{
    display: flex;
  }

  .search-inputs{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
  }

  .accurate-inputs{
    width: 330px;
  }

  .accurate-inputs input{
    width: 90px;
  }

  /* ---------- Approximate Search ---------- */

  .approximate-stuff{
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
  }

  .accurate-search-boxes{
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
  }

  .approximate-inputs{
    max-width: 360px;
    height: 78px;
  }

  /* ---------- Product Section ---------- */

  .best-products-row{
    gap: 2rem;
    justify-content: center;
  }

  .best-product-container{
    width: 260px;
    height: 260px;
  }

  .best-product-detail{
    width: 240px;
    height: 62px;
    top: 222px;
  }

  .best-product-detail p{
    font-size: 0.9rem;
  }

  /* ---------- Brand ---------- */

  .brand-section{
    padding: 2rem;
  }

  .brand-groups{
    max-width: 700px;

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

    gap: 1.5rem;
  }

  /* ---------- Blog ---------- */

  .name-and-controll-section{
    gap: 8rem;
  }

  .cards-sectoins{
    min-height: 620px;
    margin-top: 3rem;
  }

  .blog-card{
    width: 260px;
    margin-right: 2rem;
  }

  .blog-card-img-frame{
    height: 200px;
  }

  .handle-frame-section{
    width: 50px;
    height: 50px;
  }

  .handle-frame-section i{
    font-size: 34px;
  }