/*fixed nav bar*/

/*body font*/

 body {
        font-family: 'Roboto', sans-serif;
      }
    

.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

ul.grid {
  list-style-type: none;
}

ul.grid li {
  padding: 10px;
}

@media (min-width: 640px) {
  ul.grid {
    display: grid;
  }
}

/* Hamburger Menu Styles */
.menu-icon {
  display: none;
}

.menu {
  display: flex;
  justify-content: center;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu ul li {
  margin-right: 20px;
}

.menu ul li:last-child {
  margin-right: 0;
}

.menu a {
  text-decoration: none;
  color: black;
  transition: color 0.3s ease;
}

.menu a:hover {
  color: darkblue;
}

/* Hide navigation links on smaller screens */
@media (max-width: 768px) {
  #menu {
    display: none;
  }

  #responsive-menu {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: #333;
    border-radius: 4px;
    padding: 8px 0;
    width: 150px;
    z-index: 999;
  }

  #responsive-menu a {
    display: block;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    border-bottom: 1px solid #555;
  }

  #responsive-menu a:hover {
    background-color: #555;
  }
}

/*static menubar*/
.fixed-nav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999; /* Ensure it's above other content */
}

/*scroll to top button*/

#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  background-color: #0f3155;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 15px;
  font-size: 18px;
}

#scrollToTopBtn span {
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

#scrollToTopBtn span:first-child {
  margin-bottom: 5px;
}


/* Scroll progress indicator styles */
.scroll-progress {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 0;
  height: 4px;
  background-color: #0f3155;
  z-index: 99;
}

/*Contact form*/

#contact-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Form group */
.form-group {
  margin-bottom: 20px;
}

/* Label */
label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Input and textarea */
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Button */
button[type="submit"] {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  #contact-form {
    width: 100%;
  }
}

/*pop up menu item color change*/

#responsive-menu a:hover {
  color: blue;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #0f3155;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Top Navigation Bar */
.topnav {
  overflow: hidden;
  background-color: #000; /* Background color for the menu bar (black) */
}

.topnav a {
  float: left;
  display: block;
  color: #fff; /* Text color for menu items (white) */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #0066cc; /* Hover background color (blue) */
  color: #fff; /* Hover text color (white) */
}

.topnav a.active {
  background-color: #003366; /* Active background color (darker blue) */
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/*for skill section animation-->*/

.icon {
  transition: transform 0.3s ease-in-out;
}

.icon:hover {
  transform: scale(1.2);
}

/* Change text color to blue when hovering */
#skills li:hover {
  color: rgb(83, 115, 255);
}

/*skill item animation-->*/

.skill-item {
  transition: background-color 0.3s, transform 0.3s;
}

.skill-item:hover {
  background-color: #3498db;
  transform: scale(1.1);
}

/* <!--text typing-->*/

/* Additional CSS styles */
.header-container {
  background-image: url("me1.jpg");
  background-size: cover;
  background-position: center;
  height: 500px; /* Adjust height as needed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.header-menu {
  display: none; /* Initially hide menu items */
}

.header-menu.active {
  display: flex; /* Show menu items when active class is present */
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 10;
}

.header-menu a {
  color: white;
  padding: 1rem;
}

.close-menu {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: white;
}

@keyframes typing {
  from {
    width: 0;
  }
}

/*<!--header style-->*/

/* Header */
#Home {
  background-size: cover;
  background-position: center;
  padding: 20px 0;
  text-align: center;
}

#Home h1 {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
}

#Home p {
  font-size: 18px;
  color: #fff;
}

#Home h2 {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  margin: 30px 0;
}

#Home span {
  color: #00bcd4; /* Change color as needed */
}

.social-icons a {
  color: #fff;
  font-size: 24px;
  margin: 0 10px;
}

.social-icons a:hover {
  color: #00bcd4; /* Change color as needed */
}

.resume-btn {
  display: inline-block;
  background-color: #00bcd4; /* Change color as needed */
  color: #fff;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 18px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.resume-btn:hover {
  background-color: #0097a7; /* Change color as needed */
}

/* CSS for animation */
@keyframes scale {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.animate-scale {
  animation: scale 0.3s ease-out;
}

/*separator*/
/* CSS for the separator */
.separator {
  height: 2px; /* Adjust the height as needed */
  width: 100%;
  background-color: transparent; /* Initial background color */
  position: relative;
  overflow: hidden;
}

.separator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: currentColor; /* Initial background color */
  animation: expandSeparator 1s ease-in-out forwards; /* Animation */
}

@keyframes expandSeparator {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}