/* =====================================================
LIONS & BIG CATS
PREMIUM CURIOUS EXPLORER PAGE
===================================================== */

:root{


--lion-green:#16834a;
--lion-dark:#071b13;
--lion-gold:#f5b942;
--lion-yellow:#ffd45c;
--lion-text:#24332c;
--lion-muted:#68756f;
--lion-light:#f5f8f4;
```

}

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

.lion-hero{


position:relative;

height:92vh;
min-height:680px;

overflow:hidden;

display:flex;
align-items:center;

background:#07150f;
```

}

.lion-hero-video{


position:absolute;

inset:0;

width:100%;
height:100%;

object-fit:cover;

transform:scale(1.04);

filter:
    brightness(.82)
    contrast(1.05)
    saturate(1.08);


}

.lion-hero-overlay{


position:absolute;

inset:0;

background:
    linear-gradient(
        90deg,
        rgba(3,18,12,.82) 0%,
        rgba(3,18,12,.48) 42%,
        rgba(3,18,12,.12) 100%
    );


}

.lion-hero-content{


position:relative;

z-index:2;

width:100%;

color:#fff;


}

.lion-hero-inner{


max-width:760px;


}

.lion-eyebrow{


display:inline-flex;

align-items:center;

gap:10px;

padding:9px 17px;

margin-bottom:24px;

border-radius:999px;

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

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

backdrop-filter:blur(12px);

color:#fff;

font-size:.82rem;

font-weight:800;

text-transform:uppercase;

letter-spacing:1.5px;


}

.lion-eyebrow i{


color:var(--lion-yellow);


}

.lion-hero h1{


margin:0;

font-family:"Plus Jakarta Sans",sans-serif;

font-size:clamp(3.4rem,7vw,7rem);

line-height:.98;

font-weight:800;

letter-spacing:-3px;


}

.lion-hero h1 span{


color:var(--lion-yellow);


}

.lion-hero p{


max-width:680px;

margin:28px 0 35px;

font-size:1.15rem;

line-height:1.85;

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


}

.lion-primary-btn{


display:inline-flex;

align-items:center;

padding:15px 28px;

border-radius:999px;

background:var(--lion-yellow);

color:#182219;

border:none;

font-weight:800;

transition:.35s ease;


}

.lion-primary-btn:hover{


transform:translateY(-5px);

background:#fff;

color:#13251a;

box-shadow:0 15px 40px rgba(0,0,0,.3);


}

.lion-scroll{


position:absolute;

bottom:30px;
left:50%;

transform:translateX(-50%);

z-index:3;

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

color:#fff;


}

.lion-scroll span{


width:25px;
height:42px;

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

border-radius:20px;

position:relative;


}

.lion-scroll span::after{


content:"";

position:absolute;

top:8px;
left:50%;

width:4px;
height:8px;

border-radius:10px;

background:#fff;

transform:translateX(-50%);

animation:scrollDot 1.8s infinite;


}

.lion-scroll small{


font-size:.7rem;

text-transform:uppercase;

letter-spacing:2px;


}

@keyframes scrollDot{


0%{
    opacity:0;
    transform:translate(-50%,0);
}

30%{
    opacity:1;
}

100%{
    opacity:0;
    transform:translate(-50%,16px);
}


}

/* =====================================================
FACTS
===================================================== */

.lion-facts{


position:relative;

z-index:5;

margin-top:-55px;


}

.lion-fact-card{


min-height:170px;

padding:30px 20px;

display:flex;

flex-direction:column;

justify-content:center;
align-items:center;

text-align:center;

border-radius:24px;

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

box-shadow:
    0 20px 55px rgba(16,52,35,.12);

border:1px solid rgba(20,100,55,.08);

transition:.4s ease;


}

.lion-fact-card:hover{


transform:translateY(-10px);

box-shadow:
    0 30px 65px rgba(16,52,35,.18);


}

.lion-fact-card i{


margin-bottom:12px;

color:var(--lion-green);

font-size:1.5rem;
```

}

.lion-fact-card strong{


font-family:"Plus Jakarta Sans",sans-serif;

font-size:2rem;

color:var(--lion-dark);


}

.lion-fact-card span{

```
color:var(--lion-muted);

font-size:.9rem;


}

/* =====================================================
GENERAL
===================================================== */

.lion-intro{


padding-top:110px !important;

padding-bottom:100px !important;


}

