/***** ANIMATION STLYES *****/

/**button hovers**/

.btn:hover{
    background-color: var(--Accent);
    color: var(--Background);
    transform: translateY(-2px);
  }

/***** Input hover and focus effects *****/
.contact_form .form-control:focus {
    outline: none;
    border-color: var(--Accent);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
  }

/***** Button hover effect *****/
.contact_form .btn:hover {
    background-color: var(--Accent);
    color: var(--Background);
    transform: translateY(-2px);
}

/***** Animations for social media icons ******/
.socials a img {
    width: 60px; /* Adjust icon size */
    transition: transform 0.5s ease, filter 0.3s ease;
    cursor: pointer;
  }
  
  .socials a img:hover,
  .socials a img:focus,
  .socials a img:active {
    transform: scale(1.2) rotate(10deg); /* Scale and slightly rotate */
    filter: brightness(1.2); /* Add a slight glow effect */
  }
  
  /* For mobile-specific tap animations */
  @media (hover: none) and (pointer: coarse) {
    .socials a img:active {
      transform: scale(1.1) rotate(-10deg);
      filter: brightness(1.1);
    }
  }


/* Styles for the card container */
.portfolio-item {
    background-color: var(--Primary);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transform: perspective(1000px); /* Enable 3D perspective */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
  
  /* On hover, make the shadow pop */
  .portfolio-item:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }
  
  /* Inner container for smoother content transition */
  .portfolio-item-content {
    transform: translateZ(0);
    transition: transform 0.2s ease;
  }

  /* Reduce the intensity of the animation for smaller screens */
@media (hover: none) and (pointer: coarse) {
    .portfolio-item {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
  
    .portfolio-item:hover {
      /* No hover effect on mobile */
      box-shadow: none;
    }
  }
  /* Tech items animation adjustments */
.tech-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .tech-item:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }
  

  

  /* Navbar link hover animation */
.navbar-nav .nav-link {
    position: relative;
    color: var(--Accent);
    transition: color 0.3s ease;
  }
  
  .navbar-nav .nav-link:hover {
    color: var(--Primary);
  }
  
  /* Underline effect */
  .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px; /* Adjust spacing below the text */
    width: 0;
    height: 2px;
    background-color: var(--Primary);
    transition: width 0.3s ease;
  }
  
  .navbar-nav .nav-link:hover::after {
    width: 100%; /* Expand underline on hover */
  }