*{
    text-decoration: none;
    margin: 0%;
}
.navbar{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #051301;
    padding: 15px;
    position: sticky;
    top: 0;
    
}
.navdiv{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img{
    width: 55px;
    height: 55px;
    margin-left: 40px;
}
.navdiv li{
    list-style: none;
    display: inline-block;
}
.navdiv li a{
    color: #A1D1B1;
    margin-right: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.navdiv li a:hover{
        color: #55cd7d;
}
body{
    background: linear-gradient(135deg, #041b12, #0b3d2e);
  color: #e5f7ef;
}
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 80px;
  margin-top: -50px;
}
.home-content-left{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #a1d1b1;
    width: 50%;
    text-align: start;  
    margin-left: 70px;
    margin-top: -50px;
}.hero-tag {
  color: #55cd7d;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.home-content-left h1 {
  font-size: 52px;
  font-weight: 700;
  margin: 10px 0;
}

.home-content-left h2 {
  font-size: 28px;
  font-weight: 500;
  color: #a1d1b1;
  margin-bottom: 20px;
}

.home-content-left p {
  font-size: 18px;
  max-width: 500px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.glow-btn{
    text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  background: #1a441e;
  padding: 15px 30px;
  border-radius: 10px;
  font-weight: normal;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  margin-top: 10px;
}
.glow-btn:hover{
    color: rgb(255, 255, 255);
  box-shadow: 0 5px 15px rgba(43, 152, 43, 0.652);
}
.home-content-right{
    width: 50%;
    text-align: center;
}
.home-content-right img{
    width: 70%;
    height: auto;
    margin-top: 30px;
    border-radius: 50%;
    background-color: #051301;
}
#about{
    text-align: center;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

#about h1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 50px;
    font-size: 50px;
    align-items: start;
    margin-top: 70px;
}
.about-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin-top: -110px;
    
}
.about-left-container{
    width: 40%;
    text-align: start;
    
}
.about-left-container img{
    width: 60%;
    height: auto;
    border-radius: 20px;
    margin-top: -20px;
    
}
.about-right-container{
    width: 50%;
    text-align: left;
    margin-left: -30px;
}
.about-right-container p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}
#skills{
    text-align: center;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
        height: 100vh;
}
#skills h1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 50px;
    font-size: 50px;
    align-items: start;
    margin-top: 10px;
}
#skills p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}
.icon-container{
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;
    gap: 150px;
}
.icon-box{
    width: 100px;
    height: 100px;
    margin: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: -60px;
}
.icon-box p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: white;
    margin-top: 140px;
}
.icon-box img{
    width: 50px;
    height: 50px;
}
.icon-container i{
    font-size: 50px;
    color: #ffffff;
    margin: 20px;
}
.icon-row{
    display: flex;
    
    gap: -45px;
}
#projects{
    text-align: center;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
.project-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin-top: -50px;
}
#projects h1{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 50px;
    font-size: 50px;
    align-items: start;
    margin-top: 70px;
}
#projects p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}
.project-container{
    display: flex;  
    align-items: center;
    justify-content: space-evenly;
    height: 100vh;
    margin-top: -120px;
}
.project-box h2{
    margin-top: 20px;
    font-size: 20px;
}
.project-box p{
    margin-top: 10px;
}
.project-box img{
    width: 300px;
    height: 200px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(43, 152, 43, 0.652);
}
#contact {
  background-color: #A1D1B1;
    color: #1C2529;
    text-align: center;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
}
#contact h1{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 50px;
    font-size: 50px;
    align-items: start;
    margin-top: 70px;
}

.contact-container {
  max-width: 500px;
  height: 60vh;
  margin: auto;
  margin-top: 30px;
}

.contact-container form {
  display: flex;
  flex-direction: column;
}

