/* Difference Block */
.difference-block{
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.77);
  position: relative;
  z-index: 1;
  transition: all 0.5s ease-in-out 0s;
  height: 100%;
}

/* Grid Layout for Desktop */
.difference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* default fallback */
  gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.difference-grid-item {
  width: 100%;
  --gap-count: calc(var(--column-count) - 1);
  --total-gap: calc(var(--column-gap) * var(--gap-count));
  width: calc(
    (100% - var(--total-gap)) / var(--column-count)
  );
}

/* Responsive — Elementor control will override inline style */
@media (max-width: 991px) {
  .difference-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .difference-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}




.difference-block:hover {
  background: linear-gradient(133.15deg, #F6F8FC 14.44%, #CCCFDD 94.38%);
}
.difference-block::before{
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(133.15deg, #F6F8FC 14.44%, #CCCFDD 94.38%);
    background-size:cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  
}



.difference-block-text-wrap {
  position: relative;
}
.difference-block-text {
  transition: all 0.5s ease-in-out;
}
.difference-block-text-hover {
  opacity: 0;
  transition: all 0.5s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
}




.difference-block-text-wrap h4{
  margin: 0 0 16px 0;
}
.difference-block-text-wrap p{
  margin:0;
}
.difference-block-img {
  margin-top: auto;
  width: 100%;
  max-width: 50px!important;
  filter: brightness(0) saturate(100%) invert(97%) sepia(15%) saturate(1089%) hue-rotate(178deg) brightness(93%) contrast(89%);  
}
.has-hover .difference-block-img {
  transition: all 0.5s ease-in-out;
}


.has-hover .difference-block::before {
background: url('/wp-content/themes/aw-custom/assets/images/career-info-img.svg') no-repeat center center;
transition: all 0.5s ease-in-out;
}

.difference-grid-item:not(.has-hover) .difference-block:hover .difference-block-img{
  filter: brightness(0) saturate(100%) invert(62%) sepia(44%) saturate(4097%) hue-rotate(139deg) brightness(104%) contrast(99%);
  filter: none; 
}

.diff-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 auto;
    border-radius: 100px;
    transition: all 0.4s ease;
    position: absolute;
    right: 24px;
    bottom: 24px;
    cursor: pointer;
}
.diff-btn img {
    width: 20px;
}

.difference-block.is-open .diff-btn {
  rotate: 180deg;
}

@media (min-width:768px) and (max-width:1199px) {
  .difference-block-text {
    transition: none;
  }
  .difference-block-text-hover {
      transition: none;
  }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (-min--moz-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (min-device-pixel-ratio: 2)
{ /* Your Styles... */ 
.difference-block-text {
    transition: none;
  }
  .difference-block-text-hover {
      transition: none;
  }

}

@media only screen and (min-width: 1366px) and (max-height: 1024px) and (orientation: landscape) {
  /* Your landscape-specific styles here */
  .difference-block-text {
    transition: none;
  }
  .difference-block-text-hover {
      transition: none;
  }
}



@media screen and (min-width: 992px) {
/* .has-hover .difference-block:hover .diff-btn {
  opacity: 0;
}
.has-hover .difference-block:hover .difference-block-text-hover {
  opacity: 1;
}
.has-hover .difference-block:hover::before{
  opacity: 1;
}
.has-hover .difference-block:hover .difference-block-text {
  opacity: 0;
}
.has-hover .difference-block:hover .difference-block-img {
    opacity: 0;
} */
}

.difference-block.is-open .difference-block-text-hover {
  opacity: 1;
}
.difference-block.is-open .difference-block-text {
  opacity: 0;
}
.difference-block.is-open .difference-block-img {
  opacity: 0;
}

.difference-pagination{
  margin-top: 5px;
}
.difference-pagination .swiper-pagination-bullet{
  width: 32px;
  background-color: #8092AC;
  background-color: #0f174c;
  opacity: 1;
  border-radius: 0px;
}
.difference-pagination .swiper-pagination-bullet-active{
  width: 64px;
  background-color: #DAE0EA;
}

.mobile{
  display: none;
}

.difference-slider .swiper-slide {
  height: auto;
}
@media screen and (max-width: 991px) {
  
  .difference-block-text-wrap h4{
    font-size: 24px;
    line-height: 115%;
  }



  .mobile{
    display: block;
  }
  .desktop{
    display: none;
  }


}
@media screen and (max-width: 767px) {


  .difference-block-text-wrap h4{
    font-size: 21px;
  }


  

}