/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================
   HTML & BODY
========================================= */

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    background: #000000;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   MAIN PAGE
========================================= */

.portfolio-page {
    width: 100%;
    min-height: 100vh;

    background: #000000;
}


/* =========================================
   PORTFOLIO HERO
======================================= */

.portfolio-hero {
    position: relative;

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    overflow: hidden;

    background: #000000;

    /* 3D perspective for the parallax tilt effect */
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Desktop: constrain hero to image width so percentage-based clickable areas align with image content */
@media (min-width: 992px) {
    .portfolio-hero {
        max-width: 1600px;
        margin: 0 auto;
    }
}


/* =========================================
   PORTFOLIO IMAGE WRAPPER
========================================= */
/* Shared container for the portfolio image and
   the absolutely-positioned service icon links.
   On desktop this wraps the image width so the
   clickable areas stay perfectly aligned with
   the icons, and the desktop tilt/float animation
   transforms this wrapper (image + links together). */

.portfolio-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    transform-style: preserve-3d;
    will-change: transform;
}

/* =========================================
   PORTFOLIO IMAGE
========================================= */

.portfolio-image {
    display: block;

    width: 100%;
    height: auto;

    max-width: 1600px;

    object-fit: contain;

    /* 3D motion effect */
    transform-style: preserve-3d;
    will-change: transform;

    transition: transform 0.15s ease-out;

    /* Prevent the 3D-rotated image from intercepting click events
       on the absolutely-positioned icon links layered above it.
       This ensures every icon works in desktop view just like mobile. */
    pointer-events: none;
}


/* =========================================
   AI & AUTOMATION CLICKABLE AREA
========================================= */
.ai-automation-link {

    position: absolute;

    left: 10%;

    top: 69%;

    width: 15%;

    height: 8%;

    display: block;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 100;

    text-decoration: none;
}

/* Subtle hover indication */

.ai-automation-link:hover {

    background: rgba(0, 174, 255, 0.08);

    border-radius: 12px;
}


/* =========================================
   WEB & APP DEVELOPMENT CLICKABLE AREA
========================================= */

.web-app-development-link {

    position: absolute;

    left: 35%;

    top: 69%;

    width: 13%;

    height: 8%;

    display: block;

    background: transparent;

    border: none;

    cursor: pointer;

    /* Desktop: ensure click events work, maintain original z-index */
    pointer-events: auto;

    z-index: 201;

    text-decoration: none;
}


/* Subtle hover indication */

.web-app-development-link:hover {

    background: rgba(0, 174, 255, 0.08);

    border-radius: 12px;
}


/* =========================================
   SERVICE 3 CLICKABLE AREA
========================================= */

.service-3-link {

    position: absolute;

    left: 32%;

    top: 80%;

    width: 14%;

    height: 8%;

    display: block;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 201;

    text-decoration: none;
}


/* =========================================
   SERVICE 4 CLICKABLE AREA
========================================= */

.service-4-link {

    position: absolute;

    left: 26%;

    top: 80%;

    width: 14%;

    height: 8%;

    display: block;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 201;

    text-decoration: none;
}


/* =========================================
   SERVICE 5 CLICKABLE AREA
========================================= */

.service-5-link {

    position: absolute;

    left: 56%;

    top: 80%;

    width: 12%;

    height: 8%;

    display: block;

    background: transparent;

    border: none;

    cursor: pointer;

    z-index: 201;

    text-decoration: none;
}


/* =========================================
   SERVICE ICON BUTTONS POP-UP / BLINK ANIMATION
========================================= */
/* Continuous, subtle pop-up (scale) + blink/pulse
   (opacity + soft glow) animation for every service
   icon button. Only adds motion — position, size,
   colors, design and layout stay exactly unchanged.
   Works the same on desktop, tablet and mobile. */

@keyframes aiIconPopBlink {
    0% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 rgba(0, 174, 255, 0);
    }
    50% {
        transform: scale(1.05);
        opacity: 0.85;
        box-shadow: 0 0 18px rgba(0, 174, 255, 0.22);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 0 0 rgba(0, 174, 255, 0);
    }
}

.ai-automation-link,
.web-app-development-link,
.service-3-link,
.service-4-link,
.service-5-link {
    animation: aiIconPopBlink 2.6s ease-in-out infinite;
    /* Keep the moving shine inside the button area */
    overflow: hidden;
}

/* Slight stagger so each icon button pulses one after another */
.ai-automation-link {
    animation-delay: 0s;
}

.web-app-development-link {
    animation-delay: 0.15s;
}

