/* =====================
   RESET
===================== */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

/* =====================
   BODY
===================== */
body{
  zoom: 1;
  font-family: "Segoe UI", Arial, sans-serif;
  background:#f7f9fc;
  color:#222;
}

/* =====================
   HEADER
===================== */
.header{

  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 280px;
  background:#fff;
  border-bottom:1px solid #ddd;
}

/* LOGO */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo img{
  width:48px;
}

.logo h1{
  font-size:18px;
  margin:0;
}

.logo p{
  font-size:13px;
  color:#666;
}

/* MENU */
.menu{
  display:flex;
  gap:22px;
}

.menu a{
  text-decoration:none;
  font-weight:600;
  color:#000;
  font-size:15px;
}

.menu a:hover{
  color:#0056b3;
}

/* =====================
   GRID
===================== */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

/* =====================
   CARD
===================== */
.card{
  background:#fff;
  border-radius:18px;
  padding:25px;
  text-align:center;
  text-decoration:none;
  color:#000;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  transition:0.3s;
}

.card:hover{
  transform:translateY(-6px);
}

.card img{
  width:100%;
  height:220px;
  object-fit:contain;
  background:#fff;
}

.card span{
  display:block;
  margin-top:12px;
  font-weight:700;
}

/* =====================
   FOOTER
===================== */
.footer{
  text-align:center;
  padding:20px;
  color:#666;
  font-size:14px;
}

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

/* Planshet */
@media (max-width:1024px){
  .menu{
    display:none; /* MENYU YASHIRILADI */
  }

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

/* Telefon */
@media (max-width:600px){
  .header{
    padding:12px 20px;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .card img{
    height:200px;
  }
}