@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Lora:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');

/* ============================================================
   Creative Service Elementor Addon — Frontend CSS
   EXACT pixel-perfect match to pikstories.com/?page_id=88616
   ============================================================
   Color palette (from Uncode style-custom.css):
   color-wayh   = #141618  (dark charcoal)
   color-lxmt   = #f7f7f7  (light off-white)
   color-105898 = linear-gradient(to left, rgb(17,92,250) 9%, rgb(5,61,245) 91%) (blue gradient)
   color-482803 = #6442ff  (violet-blue accent — checkmarks)
   color-wvjs   = #777777  (muted gray text)
   color-prif   = #303133  (near-black)
   ============================================================ */

/* ─── GLOBAL RESET & PARENT STRIPPING ────────────────────────── */
.cs-hero-section,
.cs-services-section,
.cs-detail-section,
.cs-partners-section,
.cs-cta-section {
    font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

/* Force parent Elementor sections full-bleed, zero padding */
.elementor-section:has(.cs-hero-section),
.elementor-section:has(.cs-services-section),
.elementor-section:has(.cs-detail-section),
.elementor-section:has(.cs-partners-section),
.elementor-section:has(.cs-cta-section),
.elementor-section.elementor-section-boxed:has(.cs-hero-section),
.elementor-section.elementor-section-boxed:has(.cs-services-section),
.elementor-section.elementor-section-boxed:has(.cs-detail-section),
.elementor-section.elementor-section-boxed:has(.cs-partners-section),
.elementor-section.elementor-section-boxed:has(.cs-cta-section) {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background-color: transparent !important;
}

.elementor-column:has(.cs-hero-section) > .elementor-widget-wrap,
.elementor-column:has(.cs-services-section) > .elementor-widget-wrap,
.elementor-column:has(.cs-detail-section) > .elementor-widget-wrap,
.elementor-column:has(.cs-partners-section) > .elementor-widget-wrap,
.elementor-column:has(.cs-cta-section) > .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
}

.elementor-widget-cs_hero,
.elementor-widget-cs_services_grid,
.elementor-widget-cs_service_detail,
.elementor-widget-cs_partners,
.elementor-widget-cs_cta {
    margin-bottom: 0 !important;
    width: 100% !important;
}

.elementor-widget-cs_hero .elementor-widget-container,
.elementor-widget-cs_services_grid .elementor-widget-container,
.elementor-widget-cs_service_detail .elementor-widget-container,
.elementor-widget-cs_partners .elementor-widget-container,
.elementor-widget-cs_cta .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* ─── ANIMATION ──────────────────────────────────────────────── */
.cs-animate {
    opacity: 0 !important;
    will-change: transform, opacity !important;
}
.cs-animate-fade-up {
    transform: translateY(30px) !important;
    transition: opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1),
                transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}
