@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 About Elementor Addon — Frontend CSS
   Exact match to pikstories.com/?page_id=88614 (About Creative)
   ============================================================ */

/* ─── GLOBAL RESET & PARENT STRIPPING ──────────────────────── */
.ca-hero-section,
.ca-carousel-section,
.ca-services-section,
.ca-testimonial-section,
.ca-team-section,
.ca-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 to be full-bleed with zero padding */
.elementor-section.elementor-section-boxed:has(.ca-hero-section),
.elementor-section.elementor-section-boxed:has(.ca-carousel-section),
.elementor-section.elementor-section-boxed:has(.ca-services-section),
.elementor-section.elementor-section-boxed:has(.ca-testimonial-section),
.elementor-section.elementor-section-boxed:has(.ca-team-section),
.elementor-section.elementor-section-boxed:has(.ca-cta-section),
.elementor-section:has(.ca-hero-section),
.elementor-section:has(.ca-carousel-section),
.elementor-section:has(.ca-services-section),
.elementor-section:has(.ca-testimonial-section),
.elementor-section:has(.ca-team-section),
.elementor-section:has(.ca-cta-section) {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    background-color: transparent !important;
}

/* Force parent Elementor Columns to have zero padding */
.elementor-column:has(.ca-hero-section) > .elementor-widget-wrap,
.elementor-column:has(.ca-carousel-section) > .elementor-widget-wrap,
.elementor-column:has(.ca-services-section) > .elementor-widget-wrap,
.elementor-column:has(.ca-testimonial-section) > .elementor-widget-wrap,
.elementor-column:has(.ca-team-section) > .elementor-widget-wrap,
.elementor-column:has(.ca-cta-section) > .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
}

/* Reset Elementor Widget wrapper defaults */
.elementor-widget-ca_hero,
.elementor-widget-ca_carousel,
.elementor-widget-ca_services,
.elementor-widget-ca_testimonial,
.elementor-widget-ca_team,
.elementor-widget-ca_cta {
    margin-bottom: 0 !important;
    width: 100% !important;
}

.elementor-widget-ca_hero .elementor-widget-container,
.elementor-widget-ca_carousel .elementor-widget-container,
.elementor-widget-ca_services .elementor-widget-container,
.elementor-widget-ca_testimonial .elementor-widget-container,
.elementor-widget-ca_team .elementor-widget-container,
.elementor-widget-ca_cta .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* ─── ANIMATION SYSTEM ──────────────────────────────────────── */
.ca-animate {
    opacity: 0 !important;
    will-change: transform, opacity !important;
}