.service-3-link {
    animation-delay: 0.3s;
}

.service-4-link {
    animation-delay: 0.45s;
}

.service-5-link {
    animation-delay: 0.6s;
}


/* =========================================
   SERVICE ICON BUTTONS SHINE / GLOW EFFECT
   ========================================= */
/* A soft light reflection continuously sweeps
   across every icon button. Uses a pseudo-element
   so size, position, design and click functionality
   stay exactly unchanged. Works in desktop and mobile. */

.ai-automation-link::after,
.web-app-development-link::after,
.service-3-link::after,
.service-4-link::after,
.service-5-link::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -60%;
    width: 60%;
    height: 120%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-150%) skewX(-18deg);
    animation: iconShineSweep 2.8s ease-in-out infinite;
    pointer-events: none;

    z-index: 1;
}

@keyframes iconShineSweep {
    0% {
        transform: translateX(-150%) skewX(-18deg);
    }
    55%,
    100% {
        transform: translateX(250%) skewX(-18deg);
    }
}

/* Slight stagger so the shine sweeps one button after another */
.ai-automation-link::after {
    animation-delay: 0s;
}

.web-app-development-link::after {
    animation-delay: 0.4s;
}

.service-3-link::after {
    animation-delay: 0.8s;
}

.service-4-link::after {
    animation-delay: 1.2s;
}

.service-5-link::after {
    animation-delay: 1.6s;
}


/* =========================================
   PROJECTS BUTTON
========================================= */

.projects-button {

    position: absolute;

    /* Position of the new Projects button.
       It is placed near the bottom-center area.
    */

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    z-index: 200;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-width: 150px;

    padding: 12px 22px;

    border-radius: 30px;

    /* Glass effect */

    background: rgba(5, 25, 55, 0.92);

    border: 1px solid rgba(0, 191, 255, 0.8);

    box-shadow:

        0 0 15px rgba(0, 174, 255, 0.35),

        inset 0 0 12px rgba(0, 174, 255, 0.08);

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition:

        transform 0.3s ease,

        background 0.3s ease,

        box-shadow 0.3s ease;
}


/* Projects icon */

.projects-icon {

    width: 30px;

    height: 30px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background:

        linear-gradient(

            135deg,

            #00bfff,

            #7c3aed

        );

    color: white;

    font-size: 16px;

    box-shadow:

        0 0 12px rgba(0, 191, 255, 0.5);
}


/* Projects text */

.projects-text {

    white-space: nowrap;
}


/* Projects hover */

.projects-button:hover {

    transform: translateX(-50%) translateY(-4px);

    background: rgba(10, 45, 90, 0.98);

    box-shadow:

        0 0 25px rgba(0, 191, 255, 0.55);
}


/* Projects click */

.projects-button:active {

    transform: translateX(-50%) scale(0.96);
}


/* =========================================
   AI AUTOMATION PAGE
========================================= */

.ai-page {

    min-height: 100vh;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px;

    color: white;

    background:

        radial-gradient(

            circle at top,

            #123b70 0%,

            #06152d 40%,

            #020817 75%,

            #000000 100%

        );
}


/* =========================================
   PAGE TITLE
========================================= */

.ai-page h1 {

    margin-bottom: 20px;

    font-size: clamp(

        32px,

        5vw,

        64px

    );

    font-weight: 800;

    background:

        linear-gradient(

            90deg,

            #00bfff,

            #8b5cf6,

            #ec4899

        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =========================================
   PROJECTS IMAGE
========================================= */

.projects-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 174, 255, 0.25);
}


/* =========================================
   PAGE DESCRIPTION
========================================= */

.ai-page p {

    max-width: 750px;

    margin-bottom: 35px;

    font-size: 18px;

    line-height: 1.7;

    color: #d1d5db;
}


/* =========================================
   BACK BUTTON
========================================= */

.back-button {

    display: inline-block;

    padding: 14px 30px;

    background:

        linear-gradient(

            90deg,

            #008cff,

            #7c3aed

        );

    color: white;

    text-decoration: none;

    border-radius: 8px;

    font-size: 16px;

    font-weight: 700;

    transition: all 0.3s ease;
}


/* =========================================
   BACK BUTTON HOVER
========================================= */

