/* -------popup Animation for project imgs------------------------------------------ */

.blog-card-img {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
  }
  
  .blog-card-img:hover {
    transform: scale(1.1);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

  }
  
  .blog-card-img:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Adjust the opacity as needed */
    transition: opacity 0.3s ease-in-out;
  }
  
  .blog-card-img:hover::before {
    content: 'View Project';
    /* Adjust the text as needed */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    /* Adjust the text color as needed */
    font-size: 1.5em;
    /* Adjust the font size as needed */
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  
  .blog-card-img:hover::after,
  .blog-card-img:hover::before {
    opacity: 1;
  }
  
  /* -------popup Animation for project imgs ends------------------------------------------ */
  
    

 
  /* style foe readmore/read less button on about me  */
  #section {
            width: 500px;
            height: auto;
            word-wrap: break-word;
        }

        .moretext {
            display: none;
        }

        .moreless-button {
            display: inline-block;
            margin-top: 10px;
            color: blue;
            cursor: pointer;
            text-decoration: underline;
        }

        /* skill badges click animation starts here */
         .click-loop {
                    animation: clickEffect 1.5s ease-in-out infinite;
                    transform-origin: center;
                    transition: box-shadow 0.3s;
                }

                @keyframes clickEffect {

                    0%,
                    100% {
                        transform: scale(1);
                        box-shadow: none;
                    }

                    50% {
                        transform: scale(0.92);
                        /* box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); */
                    }
                }
        /* skill badges click animation Ends here */