:root {
  --primary-color: rgb(252, 16, 16); /* Primary blue */
  --primary-color-opacity: rgb(252, 16, 16, 0.1); /* Primary blue */
  --secondary-color: white; /* Secondary grey */
  --black-color: rgb(24, 23, 23);
  --bash-font: "Ubuntu Mono", "Courier New", monospace; /* Bash-style font */
}
body {
  font-family: var(--bash-font);
  background-color: var(--black-color);
}
html {
  scroll-behavior: smooth;
}

/* Submit Button Styling */
#btnSubmit {
  background-color: var(--primary-color); /* Dark background */
  border: none;
  color: white;
  padding: 0.75rem 1.5rem;
  font-size: 1rem; /* Adjust font size */
  border-radius: 0.375rem; /* Match input rounding */
  width: 100%; /* Full width */
  transition: transform 0.5s ease;
  text-align: center;
}

#btnSubmit:hover {
  transform: scale(1.05); /* Slightly grow the button */
  /* Slightly lighter on hover */
}

#btnSubmit i {
  margin-left: 8px; /* Space between text and icon */
}

/* Ensure row provides spacing */
.contact-form-container .row > * {
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.contact-form-container .row {
  --bs-gutter-y: 1rem; /* Add vertical gutter */
}
.bg-color {
  background-color: rgba(
    26,
    25,
    25,
    0.9
  ) !important; /* White with 80% opacity */
}
.hero-section {
  height: 70vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav-link:hover {
  color: var(--primary-color); /* Change color on hover */
  text-decoration: none; /* Remove underline */
}
.primary-color {
  color: var(--primary-color); /* Use primary color for text */
}
.subtitle {
  font-size: 1.2rem;
  color: #b0b0b0;
  font-weight: 300;
  margin: 0; /* Remove default margin */
  line-height: 1; /* Remove default margin */
}

.main-title {
  font-size: 4rem;
  font-weight: 700;
}
.main2-title {
  font-size: 3rem;
  font-weight: 700;
}
.sub-title {
  font-size: 2.5rem;
  font-weight: 700;
}
.description {
  font-size: 1.2rem;
  color: #000;
  font-weight: 400;
}
.grey {
  color: #c5c3c3;
}
.dark-grey {
  color: #5c5c5c; /* Dark grey for better contrast */
}
.arrow a {
  text-decoration: none; /* Remove underline */
  color: inherit; /* Inherit the arrow color */
}
.arrow {
  animation: bounce 1.1s infinite; /* Add bounce animation */
  font-size: 1.5rem; /* Adjust arrow size */
  color: #b0b0b0; /* Match grey color */
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0); /* Start and end at the same position */
  }
  50% {
    transform: translateY(-10px); /* Move up slightly */
  }
}
.navbar {
  transition: opacity 0.3s, visibility 0.3s; /* Smooth transition for visibility and opacity */
}

.navbar.hidden {
  visibility: hidden;
  opacity: 0;
}

.navbar.visible {
  visibility: visible;
  opacity: 1;
}

.text-xl {
  /* Equivalent to fs-1 (40px) */
  font-size: 40px;
}

.text-lg {
  /* Equivalent to fs-2 (32px) */
  font-size: 32px;
}

.text-md {
  /* Equivalent to fs-3 (28px) */
  font-size: 28px;
}

.text-sm {
  /* Equivalent to fs-4 (24px) */
  font-size: 24px;
}

.text-xs {
  /* Equivalent to fs-5 (20px) */
  font-size: 20px;
}

