/* @media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    @media (max-width: 1023px) {
      .safari-hidden-mobile {
        display: none !important;
      }
    }
  }
} */

.btn-hover:focus .btn-focus {
  opacity: 1 !important;
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .feature-bg-image {
    background-size: 580px;
  }
}
@media (min-width:768px) and (max-width: 1023px) {
    .feature-bg-image{
        background-size: contain;
    }
     .feature-bg-image .mobile-desc{
        max-width: 350px;
     }
}
@media (max-width: 1023px) {
    .mobile-desc{
        display: block !important;
    }

    .mobile-desc .hidden{
         display: block !important;
     }
  .mobile-desc ul {
    display: none;
  }
  .dex .hidden{
     display: none !important;
  }
  .peer:focus + div, .peer:active + div {
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: opacity 0s, pointer-events 0s !important;
    }
}
/* Remove the problematic transition: none and use this instead */

@media (max-width: 768px) {
  .peer {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  /* Smooth transition for hover (desktop) */
  .peer + div {
    transition: opacity 0.3s ease-out, pointer-events 0.3s ease-out;
  }

  /* Instant show/hide for mobile focus - no transition */
  .peer:focus + div,
  .peer:active + div {
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Remove transition only for mobile focus state */
    transition: opacity 0s, pointer-events 0s !important;
  }
}

/* Keep your existing styles but remove the problematic parts */
@media screen and (max-width: 639px) {
  .mobile-desc .hidden {
    display: block;
  }

  .mobile-desc ul {
    display: none;
  }

  .bg-grey-lightest .bg-img {
    background-image: url(/hubfs/raw_assets/public/comnet-home/src/images/bg/Union.png) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 25%;
  }

  .feature-img,
  .feature-img img {
    width: 100%;
  }
}

@media screen and (max-width: 639px) {
  .first-icon {
    left: 60px;
  }
}

@media screen and (max-width: 399px) {
  .btn-grp {
    gap: 10px;
  }

  .btn-grp a {
    font-size: 12px;
    width: 123px;
  }
}
@media only screen and (min-device-width: 390px) and (max-device-width: 664px) and (orientation: landscape) {
  .bg-grey-lightest .bg-img {
    background-repeat: no-repeat;
    background-position: 10% 16%;
    background-size: contain;
  }
  .mobile-desc{
    max-width: 400px;
  }
}