.cs-animate-fade-up.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* SECTION 1 — HERO                                                */
/* Dark bg, left-aligned label + giant title + left-aligned desc   */
/* ─────────────────────────────────────────────────────────────── */
.cs-hero-section {
    position: relative !important;
    width: 100% !important;
    min-height: 85vh !important;
    display: flex !important;
    align-items: flex-end !important;   /* content sits toward bottom */
    background-color: #141618 !important;
    color: #ffffff !important;
    padding: 120px 10% 200px !important;  /* large bottom for image overlap space */
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.cs-hero-inner {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.cs-hero-label {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3em !important;
    color: #6442ff !important;        /* color-482803 */
    margin: 0 0 20px 0 !important;
    font-weight: 500 !important;
    display: block !important;
}

.cs-hero-title {
    font-family: 'Jost', sans-serif !important;
    font-size: clamp(60px, 9vw, 160px) !important;
    line-height: 0.93 !important;
    font-weight: 500 !important;
    margin: 0 0 60px 0 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
}

.cs-hero-desc-wrap {
    display: flex !important;
    justify-content: flex-end !important;  /* description is right-aligned / shifted right */
    width: 100% !important;
}

.cs-hero-desc {
    width: 40% !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: clamp(1rem, 1.5vw, 1.35rem) !important;
    line-height: 1.55 !important;
    font-weight: 300 !important;
    color: #777777 !important;         /* color-wvjs */
    margin: 0 !important;
    text-align: left !important;
}

@media (max-width: 900px) {
    .cs-hero-section {
        padding: 80px 5% 140px !important;
        min-height: 70vh !important;
    }
    .cs-hero-desc {
        width: 100% !important;
    }
    .cs-hero-desc-wrap {
        justify-content: flex-start !important;
    }
}

/* ─────────────────────────────────────────────────────────────── */
/* SECTION 2 — SERVICES GRID                                       */
/* Full-width blue gradient card with 3 columns, no border-radius  */
/* Contains background image area ABOVE the blue cards             */
/* ─────────────────────────────────────────────────────────────── */
.cs-services-section {
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: #141618 !important;  /* dark bg behind the image + cards */
}

/* The parallax/background-image zone above the cards */
.cs-services-bg-image {
    width: 100% !important;
    height: 50vh !important;
    min-height: 300px !important;
    background-image: url('https://pikstories.com/wp-content/uploads/2026/01/image-placeholder-5.jpg') !important;
    background-size: cover !important;
    background-position: center bottom !important;
    background-attachment: scroll !important;
    filter: grayscale(100%) !important;
    opacity: 0.85 !important;
}

/* The 3-column blue card row */
.cs-services-grid-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: -5px auto 0 auto !important;  /* slight negative to remove any gap */
    padding: 0 8% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    transform: translateY(-60px) !important;
    margin-bottom: -60px !important;
}

@media (max-width: 768px) {
    .cs-services-grid-wrap {
        grid-template-columns: 1fr !important;
        transform: none !important;
        margin-bottom: 0 !important;
        padding: 0 5% !important;
    }
}

.cs-service-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 48px 40px !important;
    box-sizing: border-box !important;
    color: #ffffff !important;
    /* Blue gradient from Uncode color-105898 */
    background: linear-gradient(to left, rgb(17, 92, 250) 9%, rgb(5, 61, 245) 91%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.cs-service-card:last-child {
    border-right: none !important;
}

/* Progressively darker overlay for cards 2 and 3 */
.cs-service-card:nth-child(2) {
    background: linear-gradient(to left, rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
                linear-gradient(to left, rgb(17, 92, 250) 9%, rgb(5, 61, 245) 91%) !important;
}
.cs-service-card:nth-child(3) {
    background: linear-gradient(to left, rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
                linear-gradient(to left, rgb(17, 92, 250) 9%, rgb(5, 61, 245) 91%) !important;
}

.cs-service-icon {
    font-size: 2.5rem !important;
    margin-bottom: 28px !important;
    color: #ffffff !important;
    line-height: 1 !important;
}
.cs-service-icon svg,
.cs-service-icon i {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 2.5rem !important;
    color: #ffffff !important;
    fill: #ffffff !important;
}

.cs-service-title {
    font-family: 'Jost', sans-serif !important;
    font-size: clamp(1.3rem, 2vw, 1.8rem) !important;
    font-weight: 500 !important;
    margin: 0 0 16px 0 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}

.cs-service-desc {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin: 0 !important;
    font-weight: 300 !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* SECTION 3/4/5 — SERVICE DETAIL ROWS                             */
/* 2-col: text + image, alternating bg, checklist in 2 cols       */
/* ─────────────────────────────────────────────────────────────── */
.cs-detail-section {
    width: 100% !important;
    padding: 100px 10% !important;
    box-sizing: border-box !important;
    background-color: #f7f7f7 !important;  /* color-lxmt */
}

.cs-detail-section.cs-detail-white {
    background-color: #ffffff !important;
}

.cs-detail-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
}

@media (max-width: 900px) {
    .cs-detail-section {
        padding: 60px 5% !important;
    }
    .cs-detail-inner {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .cs-detail-layout-text_right .cs-detail-image {
        order: -1 !important;
    }
}

.cs-detail-text {
    display: flex !important;
    flex-direction: column !important;
}

.cs-detail-title {
    font-family: 'Jost', sans-serif !important;
    /* Matches Uncode h1 size in their font-136269 stack */
    font-size: clamp(2rem, 4vw, 3.8rem) !important;
    font-weight: 500 !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    color: #141618 !important;
}

.cs-detail-desc {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: #777777 !important;
    margin: 0 0 32px 0 !important;
    font-weight: 300 !important;
}

/* 2-column checklist — exactly like original */
.cs-detail-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
}

.cs-detail-list li {
    font-family: 'Jost', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: #141618 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(20, 22, 24, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.4 !important;
}

.cs-detail-check {
    /* The ✓ checkmark icon in the accent color (color-482803 = #6442ff) */
    color: #6442ff !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
    font-weight: 400 !important;
    font-family: 'Jost', sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
}

.cs-detail-image {
    width: 100% !important;
}

.cs-detail-img {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    object-fit: cover !important;
    border-radius: 8px !important;   /* Uncode uses img-round = ~8px */
    display: block !important;
    filter: grayscale(100%) !important;  /* Original images are grayscale */
    transition: transform 0.4s ease !important;
}

.cs-detail-img:hover {
    transform: scale(1.02) !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* SECTION 6 — GLOBAL PARTNERS                                     */
/* Dark bg, centered heading + Lora desc + 6-col logo grid         */
/* ─────────────────────────────────────────────────────────────── */
.cs-partners-section {
    background-color: #141618 !important;
    color: #ffffff !important;
    padding: 100px 10% !important;
    box-sizing: border-box !important;
}

.cs-partners-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.cs-partners-header {
    max-width: 900px !important;
    margin: 0 auto 60px auto !important;
    text-align: center !important;
}

.cs-partners-heading {
    font-family: 'Jost', sans-serif !important;
    /* Matches Uncode fontsize-155944 — approximately 5rem */
    font-size: clamp(2.5rem, 5vw, 5rem) !important;
    font-weight: 500 !important;
    margin: 0 0 24px 0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

.cs-partners-desc {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1.1rem !important;
    line-height: 1.65 !important;
    color: #777777 !important;
    font-weight: 300 !important;
    margin: 0 !important;
}

/* 6-column logo grid with borders — exact Uncode gallery style */
.cs-partners-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    width: 100% !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 992px) {
    .cs-partners-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 576px) {
    .cs-partners-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

.cs-partner-logo-wrap {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 36px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: background-color 0.3s ease !important;
}

.cs-partner-logo-wrap:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.cs-partner-logo-link {
    display: block !important;
    line-height: 0 !important;
}

.cs-partner-logo-img {
    max-width: 100px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    /* White logos at 40% opacity — matches original screenshot */
    filter: brightness(0) invert(1) !important;
    opacity: 0.4 !important;
    transition: opacity 0.3s ease !important;
    display: block !important;
}

.cs-partner-logo-wrap:hover .cs-partner-logo-img {
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────── */
/* SECTION 7 — CTA                                                 */
/* Blue gradient bg, centered label + big title + white rect btn   */
/* ─────────────────────────────────────────────────────────────── */
.cs-cta-section {
    background: linear-gradient(to left, rgb(17, 92, 250) 9%, rgb(5, 61, 245) 91%) !important;
    color: #ffffff !important;
    padding: 100px 10% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.cs-cta-container {
    max-width: 900px !important;
    margin: 0 auto !important;
}

.cs-cta-label {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3em !important;
    margin: 0 0 20px 0 !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    display: block !important;
}

.cs-cta-title {
    font-family: 'Jost', sans-serif !important;
    /* Matches Uncode fontsize-155944 */
    font-size: clamp(2.5rem, 5vw, 5rem) !important;
    font-weight: 500 !important;
    margin: 0 0 40px 0 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
}

.cs-cta-btn-wrap {
    display: block !important;
    text-align: center !important;
}

/* CTA button: rectangular white button — NOT pill — matches screenshot */
.cs-cta-btn {
    font-family: 'Jost', sans-serif !important;
    display: inline-block !important;
    width: auto !important;
    background-color: #ffffff !important;
    color: #141618 !important;
    padding: 16px 50px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.05em !important;
    border-radius: 2px !important;     /* nearly square corners — matches original */
    border: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease !important;
}

.cs-cta-btn:hover {
    background-color: #141618 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}