/* ==== Global Fixes ==== */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;       
  background: #1f242d;
}


/* Navbar cleanup */
.navbar {
  padding: 20px 5%;         
  box-sizing: border-box;
}

.navbar .logo {
  padding-left: 0;          
}

.navbar ul li {
  padding-right: 25px;      /* smaller spacing */
}

/* 3 dots alignment */
.menu-icon {
  margin-right: 15px !important; 
}

.home {
  padding: 20px 5% 0;       
  box-sizing: border-box;
  height: auto;             
  min-height: 100vh;
}


.main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 30px;
  padding: 60px 5%;
  box-sizing: border-box;
}

.skills {
  margin: 0 auto;       

}

/* Projects fix */
.projects {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  padding: 60px 5%;
  box-sizing: border-box;
}

.card {
  /* width: 100%; */
  width: 350px;
  height: 480px;
  max-width: 450px;
  margin: 0 auto;
}

/* Education fix */
#Education > .main {
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 60px 5%;
}

#contect > .main {
  display: flex;

  gap: 30px;
 
}
 /* ---------------------- Tablet (<= 831px) ---------------------- */
@media only screen and (max-width: 831px) {
  .navbar {
    justify-content: space-between; 
  }

  .menu-icon {
    margin-left: auto;   
  }
.navbar {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 15px 30px;
}
  .navbar .logo {
    font-size: 22px;
    padding-left: 8px;
  }

  /* hide the top-level desktop nav (direct child only) */
  .navbar > ul {
    display: none !important;
  }

  .menu-icon {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
    font-size: 26px;
    margin-right: 35px;
    border-radius: 8px;
    user-select: none;
    color: white;
    transition: background .15s, transform .12s;
  }

  .menu-icon:hover,
  .menu-icon:focus {
    background: rgba(255,255,255,0.04);
    outline: none;
    transform: translateY(-1px);
  }

  .menu-icon .dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    background: #1f242d;
    padding: 6px 0;
    border-radius: 8px;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    z-index: 9999;
  }

  .menu-icon .dropdown li {
    padding: 8px 16px;
  }

  .menu-icon .dropdown li a {
    color: #fff;
    font-size: 16px;
    display: block;
    text-decoration: none;
  }

  .menu-icon .dropdown li a:hover {
    background: #333;
    color: red;
  }

  .menu-icon:hover .dropdown,
  .menu-icon:focus-within .dropdown {
    display: block;
  }

  .home {
    flex-direction: column !important;
    align-items: center;
    text-align: center;
    padding-top: 110px; 
    padding-left: 16px;
    padding-right: 16px;
  }

  .home-img .img-box {
    width: 230px;
    height: 230px;
    margin-bottom: 18px;
  }

  .home-info h1 { font-size: 36px; transform: none; animation: none; color: white; }
  .home-info h2 { font-size: 22px; transform: none; animation: none; opacity: 1; }
  .home-info p { font-size: 14px; max-width: 720px; margin: 12px auto; }

  .btn-sci { justify-content: center; gap: 12px; transform: none; opacity: 1; animation: none; }

  .main {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 18px;
    padding: 40px 20px;
    justify-items: center;
  }
  .skills { margin-left: 0; margin-top: 18px; }

  /* projects stack to single column */
  .projects {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 20px;
  }
  .card { width: 100%; max-width: 520px; margin: 0 auto; }

  /* education/contact stack */
  #Education > .main,
  #contect > .main {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px 20px;
  }
  .edu_img img { width: 320px; height: auto; bottom: auto; }
  .contect_input { width: 100%; max-width: 530px; margin: 0 auto; }
  .contect_details { margin: 0 auto; text-align: center; }
}

/* ---------------------- Mobile (<= 426px) ---------------------- */
@media only screen and (max-width: 426px) {

  .navbar { padding: 10px 14px !important; }
  .navbar .logo { font-size: 18px; }

  .menu-icon {
    font-size: 15px;
    width: 36px;
    height: 36px;
  }
  .btn-sci>a{
    padding:  10px 6px;
  }
  #skillsCon>.main{
    padding-left: 100px;
  }
  .menu-icon .dropdown { min-width: 160px; right: 0; }


  .home-info h1 { font-size: 26px; }
  .home-info h2 { font-size: 18px; }
  .home-img .img-box { width: 160px; height: 160px; }

  .main { grid-template-columns: 1fr; padding: 20px; gap: 14px; }

  .projects { gap: 20px; padding: 20px; }
  .contect_input { 
    padding: 14px;
     width: 330px;
     height: 600px; 
    }
  .contect_input>form>input{
    width: 320px;
  }
  .contect_input>form>textarea{
    width: 320px;
  }
  button { width: 140px; margin-left: 0; }
  .social { justify-content: center; gap: 16px; }

  .loc>h2{
    margin-right: 50px;
  }
.btn-sci>a{
  font-size: 13px;
}
.sci>a{
  font-size: 12px;
}
#skillsCon{
  height: 1100px;
}
.title{
  font-size: 20px;
}


}