/*==================================================
                    RESET
==================================================*/

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Poppins',sans-serif;

    background:#ffffff;

    color:var(--black);

    overflow-x:hidden;

}


/*==================================================
                HERO SECTION
==================================================*/

.media-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#ffffff;

    padding:60px 0;

}


/*==================================================
                CONTAINER
==================================================*/

.media-container{

    width:min(1380px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:70px;

    position:relative;

    z-index:5;

}


/*==================================================
                BACKGROUND
==================================================*/

.hero-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}


/*==================================================
            GRADIENT CIRCLES
==================================================*/

.bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}

.bg-circle.one{

    width:420px;

    height:420px;

    background:rgba(37,167,222,.12);

    top:-140px;

    left:-140px;

}

.bg-circle.two{

    width:520px;

    height:520px;

    background:rgba(37,167,222,.08);

    right:-180px;

    bottom:-220px;

}

.bg-circle.three{

    width:240px;

    height:240px;

    background:rgba(37,167,222,.09);

    top:180px;

    right:220px;

}


/*==================================================
                GRID PATTERN
==================================================*/

.grid-pattern{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(

        rgba(37,167,222,.10) 1px,

        transparent 1px

    );

    background-size:36px 36px;

    opacity:.35;

}


/*==================================================
                HERO LEFT
==================================================*/

.hero-left{

    position:relative;

    z-index:10;

}


/*==================================================
                TAG
==================================================*/

.hero-tag{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:28px;

}

.hero-tag span{

    width:70px;

    height:2px;

    background:var(--primary);

}

.hero-tag p{

    font-size:.82rem;

    letter-spacing:3px;

    font-weight:800;

    color:var(--primary);

}


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

.hero-left h1{

    font-size:4.25rem;

    line-height:1.05;

    font-weight:800;

    color:var(--black);

    margin-bottom:28px;

}

.hero-left h1 span{

    color:var(--primary);

}


/*==================================================
                DESCRIPTION
==================================================*/

.hero-desc{

    max-width:620px;

    color:var(--text);

    font-size:1.05rem;

    line-height:2;

}
/*==================================================
                HERO STATS
==================================================*/

.hero-stats{

    display:flex;

    gap:18px;

    margin-top:45px;

    flex-wrap:wrap;

}

.stat-box{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 22px;

    min-width:185px;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(18px);

    border:1px solid rgba(37,167,222,.14);

    border-radius:18px;

    box-shadow:0 12px 35px rgba(15,23,42,.06);

    transition:.45s ease;

}

.stat-box:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 22px 50px rgba(37,167,222,.16);

}

.stat-box i{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary-light);

    color:var(--primary);

    font-size:1.35rem;

}

.stat-box h3{

    font-size:1.45rem;

    font-weight:800;

    color:var(--black);

    line-height:1;

}

.stat-box p{

    margin-top:6px;

    font-size:.88rem;

    color:var(--text);

}


/*==================================================
                HERO RIGHT
==================================================*/

.hero-right{

    position:relative;

    height:760px;

}


/*==================================================
                BLUE CIRCLE
==================================================*/

