/* Container to hold icons side by side */
    .contact-icons {
      display: flex;
      gap: 15px; /* space between icons */
      justify-content: center; /* center horizontally */
      align-items: center;
    }

    /* Individual icon container */
    .contact-icon {
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     transition: transform 0.3s, box-shadow 0.3s;
     display: inline-flex; 
     align-items: center;
     justify-content: center;
     cursor: pointer;
    }
     
    .circular-icon{border-radius: 100px;}


    /* Inner div that shows the sprite slice */
    .contact-icon div {
      width: 42px;
      height: 40px;
      background: url("../images/icons.png") no-repeat;
      background-size: 272px auto; /* adjust depending on sprite */
     }

     /* Inner div that shows the sprite slice */
    .contact-big-icon div {
      width: 60px;
      height: 60px;
      background: url("../images/icons.png") no-repeat;
      background-size: 500px auto; /* adjust depending on sprite */
     }

    
      /* Show different slices (apply to inner divs) */
    .contact-icon .gmail { background-position:  -94px -40px; }
    .contact-icon .facebook { background-position: -96px -2px; }
    .contact-icon .instagram {background-position: -47px -1px; }
    .contact-icon .discord { background-position: -191px -1px; }
    .contact-icon .telegram { background-position: -142px -1px; }

      /* Hover effect */
    .contact-icon:hover {
      transform: translateY(-5px) scale(1.05);
     box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    }

      /* Show different slices (apply to inner divs) */
    .contact-big-icon .gmail { background-position:  -180px -78px; }
    .contact-big-icon .facebook { background-position: -177px -11px;}
    .contact-big-icon .instagram {background-position: -88px -11px; }
    .contact-big-icon .discord { background-position: -355px -11px; }
    .contact-big-icon .telegram { background-position: -265px -11px; }

    /* Hover effect */
    .contact-big-icon:hover {
      transform: translateY(-5px) scale(1.05);
     box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    }
    
    .contact-icon .photoshop { background-position: -142px -118px; }
    .contact-icon .premier { background-position: -74px -118px; }
    .contact-icon .substance3dpainter { background-position: -212px -118px; }
    .contact-icon .krita { background-position: -12px -118px; }
    .contact-icon .blender { background-position: -338px -118px; }
    .contact-icon .unreal { background-position: -280px -118px; }

  
    
    .skill-icon div{
     width: 48px;
     height: 48px;
     background: url("../images/icons.png") no-repeat;
     background-size: 394px auto; /* adjust depending on sprite */
     }

   .app-icon{
     width: 36px;
     height: 36px;
     background: url("../images/icons.png") no-repeat;
     background-size: 220px auto; /* adjust depending on sprite */
     position: absolute;
     top: 1px;
     left: 1px;
      
     }
     
     .modal-content .photoshop { background-position: -74px -63px; }
     .modal-content .premier { background-position: -35px -63px; }
     .modal-content .substance3dpainter { background-position: -110px -63px; }
     .modal-content .krita { background-position: 1px -62px; }
     .modal-content .blender { background-position: -185px -63px; }
     .modal-content .unreal { background-position: -149px -63px; }