.contact-container input,
.contact-container textarea {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.contact-container button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.contact-container button:hover {
  background: #45a049;
}
footer {
  background-color: #1C2529;
  color: #A1D1B1;
  padding: 40px 20px 20px;
  font-family: Arial, sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: auto;
}

.footer-container div {
  flex: 1 1 250px;
}
.footer-container h4{
    margin-top: 10px;
  
  color: #45a049;
}
.footer-container p {
  margin-bottom: 10px;
  color: #A1D1B1;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li {
  margin: 5px 0;
}

.footer-links ul li a {
  text-decoration: none;
  color: #A1D1B1;
  transition: color 0.3s;
}

.footer-links ul li a:hover {
  color: #45a049;
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  border-top: 1px solid #444;
  padding-top: 10px;
  font-size: 14px;
}

/* Hamburger styles */
.hamburger {
  display: none;
  font-size: 28px;
  color: #A1D1B1;
  cursor: pointer;
}

/* Mobile menu hidden by default */
.navdiv ul {
  display: flex;
  gap: 20px;
}

/* Responsive Navbar */
@media (max-width: 768px) {
  .navdiv ul {
    position: absolute;
    top: 70px;
    right: 0;
    background: #051301;
    flex-direction: column;
    width: 200px;
    padding: 20px;
    display: none;
    border-radius: 10px;
    z-index: 1000;
  }

  .navdiv ul.active {
    display: flex;
  }

  .hamburger {
    display: block;
  }

  .navdiv li a {
    margin: 10px 0;
    font-size: 18px;
  }
}

/* Adjust all sections for mobile */
@media (max-width: 1024px) {
  /* Home Section */
  .home-container { flex-direction: column; height: auto; padding: 50px 20px; margin-top: 5px;  flex-direction: column;
    align-items: center;
    text-align: center;}
  .home-content-left, .home-content-right { width: 100%; margin: 0; text-align: center; }
  .home-content-left h1 { font-size: 36px; }
  .home-content-left h2 { font-size: 22px; }
  .home-content-left p { font-size: 16px; }
  .home-content-right { order: -1; /* move the image to the top */width: 80%; margin-top: -30px;}
  .home-content-right img { width: 50%; margin: 20px auto; }
  .glow-btn { padding: 12px 25px; font-size: 14px; }

  /* About Section */
  .about-container { flex-direction: column; height: auto; margin-top: 0; padding: 20px; }
  .about-left-container img { display: none; }
  .about-right-container { width: 100%; margin-left: 0; text-align: center; }
  .about-right-container p { font-size: 16px; }

  /* Skills Section */
  .icon-container { gap: 50px; height: auto; }
  .icon-row { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .icon-container i { font-size: 40px; }

  /* Projects Section */
  .project-container { flex-direction: column; height: auto; margin-top: 0; gap: 30px; }
  .project-box img { width: 80%; height: auto; }
  .project-box h2 { font-size: 18px; }
  .project-box p { font-size: 14px; }

  /* Contact Section */
  .contact-container { width: 90%; height: auto; }
  .contact-container input, .contact-container textarea { font-size: 14px; padding: 10px; }
  .contact-container button { font-size: 14px; padding: 10px; }

  /* Footer */
  .footer-container { flex-direction: column; text-align: center; gap: 20px; }
  .footer-bottom { font-size: 12px; }
}

@media (max-width: 365px) {
  /* Home Section */
  .home-container { flex-direction: column; height: auto; padding: 50px 20px; }
  .home-content-left, .home-content-right { width: 100%; margin: 0; text-align: center; }
  .home-content-left h1 { font-size: 36px; }
  .home-content-left h2 { font-size: 22px; }
  .home-content-left p { font-size: 16px; }
  .home-content-right img { margin: 10px auto; }

  /* About Section */
  .about-container { flex-direction: column; height: auto; margin-top: 0; padding: 20px; }
  .about-left-container img {display: none;}
  .about-right-container { width: 100%; margin-left: 0; text-align: center; }
  .about-right-container p { font-size: 16px; }

  /* Skills Section */

  .icon-container { gap: 50px; height: auto; }
  .icon-row { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .icon-container i { font-size: 40px; }

  /* Projects Section */
  .project-container { flex-direction: column; height: auto; margin-top: 0; gap: 30px; }
  .project-box img { width: 80%; height: auto; }
  .project-box h2 { font-size: 18px; }
  .project-box p { font-size: 14px; }

  /* Contact Section */
  .contact-container { width: 90%; height: auto; }
  .contact-container input, .contact-container textarea { font-size: 14px; padding: 10px; }
  .contact-container button { font-size: 14px; padding: 10px; }

  /* Footer */
  .footer-container { flex-direction: column; text-align: center; gap: 20px; }
  .footer-bottom { font-size: 12px; }
}


/* Add offset for all sections to avoid hiding behind navbar */
section {
  scroll-margin-top: 80px; /* Adjust based on navbar height */
}