/* =========================================================
   SWIPER CAROUSEL OVERRIDES
   ========================================================= */

.hero-swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hero-swiper .swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
}

.hero-swiper .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}


/* =========================================================
   HERO SECTION
   CodNesta Group homepage introduction
   ========================================================= */


/*--------------------------------------------------
Section Container
--------------------------------------------------*/

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: -2em;

    padding-block: clamp(3.75rem, 6vw, 5.75rem);

    background: #fcfaf0;
}


/*--------------------------------------------------
Decorative Grid Background
--------------------------------------------------*/

.hero::before,
.hero::after {
    content: "";
    position: absolute;

    pointer-events: none;
    z-index: -1;
}

/* Upper-right grid decoration */
.hero::before {
    top: -80px;
    right: 10%;

    width: 480px;
    height: 360px;

    background-image:
        linear-gradient(
            rgba(240, 238, 233, 0.75) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.95) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0, 0, 0, 0.8) 35%,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0, 0, 0, 0.8) 35%,
            transparent 75%
        );
}

/* Large left-side grid decoration */
.hero::after {
    top: -140px;
    left: -180px;

    width: 850px;
    height: 650px;

    background-image:
        linear-gradient(
            rgba(221, 183, 13, 0.85) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(219, 198, 11, 0.85) 1px,
            transparent 1px
        );

    background-size: 32px 32px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            transparent 72%
        );
}


/*--------------------------------------------------
Molecular Mesh Decoration
--------------------------------------------------*/

.hero__molecular-mesh {
    position: absolute;
    top: 10%;
    left: 34%;

    width: 360px;
    height: 300px;

    opacity: 0.18;

    pointer-events: none;
    z-index: -1;

    background-image:
        url("data:image/svg+xml,%3Csvg width='180' height='150' viewBox='0 0 180 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230A3857' stroke-width='1.4'%3E%3Cpath d='M30 25 L70 5 L110 25 L110 70 L70 92 L30 70 Z'/%3E%3Cpath d='M110 25 L150 5 L175 20'/%3E%3Cpath d='M110 70 L150 92 L175 78'/%3E%3Cpath d='M70 92 L70 135'/%3E%3C/g%3E%3Cg fill='%23F4B400'%3E%3Ccircle cx='30' cy='25' r='3'/%3E%3Ccircle cx='70' cy='5' r='3'/%3E%3Ccircle cx='110' cy='25' r='3'/%3E%3Ccircle cx='110' cy='70' r='3'/%3E%3Ccircle cx='70' cy='92' r='3'/%3E%3Ccircle cx='30' cy='70' r='3'/%3E%3Ccircle cx='150' cy='5' r='3'/%3E%3Ccircle cx='150' cy='92' r='3'/%3E%3Ccircle cx='70' cy='135' r='3'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: repeat;
    background-size: 180px 150px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 20%,
            rgba(0, 0, 0, 0.7) 48%,
            transparent 78%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 20%,
            rgba(0, 0, 0, 0.7) 48%,
            transparent 78%
        );
}


/*--------------------------------------------------
Main Layout
--------------------------------------------------*/

.hero__inner {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);

    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
}


/*--------------------------------------------------
Content Area
--------------------------------------------------*/

.hero__content {
    max-width: 700px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    margin-bottom: var(--space-4);

    color: var(--color-navy);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero__title {
    max-width: 650px;
    margin-bottom: var(--space-5);

    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.hero__title-accent {
    color: var(--color-navy);
}

.hero__text {
    max-width: 620px;
    margin-bottom: var(--space-5);

    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    line-height: 1.7;
}


/*--------------------------------------------------
Primary Actions
--------------------------------------------------*/

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);

    margin-bottom: var(--space-5);
}


/*--------------------------------------------------
Trust and Proof Indicators
--------------------------------------------------*/

.hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);

    margin: 0;
    padding: 0;

    list-style: none;
}

