/* Global Reset and Font Import */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

/* Styling the Body */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  min-height: 100vh;
  background: #5372f0;
}

/* Main Container Styles */
.container {
  max-width: 100%;
  width: 90%;
  margin: 0 auto;
  box-sizing: border-box; /* Ensure padding doesn't affect overall width */
  padding: 1rem;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.474);
  box-sizing: border-box;
}

/* Wrapper Styles */
.wrapper {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding-bottom: 5px;
}

/* Text Input Areas */
.wrapper .text-input {
  display: flex;
  border-bottom: 1px solid #ccc;
}

/* Output Text Area Styling */
.text-input .to-text {
  border-radius: 0px;
  border-left: 1px solid #ccc;
}

/* Textareas Styling */
.text-input textarea {
  height: 250px;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: none;
  font-size: 16px; /* Adjust font size */
  padding: 10px;
  box-sizing: border-box;
}

/* Placeholder Color */
.text-input textarea::placeholder {
  color: #b7b6b6;
}

/* Controls Styling */
.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Add space between dropdowns and swap button */
  margin: 10px 0; /* Optional: Add margin for better spacing */
  gap: 15px;
}

.controls,
li,
.icons,
.icons i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2.5px;
}

/* Dropdown and Icon Styles */
.controls .row .icons i {
  width: 30px;
  color: #939393;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease;
  transition: color 0.3s ease;
  margin-left: 10px;
}

.controls .row .icons i:hover {
    color: #777777;
}
.controls .exchange {
  color: #939393;
  cursor: pointer;
  font-size: 16px;
  transition: transform 0.2s ease;
  transition: color 0.3s ease;
}

/* Dropdown and buttons */
.controls select,
.controls button {
  width: 100%; /* Full width on smaller screens */
  flex: 1; /* Ensure the elements scale properly */
  font-size: 16px;
  margin: 8px 0;
  padding: 8px;
  box-sizing: border-box;
}

.container .exchange:hover {
    color: #777777;
}

/* Button Styling */
.container button {
  width: 100%;
  padding: 12px 16px;
  border: none;
  color: #fff;
  cursor: pointer;
  margin: 8px 0;
  font-size: 16px;
  border-radius: 5px;
  background: #5372f0;
  transition: background 0.3s ease;
}

.container button:hover {
    background: #4965d6;
}



/* Responsive Adjustments */
/* Media query for small screens */
@media (max-width: 480px) {
  .container {
    padding: 0.5rem;
  }

  .text-input textarea {
    font-size: 14px; /* Smaller font size */
  }

  .controls select,
  .controls button {
    font-size: 14px;
    padding: 8px;
  }
}