* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
  width: 100%;
}

/* Navbar Start ***************************************************************/

.navbar {
  position: fixed;
    top: 0;
  width: 100%;
  background-color: #333333;
  border-bottom: 1px solid #EDEDED;
  z-index: 1000;
}

.navbar-brand-j {
  margin-left: 10px;
  width: 3rem;
}

.navbar-brand-h {
  position: relative;
    right: 18px;
  width: 3rem;
}

.nav-item {
  padding: 0.1rem 1.2rem;
}

.nav-link {
  color: #EDEDED;
  font-size: 1.4rem;
  text-decoration: none;
}

.nav-link:hover {
  color: #DA0037;
}

.navbar-toggler {
  margin-right: 20px;
}

/* Navbar End *****************************************************************/

/* Title Start ****************************************************************/

/* Title Section */
.title-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
  color: #EDEDED;
}

.title-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1rem; /* Add spacing between elements */
}

.title-name {
  font-family: 'Sacramento', cursive;
  font-size: 5.625rem;
  text-shadow: 1px 0 #DA0037;
  margin: 0;
}

.lastname {
  color: #DA0037;
}

.title-jobTitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.8rem;
  font-weight: normal;
  margin: 0;
}

.scroll-down {
  margin-top: 2rem;
  animation: bounce 2s infinite;
}

.scroll-down a {
  text-decoration: none;
  color: #DA0037; /* Match your site's theme color */
  font-size: 2rem;
}

.scroll-down a:hover {
  color: #EDEDED; /* Optional hover effect */
}

/* Bounce Animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Title End ******************************************************************/

/* About Me Start ****************************************************************/

#about {
  padding: 5% 10%;
  background-color: #EAEAEA;
  color: #444444;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
}

.about-header {
  text-align: left;
  margin-bottom: 2rem;
  margin-left: 10%;
}

.about-h2 {
  color: #DA0037;
  font-size: 2.5rem;
  font-weight: 700;
  padding-bottom: 1rem;
}

.about-content {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  gap: 2rem; /* Add space between the image and text */
  align-items: center; /* Vertically align the image and text */
  flex-direction: row; /* Ensure the image is on the left and text is on the right */
}

.about-image {
  flex: 0 0 50%; /* Increase the image container width to 50% */
  text-align: center;
}

.img-2 {
  border: 4px solid #DA0037;
  border-radius: 10px;
  width: 100%;
  max-width: 400px; /* Increase the maximum width of the image */
}

.about-text {
  flex: 1; /* Allow the text to take up the remaining space */
  text-align: left;
}

.about-h3 {
  color: #444444;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.about-p {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.about-hr {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid #DA0037;
}

.email-section {
  font-size: 1.2rem;
}

.resume-btn {
  background-color: #DA0037;
  border: none;
  padding: 0.5rem 1rem;
  margin-right: 1rem;
}

.resume-link {
  text-decoration: none;
  color: white;
}

.resume-link:hover {
  color: #EDEDED;
}

.email {
  color: #DA0037;
  text-decoration: none;
}

.email:hover {
  color: #444444;
}

/* Responsive Design */
@media only screen and (max-width: 768px) {
  .about-content {
    flex-direction: column; /* Stack image and text vertically on smaller screens */
    text-align: center;
  }

  .about-image,
  .about-text {
    flex: 1 1 100%; /* Each takes full width on smaller screens */
  }

  .img-2 {
    max-width: 200px; /* Reduce image size on smaller screens */
  }

  .about-text {
    text-align: center; /* Center-align text on smaller screens */
  }
}

/* About Me End ******************************************************************/

/* Skills Start ***************************************************************/

.skills-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

.skills-h2 {
  color: #DA0037;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  margin-left: 10%;
  text-align: left;
}

.skills-p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  margin-left: 10%;
  text-align: left;
  color: #333333;
}

#skills {
  padding: 5% 10%;
  background-color: #F5F5F5;
  color: #EDEDED;
  text-align: center;
}

.skills-container {
  max-width: 1200px;
  margin: 0 auto;
}

