/* Mobile Phones (up to 767px): */
@media only screen and (max-width: 767px) {
  /* Styles for mobile phones */

  .footer-div {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer-div img {
    padding-right: 4px;
  }
}

/* Tablets (768px to 991px): */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Styles for tablets */

  .footer-div {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer-div img {
    padding-right: 4px;
  }
}

/* Small Laptops and Desktops (992px to 1199px): */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* Styles for small laptops and desktops */

  /* Styles for dot layer */
  .dot-layer {
    background-image: url(../img/white-pattern);
    z-index: 100;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    /* Add this line to allow clicks to pass through */
  }

  .m-30 {
    margin-right: -30px;
  }

  /* CSS for the service item container */
  .service-item {
    position: relative;
  }

  /* Additional CSS for the new dot layer outside the button's container */
  .dot-layer:last-child {
    z-index: 99;
    /* Ensure the dot layer is below the button's container */
  }

  /* CSS for the button */
  .button {
    position: relative;
    /* Ensure the button is positioned relatively */
    z-index: 101;
    /* Make sure the button appears above the dot layer */
  }

  /* CSS for the <img> element */
  img {
    position: relative;
    /* Ensure the <img> element is positioned relatively */
    z-index: 200;
    /* Make sure the <img> element appears above the dot layer and the service item */
  }

  .footer-div {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 90%;
    width: 100%;
    z-index: 200;
  }

  .footer-div img {
    padding-right: 4px;
    opacity: 0.8;
  }
}

/* Large Laptops and Desktops (1200px and larger): */
@media only screen and (min-width: 1200px) {
  /* Styles for large laptops and desktops */

  /* Styles for dot layer */
  .dot-layer {
    background-image: url(../img/white-pattern.png);
    z-index: 100;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    /* Add this line to allow clicks to pass through */
  }

  .m-30 {
    margin-right: -30px;
  }

  /* CSS for the service item container */
  .service-item {
    position: relative;
  }

  /* Additional CSS for the new dot layer outside the button's container */
  .dot-layer:last-child {
    z-index: 99;
    /* Ensure the dot layer is below the button's container */
  }

  /* CSS for the button */
  .button {
    position: relative;
    /* Ensure the button is positioned relatively */
    z-index: 101;
    /* Make sure the button appears above the dot layer */
  }

  /* CSS for the <img> element */
  img {
    position: relative;
    /* Ensure the <img> element is positioned relatively */
    z-index: 200;
    /* Make sure the <img> element appears above the dot layer and the service item */
  }

  .footer-div {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 90%;
    width: 100%;
    z-index: 200;
  }

  .footer-div img {
    padding-right: 4px;
    opacity: 0.9;
  }

  .service-content p ,h4 {
    position: relative;
    z-index: 200;
 
  }




}

/* Retina and High-DPI Devices: */

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
  /* Styles for high-DPI devices (Retina) */
}