.hero-circle{

    position:absolute;

    width:520px;

    height:520px;

    right:40px;

    top:90px;

    border-radius:50%;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    radial-gradient(circle at 30% 30%,
    #62CEF5,
    #25A7DE,
    #1289C9);

}


.hero-camera{

    width:82%;

    height:82%;

    object-fit:contain;

    position:relative;

    left:0;

    top:0;

    transform:none;

    filter:
    drop-shadow(
    0 20px 40px rgba(0,0,0,.18));

}


/*==================================================
            FLOATING NEWS CARD
==================================================*/

.floating-card{

    position:absolute;

    width:240px;

    background:rgba(255,255,255,.90);

    backdrop-filter:blur(18px);

    border:1px solid rgba(37,167,222,.12);

    border-radius:18px;

    padding:18px;

    box-shadow:

    0 18px 45px rgba(15,23,42,.08);

    z-index:8;

}

.news-card.one{

    left:-20px;

    top:80px;

}

.news-card.two{

    right:-10px;

    top:300px;

}

.news-card.three{

    left:50px;

    bottom:60px;

}


/*==================================================
                NEWS LOGO
==================================================*/

.news-logo{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:30px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:.74rem;

    font-weight:800;

    letter-spacing:1px;

    margin-bottom:14px;

}

.floating-card h4{

    font-size:.95rem;

    line-height:1.7;

    font-weight:700;

    color:var(--black);

}


/*==================================================
                STUDENT PHOTOS
==================================================*/

.student-photo{

    position:absolute;

    width:90px;

    height:90px;

    border-radius:50%;

    overflow:hidden;

    border:6px solid #ffffff;

    box-shadow:

    0 18px 35px rgba(15,23,42,.12);

    z-index:9;

}

.student-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.photo-one{

    top:15px;

    right:140px;

}

.photo-two{

    bottom:170px;

    right:10px;

}

.photo-three{

    bottom:10px;

    left:150px;

}


/*==================================================
                GLASS SHAPES
==================================================*/

.glass{

    position:absolute;

    border-radius:50%;

    backdrop-filter:blur(25px);

    background:rgba(255,255,255,.35);

    border:1px solid rgba(255,255,255,.45);

}

.glass-one{

    width:70px;

    height:70px;

    top:210px;

    left:130px;

}

.glass-two{

    width:48px;

    height:48px;

    right:90px;

    top:120px;

}

.glass-three{

    width:90px;

    height:90px;

    left:230px;

    bottom:170px;

}
/*==================================================
                FLOATING ANIMATIONS
==================================================*/

.hero-camera{

    animation:

        cameraFloat 6s ease-in-out infinite;

}

@keyframes cameraFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
            NEWS CARD FLOAT
==================================================*/

.floating-card{

    animation:

        cardFloat 5s ease-in-out infinite;

}

.news-card.two{

    animation-delay:.8s;

}

.news-card.three{

    animation-delay:1.6s;

}

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
            STUDENT PHOTO FLOAT
==================================================*/

.student-photo{

    animation:

        imageFloat 4.5s ease-in-out infinite;

}

.photo-two{

    animation-delay:.7s;

}

.photo-three{

    animation-delay:1.3s;

}

@keyframes imageFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
                GLASS EFFECT
==================================================*/

.glass{

    animation:

        glassFloat 7s ease-in-out infinite;

}

.glass-two{

    animation-delay:1s;

}

.glass-three{

    animation-delay:2s;

}

@keyframes glassFloat{

    0%{

        transform:translateY(0) scale(1);

    }

    50%{

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

    }

    100%{

        transform:translateY(0) scale(1);

    }

}


/*==================================================
                CARD HOVER
==================================================*/

.floating-card{

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .35s ease;

}

.floating-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:

        0 30px 60px rgba(37,167,222,.18);

}


/*==================================================
                SHINE EFFECT
==================================================*/

.floating-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.75),

            transparent

        );

    transform:skewX(-20deg);

    transition:left .8s ease;

}

.floating-card:hover::before{

    left:140%;

}


/*==================================================
            SCROLL REVEAL
==================================================*/

.hero-left,
.hero-right{

    opacity:0;

    transform:translateY(45px);

}

.hero-left.show,
.hero-right.show{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .9s ease,

        transform .9s cubic-bezier(.19,1,.22,1);

}


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