.text-xxs {
  /* Equivalent to fs-6 (16px) */
  font-size: 18px;
}
.container-padding {
  padding-top: 180px;
}
.custom-line {
  border: none;
  border-top: 2px solid #b0b0b0; /* Light grey color */
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.custom-line2 {
  border: none;
  border-top: 0.3px solid #b0b0b0; /* Light grey color */
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.d-flex.justify-content-lg-start {
  justify-content: flex-start;
}

/* Medium screens and below: Justify content to the center */
@media (max-width: 991.98px) {
  .d-flex.justify-content-lg-start {
    justify-content: center;
  }
}
.card {
  background-color: var(--black-color);
  transform: scale(1); /* Default size */
  transition: transform 0.5s ease; /* Smooth transition */
  border: 1px solid #7c7c7c; /* Light grey border */
}

.card:hover {
  transform: scale(1.05); /* Slightly grow the card */
}
.skill-list {
  font-size: 13px;
}
.card {
  border-radius: 0px;
  overflow: hidden;
}
.card:hover {
  border-color: var(--primary-color);
}
.card-red {
  overflow: hidden;
  position: relative;
  border-bottom: 4px solid var(--primary-color); /* Add a bottom border with the primary color */
}

.card-img-top {
  height: 200px;
  object-fit: cover;
  border-radius: 0px;
}

.modal-content {
  height: 75vh; /* 90% of the viewport height */
  background-color: var(--black-color); /* Dark background for the modal */
}
.modal-body img {
  max-width: 100%; /* Ensure the image doesn't exceed the modal width */
  max-height: 400px; /* Limit the height of the image */
  object-fit: contain; /* Ensure the image scales properly without distortion */
  margin: 0 auto; /* Center the image horizontally */
  display: block; /* Ensure proper centering */
}
.modal-body {
  max-height: 65vh; /* 80% of the viewport height */
  overflow-y: auto; /* Enable vertical scrolling */
}
.modal-header {
  border-bottom: none; /* Remove the default border */
  position: relative; /* Ensure the pseudo-element is positioned relative to the header */
}

.modal-header h5::after {
  content: ""; /* Add an empty line */
  display: block;
  width: 100%; /* Match the width of the title */
  height: 2px; /* Adjust the thickness of the line */
  background-color: var(--primary-color); /* Use the primary color */
  margin-top: 0; /* Add spacing between the title and the line */
}
.btn-close {
  color: white; /* Darker color for the close icon */
  font-weight: 900; /* Increase font weight */
  opacity: 1;
  text-decoration: none;
  /* Ensure the icon is fully visible */
}
.btn-close:focus {
  outline: none; /* Remove the blue focus outline */
  box-shadow: none; /* Remove any additional focus shadow */
}
.text-color {
  color: white;
}
.skill-box {
  background-color: var(
    --primary-color-opacity
  ); /* Lightened primary color for the background */
  color: var(--primary-color); /* Primary color for the text */
  padding: 5px 10px; /* Adjust padding to make it slightly larger than the text */
  margin-bottom: 5px; /* Reduce spacing between boxes */
  border-radius: 4px; /* Slightly rounded corners */
  text-align: center; /* Center the text */ /* Ensure the box wraps tightly around the text */
  font-weight: 500; /* Slightly bold text */
}
.modal-body::-webkit-scrollbar {
  width: 8px; /* Set scrollbar width */
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: #9a9898; /* Black scrollbar thumb */
  border-radius: 4px; /* Rounded corners for the scrollbar */
}

.modal-body::-webkit-scrollbar-track {
  background-color: #333; /* Dark grey scrollbar track */
}
.custom-close-btn {
  background-color: transparent; /* Remove background */
  border: none; /* Remove border */
  color: white; /* Set the icon color */
  font-size: 1.5rem; /* Adjust icon size */
  position: absolute; /* Position it in the top-right corner */
  top: 10px; /* Adjust vertical position */
  right: 10px; /* Adjust horizontal position */
  cursor: pointer; /* Change cursor to pointer */
}
/* Modern Form Styling */

.modern-form-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
}
.form-control::placeholder {
  color: white;
  opacity: 1; /* Ensure the placeholder is fully visible */
}
.modern-input {
  margin-bottom: 1.5rem;
}

.modern-label {
  display: block;
  font-size: 0.9rem;
  color: #bbb;
  margin-bottom: 0.5rem;
}

.modern-input .form-control,
.modern-input .form-select {
  background-color: #333;
  color: white;
  border: 1px solid var(--primary-color-opacity);
  border-radius: 5px;
  padding: 15px;
  transition: all 0.3s ease;
}

.modern-input .form-control:focus,
.modern-input .form-select:focus {
  background-color: #444;
  border-color: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-color);
}

