:root {
    --main-color: #002733;
    --dark-color: #001925;
    --light-color: #87A4B6;
    --medium-light-color: #013747;
  }
  
  * {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: 'Nunito', sans-serif;
  }
  
  
  /* img {
    width: 100%;
    object-fit: cover;
    height: 100%;
  } */
  
  .container {
    max-width: 1300px;
    margin: 0px auto 0px auto;
    padding: 0px 40px;
  }
  
  @media (min-width: 1200px) and (max-width: 1441px) {
    .container {
      max-width: 1250px;
      padding: 0px 36px;
    }
  }
  
  @media (max-width: 767px) {
    .container {
      padding: 0px 30px;
    }
  }
  
  @media (max-width: 479px) {
    .container {
      padding: 0px 30px 0px 20px;
    }
  }
  
  .skills {
    padding: 50px 0px;
  }
  
  .skills .skills-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    width: 100%;
  }
  
  @media(max-width:700px) {
    .skills .skills-flex-container {
      gap: 30px;
    }
  }
  
  .skills .skills-flex-container .box {
    flex: 1 1 15%;
    background: #140f4b;
    box-shadow: rgba(0, 0, 0, 0.5) 2px 5px 4px;
    /* padding: 5px; */
    text-align: center;
    /* border: 4px solid var(--medium-light-color); */
    transition: all 0.3s ease-in;
  }
    .image {
      transition: all 0.3s ease-in-out 0.1s;
      color: darkcyan;
    }
  
    .image img {
      max-width: 75px;
      object-fit: contain;
    }
  
    .title {
      margin-top: 15px;
      text-align: center;
      font-weight: bold;
      color: white;
      transition: all 0.3s ease-in-out;
      font-size:14px
    }
  
  .box:hover {
      box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 30px;
      transform: scale(1.1);
  }
  .box:hover .image {
        transform: scale(1.5) translateY(-20px);
      }
  
      .box:hover  .image img {
        animation: bouncing 0.5s .3s; 
      }
  
      .box:hover  .title {
        letter-spacing: 2px;
      }
    
  
  
  @media(max-width:1100px) {
    .skills .skills-flex-container .box {
      flex: 1 0 25%;
    }
  }
  
  @media(max-width:630px) {
    .skills .skills-flex-container .box {
      flex: 1 0 35%;
      padding: 15px;
    }
  }  


  @keyframes bouncing {
    from, to { transform: scale(1, 1); }
    25% { transform: scale(0.9, 1.1); }
    50% { transform: scale(1.1, 0.9); }
    75% { transform: scale(0.95, 1.05); }
  }