/*
=====================================
 LIST OF ADS PAGE
=====================================
*/

.list-ads-page {
  width: 100%;
}

/*
=====================================
 AD RESULTS GRID
=====================================
*/

.ads-grid {
  display: grid;

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

  gap: 20px;
}

.ad-message {
  background: #0f1835;

  padding: 20px;

  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.05);

  display: flex;

  flex-direction: column;

  gap: 10px;

  transition: 0.25s;
}

.ad-message:hover {
  transform: translateY(-4px);

  border-color: rgba(220, 38, 38, 0.35);

  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.15);
}

.ad-message p {
  color: #e5e7eb;

  font-size: 14px;
}

.ad-message strong {
  color: white;
}

/*
=====================================
 ACTION BUTTONS
=====================================
*/

.contact-info {
  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 12px;
}

.contact-info a {
  flex: 1;

  min-width: 90px;

  text-align: center;

  padding: 10px;

  border-radius: 10px;

  background: #111933;

  color: #cbd5e1;

  text-decoration: none;

  font-size: 13px;

  border: 1px solid rgba(255, 255, 255, 0.05);

  transition: 0.2s;
}

.contact-info a:hover {
  background: #dc2626;

  color: white;
}

.contact-info .red-bg-2 {
  background: #dc2626;

  color: white;
}

/*
=====================================
 PAGINATION
=====================================
*/

.pagination {
  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;
}

.pagination a {
  padding: 9px 14px;

  border-radius: 10px;

  background: #0f1835;

  color: #cbd5e1;

  text-decoration: none;

  transition: 0.2s;
}

.pagination a:hover {
  background: #dc2626;

  color: white;
}

.pagination .active {
  background: #dc2626;

  color: white;
}

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

@media (max-width: 900px) {
  .ads-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .contact-info {
    flex-direction: column;
  }

  .contact-info a {
    width: 100%;
  }
}