.modern-btn {
  background-color: var(--primary-color);
  color: white;
  padding: 15px 30px;
  font-size: 1.2rem;
  border: none;
  border-radius: 5px;
  width: 100%;
  transition: all 0.3s ease;
}

.modern-btn:hover {
  background-color: var(--primary-color);
  color: white;
  transform: scale(1.05);
}

.modern-btn i {
  margin-left: 10px;
}
.modern-btn:disabled {
  background-color: var(--primary-color); /* Retain primary color */
  opacity: 0.8; /* Slightly dim to indicate disabled state */
  cursor: not-allowed;
  color: white;
}
.form-border {
  border: 1px solid #7c7c7c; /* Light grey border */
  /* Rounded corners for a modern look */
  padding: 30px; /* Add padding inside the border */
}
.footer {
  background-color: var(--black-color); /* Match the website's background */
  border-top: 1px solid #7c7c7c; /* Light grey border at the top */
}

.footer a {
  text-decoration: none; /* Remove underline */
  color: var(--primary-color); /* Keep the primary color for the icons */
  font-size: 1.2rem; /* Adjust icon size */
  transition: color 0.3s ease; /* Smooth hover effect */
}

.footer a:hover {
  color: white; /* Change to white on hover */
}

.footer p {
  margin: 0; /* Remove default margin */
  font-size: 0.9rem; /* Match text size with the rest of the site */
}
.nav-link {
  color: white; /* Ensure the default color is white */
  text-decoration: none; /* Remove underline */
}

.nav-link:focus,
.nav-link:active {
  color: white; /* Keep the color white when clicked or focused */
  text-decoration: none; /* Ensure no underline appears */
  outline: none; /* Remove the default focus outline */
}
.nav-link {
  color: white; /* Default color */
  text-decoration: none;
}

.nav-link.active-link {
  color: var(--primary-color); /* Turn red for the active link */
  font-weight: bold; /* Optional: Make it bold */
}

@media (max-width: 991px) {
  .phone-margin {
    margin-top: 30px;
  }
}
@media (max-width: 576px) {
  .container-padding {
    padding-top: 140px; /* Adjust for smaller screens */
  }
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
  border: 1px solid white; /* White border */
  outline: none; /* Remove the default focus outline */
  box-shadow: none; /* Remove any focus shadow */
}

.navbar-toggler:focus {
  outline: none; /* Ensure no focus outline appears */
  box-shadow: none; /* Ensure no focus shadow appears */
}
.skill-box2 {
  display: inline-block; /* Ensure the boxes are inline */
  background-color: var(
    --primary-color-opacity
  ); /* Lightened primary color for the background */
  color: var(--primary-color); /* Primary color for the text */
  padding: 5px 10px; /* Add padding for spacing */
  margin: 5px; /* Add margin between boxes */
  border-radius: 10px; /* Slightly rounded corners */
  text-align: center; /* Center the text */
  font-weight: 500; /* Slightly bold text */
  font-size: 0.9rem; /* Adjust font size */
  white-space: nowrap; /* Prevent text wrapping */
}
terminal-wrap {
  padding: 20px;
  font-size: 1.5rem;
  color: white;
}

.terminal-prefix {
  color: var(--primary-color);
  margin-right: 10px;
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--primary-color);
  animation: typing 4s steps(35, end) 1s forwards, blink 0.75s step-end infinite;
  display: inline-block;
  max-width: 0;
}

@keyframes typing {
  from {
    max-width: 0;
  }
  to {
    max-width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}