@media(max-width:1200px){

    .media-container{

        grid-template-columns:1fr;

        gap:70px;

        text-align:center;

    }

    .hero-desc{

        margin:auto;

    }

    .hero-tag{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-right{

        height:650px;

    }

}


@media(max-width:768px){

    .hero-left h1{

        font-size:2.9rem;

    }

    .hero-camera{

        width:340px;

    }

    .hero-circle{

        width:340px;

        height:340px;

    }

    .floating-card{

        width:180px;

        padding:14px;

    }

    .student-photo{

        width:70px;

        height:70px;

    }

}


@media(max-width:576px){

    .hero-left h1{

        font-size:2.3rem;

    }

    .hero-stats{

        flex-direction:column;

        align-items:center;

    }

    .stat-box{

        width:100%;

        max-width:320px;

    }

    .hero-right{

        height:520px;

    }

    .floating-card{

        display:none;

    }

}


/*==================================================
                PERFORMANCE
==================================================*/

.hero-camera,
.floating-card,
.student-photo,
.glass{

    will-change:transform;

}































/*==================================================
            NEWS COVERAGE SECTION
==================================================*/

.media-news-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:#ffffff;

}


/*==================================================
            CONTAINER
==================================================*/

.media-news-section .container{

    width:min(1400px,92%);

    margin:auto;

    position:relative;

    z-index:5;

}


/*==================================================
            BACKGROUND
==================================================*/

.news-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}


/*==================================================
            BLUR CIRCLES
==================================================*/

.news-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}

.circle-1{

    width:340px;

    height:340px;

    background:rgba(37,167,222,.10);

    top:-80px;

    left:-120px;

}

.circle-2{

    width:420px;

    height:420px;

    background:rgba(37,167,222,.08);

    bottom:-160px;

    right:-120px;

}


/*==================================================
            GRID
==================================================*/

.news-grid{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(

    rgba(37,167,222,.08) 1px,

    transparent 1px

    );

    background-size:34px 34px;

    opacity:.45;

}


/*==================================================
            SECTION HEADER
==================================================*/

.news-heading{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:70px;

}


/*==================================================
            TAG
==================================================*/

.section-tag{

    display:inline-block;

    padding:8px 22px;

    border-radius:30px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:.78rem;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


/*==================================================
            TITLE
==================================================*/

.news-heading h2{

    margin-top:20px;

    font-size:3rem;

    font-weight:800;

    color:var(--black);

    line-height:1.25;

}

.news-heading h2 span{

    display:block;

    color:var(--primary);

}


/*==================================================
            DESCRIPTION
==================================================*/

.news-heading p{

    margin-top:22px;

    color:var(--text);

    line-height:1.9;

    font-size:1.03rem;

}


/*==================================================
            MARQUEE
==================================================*/

.news-marquee{

    position:relative;

    overflow:hidden;

    width:100%;

}


/*==================================================
            TRACK
==================================================*/

.news-track{

    display:flex;

    align-items:stretch;

    gap:26px;

    width:max-content;

}
/*==================================================
                NEWS CARD
==================================================*/

.news-card{

    position:relative;

    flex:0 0 340px;

    min-height:245px;

    padding:32px;

    border-radius:24px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    border:1px solid rgba(37,167,222,.12);

    box-shadow:

        0 18px 45px rgba(15,23,42,.06);

    overflow:hidden;

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .35s ease;

}


/*==================================================
            TOP BORDER
==================================================*/

.news-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(

        90deg,

        #25A7DE,

        #6CCEF5

    );

    transition:.45s ease;

}

.news-card:hover::after{

    width:100%;

}


/*==================================================
            HOVER
==================================================*/

.news-card:hover{

    transform:

        translateY(-12px);

    border-color:

        rgba(37,167,222,.35);

    box-shadow:

        0 30px 70px

        rgba(37,167,222,.15);

}


/*==================================================
            NEWSPAPER NAME
==================================================*/

.news-paper{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    margin-bottom:22px;

    border-radius:40px;

    background:#EDF8FE;

    color:#25A7DE;

    font-size:.80rem;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


/*==================================================
                DATE
==================================================*/

.news-date{

    display:block;

    margin-bottom:18px;

    color:#7A8A9A;

    font-size:.86rem;

    font-weight:600;

}


/*==================================================
            ARTICLE TEXT
==================================================*/

.news-card p{

    color:#253244;

    font-size:1rem;

    line-height:1.85;

    font-weight:500;

    margin-bottom:32px;

}


/*==================================================
            READ MORE
==================================================*/

.news-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#25A7DE;

    text-decoration:none;

    font-size:.95rem;

    font-weight:700;

    transition:.35s ease;

}