.hero__proof-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    color: #44535d;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.hero__proof-item::before {
    content: "✓";

    display: inline-grid;
    place-items: center;

    flex-shrink: 0;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: var(--color-text-secondary);
    color: white;

    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
}


/*--------------------------------------------------
Visual Area
--------------------------------------------------*/

.hero__visual {
    position: relative;

    min-height: 480px;
}

.hero__image-frame {
    position: absolute;
    inset: 0 0 2rem 2rem;

    overflow: hidden;

    border-radius: 1.5rem;

    background: var(--color-navy);
    box-shadow: var(--shadow-md);
}

.hero__image-frame img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 58% center;
}

.hero__image-overlay {
    display: none;

    position: absolute;
    inset: 0;
}


/*--------------------------------------------------
Floating Information Badge
--------------------------------------------------*/

.hero__badge {
    position: absolute;
    top: 45%;
    left: 48px;

    width: min(245px, 72%);
    padding: var(--space-5);

    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: var(--radius-lg);

    background: rgba(255, 255, 255, 0.92);

    box-shadow: var(--shadow-md);
    backdrop-filter: blur(14px);

    transform: translateX(-50%);
}

.hero__badge-number {
    display: block;

    margin-bottom: var(--space-2);

    color: var(--color-navy);
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.hero__badge-text {
    margin: 0;

    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}


/*--------------------------------------------------
SLIDE COLOR VARIATIONS (CodNesta Palette)
--------------------------------------------------*/

/* Slide 1: CodNesta General (Original Light Theme) */
.hero--general {
    background: #f5f8fa;
}

/* Slide 2: CodNesta Pre-Dev (Deep Tech Slate Blue Theme) */

.hero--predev .hero__title {
    color: var(--color-gold, #f4b400);
}

.hero--predev .hero__text {
    color: var(--color-navy, #0a3857);
}

.hero--predev .hero__proof-item {
   color: var(--color-navy, #0a3857); color: #cbd5e1;
}


/* Slide 3: Agentee Business Network (Rich Midnight Navy / Gold Accent Theme) */

.hero--abn .hero__title-accent {
    color: var(--color-gold, #f4b400);
}

.hero--abn .hero__badge-number {
    color: var(--color-navy, #0a3857);
}


/*--------------------------------------------------
Entrance Animations
--------------------------------------------------*/

.hero__content {
    opacity: 0;

    transform: translateY(24px);

    animation:
        hero-content-in
        700ms
        ease
        forwards;
}

.hero__visual {
    opacity: 0;

    transform: translateY(20px) scale(0.985);

    animation:
        hero-visual-in
        850ms
        ease
        120ms
        forwards;
}

.hero__image-frame img {
    transform: scale(1.05);

    animation:
        hero-image-settle
        1200ms
        ease
        180ms
        forwards;
}

.hero__badge {
    opacity: 0;

    animation:
        hero-badge-in
        650ms
        ease
        520ms
        forwards;
}


/*--------------------------------------------------
Animation Keyframes
--------------------------------------------------*/

@keyframes hero-content-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-visual-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hero-image-settle {
    to {
        transform: scale(1);
    }
}

@keyframes hero-badge-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes hero-badge-in-mobile {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*--------------------------------------------------
Tablet — 1024px and Below
--------------------------------------------------*/

@media (max-width: 1024px) {
    .hero__inner {
        grid-template-columns: 1fr;
    }

    .hero__content {
        max-width: 760px;
    }

    .hero__visual {
        max-width: 760px;
        min-height: 500px;
    }

    .hero__molecular-mesh {
        top: 4%;
        right: -60px;
        left: 345px;

        width: 360px;
        height: 300px;

        opacity: 0.18;
        z-index: 0;
    }
}


/*--------------------------------------------------
Mobile — 768px and Below
--------------------------------------------------*/

@media (max-width: 768px) {
    /* Slide 1: General Hero Mobile BG */
    .hero {
        position: relative;

        padding-block: var(--space-7);

        background-image:
            linear-gradient(
                180deg,
                rgba(238, 241, 173, 0.88),
                rgba(245, 245, 245, 0.88)
            ),
            url("../../../images/hero-mobile1.jpg");

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Slide 2: CodNesta Pre-Dev Mobile BG */
    .hero--predev {
        background-image:
            linear-gradient(
                180deg,
                rgba(248, 248, 247, 0.88),
                rgba(243, 242, 235, 0.88)
            ),
            url("../../../images/programs/predev.jpg");

        background-size:cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-top:3em;
        margin-top:-2em;

    }

    /* Slide 3: Agentee Business Network Mobile BG */
    .hero--abn {
        background-image:
            linear-gradient(
                180deg,
                 rgba(248, 248, 247, 0.88),
                rgba(243, 242, 235, 0.88)
            ),
            url("../../../images/work-with-us/collaboration.jpg");

        background-size:cover;
        background-position: center;
        background-repeat: no-repeat;
        padding-top:2em;
        margin-top:-2em;
      
    }

    /* Hide the existing grid decoration on mobile */
    .hero::before,
    .hero::after {
        display: none;
    }

    .hero__inner {
        position: relative;
        z-index: 1;
    }

    .hero__content {
        max-width: 100%;
    }

    .hero__title {
        font-size: clamp(2.4rem, 11vw, 3.6rem);
        line-height: 1.08;
    }

    /* Reset all slides to standard light-theme text colors */
    .hero__eyebrow,
    .hero--predev .hero__eyebrow,
    .hero--abn .hero__eyebrow {
        color: var(--color-navy);
    }

    .hero__title,
    .hero--predev .hero__title,
    .hero--abn .hero__title {
        color: var(--color-navy);
    }

    .hero__title-accent,
    .hero--predev .hero__title-accent,
    .hero--abn .hero__title-accent {
        color: var(--color-navy);
    }

    .hero__text,
    .hero--predev .hero__text,
    .hero--abn .hero__text {
        color: var(--color-text-secondary);
    }

    .hero__proof-item,
    .hero--predev .hero__proof-item,
    .hero--abn .hero__proof-item {
        color: #44535d;
    }

    .hero__proof-item::before,
    .hero--predev .hero__proof-item::before,
    .hero--abn .hero__proof-item::before {
        background: var(--color-text-secondary);
        color: #ffffff;
    }

    .hero__actions {
        flex-direction: column;
    }

    /* Completely remove the separate Hero image area */
    .hero__visual {
        display: none;
    }

    .hero__molecular-mesh {
        display: none;
    }

     #hero-slide3-text-gold{
        color:var(--color-gold);
    }
}

/*--------------------------------------------------
Reduced Motion
--------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

    .hero__content,
    .hero__visual,
    .hero__image-frame img,
    .hero__badge {
        opacity: 1;

        animation: none;
        transform: none;
    }

    .hero::before,
    .hero::after {
        animation: none;
        filter: none;
        transform: none;
    }

    .hero__molecular-mesh {
        animation: none;
        transform: none;
    }
}


/*=========================================
   SHARED DIVISION SECTION
=========================================*/

.division{
    padding:7rem 0;
}

.division:nth-child(even){
    background:#f8fafc;
}

.division__intro{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:4rem;
    margin-bottom:5rem;
}

.division__header{
    flex:1;
    max-width:700px;
}

.division__eyebrow{
    display:inline-block;
    margin-bottom:1rem;

    color:var(--color-gold);

    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.division__title{
    margin-bottom:1.5rem;

    color:var(--color-primary);

    font-size:clamp(2.4rem,4vw,3.8rem);
    line-height:1.2;
}

.division__title span{
    display:block;
    color:var(--color-gold);
}

.division__description{
    max-width:650px;

    color:#5b6572;

    line-height:1.9;

    font-size:1.05rem;
}

.division__actions{
    display:flex;
    flex-direction:column;
    gap:1rem;
}