/*
 Theme Name:   Mantis and Crow
 Theme URI:    https://bricksbuilder.io/
 Description:  Mantis and Crow digital agency website
 Author:       Mantis and Crow
 Author URI:   https:mantisandcrow.com/
 Template:     bricks
 Version:      1.1
 
*/
html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}



/* Change the scroll bar width // Scroll bar width */
::-webkit-scrollbar {
width: 10px; 
}

/* Change the background of the scroll bar track // Background color */
::-webkit-scrollbar-track {
background-color: #D1BFA7; 
}

/* Change the background of the scroll bar thumb (the draggable part) /// Thumb color / Corner radius */
::-webkit-scrollbar-thumb {
background-color: #4D4A3B; 
border-radius: 5px; 
}

/* Change the color and shape of the scroll bar thumb on hover // Hover color */
::-webkit-scrollbar-thumb:hover {
background-color: #4D4A3B; 
}

/* Change the shape of the scroll bar thumb when it’s in focus // Focus color */
::-webkit-scrollbar-thumb:focus {
background-color: #4D4A3B; 
}

/* Common styles for both card types */
.home-our-services__card,
.home-team__card {
  transition: all 0.3s ease-in-out;
}

.home-our-services__card:focus,
.home-team__card:focus {
  outline: 1px solid #ecd18e; /* Optional focus outline for better visibility */
}

.home-our-services__card:hover .home-our-services__card--image img,
.home-our-services__card:focus .home-our-services__card--image img,
.home-team__card:hover .home-team__card--image img,
.home-team__card:focus .home-team__card--image img {
  transform: scale(1.1); /* Zoom the image */
  transition: transform 0.3s ease-in-out;
}

.home-our-services__card:hover .our-services__card--heading,
.home-our-services__card:focus .our-services__card--heading {
  background-color: #ecd18e; /* Change the background color of the heading */
  transition: background-color 0.3s ease-in-out;
}

.home-our-services__card:hover .Icon,
.home-our-services__card:focus .Icon,
.home-team__card:hover .Icon,
.home-team__card:focus .Icon {
  transform: translateX(10px); /* Move the icon 10px to the right */
  transition: transform 0.3s ease-in-out;
}

.home-our-services__card--image img,
.home-team__card--image img {
  transition: transform 0.3s ease-in-out; /* Smooth zoom effect */
}

.icon {
  transition: transform 0.3s ease-in-out; /* Smooth icon movement */
}

/* Optional: If you want the text link and icon to still be tabbable */
.text-link_wrapper a {
  position: relative;
  z-index: 1;
  outline: none;
}

.text-link_wrapper a:focus {
  outline: 2px solid #007BFF;
}