.news-card a i{

    transition:.35s ease;

}


.news-card:hover a{

    color:#1689C4;

}


.news-card:hover a i{

    transform:

        translateX(8px);

}


/*==================================================
            SHINE EFFECT
==================================================*/

.news-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:50%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.8),

            transparent

        );

    transform:skewX(-20deg);

    transition:left .9s ease;

}

.news-card:hover::before{

    left:150%;

}
/*==================================================
            INFINITE MARQUEE
==================================================*/

.news-track{

    animation:

        newsMarquee 45s linear infinite;

}

.news-marquee:hover .news-track{

    animation-play-state:paused;

}


@keyframes newsMarquee{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(calc(-50% - 13px));

    }

}


/*==================================================
            EDGE FADE EFFECT
==================================================*/

.news-marquee::before,
.news-marquee::after{

    content:"";

    position:absolute;

    top:0;

    width:140px;

    height:100%;

    z-index:20;

    pointer-events:none;

}

.news-marquee::before{

    left:0;

    background:

    linear-gradient(

        to right,

        #ffffff,

        rgba(255,255,255,0)

    );

}

.news-marquee::after{

    right:0;

    background:

    linear-gradient(

        to left,

        #ffffff,

        rgba(255,255,255,0)

    );

}


/*==================================================
            CARD ACTIVE SCALE
==================================================*/

.news-marquee:hover .news-card{

    opacity:.55;

    transition:

        opacity .35s ease,

        transform .35s ease;

}

.news-marquee .news-card:hover{

    opacity:1;

    transform:

        translateY(-12px)

        scale(1.03);

}


/*==================================================
            NEWSPAPER BADGE
==================================================*/

.news-paper{

    transition:

        background .35s ease,

        color .35s ease,

        transform .35s ease;

}

.news-card:hover .news-paper{

    background:var(--primary);

    color:#ffffff;

    transform:scale(1.05);

}


/*==================================================
            READ MORE EFFECT
==================================================*/

.news-card a{

    position:relative;

}

.news-card a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s ease;

}

.news-card:hover a::after{

    width:100%;

}


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

@media(max-width:1200px){

    .news-card{

        flex:0 0 310px;

    }

}


@media(max-width:992px){

    .news-heading h2{

        font-size:2.4rem;

    }

    .news-card{

        flex:0 0 280px;

        padding:26px;

        min-height:220px;

    }

}


@media(max-width:768px){

    .media-news-section{

        padding:90px 0;

    }

    .news-heading{

        margin-bottom:50px;

    }

    .news-heading h2{

        font-size:2rem;

    }

    .news-heading p{

        font-size:.95rem;

    }

    .news-card{

        flex:0 0 260px;

    }

    .news-marquee::before,
    .news-marquee::after{

        width:70px;

    }

}


@media(max-width:576px){

    .news-card{

        flex:0 0 230px;

        padding:22px;

        min-height:210px;

    }

    .news-paper{

        font-size:.70rem;

    }

    .news-card p{

        font-size:.90rem;

        line-height:1.7;

    }

}


/*==================================================
            PERFORMANCE
==================================================*/

.news-track,
.news-card{

    will-change:

        transform;

}

.news-card{

    backface-visibility:hidden;

    transform:translateZ(0);

}


















/* =============================================================
   MEDIA SHOWCASE — style.css
   ============================================================= */

:root {

  --radius-lg:  22px;
  --radius-md:  16px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: var(--cream);
}

/* ---------------------------------------------------------------
   SECTION SHELL
--------------------------------------------------------------- */
.showcase {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding: 96px 8vw 110px;
  isolation: isolate;
}

/* soft ambient sky-blue glow behind the grid */
.showcase__glow {
  position: absolute;
  top: -180px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(79, 168, 222, 0.28) 0%, rgba(79, 168, 222, 0) 70%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------
   HEADER
--------------------------------------------------------------- */
.showcase__head {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 0 56px;
}

.showcase__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--sky-deep);
}

