/* =========================================================
RARE SPECIES
The Curious Explorer
========================================================= */

/* =========================================================
PAGE BASE
========================================================= */

.rare-intro,
.rare-story,
.rare-species-section,
.rare-conservation,
.rare-tips,
.rare-cta {


position: relative;
overflow: hidden;


}

.rare-story,
.rare-species-section,
.rare-conservation,
.rare-tips {


padding-top: 100px !important;
padding-bottom: 100px !important;


}

/* =========================================================
INTRO
========================================================= */

.rare-intro {


min-height: 58vh;

display: flex;

align-items: center;

padding: 180px 0 100px;

background:

    radial-gradient(
        circle at 10% 20%,
        rgba(255, 193, 7, .20),
        transparent 30%
    ),

    radial-gradient(
        circle at 90% 70%,
        rgba(25, 135, 84, .18),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #071b14 0%,
        #0d3022 48%,
        #071711 100%
    );

color: #fff;


}

.rare-intro::before {


content: "";

position: absolute;

width: 420px;
height: 420px;

border-radius: 50%;

top: -220px;
right: -100px;

background: rgba(255, 193, 7, .14);

filter: blur(90px);

pointer-events: none;


}

.rare-intro::after {


content: "";

position: absolute;

width: 350px;
height: 350px;

border-radius: 50%;

bottom: -180px;
left: -100px;

background: rgba(32, 201, 151, .14);

filter: blur(90px);

pointer-events: none;


}

.rare-intro-content {


position: relative;

z-index: 2;

max-width: 900px;


}

.rare-eyebrow {


display: inline-flex;

align-items: center;

gap: 10px;

margin-bottom: 22px;

padding: 9px 17px;

border-radius: 999px;

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

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

color: #8ff0b9;

font-size: .78rem;

font-weight: 800;

letter-spacing: 2px;


}

.rare-eyebrow i {


color: #ffc107;

font-size: 1rem;


}

.rare-intro h1 {


margin: 0 0 25px;

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

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

font-weight: 800;

line-height: .98;

letter-spacing: -3px;


}

.rare-intro h1 span {


display: block;

background:
    linear-gradient(
        90deg,
        #8ff0b9,
        #ffc107,
        #ffffff
    );

-webkit-background-clip: text;
background-clip: text;

color: transparent;


}

.rare-intro p {


max-width: 760px;

margin: 0;

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

font-size: 1.12rem;

line-height: 1.9;


}

/* =========================================================
SECTION KICKER
========================================================= */

.section-kicker {


display: inline-block;

margin-bottom: 15px;

color: #168a55;

font-size: .78rem;

font-weight: 800;

letter-spacing: 2px;


}

.rare-story h2,
.rare-conservation h2 {


margin-bottom: 25px;

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

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

line-height: 1.1;

color: #14231c;


}

.rare-story h2 strong,
.rare-conservation h2 strong {


display: block;

color: #168a55;


}

.rare-story p,
.rare-conservation p {


color: #56635d;

font-size: 1rem;

line-height: 1.9;


}

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

.rare-image-wrap {


position: relative;

border-radius: 32px;

overflow: hidden;

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


}

.rare-image-wrap img {


width: 100%;

height: 560px;

object-fit: cover;

display: block;

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


}

.rare-image-wrap:hover img {


transform: scale(1.06);


}

.rare-image-wrap::after {


content: "";

position: absolute;

inset: 0;

background:
    linear-gradient(
        180deg,
        transparent 55%,
        rgba(0,0,0,.58)
    );

pointer-events: none;


}

.rare-image-badge {


position: absolute;

left: 25px;
bottom: 25px;

z-index: 2;

display: flex;

align-items: center;

gap: 12px;

padding: 13px 18px;

border-radius: 999px;

color: #fff;

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

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

backdrop-filter: blur(15px);

-webkit-backdrop-filter: blur(15px);

font-weight: 700;


}

.rare-image-badge i {


color: #ffc107;


}

/* =========================================================
BUTTON
========================================================= */

.rare-btn {


display: inline-flex;

align-items: center;

gap: 12px;

margin-top: 18px;

padding: 14px 23px;

border-radius: 999px;

background: #168a55;

color: #fff;

text-decoration: none;

font-weight: 700;

box-shadow:
    0 12px 28px rgba(22,138,85,.22);

transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;


}

