.layout-26-outer-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.layout-26-inner-wrapper {
  background-color: rgb(0, 157, 197);
  border: 2px solid rgb(0, 157, 197) !important;
  padding: 1rem;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.layout-26-inner-wrapper:hover {
  background-color: #fff;
  color: #000;
  background-image: url("/sites/default/files/2024-11/Exindru-Experts-in-Drupal-icons-droplet-background-small.png");
  background-repeat: no-repeat;
  background-position: right bottom;
}
.layout-26-inner-wrapper:hover .layout-26-link-wrapper {
  color: #009dc5;
}
.layout-26-image-wrapper {
  margin-bottom: 1.5rem;
}
.layout-26-main-img {
  display: block;
}
.layout-26-hover-img {
  display: none;
}
.layout-26-title-wrapper h5 {
  font-weight: bold !important;
}

#layout-26-1-inner-wrapper:hover .layout-26-main-img {
  display: none;
}
#layout-26-1-inner-wrapper:hover .layout-26-hover-img {
  display: block;
}

#layout-26-2-inner-wrapper:hover .layout-26-main-img {
  display: none;
}
#layout-26-2-inner-wrapper:hover .layout-26-hover-img {
  display: block;
}

#layout-26-3-inner-wrapper:hover .layout-26-main-img {
  display: none;
}
#layout-26-3-inner-wrapper:hover .layout-26-hover-img {
  display: block;
}

#layout-26-4-inner-wrapper:hover .layout-26-main-img {
  display: none;
}
#layout-26-4-inner-wrapper:hover .layout-26-hover-img {
  display: block;
}

#layout-26-5-inner-wrapper:hover .layout-26-main-img {
  display: none;
}
#layout-26-5-inner-wrapper:hover .layout-26-hover-img {
  display: block;
}

#layout-26-6-inner-wrapper:hover .layout-26-main-img {
  display: none;
}
#layout-26-6-inner-wrapper:hover .layout-26-hover-img {
  display: block;
}

#layout-26-7-inner-wrapper:hover .layout-26-main-img {
  display: none;
}
#layout-26-7-inner-wrapper:hover .layout-26-hover-img {
  display: block;
}

#layout-26-8-inner-wrapper:hover .layout-26-main-img {
  display: none;
}
#layout-26-8-inner-wrapper:hover .layout-26-hover-img {
  display: block;
}

/*Layout 27 ------------------------------------------------------*/
.layout-27-outer-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.layout-27-inner-wrapper {
  background-color: rgb(0, 157, 197);
  border: 2px solid rgb(0, 157, 197) !important;
  padding: 1rem;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.animate-image-wrapper {
  position: absolute;
  bottom: -20px;
  right: 0;
  opacity: 0;
  transition: all 1s;
}

.layout-27-inner-wrapper:hover {
  background-color: #fff;
  color: #000;
/*  background-image: url("/sites/default/files/2024-11/Exindru-Experts-in-Drupal-icons-droplet-background.png");
  background-repeat: no-repeat;
  background-position: right bottom;
   transition: all 0.5s ease-in-out; */
}
.layout-27-inner-wrapper:hover .layout-27-link-wrapper {
  color: #009dc5;
}

.layout-27-inner-wrapper:hover .animate-image-wrapper {
  opacity: 1;
  bottom: 0;
  transition: all 1s;
}

.layout-27-image-title-wrapper {
  margin-bottom: 2rem;
}
.layout-27-title-wrapper {
  flex: 1;
}
.layout-27-title-wrapper h2 {
  margin-bottom: 0px;
  font-weight: bold;
}
.layout-27-main-img {
  display: block;
}
.layout-27-hover-img {
  display: none;
}

#layout-27-1-inner-wrapper:hover .layout-27-main-img {
  display: none;
}
#layout-27-1-inner-wrapper:hover .layout-27-hover-img {
  display: block;
}

#layout-27-2-inner-wrapper:hover .layout-27-main-img {
  display: none;
}
#layout-27-2-inner-wrapper:hover .layout-27-hover-img {
  display: block;
}

#layout-27-3-inner-wrapper:hover .layout-27-main-img {
  display: none;
}
#layout-27-3-inner-wrapper:hover .layout-27-hover-img {
  display: block;
}

#layout-27-4-inner-wrapper:hover .layout-27-main-img {
  display: none;
}
#layout-27-4-inner-wrapper:hover .layout-27-hover-img {
  display: block;
}

#layout-27-5-inner-wrapper:hover .layout-27-main-img {
  display: none;
}
#layout-27-5-inner-wrapper:hover .layout-27-hover-img {
  display: block;
}

#layout-27-6-inner-wrapper:hover .layout-27-main-img {
  display: none;
}
#layout-27-6-inner-wrapper:hover .layout-27-hover-img {
  display: block;
}

#layout-27-7-inner-wrapper:hover .layout-27-main-img {
  display: none;
}
#layout-27-7-inner-wrapper:hover .layout-27-hover-img {
  display: block;
}

#layout-27-8-inner-wrapper:hover .layout-27-main-img {
  display: none;
}
#layout-27-8-inner-wrapper:hover .layout-27-hover-img {
  display: block;
}

/*Layout 28 ------------------------------------------------------*/
.layout-28-outer-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.layout-28-inner-wrapper {
  background-color: #fff;
  border: 2px solid rgb(0, 157, 197) !important;
  padding: 1rem;
  border-radius: 5px;
  text-decoration: none;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}
.layout-28-inner-wrapper:hover {
  color: #000;
}

.layout-28-inner-wrapper:hover .animate-image-wrapper {
  opacity: 1;
  bottom: 0;
  transition: all 1s;
}

.layout-28-image-title-wrapper {
  margin-bottom: 2rem;
}
.layout-28-title-wrapper h2 {
  margin-bottom: 0px;
  font-weight: bold;
}
.layout-28-title-wrapper {
  flex: 1;
}
.layout-28-descr-wrapper {
  color: rgb(183, 183, 183);
}
.layout-28-link-wrapper {
  color: #009dc5;
}
.layout-28-main-img {
  display: block;
}
.layout-28-hover-img {
  display: none;
}
.layout-28-contact-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.layout-28-contact-text-wrapper {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
#layout-28-1-inner-wrapper:hover .layout-28-descr-wrapper {
  color: #000;
}

#layout-28-1-inner-wrapper:hover .layout-28-main-img {
  display: none;
}
#layout-28-1-inner-wrapper:hover .layout-28-hover-img {
  display: block;
}

#layout-28-2-inner-wrapper:hover .layout-28-descr-wrapper {
  color: #000;
}

#layout-28-2-inner-wrapper:hover .layout-28-main-img {
  display: none;
}
#layout-28-2-inner-wrapper:hover .layout-28-hover-img {
  display: block;
}

#layout-28-3-inner-wrapper:hover .layout-28-descr-wrapper {
  color: #000;
}

#layout-28-3-inner-wrapper:hover .layout-28-main-img {
  display: none;
}
#layout-28-3-inner-wrapper:hover .layout-28-hover-img {
  display: block;
}

#layout-28-4-inner-wrapper:hover .layout-28-descr-wrapper {
  color: #000;
}

#layout-28-4-inner-wrapper:hover .layout-28-main-img {
  display: none;
}
#layout-28-4-inner-wrapper:hover .layout-28-hover-img {
  display: block;
}

#layout-28-5-inner-wrapper:hover .layout-28-descr-wrapper {
  color: #000;
}

#layout-28-5-inner-wrapper:hover .layout-28-main-img {
  display: none;
}
#layout-28-5-inner-wrapper:hover .layout-28-hover-img {
  display: block;
}