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

  
  .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 > 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;
  }

  @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;
    /* grid-template-columns:repeat(4,1fr); */
    gap: 40px;
    flex-wrap: wrap;
    /* border: 2px solid red; */
    width: 95vw;
    justify-content: center;
    padding-bottom: 25px;
  }
/* .cards>div:hover{
    scale: 1.05;
    
  }
  .cards>div{
    transition: all 0.3s ease;
   
  } */
 
  main{
    padding-left: 50px;
    margin-top: 40px;
    
  }
  main>div,img{
    width:500px ;
    height:500px;


  }
  main>div.cards>div>div.box>p,span{
    font-weight: bolder;
    font-size:30px;
  }
  /* main>div.cards>div>div.box>div>span{
    font-size:35px;
  } */
  main>div.cards>div>div.box>h3{
    font-weight: normal;
  }
  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;
}
.about{
    height: 200px;
}