.section-kicker{


display:inline-block;

margin-bottom:15px;

color:var(--lion-green);

font-size:.78rem;

font-weight:800;

letter-spacing:2px;


}

.lion-intro h2,
.cat-story h2,
.lion-conservation h2{


font-family:"Plus Jakarta Sans",sans-serif;

font-size:clamp(2.2rem,4vw,4rem);

line-height:1.1;

font-weight:800;

color:var(--lion-dark);


}

.lion-intro h2 span,
.cat-story h2 span,
.lion-conservation h2 span{


color:var(--lion-green);


}

.lion-intro p,
.cat-story p,
.lion-conservation p{


color:var(--lion-muted);

line-height:1.9;


}

.lion-intro .lead{


margin-top:25px;

color:#34463d;

font-size:1.2rem;


}

.lion-intro-image{


position:relative;


}

.lion-intro-image img{


width:100%;

height:560px;

object-fit:cover;

border-radius:35px;

box-shadow:
    0 30px 70px rgba(0,0,0,.15);


}

.image-badge{


position:absolute;

right:25px;
bottom:25px;

padding:14px 20px;

border-radius:15px;

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

color:var(--lion-dark);

font-weight:700;

box-shadow:0 15px 35px rgba(0,0,0,.15);


}

.image-badge i{


color:var(--lion-green);

margin-right:7px;


}

.lion-text-link{


display:inline-flex;

align-items:center;

gap:10px;

margin-top:18px;

color:var(--lion-green);

text-decoration:none;

font-weight:800;

transition:.3s;


}

.lion-text-link:hover{


gap:17px;

color:#0b5d32;


}

/* =====================================================
BIG CATS
===================================================== */

.big-cats-section{


background:var(--lion-light);


}

.section-heading{


max-width:760px;

margin:0 auto;


}

.section-heading > span{


color:var(--lion-green);

font-size:.75rem;

font-weight:800;

letter-spacing:2px;


}

.section-heading h2{


margin:10px 0 15px;

font-family:"Plus Jakarta Sans",sans-serif;

font-size:clamp(2.2rem,4vw,3.8rem);

color:var(--lion-dark);


}

.section-heading h2 strong{


color:var(--lion-green);


}

.section-heading p{


color:var(--lion-muted);

line-height:1.8;


}

.big-cat-card{


height:100%;

overflow:hidden;

border-radius:28px;

background:#fff;

box-shadow:0 15px 45px rgba(0,0,0,.08);

transition:.45s cubic-bezier(.22,1,.36,1);


}

.big-cat-card:hover{


transform:translateY(-12px);

box-shadow:0 28px 60px rgba(0,0,0,.15);


}

.big-cat-image{


height:330px;

position:relative;

overflow:hidden;


}

.big-cat-image img{


width:100%;
height:100%;

object-fit:cover;

transition:.7s ease;


}

.big-cat-card:hover .big-cat-image img{


transform:scale(1.08);


}

.cat-label{


position:absolute;

top:20px;
right:20px;

padding:7px 12px;

border-radius:999px;

background:rgba(0,0,0,.55);

backdrop-filter:blur(8px);

color:#fff;

font-size:.7rem;

font-style:italic;


}

.big-cat-content{


padding:30px;


}

.cat-kicker{


color:var(--lion-green);

font-size:.7rem;

font-weight:800;

letter-spacing:1.8px;


}

.big-cat-content h3{


margin:8px 0 12px;

font-family:"Plus Jakarta Sans",sans-serif;

font-size:2rem;

color:var(--lion-dark);


}

.big-cat-content p{


color:var(--lion-muted);

line-height:1.8;


}

.big-cat-content a{


display:inline-flex;

gap:10px;

align-items:center;

margin-top:10px;

color:var(--lion-green);

text-decoration:none;

font-weight:800;


}

.big-cat-content a:hover{


gap:16px;


}

/* =====================================================
STORY
===================================================== */

.cat-story{


background:#fff;


}

.story-image{


position:relative;


}

.story-image img{


width:100%;

height:600px;

object-fit:cover;

border-radius:35px;


}

.story-number{


position:absolute;

left:25px;
bottom:25px;

font-family:"Plus Jakarta Sans",sans-serif;

font-size:4rem;

font-weight:800;

color:#fff;

text-shadow:0 5px 20px rgba(0,0,0,.4);


}

.story-highlights{


display:flex;

flex-direction:column;

gap:16px;

margin-top:30px;


}