/* Fade In Up */
.ca-animate-fade-up {
    transform: translateY(40px) !important;
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.ca-animate-fade-up.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Scale Up */
.ca-animate-scale {
    transform: scale(0.96) !important;
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.ca-animate-scale.active {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ─── HERO SECTION ─────────────────────────────────────────── */
.ca-hero-section {
    position: relative !important;
    width: 100% !important;
    min-height: 85vh !important;
    display: flex !important;
    align-items: center !important;
    background-color: #141618 !important;  /* color-wayh */
    color: #ffffff !important;
    padding: 120px 5% 80px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.ca-hero-inner {
    width: 100% !important;
    max-width: 1200px !important;         /* Match original limit-width */
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 2 !important;
}

.ca-hero-label {
    font-family: 'Jost', sans-serif !important;
    font-size: 0.78rem !important;
    text-transform: none !important;
    letter-spacing: 0.25em !important;
    color: #115cfa !important;          /* color-210407 / Blue Ribbon */
    margin: 0 0 28px 0 !important;
    font-weight: 500 !important;
}

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

.ca-hero-desc-wrap {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

.ca-hero-desc {
    width: 66.67% !important;          /* ~8/12 columns */
    max-width: 800px !important;
    font-family: 'Lora', Georgia, serif !important;
    font-size: clamp(1.15rem, 2vw, 1.6rem) !important;
    line-height: 1.4 !important;
    font-weight: 300 !important;
    color: #777777 !important;         /* color-wvjs */
    text-align: center !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .ca-hero-desc {
        width: 100% !important;
    }
}

/* ─── CAROUSEL SECTION ──────────────────────────────────────── */
.ca-carousel-section {
    background-color: #141618 !important;  /* color-wayh */
    padding: 0 0 80px 0 !important;
    width: 100% !important;
}

.ca-carousel-track-wrap {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    padding: 0 10% !important;
    box-sizing: border-box !important;
}

.ca-carousel-track {
    display: flex !important;
    gap: 24px !important;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform !important;
}

.ca-carousel-slide {
    flex: 0 0 calc(80% - 12px) !important;
    max-width: 900px !important;
    scroll-snap-align: center !important;
}

.ca-carousel-img {
    width: 100% !important;
    aspect-ratio: 3/2 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
    display: block !important;
    filter: grayscale(15%) !important;
}

/* Carousel Dots */
.ca-carousel-dots {
    display: flex !important;
    gap: 10px !important;
    padding: 24px 10% 0 !important;
    margin-top: 0 !important;
    justify-content: flex-start !important; /* Align dots left like original */
    align-items: center !important;
}

.ca-carousel-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: rgba(255,255,255,0.3) !important;
    cursor: pointer !important;
    transition: background-color 0.3s !important;
    border: none !important;
    padding: 0 !important;
    outline: none !important;
}

.ca-carousel-dot.active,
.ca-carousel-dot:hover {
    background-color: #ffffff !important;
}

/* ─── SERVICES SECTION ──────────────────────────────────────── */
.ca-services-section {
    background-color: #ffffff !important;   /* inherited white background */
    color: #141618 !important;
    padding: 120px 5% !important;
    box-sizing: border-box !important;
}

.ca-services-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.ca-services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 60px 60px !important;
}

@media (min-width: 768px) {
    .ca-services-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

.ca-service-card {
    display: flex !important;
    flex-direction: column !important;
}

.ca-service-title {
    font-family: 'Jost', sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: 500 !important;
    margin: 0 0 18px 0 !important;
    color: #141618 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

.ca-service-text {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: #777777 !important;         /* color-wvjs */
    margin: 0 !important;
    font-weight: 300 !important;
}

/* ─── TESTIMONIAL SECTION ───────────────────────────────────── */
.ca-testimonial-section {
    background-color: #141618 !important;  /* color-wayh */
    padding: 0 5% 80px !important;
    box-sizing: border-box !important;
}

.ca-testimonial-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    /* Negative top to overlap from services above */
    position: relative !important;
    transform: translateY(-80px) !important;
    margin-bottom: -80px !important;
    z-index: 5 !important;
}

.ca-testimonial-card {
    background: linear-gradient(to left , rgb(17, 92, 250) 9% , rgb(5, 61, 245) 91%) !important; /* color-105898-bg */
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 80px 60px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35) !important;
}

@media (min-width: 992px) {
    .ca-testimonial-card {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .ca-testimonial-left {
        width: 75% !important;
        padding-right: 40px !important;
    }

    .ca-testimonial-right {
        width: 25% !important;
        margin-top: 0 !important;
    }
}

.ca-testimonial-left {
    width: 100% !important;
}

.ca-testimonial-quote {
    font-family: 'Lora', Georgia, serif !important;
    font-size: clamp(1.4rem, 2.2vw, 2.2rem) !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    font-style: italic !important;
}

.ca-testimonial-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
}

.ca-testimonial-img {
    width: 132px !important;
    height: 132px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    display: block !important;
    filter: grayscale(20%) !important;
}

.ca-testimonial-author {
    font-family: 'Jost', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    margin: 0 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
}

.ca-testimonial-role {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1rem !important;
    color: rgba(255,255,255,0.8) !important;
    margin: 0 !important;
    font-weight: 300 !important;
}

/* ─── TEAM SECTION ──────────────────────────────────────────── */
.ca-team-section {
    background-color: #141618 !important;  /* color-wayh */
    color: #ffffff !important;
    padding: 100px 5% 100px !important;
    box-sizing: border-box !important;
}

.ca-team-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

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

.ca-team-title {
    font-family: 'Jost', sans-serif !important;
    font-size: clamp(2.2rem, 4vw, 4rem) !important;
    font-weight: 500 !important;
    margin: 0 0 24px 0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

.ca-team-subtitle {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1.15rem !important;
    line-height: 1.6 !important;
    color: #777777 !important;         /* color-wvjs */
    font-weight: 300 !important;
    max-width: 720px !important;
    margin: 0 auto !important;
}

/* Team rows — row 1 on blue bg, row 2 on dark bg */
.ca-team-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 60px 5% !important;
    margin: 0 -5% 40px !important;
    box-sizing: border-box !important;
}

.ca-team-row:first-of-type {
    background-color: #0000ff !important;   /* Blue Row 1 */
}

.ca-team-row:last-of-type {
    background-color: #141618 !important;   /* Dark Row 2 */
    margin-bottom: 0 !important;
}

@media (min-width: 768px) {
    .ca-team-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.ca-team-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.ca-team-img-wrap {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    margin-bottom: 18px !important;
    aspect-ratio: 1/1 !important;
}

.ca-team-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: grayscale(100%) !important;
    transition: filter 0.4s ease !important;
}

.ca-team-card:hover .ca-team-img {
    filter: grayscale(0%) !important;
}

.ca-team-name {
    font-family: 'Jost', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    margin: 0 0 4px 0 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
}

.ca-team-role {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1rem !important;
    color: #777777 !important;         /* color-wvjs */
    font-weight: 300 !important;
    margin: 0 !important;
}

/* Role and name colors on blue row */
.ca-team-row:first-of-type .ca-team-role {
    color: rgba(255, 255, 255, 0.7) !important;
}
.ca-team-row:first-of-type .ca-team-name {
    color: #ffffff !important;
}

/* ─── CTA SECTION ───────────────────────────────────────────── */
.ca-cta-section {
    background: linear-gradient(to left , rgb(17, 92, 250) 9% , rgb(5, 61, 245) 91%) !important; /* color-105898-bg */
    color: #ffffff !important;
    padding: 120px 5% !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

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

.ca-cta-label {
    font-family: 'Jost', sans-serif !important;
    font-size: 0.78rem !important;
    text-transform: none !important;
    letter-spacing: 0.25em !important;
    margin-bottom: 24px !important;
    font-weight: 500 !important;
    opacity: 0.9 !important;
    display: block !important;
}

.ca-cta-title {
    font-family: 'Jost', sans-serif !important;
    font-size: clamp(2.5rem, 5vw, 5rem) !important;
    font-weight: 500 !important;
    margin: 0 0 50px 0 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
}

.ca-cta-btn {
    font-family: 'Jost', sans-serif !important;
    display: inline-block !important;
    background-color: #ffffff !important;
    color: #141618 !important;
    padding: 15px 40px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.05em !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease !important;
}

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

/* Custom Cursor & Hover Zoom Animations */
.ca-carousel-slide {
    overflow: hidden !important;
    border-radius: 12px !important;
}
.ca-carousel-img {
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.5s ease !important;
}
.ca-carousel-slide:hover .ca-carousel-img {
    transform: scale(1.06) !important;
}

.ca-team-img-wrap {
    overflow: hidden !important;
    border-radius: 10px !important;
}
.ca-team-img {
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.5s ease !important;
}
.ca-team-card:hover .ca-team-img {
    transform: scale(1.06) !important;
}