/* Base Styles */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

header, footer {
  background-color: #333;
  color: white;
}

/* Dark Mode */
body.dark-mode {
  background-color: #1c1c1c;
  color: #f0f0f0;
}

body.dark-mode header, body.dark-mode footer {
  background-color: #1c1c1c;
}

body.dark-mode a {
  color: #00D1B2;
}

/* Dark Mode Overrides */
body.dark-mode .card {
  background-color: #2c2c2c;
  color: #f0f0f0;
  border: none;
}

body.dark-mode .card-title {
  color: #00D1B2;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-outline-primary {
  background-color: #00D1B2;
  border-color: #00D1B2;
  color: #fff;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-outline-primary:hover {
  background-color: #00a89c;
  border-color: #00a89c;
}

body.dark-mode .btn-outline-dark {
  background-color: #444;
  border-color: #444;
  color: #f0f0f0;
}

body.dark-mode .btn-outline-dark:hover {
  background-color: #555;
  border-color: #555;
  color: #fff;
}

body.dark-mode .btn-outline-success {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
}

body.dark-mode .btn-outline-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

body.dark-mode .btn-outline-info {
  background-color: #17a2b8;
  border-color: #17a2b8;
  color: #fff;
}

body.dark-mode .btn-outline-info:hover {
  background-color: #138496;
  border-color: #117a8b;
}

body.dark-mode .contact-section {
  background-color: #2c2c2c;
}

body.dark-mode .contact-section-header h2,
body.dark-mode .contact-section-header p {
  color: #f0f0f0;
}

body.dark-mode .form-control {
  background-color: #333;
  color: #f0f0f0;
  border: 1px solid #555;
}

body.dark-mode .form-control:focus {
  background-color: #444;
  color: #f0f0f0;
  border-color: #00D1B2;
}


/* Skills Section Icons */
#skills .fa-3x {
  margin-bottom: 10px;
  transition: transform 0.3s ease, color 0.3s ease;
}

#skills .fa-3x:hover {
  transform: scale(1.2);
  color: #007bff;
}

/* Form Control Customization */
body.dark-mode form input, body.dark-mode form textarea {
  background-color: #333;
  color: #f0f0f0;
}

/* Contact Section */
.contact-section {
  background-color: #f4f4f4;
  padding: 50px 0;
}

.contact-links .btn {
  font-size: 1.2rem;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-links .btn:hover {
  background-color: #007bff;
  color: white;
}

/* Ensure buttons are large enough for touch devices */
.contact-links .btn {
  width: 100%;
  max-width: 250px;
}

/* Media Queries for Better Responsiveness */
@media (min-width: 768px) {
  .contact-links .btn {
      width: auto;
  }
}

/* Button Active State */
.btn:active {
  transform: scale(0.98);
}

/* Transition for all buttons */
.btn {
  transition: all 0.2s ease-in-out;
}

/* Typography Enhancements */
h1, h2, h3 {
  font-weight: 700;
}

p {
  line-height: 1.6;
}

.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
}