.story-highlights div{


display:flex;

align-items:center;

gap:15px;

color:#394a41;

font-weight:700;


}

.story-highlights i{


width:42px;
height:42px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:#e8f4ec;

color:var(--lion-green);


}

/* =====================================================
HABITATS
===================================================== */

.lion-habitats{


background:var(--lion-light);


}

.habitat-card{


position:relative;

height:450px;

overflow:hidden;

border-radius:28px;


}

.habitat-card img{


width:100%;
height:100%;

object-fit:cover;

transition:.7s ease;


}

.habitat-card:hover img{


transform:scale(1.08);


}

.habitat-card::after{


content:"";

position:absolute;

inset:0;

background:
    linear-gradient(
        to top,
        rgba(0,0,0,.8),
        rgba(0,0,0,.05) 70%
    );


}

.habitat-overlay{


position:absolute;

z-index:2;

left:25px;
right:25px;
bottom:25px;

color:#fff;


}

.habitat-overlay span{


font-size:.75rem;

text-transform:uppercase;

letter-spacing:1.5px;

color:var(--lion-yellow);

font-weight:800;


}

.habitat-overlay h3{


margin:7px 0;

font-family:"Plus Jakarta Sans",sans-serif;

font-size:2rem;


}

.habitat-overlay p{


margin:0;

color:rgba(255,255,255,.85);

line-height:1.6;


}

/* =====================================================
CONSERVATION
===================================================== */

.lion-conservation{


background:#fff;


}

.conservation-box{


padding:70px;

overflow:hidden;

border-radius:38px;

background:
    linear-gradient(
        135deg,
        #edf7ef,
        #f8fbf5
    );


}

.conservation-image img{


width:100%;

height:480px;

object-fit:cover;

border-radius:28px;


}

.conservation-btn{


margin-top:20px;

padding:13px 22px;

border-radius:999px;

background:var(--lion-green);

color:#fff;

font-weight:800;

border:none;


}

.conservation-btn:hover{


background:#0d6337;

color:#fff;

transform:translateY(-3px);


}

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

.lion-gallery{


background:var(--lion-light);


}

.gallery-item{


height:330px;

overflow:hidden;

border-radius:24px;


}

.gallery-large{

```
height:680px;
```

}

.gallery-item img{


width:100%;
height:100%;

object-fit:cover;

transition:.7s ease;


}

.gallery-item:hover img{


transform:scale(1.07);


}

/* =====================================================
CTA
===================================================== */

.lion-cta{


position:relative;

padding:110px 20px;

overflow:hidden;

background:
    radial-gradient(
        circle at 20% 20%,
        rgba(245,185,66,.2),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #071b13,
        #123d29
    );

color:#fff;


}

.lion-cta::before{


content:"";

position:absolute;

width:350px;
height:350px;

border-radius:50%;

right:-120px;
top:-150px;

background:rgba(255,205,70,.12);

filter:blur(40px);


}

.lion-cta > .container{


position:relative;

z-index:2;


}

.lion-cta > .container > i{

```
margin-bottom:20px;

font-size:2rem;

color:var(--lion-yellow);


}

.lion-cta h2{


font-family:"Plus Jakarta Sans",sans-serif;

font-size:clamp(2.5rem,5vw,4.5rem);

font-weight:800;


}

.lion-cta p{


max-width:650px;

margin:20px auto 30px;

color:rgba(255,255,255,.8);

line-height:1.8;


}

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

@media(max-width:991px){


.lion-hero{

    min-height:650px;

}


.lion-hero h1{

    letter-spacing:-2px;

}


.lion-intro{

    padding-top:90px !important;

}


.conservation-box{

    padding:45px 30px;

}


.gallery-large{

    height:450px;

}


}

@media(max-width:767px){


.lion-hero{

    height:85vh;
    min-height:600px;

}


.lion-hero h1{

    font-size:3.2rem;

}


.lion-hero p{

    font-size:1rem;

}


.lion-facts{

    margin-top:0;

    padding:25px 0;

    background:var(--lion-light);

}


.lion-intro-image img,
.story-image img{

    height:420px;

}


.big-cat-image{

    height:280px;

}


.habitat-card{

    height:380px;

}


.conservation-image img{

    height:350px;

}


.gallery-large{

    height:350px;

}


.gallery-item{

    height:280px;

}


.lion-cta{

    padding:80px 20px;

}


}