/* ── Fonts ─────────────────────────────────────────────── */
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(../fonts/Exo2-latin.woff2) format('woff2');
}

body {
    font-family: 'Exo 2', sans-serif;
    scroll-behavior: smooth;
    max-width: 1920px;
    margin: 0 auto;
    overflow-x: hidden;
}

/* ── Layout helpers ─────────────────────────────────────── */
.px-page { padding-left: max(16px, calc(50% - 540px)); padding-right: max(16px, calc(50% - 540px)); }

/* ── Section opacity-text decoration ───────────────────── */
.opacity-marker {
    font-size: 120px;
    line-height: 146px;
    font-weight: 600;
    color: #0AC5D3;
    opacity: 0.3;
    text-transform: uppercase;
    display: inline-block;
    width: 190px;
    margin-right: -170px;
    pointer-events: none;
}
/* Per-section marker overlap (from old site) */
.services-block .opacity-marker  { width: 160px; margin-right: -130px; }
.shopify-section .opacity-marker { margin-right: -150px; }
/* Story 6.2: use absolute positioning like Magento — removes negative margin that was pushing heading text flush to left edge */
.ai-section .opacity-marker      { position: absolute; left: 0; top: -10px; margin-right: 0; }
.mob-section .opacity-marker     { margin-right: -193px; }
/* Story 1.11: left: 0 aligns marker's left edge with heading text start */
.magento-section .opacity-marker { position: absolute; left: 0; top: -10px; margin-right: 0; }
footer .opacity-marker           { margin-right: -193px; }

@media (max-width: 767px) {
    .opacity-marker { font-size: 50px; line-height: 61px; }
    /* ── Story 1.10: all section markers — absolutely positioned behind title ── */
    /* Each heading <p> has position: relative (via Tailwind 'relative' class).  */
    /* Marker uses position: absolute so it is out of normal flow — title text   */
    /* renders in its natural position (centered or left-aligned) unaffected.   */
    /* Marker sits at the left edge, slightly above the heading, like watermark. */
    header .opacity-marker,
    .services-block .opacity-marker,
    .our-projects .opacity-marker,
    .reviews-section .opacity-marker,
    .shopify-section .opacity-marker,
    .ai-section .opacity-marker,
    .mob-section .opacity-marker,
    footer .opacity-marker {
        position: absolute;
        left: 0;
        top: 0;
        margin-right: 0;
        transform: none;
    }
    /* Magento: reset its desktop absolute positioning (same approach on mobile) */
    .magento-section .opacity-marker {
        position: absolute;
        left: 0;
        top: 0;
        margin-right: 0;
        transform: none;
    }

    /* ── Our Projects — reduce excess bottom whitespace ── */
    .our-projects { padding-bottom: 40px; }

    /* ── Shopify section — reduce vertical padding on mobile ── */
    .shopify-section { padding-top: 32px; padding-bottom: 32px; }

    /* ── Footer Contact Us — reduce heading font size on mobile ── */
    footer .text-\[40px\] { font-size: 28px; line-height: 1.2; }

    /* ── AI section — reduce text spacing so images become visible ── */
    .ai-section .space-y-4 > * + * { margin-top: 8px; }
    .ai-section .leading-relaxed { line-height: 1.45; }
    .ai-section { padding-bottom: 0 !important; }

    /* ── AI button — shift label right so "request" lands on teal ── */
    /* (see also AI section mobile block below — later rule takes precedence) */

    /* ── Hero — reduce description font size to help content fit ── */
    header .text-lg { font-size: 15px; line-height: 1.5; }
    header .mt-4 { margin-top: 8px; }

    /* ── Mobile App wrapper — tighter padding ── */
    .mob-section .py-8 { padding-top: 16px; padding-bottom: 16px; }

    /* ── Reviews — shift Clutch widget to left edge so hand bleeds left ── */
    .reviews-section .clutch-widget { margin-left: -32px; width: calc(100% + 48px); }

    /* ── Buttons — fix text label position for each section on mobile ── */
    .magento-section .cta-btn .btn-label { left: 65px !important; }
    footer .cta-btn .btn-label { left: 52px !important; }
}


