/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  color: black;
  text-decoration: none;  
  font-family: 'Poppins', 'Roboto', sans-serif;   
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

/* Navbar */
/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;  
  width: 100%;
  top: 0;
  background-color: #10144a;
  padding: 0 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.navbar .left {
  font-weight: bold;
}

.navbar .right {
  display: flex;
  align-items: center;
}

.navbar .hamburger {
  display: none;
  font-size: 30px;
  cursor: pointer;
}

.navbar .right ul {
  display: flex;
  list-style: none;
}

.navbar .right li {
  margin: 0 10px;
}
._color{
  color: #bfcdf0;
}
.navbar .right a {
  color: #bfcdf0;
  font-weight: 300;
  transition: transform 0.3s, box-shadow 0.3s;
}

.navbar .right a:hover {
  transform: translateY(-3px);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar .right ul {
      display: none;
      flex-direction: column;
      width: 100%;
      background-color: rgb(240, 240, 240);
  }

  .navbar .right ul.active {
      display: flex;
  }

  .navbar .hamburger {
      display: block;
  }
}


/* Home section */
/* #home-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20% 5%;
  text-align: center;
}

.home-content h1 {
  margin-bottom: 20px;
}

.home-content h3 span {
  color: blue;
}

.img-avatar {
  margin-top: 20px;
}

.img1 {
  margin: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.img1:hover {
  transform: translateY(-5px);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 50%;
} */
 /* Home section */
#home-body {
  display: flex;
  flex-direction: row; /* Change to row for desktop view */
  align-items: center;
  justify-content: space-between; /* Add this to space out items */
  padding: 5% 10%; /* Adjust padding if needed */
  text-align: center;
}

.home-content {
  flex: 1; /* Allow home-content to take available space */
  max-width: 60%; /* Adjust the width as needed */
}

.img-avatar {
  margin-top: 0; /* Reset margin-top for alignment */
  max-width: 300px; /* Control the size of the avatar */
}

/* Ensure .img-avatar is centered vertically and not too large */
@media (max-width: 768px) {
  #home-body {
      flex-direction: column; /* Stack vertically on smaller screens */
      padding: 20% 5%;
  }

  .img-avatar {
      margin-top: 20px;
      max-width: 100%; /* Full width on smaller screens */
  }
}


.expert {
  margin: 20px 0;
}

/* Projects section */
#projects-section,
#projects-section-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 5%;
}

.web-img {
  max-width: 100%;
  height: auto;
  border: 3px solid black;
  border-radius: 30px;
}
.resume-img {
  width: 40px; /* Adjust width as needed */
  height: 40px; /* Adjust height to maintain aspect ratio */
  margin-left: 10px; /* Optional: add some spacing if needed */
  vertical-align: middle; /* Align with text */
}

.live {
  margin: 20px;
  transition: transform 0.3s;
}

.live:hover {
  transform: translateY(-7px);
}

.expand-arrow-link {
  width: 15px;
}

.expand-arrow-link-1 {
  width: 20px;
}


/* Skills section */
.skills_section {
  width: 100%;
  padding: 20px;
  background-color: rgb(255, 255, 255);
}

.skills_head {
  text-align: center;
  margin-bottom: 20px;
}

.skills_head h2 {
  font-size: 30px;
}

.skills_head h2 span {
  color: #000;
}

.skills_main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.skill_bar {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.skill_bar .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skill_bar .info p {
  margin: 0;
}

.skill_bar .bar {
  width: 100%;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.144);
  border-radius: 25px;
  position: relative;
  margin-top: 5px;
}

.skill_bar .bar span {
  height: 100%;
  position: absolute;
  background-color: #5ea5ef;
  border-radius: 25px;
}

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

.html { width: 90%; animation: progress 2s; }
.css { width: 80%; animation: progress 2s; }
.sass { width: 80%; animation: progress 2s; }
.js { width: 70%; animation: progress 2s; }
.react { width: 75%; animation: progress 2s; }
.node { width: 70%; animation: progress 2s; }
.express { width: 65%; animation: progress 2s; }
.mongo { width: 60%; animation: progress 2s; }

/* Contact section */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 5%;
  text-align: center;
}

.contact-text {
  max-width: 800px;
}

.contact-icons {
  margin-top: 20px;
}

.contact-icons img {
  margin: 10px;
  transition: transform 0.3s;
}

.contact-icons img:hover {
  transform: translateY(-5px);
}

/* Footer */
.end {
  padding: 20px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #efc75e;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}

.end h4 {
  margin: 0;
}

.top a {
  display: flex;
  align-items: center;
}

.top img {
  width: 50px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .navbar .right {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navbar .right ul {
    flex-direction: column;
    padding: 0;
  }

  .navbar .right li {
    margin: 10px 0;
  }

  #home-body {
    flex-direction: column;
    padding: 20% 5%;
  }

  .img-avatar {
    margin-top: 20px;
  }

  .skills_main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 10px;
  }

  .navbar .right ul {
    display: none;
  }

  #home-body {
    padding: 20% 5%;
  }

  .contact {
    padding: 50px 5%;
  }

  .contact-text {
    padding: 0 10px;
  }

  .end {
    flex-direction: column;
    text-align: center;
  }

  .top {
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  .skills_section {
    padding: 10px;
  }

  .skills_main {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .skill_bar .info {
    flex-direction: column;
    text-align: center;
  }

  .skill_bar .bar {
    height: 8px;
  }
}

.iconhov:hover{
    background-color: #FFF;
}
.iconhov:hover .boxstyle
{
    color:black;
}

.Logo_size{
  height: 100px;
}

.bg_{
  background-color: #10144a;
}