/* =========================================
   DESKTOP-ONLY ICON CLICKABLE AREAS
   =========================================
   The portfolio image and all service icon links
   now live inside the same .portfolio-image-wrapper
   container (see index.html). The desktop tilt/float
   animation transforms that wrapper, so the image
   and its clickable areas always move together.

   The service links here are positioned relative to
   the wrapper, which is exactly the size of the
   portfolio image. Because this file only applies
   at min-width: 992px (desktop), it can NEVER
   override the mobile/tablet positions defined in
   style.css's media queries.

   Positions are based on the red/pink marked areas
   in SAA.1.jpeg (reference image). Each clickable
   area covers exactly its own marked icon and text.
   ========================================= */

@media (min-width: 992px) {

    .ai-automation-link,
    .web-app-development-link,
    .service-3-link,
    .service-4-link,
    .service-5-link {
        position: absolute;
        display: block;
        background: transparent;
        border: none;
        cursor: pointer;
        text-decoration: none;
        /* Above the portfolio image so clicks are captured */
        z-index: 300;
        pointer-events: auto;
    }

    /* AI & Automation — 1st icon, bottom row */
    .ai-automation-link {
        left: 3.81%;
        top: 81.78%;
        width: 6.25%;
        height: 11.67%;
    }

    /* Web & App Development — 2nd icon, bottom row */
    .web-app-development-link {
        left: 12.19%;
        top: 81.22%;
        width: 6.12%;
        height: 11.11%;
    }

    /* Service 3 (E-Commerce) — 3rd icon, bottom row */
    .service-3-link {
        left: 20.44%;
        top: 80.00%;
        width: 6.06%;
        height: 11.78%;
    }

    /* Service 4 (Cloud & DevOps) — 4th icon, bottom row */
    .service-4-link {
        left: 29.50%;
        top: 80.44%;
        width: 6.25%;
        height: 11.78%;
    }

    /* Service 5 (Support & Maintenance) — 5th icon, bottom row */
    .service-5-link {
        left: 37.81%;
        top: 79.22%;
        width: 6.75%;
        height: 13.67%;
    }
}