.rare-btn:hover {


color: #fff;

background: #0d7044;

transform: translateY(-4px);

box-shadow:
    0 18px 35px rgba(22,138,85,.30);


}

.rare-btn i {


transition: transform .3s ease;


}

.rare-btn:hover i {


transform: translateY(4px);


}

/* =========================================================
SPECIES SECTION
========================================================= */

.rare-species-section {


background:

    radial-gradient(
        circle at 0% 0%,
        rgba(25,135,84,.06),
        transparent 30%
    ),

    #f5f8f5;


}

.section-heading {


max-width: 760px;

margin-left: auto;
margin-right: auto;


}

.section-heading > span {


display: inline-block;

margin-bottom: 12px;

color: #168a55;

font-size: .78rem;

font-weight: 800;

letter-spacing: 2px;


}

.section-heading h2 {


margin-bottom: 15px;

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

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

color: #15251d;


}

.section-heading p {


margin: 0;

color: #68756e;

line-height: 1.8;


}

/* =========================================================
SPECIES CARDS
========================================================= */

.rare-card {


height: 100%;

overflow: hidden;

border-radius: 28px;

background: #fff;

border: 1px solid rgba(20,50,35,.08);

box-shadow:
    0 12px 35px rgba(20,50,35,.08);

transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease;


}

.rare-card:hover {


transform: translateY(-12px);

box-shadow:
    0 28px 60px rgba(20,50,35,.16);


}

.rare-card-image {


position: relative;

height: 285px;

overflow: hidden;


}

.rare-card-image::after {


content: "";

position: absolute;

inset: 0;

background:
    linear-gradient(
        180deg,
        transparent 50%,
        rgba(0,0,0,.45)
    );

pointer-events: none;


}

.rare-card-image img {


width: 100%;
height: 100%;

object-fit: cover;

display: block;

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


}

.rare-card:hover .rare-card-image img {


transform: scale(1.08);


}

.rare-status {


position: absolute;

top: 18px;
left: 18px;

z-index: 3;

padding: 7px 12px;

border-radius: 999px;

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

color: #168a55;

font-size: .7rem;

font-weight: 800;

letter-spacing: .5px;

box-shadow:
    0 8px 20px rgba(0,0,0,.12);


}

.rare-card-body {


position: relative;

padding: 32px 28px 30px;


}

.rare-icon {


width: 48px;
height: 48px;

display: flex;

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

margin-top: -55px;

margin-bottom: 20px;

position: relative;

z-index: 5;

border-radius: 15px;

background:
    linear-gradient(
        135deg,
        #168a55,
        #25b979
    );

color: #fff;

box-shadow:
    0 10px 25px rgba(22,138,85,.28);


}

.rare-card-body h3 {


margin-bottom: 8px;

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

font-size: 1.5rem;

color: #15251d;


}

.rare-location {


display: inline-flex;

align-items: center;

gap: 7px;

margin-bottom: 17px;

color: #168a55;

font-size: .82rem;

font-weight: 700;


}

.rare-location i {


color: #e0a900;


}

.rare-card-body p {


min-height: 105px;

margin-bottom: 22px;

color: #69756f;

font-size: .93rem;

line-height: 1.8;


}

.rare-card-body > a {


display: inline-flex;

align-items: center;

gap: 9px;

color: #168a55;

text-decoration: none;

font-size: .9rem;

font-weight: 800;


}

.rare-card-body > a i {


transition: transform .3s ease;


}

.rare-card-body > a:hover i {


transform: translateX(6px);


}

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

.rare-conservation {


background: #fff;


}

.conservation-points {


display: grid;

gap: 14px;

margin-top: 28px;


}

.conservation-points > div {


display: flex;

align-items: center;

gap: 14px;

padding: 15px 18px;

border-radius: 15px;

background: #f3f8f5;

color: #304238;

font-weight: 700;


}

.conservation-points i {


width: 38px;
height: 38px;

flex-shrink: 0;

display: flex;

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

border-radius: 50%;

background: #dff4e9;

color: #168a55;


}

.conservation-image {


position: relative;

overflow: hidden;

border-radius: 32px;

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


}

.conservation-image img {


width: 100%;

height: 500px;

object-fit: cover;

display: block;

transition: transform .7s ease;


}

.conservation-image:hover img {


transform: scale(1.05);


}

