/* =========================================
   GOOGLE FONT
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =========================================
   SECTION WRAPPER
========================================= */

.insights{
    padding:var(--space-section) 0;
    font-family:'Poppins',sans-serif;
    background:#fafafa;
    color:#111;
}

.insights .container{
    width:90%;
    max-width:1300px;
    margin:0 auto;
}

/* =========================================
   SECTION HEADING
========================================= */

.section-heading{
    text-align:center;
    margin-bottom:var(--space-block);
}

.section-heading h1{
    font-size:var(--fs-section);
    font-weight:800;
    color:var(--ink);
    line-height:1.15;
    margin-bottom:20px;
}

.section-heading h1 span{
    color:#ff6b00;
}

.section-heading p{
    max-width:680px;
    margin:20px auto 0;
    color:var(--ink-500);
    font-size:var(--fs-lead);
    line-height:1.6;
    font-weight:400;
}

/* =========================================
   BUTTONS
========================================= */

.buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:35px;
    flex-wrap:wrap;
}

.btn{
    display:inline-block;
    padding:14px 28px;
    margin:10px;
    border-radius:8px;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    transition:.3s ease;
}

.white-btn{
    background:#fff;
    color:#222;
    border:2px solid #ff6b00;
    padding:16px 34px;
    border-radius:10px;
    font-size:18px;
    font-weight:600;
}

.white-btn:hover{
    background:#ff6b00;
    color:#fff;
}

/* =========================================
   GALLERY
========================================= */

.gallery{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:var(--space-block);
}

.gallery .item{
    position:relative;
    width:100%;
    max-width:1200px;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    cursor:pointer;

    opacity:0;
    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease,
        box-shadow .4s ease;
}

.gallery .item.show{
    opacity:1;
    transform:translateY(0);
}

.gallery .item:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.25);
}

.gallery .item.active{
    transform:translateY(-8px) scale(1.02);
}

.gallery .item img{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
    transition:transform .5s ease;
}

.gallery .item:hover img{
    transform:scale(1.03);
}

/* =========================================
   GALLERY OVERLAY
========================================= */

.gallery .item::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        transparent,
        rgba(0,0,0,.45)
    );
    opacity:0;
    transition:.4s;
}

.gallery .item:hover::before{
    opacity:1;
}

/* =========================================
   UNIVERSITY SECTION
========================================= */

.university{
    padding:var(--space-section) 0;
    margin-top:var(--space-block);
    background:#fff;
    font-family:'Poppins',sans-serif;
}

.university .container{
    width:90%;
    max-width:1300px;
    margin:0 auto;
}

.university .section-heading{
    text-align:center;
    margin-bottom:var(--space-block);
}

.university .section-heading h1{
    font-size:var(--fs-section);
    font-weight:700;
    color:#111;
    line-height:1.2;
}

.university .section-heading span{
    color:#ff6b00;
}

.university .section-heading p{
    width:650px;
    max-width:90%;
    margin:18px auto 0;
    color:#666;
    font-size:17px;
    line-height:28px;
}

/* =========================================
   UNIVERSITY LOGO SLIDER
========================================= */