.showcase__eyebrow-line {
  width: 34px;
  height: 2px;
  background: var(--sky-deep);
  border-radius: 2px;
}

.showcase__title {
  margin: 0 0 18px;
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.showcase__title span {
  color: var(--sky-deep);
  position: relative;
  white-space: nowrap;
}

.showcase__title span::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  bottom: 2px;
  height: 0.34em;
  background: var(--sky);
  opacity: 0.28;
  border-radius: 4px;
  z-index: -1;
}

.showcase__subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.7;
  color: #4b4b4b;
}

/* ---------------------------------------------------------------
   BENTO COLLAGE GRID
   4 columns x 3 rows — one hero (2x2), one tall (1x2),
   one wide (2x1), four squares (1x1)
--------------------------------------------------------------- */
.showcase__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, clamp(140px, 15vw, 190px));
  grid-template-areas:
    "hero hero tall sq1"
    "hero hero tall sq2"
    "wide wide sq3 sq4";
  gap: 16px;
}

.tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: 0 2px 10px rgba(23, 24, 26, 0.06);
  cursor: pointer;

  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: box-shadow .4s var(--ease), transform .6s var(--ease), opacity .6s var(--ease);
}

.tile.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.tile:hover,
.tile:focus-within {
  box-shadow: 0 18px 34px rgba(23, 24, 26, 0.18);
}

.tile:nth-of-type(1) { grid-area: hero; border-radius: var(--radius-lg); }
.tile:nth-of-type(2) { grid-area: tall; }
.tile:nth-of-type(3) { grid-area: sq1; }
.tile:nth-of-type(4) { grid-area: sq2; }
.tile:nth-of-type(5) { grid-area: wide; }
.tile:nth-of-type(6) { grid-area: sq3; }
.tile:nth-of-type(7) { grid-area: sq4; }

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform .7s var(--ease), filter .5s var(--ease);
}

.tile:hover img,
.tile:focus-within img {
  transform: scale(1.14) rotate(0.4deg);
}

/* caption overlay, slides up from the bottom on hover */
.tile__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(23,24,26,0) 0%, rgba(23,24,26,0.82) 100%);
  transform: translateY(14px);
  opacity: 0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}

.tile:hover .tile__caption,
.tile:focus-within .tile__caption {
  transform: translateY(0);
  opacity: 1;
}

.tile__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sky);
}

.tile__desc {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.tile--hero .tile__desc { font-size: 16.5px; }

/* ---------------------------------------------------------------
   SIGNATURE ELEMENT — rotating stamp badge over the collage
--------------------------------------------------------------- */
.showcase__badge {
  position: absolute;
  top: -34px;
  right: 6%;
  width: 118px;
  height: 118px;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.showcase__badge-spin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: badge-rotate 22s linear infinite;
}

.showcase__badge-spin text {
  fill: var(--ink);
  font-family: 'Poppins', sans-serif;
}

.showcase__badge::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--sky-deep);
}

.showcase__badge-center {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sky);
  color: var(--white);
}

@keyframes badge-rotate {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__badge-spin { animation: none; }
}

/* ---------------------------------------------------------------
   VIEW MORE CTA
--------------------------------------------------------------- */
.showcase__cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 52px;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.showcase__cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.btn-view-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), box-shadow .45s var(--ease), transform .25s var(--ease);
  box-shadow: 0 6px 18px rgba(23, 24, 26, 0.22);
}

.btn-view-more::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sky);
  transform: translateX(-102%);
  transition: transform .45s var(--ease);
}

.btn-view-more:hover,
.btn-view-more:focus-visible {
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(79, 168, 222, 0.4);
}

.btn-view-more:hover::before,
.btn-view-more:focus-visible::before {
  transform: translateX(0);
}

.btn-view-more:active { transform: scale(0.97); }

.btn-view-more__icon {
  display: grid;
  place-items: center;
  transition: transform .4s var(--ease);
}