/* ── Header ─────────────────────────────────────────────── */
header {
    background-image: url(../images/vector.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    overflow: hidden;
}
@media (max-width: 993px) {
    header { background-position: -50px bottom; }
}

/* ── Custom animated button ─────────────────────────────── */
.cta-btn {
    position: relative;
    display: inline-block;
    min-width: 220px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    background: none;
    overflow: visible;
}
.cta-btn .btn-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
    height: 60px;
    background: currentColor;
    clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 40px 100%, 0% 50%);
}
.cta-btn .btn-left::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    clip-path: polygon(41px 2px, 100% 2px, 100% calc(100% - 2px), 41px calc(100% - 2px), 3.5px 50%);
}
.cta-btn .top-line,
.cta-btn .down-line,
.cta-btn .top-long-line,
.cta-btn .down-long-line {
    display: none;
}
.cta-btn .btn-right {
    width: 85px; height: 60px;
    margin: 0;
    margin-left: 134px;
    background: #0AC5D3;
    position: relative;
}
.cta-btn .btn-right::after {
    content: "";
    width: 0; height: 0;
    position: absolute;
    left: 100%;
    border-width: 30px 0 30px 30px;
    border-style: solid;
    border-color: transparent #0AC5D3;
}
.cta-btn .btn-label {
    position: absolute;
    left: 39px; bottom: 16px;
    font-weight: 600;
    font-size: 16px;
    line-height: 144.9%;
    white-space: nowrap;
    word-spacing: 2px;
    letter-spacing: 1px;
}
.cta-btn .btn-label > span {
    margin-left: 3px;
}

@keyframes bounce {
    0%, 20%, 60%, 100% { transform: translateY(0); }
    40%  { transform: translateY(-20px); }
    80%  { transform: translateY(-10px); }
}
.cta-btn:hover { animation: bounce 1s; }

/* Per-section button sizing (matches original site) */
.shopify-section .cta-btn .btn-right  { width: 60px; margin-left: 137px; }
.shopify-section .cta-btn .btn-label   { left: 44px; }

.magento-section .cta-btn .btn-right  { width: 79px; margin-left: 113px; }
.magento-section .cta-btn .btn-label   { left: 63px; }

.mob-section .cta-btn .btn-right      { width: 68px; margin-left: 139px; }
.mob-section .cta-btn .btn-label       { left: 47px; }

.ai-section .cta-btn .btn-right       { width: 75px; margin-left: 120px; }
.ai-section .cta-btn .btn-label        { left: 50px; }

footer .cta-btn .btn-right            { width: 75px; margin-left: 137px; }
footer .cta-btn .btn-label             { left: 94px; }
footer .cta-btn .btn-left::after       { background: #191C2B; }

@media (max-width: 767px) {
    .cta-btn .btn-left {
        width: 105px !important;
        height: 45px !important;
        clip-path: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0% 50%);
    }
    .cta-btn .btn-left::after {
        clip-path: polygon(31px 2px, 100% 2px, 100% calc(100% - 2px), 31px calc(100% - 2px), 3.5px 50%);
    }
    .cta-btn .btn-right {
        width: 50px !important; height: 45px !important;
        margin-left: 105px !important;
    }
    .cta-btn .btn-right::after { border-width: 22.5px 0 22.5px 25px; }
    .cta-btn .btn-label {
        left: 34px !important;
        bottom: 14px !important;
        font-size: 12px;
    }
    .cta-btn { min-width: 170px; }
    footer .cta-btn { margin: 0 auto; }
}

/* ── Services block ─────────────────────────────────────── */
.services-block {
    background-image: url(../images/services-background.webp);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #191C2B;
    overflow: hidden;
}