.back-button:hover {

    transform: translateY(-3px);

    box-shadow:

        0 10px 30px rgba(

            0,

            140,

            255,

            0.35

        );
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .portfolio-image-wrapper {
        width: 100%;
        height: 100%;
    }

    .portfolio-image {

        width: 100%;

        height: auto;
    }


    .ai-automation-link {

        left: 2.5%;

        top: 78%;

        width: 13%;

        height: 15%;
    }


    .web-app-development-link {

        left: 1.5%;

        top: 38%;

        width: 20%;

        height: 26%;
    }


    .service-3-link {

        position: absolute;

        left: 68%;

        top: 69%;

        width: 13%;

        height: 8%;

        display: block;

        background: transparent;

        border: none;

        cursor: pointer;

        z-index: 100;

        text-decoration: none;
    }


    .service-4-link {

        position: absolute;

        left: 22%;

        top: 80%;

        width: 17%;

        height: 8%;

        display: block;

        background: transparent;

        border: none;

        cursor: pointer;

        z-index: 100;

        text-decoration: none;
    }


    .service-5-link {

        position: absolute;

        left: 57%;

        top: 80%;

        width: 14%;

        height: 8%;

        display: block;

        background: transparent;

        border: none;

        cursor: pointer;

        z-index: 100;

        text-decoration: none;
    }


    .projects-button {

        bottom: 20px;

        min-width: 140px;

        padding: 10px 18px;

        font-size: 14px;
    }


    .projects-icon {

        width: 27px;

        height: 27px;

        font-size: 14px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    html,

    body {

        overflow-x: hidden;

    }

    body {

        overflow: hidden;

    }

    .portfolio-page {

        height: 100vh;

        height: 100dvh;

        min-height: 100vh;

        min-height: 100dvh;

        overflow: hidden;
    }


    .portfolio-hero {

        width: 100%;

        height: 100vh;

        height: 100dvh;

        min-height: 100vh;

        min-height: 100dvh;

        display: flex;

        justify-content: center;

        align-items: center;

        overflow: hidden;

        background: url('images/prot.2.jpeg') center center / contain no-repeat;
    }


    .portfolio-image-wrapper {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        will-change: transform;
    }


    .portfolio-image {

        display: none;
    }


    .ai-automation-link {

        left: 18%;

        top: 69%;

        width: 15%;

        height: 8%;
    }


    .web-app-development-link {

        left: 42%;

        top: 69%;

        width: 13%;

        height: 8%;
    }


    .service-3-link {

        left: 65%;

        top: 69%;

        width: 11%;

        height: 8%;
    }


    .service-4-link {

        left: 26%;

        top: 80%;

        width: 14%;

        height: 8%;
    }


    .service-5-link {

        left: 56%;

        top: 80%;

        width: 12%;

        height: 8%;
    }


    .projects-button {

        left: 50%;

        bottom: 10px;

        transform: translateX(-50%);

        min-width: 280px;

        width: 80%;

        max-width: 320px;

        padding: 14px 24px;

        gap: 10px;

        font-size: 16px;

        font-weight: 700;

        border-radius: 40px;

        background: linear-gradient(

            135deg,

            #f53b8c,

            #e0357f

        );

        border: 1px solid rgba(255, 255, 255, 0.3);

        box-shadow:

            0 4px 20px rgba(245, 59, 140, 0.4),

            inset 0 0 10px rgba(255, 255, 255, 0.1);

        color: #ffffff;
    }


    .projects-icon {

        width: 28px;

        height: 28px;

        font-size: 14px;

        background: linear-gradient(

            135deg,

            #ff6ba9,

            #f53b8c

        );

        box-shadow:

            0 0 12px rgba(245, 59, 140, 0.5);
    }


    .projects-button:hover {

        transform: translateX(-50%) translateY(-4px);

        background: linear-gradient(

            135deg,

            #ff4d9e,

            #f53b8c

        );

        box-shadow:

            0 6px 25px rgba(245, 59, 140, 0.6);
    }


    .projects-button:active {

        transform: translateX(-50%) scale(0.96);
    }


    .ai-page {

        padding: 25px;
    }


    .ai-page h1 {

        font-size: 34px;
    }


    .ai-page p {

        font-size: 16px;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .ai-automation-link {

        left: 18%;

        top: 69%;

        width: 15%;

        height: 8%;
    }


    .web-app-development-link {

        left: 42%;

        top: 69%;

        width: 13%;

        height: 8%;
    }


    .service-3-link {

        left: 65%;

        top: 69%;

        width: 11%;

        height: 8%;
    }


    .service-4-link {

        left: 26%;

        top: 80%;

        width: 14%;

        height: 8%;
    }


    .service-5-link {

        left: 56%;

        top: 80%;

        width: 12%;

        height: 8%;
    }


    .projects-button {

        bottom: 10px;

        min-width: 240px;

        width: 85%;

        padding: 12px 20px;

        font-size: 15px;
    }
}