@import url("styles.css");

/* ===== CONTACT =====*/
.contact__input {
    width: 100%;
    font-size: var(--normal-font-size);
    font-weight: var(--font-semi);
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1.5px solid var(--second-color);
    outline: none;
    margin-bottom: var(--mb-4);
  }
  .contact__button {
    display: block;
    border: none;
    outline: none;
    font-size: var(--normal-font-size);
    cursor: pointer;
    margin-left: auto;
  }
/* ===== CONTACT INFORMATION ===== */
.contact__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Individual Contact Items */
.cs-item {
  display: flex;
  align-items: center;
  background: #f9f9f9; /* Light background */
  padding: 12px;
  border-radius: 8px;
  transition: 0.3s ease-in-out;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.cs-item:hover {
  background: #eaeaea;
  transform: scale(1.02);
}

/* Icons Styling */
.cs-item .icon {
  font-size: 1.5rem;
  color: var(--first-color); /* Use your theme color */
  margin-right: 15px;
}

/* Text Styling */
.cs-item .text {
  display: flex;
  flex-direction: column;
}

.placeHolder {
  font-size: 14px;
  font-weight: bold;
  color: var(--title-color);
}

.info {
  font-size: 16px;
  color: var(--text-color);
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact__info {
      align-items: center;
      text-align: center;
  }

  .cs-item {
      flex-direction: column;
      text-align: center;
      padding: 15px;
  }

  .cs-item .icon {
      margin-bottom: 10px;
  }
}