.btn-view-more:hover .btn-view-more__icon,
.btn-view-more:focus-visible .btn-view-more__icon {
  transform: translateX(5px);
}

/* ---------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------- */
@media (max-width: 900px) {
  .showcase { padding: 72px 6vw 88px; }

  .showcase__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, clamp(150px, 32vw, 220px));
    grid-template-areas:
      "hero hero"
      "hero hero"
      "tall wide"
      "sq1  sq2"
      "sq3  sq4";
  }

  .showcase__badge { width: 92px; height: 92px; top: -20px; right: 4%; }
}

@media (max-width: 560px) {
  .showcase__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, minmax(150px, auto));
    grid-template-areas:
      "hero hero"
      "hero hero"
      "tall tall"
      "wide wide"
      "sq1  sq2"
      "sq3  sq4";
  }

  .showcase__badge { display: none; }
  .showcase__title { font-size: 28px; }
}





















/* ================= NAVBAR AND FOOTER ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
}


/* ================= NAVBAR ================= */
.navbar {
    width: 100%;
    background: var(--cream);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    width: 90%;
    max-width: 1280px;
    margin: auto;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 52px;
    width: auto;
    transition: transform 0.3s ease;
}

.logo:hover img {
    transform: scale(1.04);
}

/* Navigation */
.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    position: relative;
    text-decoration: none;
    color: var(--sky);
    font-size: 15px;
    font-weight: 500;
    padding: 6px 0;
    transition: all 0.3s ease;
}

/* Hover Glow */
.nav-links a:hover {
    color: var(--sky);
    text-shadow:
        0 0 8px rgba(37,167,222,0.55),
        0 0 16px rgba(37,167,222,0.45),
        0 0 28px rgba(37,167,222,0.35);
    transform: translateY(-1px);
}

/* Active Link */
.nav-links a.active {
    font-weight: 600;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2.5px;
    background: var(--sky);
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(37,167,222,0.35);
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle span {
    width: 26px;
    height: 2.5px;
    background: var(--sky);
    border-radius: 10px;
    transition: 0.3s;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: 78px;
        right: 0;
        width: 100%;
        background: var(--cream);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 16px 24px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);

        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .nav-links.open {
        max-height: 420px;
    }

    .nav-links a {
        width: 100%;
        padding: 14px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }
}

/* ================= FOOTER ================= */

.footer{
    font-family: 'Poppins', sans-serif;
    position: relative;
    background: linear-gradient(180deg, #1F2937 0%, #111827 55%, #0B1220 100%);
    color: var(--text);
    overflow: hidden;
    padding-top: 80px;
    border-top: 1px solid rgba(37,167,222,0.15);
}

/* Subtle background glow */

.footer::before{
    content: "";
    position: absolute;
    top: -140px;
    left: -120px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(37,167,222,0.18) 0%, rgba(37,167,222,0) 70%);
    pointer-events: none;
}

.footer::after{
    content: "";
    position: absolute;
    right: -140px;
    bottom: -160px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(37,167,222,0.12) 0%, rgba(37,167,222,0) 72%);
    pointer-events: none;
}

/* ================= CONTAINER ================= */

.footer-container{
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.25fr 0.9fr 0.9fr 1fr;
    gap: 48px;
    position: relative;
    z-index: 2;
}

/* ================= BRAND ================= */

.footer-brand{
    padding-right: 10px;
}

.footer-logo{
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
    text-decoration: none;
}

.footer-logo img{
    height: 62px;
    width: auto;
    filter: drop-shadow(0 6px 18px rgba(37,167,222,0.18));
    transition: transform 0.35s ease, filter 0.35s ease;
}

.footer-logo:hover img{
    transform: translateY(-2px) scale(1.03);
    filter: drop-shadow(0 10px 26px rgba(37,167,222,0.32));
}

.footer-brand p{
    color: #C7CED8;
    font-size: 15px;
    line-height: 1.9;
    max-width: 380px;
    letter-spacing: 0.2px;
}