.skills-h2 {
  color: #DA0037;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.skills-p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.skill-item {
  background-color: #EAEAEA;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  flex: 1 1 calc(33.333% - 2rem); /* 3 items per row, with spacing */
  max-width: 300px;
}

.skill-image {
  width: 50%;
  margin-bottom: 1rem;
}

.skill-name {
  font-size: 1.2rem;
  color: #444;
  margin-bottom: 0.5rem;
}

.skill-description {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}


@media only screen and (max-width: 768px) {
  .skill-item {
    flex: 1 1 calc(50% - 2rem); /* 2 items per row on smaller screens */
  }
}

@media only screen and (max-width: 576px) {
  .skill-item {
    flex: 1 1 100%; /* Stack items vertically on very small screens */
  }
}

/* Skills End *****************************************************************/

/* Projects Start *************************************************************/

#projects {
  padding: 5% 10%; /* Match the padding of other sections */
  background-color: #FFFFFF; /* Match the background color */
}

.projects-container {
  max-width: 960px;
  margin: 0 auto; /* Center the container */
}

.projects-h2 {
  color: #DA0037;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: left; /* Align the header to the left */
  padding-top: 3.5rem;
}

.project-p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #666666;
}

.project-box {
  margin-bottom: 3rem; /* Add spacing between projects */
  padding-bottom: 2rem;
  border-bottom: 2px solid #DA0037;
}

.project-box:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.project-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #444444;
}

.project-description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: #666666;
}

.btn-projects {
  display: inline-block;
  background-color: #DA0037;
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.8rem 2rem;
  border-radius: 5px;
  text-decoration: none;
  border: none;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  margin-top: 1rem;
}

.btn-projects:hover {
  background-color: #EDEDED;
  color: #DA0037;
}

.carousel-inner img {
  width: 100%;
  max-height: 300px;
  margin: 0 auto;
  object-fit: contain; /* Ensure images fit nicely within the carousel */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #DA0037; /* Make the carousel controls more visible */
  border-radius: 50%; /* Optional: Make the controls circular */
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%; /* Reduce the width of the control area */
}

.carousel-control-prev {
  left: -2%; /* Move the button closer to the left edge */
}

.carousel-control-next {
  right: -2%; /* Move the button closer to the right edge */
}

/* Responsive Design */
@media only screen and (max-width: 768px) {
  .project-title {
    font-size: 1.5rem;
  }

  .project-description {
    font-size: 0.9rem;
  }

  .carousel-inner img {
    max-height: 250px; /* Adjust image height for smaller screens */
  }
}

@media only screen and (max-width: 576px) {
  .projects-container {
    padding: 5% 5%; /* Reduce padding on smaller screens */
  }

  .project-title {
    font-size: 1.3rem;
  }

  .project-description {
    font-size: 0.85rem;
  }

  .carousel-inner img {
    max-height: 200px; /* Adjust image height - small screens */
  }
}

/* Projects End ***************************************************************/

/* Contact Start ***************************************************************/

.contact-section {
  padding: 5% 10%;
  background-color: #E0E0E0;
  color: #EDEDED;
  text-align: center;
}

.contact-container {
  max-width: 800px;
  margin: 0 auto;
}

.contact-h2 {
  color: #DA0037;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.contact-message {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  color: #444444;
}

.btn-contact {
  display: inline-block;
  background-color: #DA0037;
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.8rem 2rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-contact:hover {
  background-color: #EDEDED;
  color: #DA0037;
}

/* Contact End ***************************************************************/

/* Footer Start ****************************************************************/

#projects {
  padding: 5% 0;
  background-color: #EAEAEA;
}

.footer {
  background-color: #222222;
  color: #EDEDED;
  padding: 1.5rem 0;
}

.footer-text {
  margin: 0;
  font-size: 1rem;
}

.social-icons {
  margin-top: 1rem;
}

.social-link {
  color: #EDEDED;
  margin: 0 0.5rem;
  font-size: 1.5rem;
  text-decoration: none;
}

.social-link:hover {
  color: #DA0037;
}

/* Footer End ******************************************************************/