/* === Reset and Base Styles === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9fbfc;
  color: #222;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* === Container & Layout === */
.tools-wrapper {
  max-width: 1024px;
  margin: 3rem auto 4rem;
  padding: 0 1.25rem;
}

/* === Header === */
.tools-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.tools-header h1 {
  font-size: 2.75rem;
  font-weight: 700;
  color: #004080;
  margin-bottom: 0.35rem;
  letter-spacing: 0.03em;
}

.tools-header p {
  font-size: 1.15rem;
  color: #555b66;
  font-weight: 500;
}

/* === Tool Sections === */
.tool-section {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.07);
  padding: 2.5rem 3rem;
  margin-bottom: 3.5rem;
  transition: box-shadow 0.3s ease;
}

.tool-section:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.tool-section h2 {
  font-size: 2rem;
  color: #004080;
  margin-bottom: 1.75rem;
  font-weight: 700;
}

/* === Calendar Embed === */
.calendar-embed iframe {
  width: 100%;
  max-width: 320px;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  display: block;
  margin: 0 auto;
}

/* === Converters Section === */
.converters-section {
  display: flex;
  gap: 2.25rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* Each Converter Card */
.converter-card {
  flex: 1 1 48%;
  background: #fafafa;
  border-radius: 14px;
  padding: 2rem 2.5rem;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.04);
  min-width: 300px;
  transition: background-color 0.25s ease;
}

.converter-card:hover {
  background-color: #f4f9ff;
}

/* === Form Elements === */
label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin: 1.2rem 0 0.5rem;
  color: #333d4b;
}

input[type='number'],
input[type='date'],
select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1.8px solid #cbd5e1;
  background-color: #fff;
  color: #1c1f2a;
  transition: border-color 0.3s ease, box-shadow 0.25s ease;
  font-weight: 500;
  font-family: inherit;
}

input[type='number']::placeholder {
  color: #a0a9b8;
}

input:focus,
select:focus {
  outline: none;
  border-color: #246bb3;
  box-shadow: 0 0 8px rgb(36 107 179 / 0.3);
}

/* === Buttons === */
button {
  margin-top: 1.5rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: #004080;
  border: none;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 64, 128, 0.45);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  font-family: inherit;
}

button:hover,
button:focus {
  background-color: #0059b3;
  box-shadow: 0 6px 16px rgba(0, 89, 179, 0.55);
  outline: none;
}

/* === Result Boxes === */
.result-box {
  margin-top: 1.4rem;
  min-height: 2rem;
  padding: 0.9rem 1.1rem;
  font-size: 1.15rem;
  color: #00677f;
  background-color: #d9f1fa;
  border-left: 5px solid #007ca1;
  border-radius: 8px;
  font-weight: 600;
  user-select: text;
}

/* === Responsive === */
@media (max-width: 820px) {
  .converters-section {
    flex-direction: column;
  }

  .converter-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .tools-wrapper {
    margin: 2rem 1rem 3rem;
  }

  .tool-section {
    padding: 2rem 1.75rem;
  }

  .tools-header h1 {
    font-size: 2.2rem;
  }

  .tool-section h2 {
    font-size: 1.6rem;
  }
}

@media (max-width: 400px) {
  .tools-wrapper {
    padding: 1rem;
  }

  button {
    font-size: 1rem;
  }
}