.logo-slider{
    position:relative;
    /* Sits further under the lead than the block token gives it — the strip
       is a separate thought from the sentence above it, and at the token it
       read as attached to the paragraph. */
    margin-top:calc(var(--space-block) + 26px);
    /* Was full-bleed (100vw + a negative margin), which made the strip the
       only thing on the page running edge to edge while every neighbouring
       section sat inside the shared max-w-7xl column. It read as escaping
       the layout. It now shares that column: the wrapper supplies the
       centring and the 20px gutter, this just fills it. */
    width:100%;
    max-width:1240px;
    margin-inline:auto;
    overflow:hidden;
    /* The track is far wider than the window, so a logo is always straddling
       each edge and overflow:hidden was slicing it down the middle — a half
       shield at both ends, which reads as broken rather than as motion. They
       fade out now instead of being chopped. 64px suits the narrower box;
       88px ate too much of it. */
    -webkit-mask-image:linear-gradient(90deg,
        transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
            mask-image:linear-gradient(90deg,
        transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
/* The hover below lifts a logo 8px and scales it 1.08 (another ~3.6px above
   centre on a 90px logo). .logo-slider clips with overflow:hidden, so without
   this headroom the top of the enlarged logo was sheared off. */

.logo-track{
    display:flex;
    align-items:center;
    gap:70px;
    width:max-content;
    flex-wrap:nowrap;
    padding-block:16px;
    animation:logoScroll 20s linear infinite;
}
/* 
.logo-slider:hover .logo-track{
    animation-play-state:paused;
} */

/* =========================================
   UNIVERSITY LOGOS
========================================= */

.logo-track img{

    width:90px;
    height:90px;

    object-fit:contain;

    flex-shrink:0;

    display:block;

    background:transparent;

    border:none;

    box-shadow:none;

    padding:0;

    transition:
        transform .4s ease;
}

.logo-track img:hover{

    transform:
        translateY(-8px)
        scale(1.08);

}

/* =========================================
   LOGO ANIMATION
========================================= */

@keyframes logoScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:992px){

    .logo-track{

        gap:55px;

    }

}

@media (max-width:768px){

    .university{


    }

    .university .section-heading h1{

        font-size:34px;

    }

    .university .section-heading p{

        font-size:16px;

        line-height:26px;

    }

    .logo-track{

        gap:40px;

    }

    .logo-track img{

        width:70px;
        height:70px;

    }

}

@media (max-width:480px){

    .logo-track{

        gap:28px;

    }

    .logo-track img{

        width:60px;
        height:60px;

    }

}

/* =========================================
   PRESTIGE NETWORK SECTION
========================================= */

.network{
    margin-top:var(--space-block);
    padding:var(--space-section) 0;
    background:#D9D9D933;
    font-family:'Poppins',sans-serif;
}

.network .container{
    width:90%;
    max-width:1300px;
    margin:0 auto;
}

.network .section-heading{
    text-align:center;
    margin-bottom:var(--space-block);
}

.network .section-heading h1{
    font-size:var(--fs-section);
    font-weight:700;
    color:#111;
    line-height:1.2;
}

.network .section-heading span{
    color:#ff6b00;
}

.network .section-heading p{
    width:650px;
    max-width:90%;
    margin:18px auto 0;
    color:#666;
    font-size:17px;
    line-height:28px;
}

/* =========================================
   COMPANY SLIDER
========================================= */

/* Was width:100vw with margin-left:calc(50% - 50vw) to break the rail out to
   the full window. vw counts the vertical scrollbar and clientWidth does
   not, so on any machine that shows a scrollbar this box came out wider than
   the content area - measured 784 against 774 - and hung 5px off each side.
   body carries overflow-x:clip so it never became a visible scrollbar, but
   the document was overflowing horizontally the whole time, and this was the
   only unclipped element on the page doing it.

   Fills its container instead. No vw, nothing to be wider than. */

.company-slider{
    overflow:hidden;
    position:relative;
    margin-top:var(--space-block);
    width:100%;
    -webkit-mask-image:linear-gradient(90deg,
        transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
    mask-image:linear-gradient(90deg,
        transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

/* Same clipping guard as .logo-track above. */

.company-track{
    display:flex;
    align-items:center;
    gap:70px;
    width:max-content;
    flex-wrap:nowrap;
    padding-block:16px;
    animation:companyScroll 22s linear infinite;
}

/* .company-slider:hover .company-track{
    animation-play-state:paused;
} */

/* =========================================
   COMPANY LOGOS
========================================= */

.company-track img{

    width:150px;
    height:70px;

    object-fit:contain;

    flex-shrink:0;

    display:block;

    background:transparent;

    border:none;

    box-shadow:none;

    padding:0;

    transition:transform .35s ease;

    cursor:pointer;
}

.company-track img:hover{

    transform:
        translateY(-8px)
        scale(1.05);

}

/* =========================================
   COMPANY ANIMATION
========================================= */

@keyframes companyScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:992px){

    .company-track{

        gap:55px;

    }

    .company-track img{

        width:130px;
        height:60px;

    }

}

@media (max-width:768px){

    .network{


    }

    .network .section-heading h1{

        font-size:34px;

    }

    .network .section-heading p{

        font-size:16px;
        line-height:26px;

    }

    .company-track{

        gap:40px;

    }

    .company-track img{

        width:110px;
        height:55px;

    }

}

@media (max-width:480px){

    .company-track{

        gap:28px;

    }

    .company-track img{

        width:90px;
        height:45px;

    }

}