.services-block .bef-img { position: relative; padding-left: 85px; }
@media (max-width: 767px) {
    .services-block .bef-img {
        padding-left: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .services-block .bef-img::before {
        flex-shrink: 0;
    }
    .services-block p.text-lg { padding-left: 0 !important; }
}
.services-block .services-staffing    .bef-img::before { content: url(../images/out-staffing.webp); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.services-block .services-ext         .bef-img::before { content: url(../images/ext-development.webp); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.services-block .services-migration   .bef-img::before { content: url(../images/services-migration.webp); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.services-block .services-mobile      .bef-img::before { content: url(../images/mobile-app-dev.webp); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.services-block .services-ai          .bef-img::before { content: url(../images/artificial-intelegence.webp); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.services-block .services-theme       .bef-img::before { content: url(../images/theme-development.webp); position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

@media (max-width: 767px) {
    .services-block .bef-img::before { position: static !important; transform: none !important; display: block; }
}

/* ── Our Projects (fix margin collapse gap + carousel overflow) ── */
.our-projects { padding-top: 0.1px; }
.our-projects .slider-projects { overflow: visible; }

/* ── Slider prev/next arrows — hide on desktop, show on mobile ── */
@media (min-width: 994px) {
    .our-projects .slick-prev,
    .our-projects .slick-next { display: none !important; }
}
@media (max-width: 993px) {
    .our-projects .slick-prev,
    .our-projects .slick-next {
        z-index: 10;
        width: 36px; height: 36px;
    }
    .our-projects .slick-prev { left: 4px; }
    .our-projects .slick-next { right: 4px; }
    .our-projects .slick-prev::before,
    .our-projects .slick-next::before {
        font-size: 28px;
        color: #0AC5D3;
        opacity: 0.8;
    }
}

/* ── Slick carousel dots ────────────────────────────────── */
.our-projects .slick-dots { margin-bottom: -86px; }
.our-projects .slick-dots li {
    background-color: #0AC5D3; width: 11px; height: 11px;
    border-radius: 5px; margin: 0 11px; vertical-align: middle;
}
.our-projects .slick-dots li button::before { opacity: 0; }
.our-projects .slick-dots .slick-active {
    width: 25px; height: 25px; border-radius: 13px;
    background-color: transparent;
    border: 0.4px solid #0AC5D3; padding: 4px;
}
.our-projects .slick-dots .slick-active button {
    width: 15px; height: 15px;
    background-color: #0AC5D3; border-radius: 8px;
}
.our-projects .slick-slide:focus { outline: 0; }
.our-projects .slick-slide img { margin: 0 auto; max-width: 100%; height: auto; }

/* ── Shopify section background ─────────────────────────── */
.shopify-section {
    background-image: url(../images/kisspng-e-shopify_logo_new-gray.webp);
    background-repeat: no-repeat;
}

/* ── Mobile section background ─────────────────────────── */
.mob-section {
    background-color: #191C2B;
}
.mob-section p { color: #fff; }
.mob-section .font-semibold { color: #fff; }
.mob-section .text-darktext { color: #C8C8C8; }
.mob-section .cta-btn { color: #fff; }
.mob-section .cta-btn .btn-left::after { background: #191C2B; }

/* ── AI section background + layout ────────────────────── */
.ai-section {
    background-image: url(../images/open-tag-ai.webp);
    background-repeat: no-repeat;
    background-position: left bottom;
    position: relative;
}
#ai-img {
    position: absolute;
    top: 225px;
    right: 1%;
    width: 48%;
    max-width: none;
    margin-top: 0;
}
@media (max-width: 1023px) {
    #ai-img { position: static; width: 100%; }
}
@media (max-width: 767px) {
    .ai-section { background-size: 95% auto; background-position: left center; }
    .ai-section > div { padding-left: 24px; padding-right: 24px; }
    /* Story 2.4: shift "Make a request" label right so "request" lands on blue section */
    .ai-section .cta-btn .btn-label { left: 58px !important; }
    /* Tighten paragraph spacing so images are reachable */
    .ai-section .space-y-4 > * + * { margin-top: 0.5rem !important; }
    .ai-section .leading-relaxed { line-height: 1.4; }
}

/* ── Magento section background + layout ────────────────── */
.magento-section {
    background-image: url(../images/magento-logo-grey.webp);
    background-repeat: no-repeat;
    background-color: #191C2B;
    position: relative;
    overflow: hidden;
    width: 100%; /* Story 6.1: ensure full-width background on all viewports */
    box-sizing: border-box;
}
.magento-section p { color: #fff; }
.magento-section .text-darktext { color: #C8C8C8; }
.magento-section .opacity-marker { color: #0AC5D3; }
.magento-section .cta-btn { color: #fff; }
.magento-section .cta-btn .btn-left::after { background: #191C2B; }
.magento-section .cta-btn .btn-label > span { color: #000; }
#magento-img {
    position: absolute;
    top: 58px;
    right: 0;
    width: 48%;
    max-width: none;
    margin-top: 0;
}
@media (max-width: 1023px) {
    #magento-img { position: static; width: 100%; }
}

/* ── Footer ─────────────────────────────────────────────── */
footer { background-color: #191C2B; position: relative; overflow: visible; }

footer .footer-phone    { position: absolute; top: -35px; left: 150px; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25)); }
footer .footer-message  { position: absolute; top: -45px; right: 130px; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25)); }
footer .footer-vector1  { position: absolute; top: 30px;  left: 30px; }
footer .footer-email    { position: absolute; top: 130px; right: 60px; }
footer .globus          { position: absolute; top: 210px; left: 60px; }
footer .footer-vector-small2 { position: absolute; bottom: 200px; right: 120px; }
footer .footer-vector-small1 { position: absolute; bottom: 220px; left: 50px; }
footer .footer-vector2  { position: absolute; bottom: 0;   left: 0; }

@media (max-width: 768px) {
    footer .footer-phone,
    footer .footer-message,
    footer .footer-vector1,
    footer .footer-email,
    footer .globus,
    footer .footer-vector-small2,
    footer .footer-vector-small1,
    footer .footer-vector2 { display: none; }
}
@media (max-width: 1023px) {
    footer .border-t .flex-wrap > div { text-align: center; }
    footer .border-t .flex.items-center { justify-content: center; }
}

/* ── Footer form inputs ─────────────────────────────────── */
footer .contact-input {
    border: 0;
    border-bottom: 1px solid #0AC5D3;
    width: 100%;
    max-width: 410px;
    background-color: transparent;
    text-align: center;
    padding-bottom: 15px;
    margin-top: 32px;
    color: #ffffff;
    font-size: 20px;
    line-height: 20px;
    font-family: 'Exo 2', sans-serif;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
footer .contact-input:focus { outline: none; }
footer .contact-input::placeholder { color: #C4C4C4; }

@media (max-width: 550px) {
    footer .contact-input { max-width: 294px; }
}

/* ── Reviews section — clutch image toward left edge ────── */
#clutch-img {
    margin-left: calc(-50vw + 50%);
    max-width: none;
}
@media (max-width: 1023px) {
    #clutch-img { margin-left: auto; max-width: 100%; }
}
@media (max-width: 767px) {
    /* Story 3.6: flush hand image to left screen edge, no right overflow */
    /* Keep margin-left: -32px to offset both px-4 padding layers (2×16px). */
    /* width: calc(100% + 32px) fills from left edge to right edge of outer padding. */
    /* overflow-x: hidden on reviews-section clips any bleed safely. */
    #clutch-img { margin-left: -32px; width: calc(100% + 32px); }
    .reviews-section { overflow-x: hidden; }
    .clutch-widget { max-width: 100vw; overflow: hidden; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); }
}

/* ── reCAPTCHA badge hidden (invisible captcha) ─────────── */
.grecaptcha-badge { visibility: hidden; }

/* ── Nav mobile active state ────────────────────────────── */
nav.menu-open { background-color: #191C2B; }
nav.menu-open .nav-link-text { color: #ffffff !important; }

/* ── Nav menu icon SVG icons ────────────────────────────── */
.nav-home::before    { content: url(../images/home.svg); }
.nav-services::before { content: url(../images/services.svg); }
.nav-projects::before { content: url(../images/projects.svg); }
.nav-contact::before  { content: url(../images/contact_us.svg); }
.nav-home::before, .nav-services::before,
.nav-projects::before, .nav-contact::before {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

/* ── Mobile phone + GIF overlay ─────────────────────────── */
.mobile-app-wrapper {
    position: relative;
    display: inline-block;
}
.mob-app-gif {
    position: absolute;
    top: 14.5%;
    left: 14.3%;
    transform: none;
    width: 71.4%;
}