* { box-sizing: border-box; margin: 0; padding: 0; font-family: Poppins, Pretendard Variable;}
  html,body { height: 100%; font-family: "Poppins", system-ui, sans-serif; }

   .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;                     
    padding: 16px 72px;                      
    display: flex;
    align-items: center;
    gap: 24px;
    z-index: 9999;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    /* position: fixed; */
    
  }

   .navbar, .navbar * { -webkit-font-smoothing:antialiased; }

   .navbar > img {
    height: 100px;                            
    width: 100px;
    scale: 1.5;
    display: block;
    border-radius: 50%;             
    background: transparent;
    object-fit: contain;
  }


  .navbar img[style] { border-radius: 0 !important; }


  .item {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 42px;                              
    margin-left: auto;                      
    padding-left: 0;
  }

  .item li { display: block; }

  .item li a {
    text-decoration: none;
    color: #222;
    font-size: 1.6rem;                         
    font-weight: 400;
    letter-spacing: 0.2px;
    transition: color .18s ease;
  }
  .item li a:hover { color: #000; }

  
  .navbar_btn button {
    background: #161414;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;                    
    font-size: 1.6rem;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  }
  .navbar_btn button:hover { background:#303030; }


  .menu_btn {
    display: none;
    margin-left: auto;
    font-size: 22px;
    cursor: pointer;
    background: transparent;
    border: none;
  }

  /* mobile menu (slide-in panel) */
  @media (max-width: 900px) {
    .navbar { padding: 14px 20px; }
    
    .item {
      position: fixed;
      right: -100%;
      top: 0;
      height: 100vh;
      width: 280px;
      flex-direction: column;
      align-items: flex-start;
      gap: 22px;
      background: #fff;
      padding: 84px 20px 20px 20px;
      transition: right .28s cubic-bezier(.2,.9,.2,1);
      box-shadow: -12px 0 30px rgba(0,0,0,0.12);
    }
    
    .item.active { right: 0; }
    
    .item .close {
      display: block;
      position: absolute;
      top: 18px;
      right: 18px;
      font-size: 22px;
      cursor: pointer;
      color: #222;
    }
    
    .menu_btn { display: block; color: #222; }
    
  
    .item li a { font-size: 18px; color: #222; }
    .navbar_btn button { width: auto; font-size: 16px; padding: 8px 22px; border-radius: 14px; }
  }

  .navbar,
  .navbar * {
    max-width: 100vw;
  }
  

  main { padding-top: 110px; min-height: 200vh; }






  main>div.cards{
    display: flex;
  
    gap: 40px;
    flex-wrap: wrap;

    width: 95vw;
    justify-content: center;
   padding-bottom: 25px;
   
  }
 
  main{
    padding-left: 50px;
    margin-top: 40px;
    
  }
  main>div,img{
    width:500px ;
    height:auto;


  }
  main>div.cards>div>div.box>p,span{
    font-weight:bolder;
    font-size:xx-large;
  }
  main>div.cards>div>div.box>h3{
    font-weight:normal;
  }
  main>div.cards>div{
    border: 1px solid gray;
    padding: 8px;
    border-radius: 5px;
    background-color: rgb(235, 235, 235);
    width: 500px;
    height: auto;
    overflow: hidden;
    /* flex-grow: 1; */
  }
main>div.about{
    width: 80vw;
    margin: 50px 20px;

}
main>div>p{
    font-size: 23px;
    color: rgb(99, 97, 97);
}
main>div>h1{
    font-size: 50px;
    font-weight: 400;
}