/* ================= COLUMNS ================= */

.footer-column h3{
    position: relative;
    color: var(--cream);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 22px;
    letter-spacing: 0.4px;
}

.footer-column h3::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 54px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sky), rgba(37,167,222,0.18));
    box-shadow: 0 0 14px rgba(37,167,222,0.28);
}

.footer-column ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-column li{
    margin-bottom: 14px;
}

.footer-column a{
    position: relative;
    color: #C7CED8;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.28s ease, transform 0.28s ease;
}

/* underline animation base */

.footer-column a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1.5px;
    background: var(--sky);
    transition: width 0.3s ease;
}

/* ================= CONTACT ================= */

.footer-contact .contact-item{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.footer-contact .contact-item i{
    color: var(--sky);
    font-size: 16px;
    margin-top: 3px;
    width: 18px;
}

.footer-contact .contact-item span{
    color: #C7CED8;
    font-size: 15px;
    line-height: 1.7;
}

/* ================= QUICK LINKS HOVER ================= */

.footer-column a:hover{
    color: var(--cream);
    transform: translateX(6px);
    text-shadow: 0 0 12px rgba(37,167,222,0.22);
}

.footer-column a:hover::after{
    width: 100%;
}

/* ================= SOCIAL ICONS ================= */

.footer-social{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.footer-social a{
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(248,245,239,0.08);
    border: 1px solid rgba(37,167,222,0.16);
    color: var(--cream);
    text-decoration: none;
    overflow: hidden;
    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        background 0.45s ease,
        border-color 0.45s ease;
}

/* Soft glow ring */

.footer-social a::before{
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(37,167,222,0.0),
        rgba(37,167,222,0.55),
        rgba(37,167,222,0.0)
    );
    animation: ringRotate 8s linear infinite;
    opacity: 0.9;
}

/* Inner circle */

.footer-social a::after{
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: #111827;
}

/* Icon */

.footer-social a i{
    position: relative;
    z-index: 2;
    font-size: 18px;
    animation: iconRotate 14s linear infinite;
    transition: transform 0.45s ease, color 0.45s ease;
}

/* Hover */

.footer-social a:hover{
    transform: translateY(-6px) scale(1.08);
    background: rgba(37,167,222,0.18);
    border-color: rgba(37,167,222,0.5);
    box-shadow:
        0 0 16px rgba(37,167,222,0.32),
        0 12px 28px rgba(0,0,0,0.28);
}

.footer-social a:hover i{
    color: #ffffff;
    transform: rotateY(180deg) scale(1.12);
}

/* ================= ANIMATIONS ================= */

@keyframes ringRotate{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

@keyframes iconRotate{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* ================= BOTTOM BAR ================= */

.footer-bottom{
    width: 90%;
    max-width: 1280px;
    margin: 54px auto 0;
    padding: 22px 0 28px;
    border-top: 1px solid rgba(255,255,255,0.08);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    position: relative;
    z-index: 2;
}

.footer-bottom p{
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.2px;
}

.footer-bottom-links{
    display: flex;
    align-items: center;
    gap: 26px;
}

.footer-bottom-links a{
    position: relative;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.28s ease;
}

.footer-bottom-links a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1.5px;
    background: var(--sky);
    transition: width 0.28s ease;
}

.footer-bottom-links a:hover{
    color: var(--cream);
}

.footer-bottom-links a:hover::after{
    width: 100%;
}

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

@media (max-width: 1024px){

    .footer-container{
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .footer-brand{
        padding-right: 0;
    }

    .footer-bottom{
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px){

    .footer{
        padding-top: 64px;
    }

    .footer-container{
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-logo img{
        height: 56px;
    }

    .footer-social{
        gap: 12px;
    }

    .footer-social a{
        width: 48px;
        height: 48px;
    }

    .footer-bottom{
        align-items: flex-start;
    }

    .footer-bottom-links{
        flex-wrap: wrap;
        gap: 16px;
    }
}