.conservation-overlay {


position: absolute;

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

display: flex;

align-items: center;

gap: 13px;

padding: 18px 20px;

border-radius: 18px;

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

color: #fff;

backdrop-filter: blur(14px);

-webkit-backdrop-filter: blur(14px);


}

.conservation-overlay i {


color: #ffc107;

font-size: 1.4rem;


}

/* =========================================================
RESPONSIBLE TRAVEL
========================================================= */

.rare-tips {


background: #f4f8f5;


}

.rare-tip {


height: 100%;

padding: 35px 28px;

text-align: center;

border-radius: 25px;

background: #fff;

border: 1px solid rgba(20,50,35,.07);

box-shadow:
    0 12px 35px rgba(20,50,35,.06);

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


}

.rare-tip:hover {


transform: translateY(-8px);

box-shadow:
    0 22px 45px rgba(20,50,35,.13);


}

.rare-tip > i {


width: 65px;
height: 65px;

display: flex;

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

margin: 0 auto 22px;

border-radius: 20px;

background: #e2f5e9;

color: #168a55;

font-size: 1.5rem;


}

.rare-tip h4 {


margin-bottom: 12px;

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

color: #18271f;


}

.rare-tip p {


margin: 0;

color: #6a766f;

line-height: 1.8;


}

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

.rare-cta {


padding: 120px 0;

background:

    radial-gradient(
        circle at 15% 30%,
        rgba(255,193,7,.18),
        transparent 30%
    ),

    radial-gradient(
        circle at 85% 70%,
        rgba(25,135,84,.22),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #071a12,
        #0c3524,
        #092016
    );

color: #fff;


}

.rare-cta::before {


content: "";

position: absolute;

width: 250px;
height: 250px;

border-radius: 50%;

top: -120px;
left: 10%;

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

filter: blur(60px);


}

.rare-cta-icon {


width: 70px;
height: 70px;

display: flex;

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

margin: 0 auto 25px;

border-radius: 22px;

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

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

color: #ffc107;

font-size: 1.6rem;

backdrop-filter: blur(12px);


}

.rare-cta h2 {


position: relative;

margin-bottom: 15px;

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

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

letter-spacing: -1px;


}

.rare-cta p {


max-width: 650px;

margin: 0 auto 30px;

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

line-height: 1.8;


}

.rare-cta .btn {


position: relative;

border: none;

border-radius: 999px;

padding: 14px 28px;

font-weight: 800;

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

transition:
    transform .35s ease,
    box-shadow .35s ease;


}

.rare-cta .btn:hover {


transform: translateY(-5px);

box-shadow:
    0 20px 40px rgba(0,0,0,.28);


}

/* =========================================================
BACK TO TOP
========================================================= */

#backToTop {


transition:
    transform .35s ease,
    box-shadow .35s ease;


}

#backToTop:hover {


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


}

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

@media (max-width: 991px) {


.rare-intro {

    min-height: auto;

    padding: 160px 0 90px;

}


.rare-story,
.rare-species-section,
.rare-conservation,
.rare-tips {

    padding-top: 75px !important;
    padding-bottom: 75px !important;

}


.rare-image-wrap img {

    height: 480px;

}


.rare-card-image {

    height: 300px;

}


}

@media (max-width: 767px) {

```
.rare-intro {

    padding: 140px 0 75px;

}


.rare-intro h1 {

    font-size: 3rem;

    letter-spacing: -1.5px;

}


.rare-intro p {

    font-size: 1rem;

}


.rare-image-wrap {

    border-radius: 22px;

}


.rare-image-wrap img {

    height: 380px;

}


.rare-card {

    border-radius: 22px;

}


.rare-card-image {

    height: 260px;

}


.rare-card-body {

    padding: 28px 23px;

}


.rare-card-body p {

    min-height: auto;

}


.conservation-image {

    border-radius: 22px;

}


.conservation-image img {

    height: 380px;

}


.rare-cta {

    padding: 90px 20px;

}


}

@media (max-width: 480px) {


.rare-intro h1 {

    font-size: 2.5rem;

}


.rare-eyebrow {

    font-size: .68rem;

    letter-spacing: 1.3px;

}


.rare-image-badge {

    left: 15px;
    right: 15px;
    bottom: 15px;

    justify-content: center;

    font-size: .8rem;

}


.rare-card-image {

    height: 235px;

}


.conservation-points > div {

    align-items: flex-start;

}


}