/* =========================================================
TRAVEL GUIDES PAGE
CURIOUS EXPLORER
========================================================= */

.travel-guides-page {
background: #f7faf8;
color: #1b2a22;
overflow-x: hidden;
}

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

.guides-intro {
padding: 150px 0 70px;


background:
    radial-gradient(
        circle at 10% 20%,
        rgba(76, 175, 80, 0.14),
        transparent 30%
    ),
    radial-gradient(
        circle at 90% 80%,
        rgba(255, 193, 7, 0.12),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f1f8f4 100%
    );


}

.guides-intro-content {
max-width: 850px;
margin: auto;
text-align: center;
}

.guides-kicker {
display: inline-flex;
align-items: center;
gap: 9px;


padding: 9px 18px;

border-radius: 999px;

background: rgba(46, 125, 50, 0.10);

color: #2e7d32;

font-size: .85rem;
font-weight: 800;

letter-spacing: 1.5px;
text-transform: uppercase;

margin-bottom: 22px;


}

.guides-kicker i {
font-size: 1rem;
}

.guides-intro h1 {
margin: 0 0 22px;


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

font-size: clamp(2.6rem, 6vw, 5rem);

line-height: 1.05;

font-weight: 800;

letter-spacing: -2px;

color: #10251a;


}

.guides-intro h1 span {
background:
linear-gradient(
90deg,
#2e7d32,
#00897b,
#f9a825
);


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

-webkit-text-fill-color: transparent;


}

.guides-intro p {
max-width: 720px;


margin: auto;

color: #5f6f66;

font-size: 1.08rem;

line-height: 1.9;


}

/* =========================================================
GUIDE CATEGORIES
========================================================= */

.guide-categories {
padding: 80px 0;
background: #ffffff;
}

.guides-section-title {
text-align: center;
margin-bottom: 50px;
}

.guides-section-title span {
display: block;


margin-bottom: 10px;

color: #43a047;

font-size: .8rem;
font-weight: 800;

text-transform: uppercase;

letter-spacing: 2px;


}

.guides-section-title h2 {
margin-bottom: 12px;


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

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

font-weight: 800;

color: #14271c;


}

.guides-section-title p {
max-width: 650px;

`
margin: auto;

color: #718078;

line-height: 1.8;


}

/* =========================================================
GUIDE CATEGORY CARD
========================================================= */

.guide-category-card {
position: relative;


height: 100%;

padding: 32px;

border-radius: 26px;

background: #ffffff;

border: 1px solid rgba(27, 67, 45, 0.08);

box-shadow:
    0 15px 40px rgba(26, 67, 45, 0.07);

overflow: hidden;

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


}

.guide-category-card::before {
content: "";


position: absolute;

width: 150px;
height: 150px;

right: -70px;
top: -70px;

border-radius: 50%;

background: rgba(76, 175, 80, 0.10);

transition: .45s ease;


}

.guide-category-card:hover {
transform: translateY(-10px);


border-color: rgba(67, 160, 71, 0.25);

box-shadow:
    0 25px 55px rgba(26, 67, 45, 0.14);


}

.guide-category-card:hover::before {
transform: scale(1.5);
}

.guide-category-icon {
position: relative;


width: 64px;
height: 64px;

display: flex;

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

margin-bottom: 24px;

border-radius: 20px;

background:
    linear-gradient(
        135deg,
        #2e7d32,
        #43a047
    );

color: #ffffff;

font-size: 1.45rem;

box-shadow:
    0 12px 25px rgba(46, 125, 50, 0.25);


}

.guide-category-card h4 {
position: relative;


margin-bottom: 12px;

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

font-size: 1.25rem;

font-weight: 800;

color: #193024;


}

.guide-category-card p {
position: relative;


margin: 0;

color: #68776f;

line-height: 1.75;

font-size: .95rem;


}

.guide-category-link {
position: relative;


display: inline-flex;

align-items: center;

gap: 8px;

margin-top: 22px;

color: #2e7d32;

font-weight: 800;

text-decoration: none;

transition: .3s ease;


}

.guide-category-link i {
transition: transform .3s ease;
}

.guide-category-link:hover {
color: #1565c0;
}

.guide-category-link:hover i {
transform: translateX(6px);
}

/* =========================================================
FEATURED GUIDES
========================================================= */

.featured-guides {
padding: 90px 0;


background:
    linear-gradient(
        180deg,
        #f2f8f4 0%,
        #ffffff 100%
    );


}

/* =========================================================
GUIDE ARTICLE CARD
========================================================= */

.guide-card {
position: relative;


height: 100%;

overflow: hidden;

border-radius: 28px;

background: #ffffff;

border: 1px solid rgba(0, 0, 0, 0.06);

box-shadow:
    0 18px 45px rgba(20, 50, 35, 0.08);

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


}

.guide-card:hover {
transform: translateY(-12px);


box-shadow:
    0 30px 65px rgba(20, 50, 35, 0.16);


}

/* =========================================================
GUIDE IMAGE
========================================================= */

.guide-card-image {
position: relative;


height: 270px;

overflow: hidden;


}

.guide-card-image img {
width: 100%;
height: 100%;


object-fit: cover;

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


}

.guide-card:hover .guide-card-image img {
transform: scale(1.08);
}

.guide-card-image::after {
content: "";


position: absolute;

inset: 0;

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


}

/* =========================================================
GUIDE BADGE
========================================================= */

.guide-badge {
position: absolute;


top: 20px;
left: 20px;

z-index: 2;

padding: 8px 14px;

border-radius: 999px;

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

color: #246b2a;

font-size: .75rem;

font-weight: 800;

letter-spacing: .5px;

backdrop-filter: blur(10px);


}

/* =========================================================
GUIDE CONTENT
========================================================= */

.guide-card-content {
padding: 28px;
}

.guide-card-content small {
display: block;


margin-bottom: 10px;

color: #7c8a82;

font-size: .78rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 1px;


}

.guide-card-content h3 {
margin-bottom: 14px;


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

font-size: 1.4rem;

font-weight: 800;

line-height: 1.3;

color: #172a1e;


}

.guide-card-content p {
margin-bottom: 20px;


color: #6a786f;

line-height: 1.75;

font-size: .95rem;


}

.guide-read-more {
display: inline-flex;


align-items: center;

gap: 9px;

color: #2e7d32;

font-weight: 800;

text-decoration: none;

transition: .3s ease;


}

.guide-read-more i {
transition: transform .3s ease;
}

.guide-read-more:hover {
color: #1565c0;
}

.guide-read-more:hover i {
transform: translateX(6px);
}

/* =========================================================
TRAVEL PLANNING SECTION
========================================================= */

.travel-planning {
position: relative;


padding: 100px 0;

overflow: hidden;

background:
    radial-gradient(
        circle at 15% 30%,
        rgba(76,175,80,.18),
        transparent 30%
    ),
    radial-gradient(
        circle at 85% 70%,
        rgba(255,193,7,.15),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #123d27,
        #1c5b38
    );

color: #ffffff;


}

.travel-planning::before {
content: "";


position: absolute;

width: 350px;
height: 350px;

right: -100px;
top: -150px;

border-radius: 50%;

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

filter: blur(10px);


}

.travel-planning-content {
position: relative;


z-index: 2;

max-width: 800px;

margin: auto;

text-align: center;


}

.travel-planning-content i {
display: inline-flex;


width: 72px;
height: 72px;

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

margin-bottom: 25px;

border-radius: 50%;

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

color: #ffd54f;

font-size: 1.8rem;


}

.travel-planning-content h2 {
margin-bottom: 18px;


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

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

font-weight: 800;


}

.travel-planning-content p {
max-width: 650px;


margin: 0 auto 30px;

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

line-height: 1.85;


}

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

.guides-cta {
display: inline-flex;


align-items: center;

gap: 10px;

padding: 14px 28px;

border-radius: 999px;

background: #ffd54f;

color: #263238;

font-weight: 800;

text-decoration: none;

box-shadow:
    0 12px 30px rgba(0,0,0,.18);

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


}

.guides-cta:hover {
transform: translateY(-4px);


background: #ffca28;

color: #1b1b1b;

box-shadow:
    0 18px 38px rgba(0,0,0,.25);


}

/* =========================================================
QUICK GUIDE STRIP
========================================================= */

.quick-guide {
padding: 70px 0;


background: #ffffff;


}

.quick-guide-item {
display: flex;


align-items: center;

gap: 18px;

height: 100%;

padding: 25px;

border-radius: 20px;

background: #f7faf8;

border: 1px solid rgba(46,125,50,.08);

transition: .35s ease;


}

.quick-guide-item:hover {
transform: translateY(-6px);


background: #ffffff;

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


}

.quick-guide-item i {
flex-shrink: 0;


width: 52px;
height: 52px;

display: flex;

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

border-radius: 16px;

background: rgba(46,125,50,.10);

color: #2e7d32;

font-size: 1.2rem;


}

.quick-guide-item h5 {
margin: 0 0 5px;


font-weight: 800;

color: #203428;


}

.quick-guide-item p {
margin: 0;


color: #748078;

font-size: .88rem;

line-height: 1.5;


}

/* =========================================================
ANIMATION READY
========================================================= */

.guide-category-card,
.guide-card,
.quick-guide-item,
.guides-intro-content {
will-change: transform, opacity;
}

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

@media (max-width: 991px) {


.guides-intro {
    padding: 130px 0 60px;
}

.guide-card-image {
    height: 240px;
}

.featured-guides,
.guide-categories {
    padding: 70px 0;
}


}

@media (max-width: 767px) {


.guides-intro {
    padding: 115px 20px 55px;
}

.guides-intro h1 {
    letter-spacing: -1px;
}

.guides-intro p {
    font-size: .98rem;
}

.guide-category-card {
    padding: 26px;
}

.guide-card-image {
    height: 220px;
}

.guide-card-content {
    padding: 24px;
}

.travel-planning {
    padding: 75px 20px;
}

.quick-guide {
    padding: 55px 0;
}


}

@media (max-width: 480px) {


.guides-kicker {
    font-size: .7rem;
    padding: 8px 13px;
}

.guide-category-icon {
    width: 56px;
    height: 56px;
}

.guide-card-image {
    height: 200px;
}

.guide-card-content h3 {
    font-size: 1.2rem;
}

.guides-cta {
    padding: 13px 22px;
}


}


/* =========================================================
TRAVEL GUIDES HERO CONTENT
========================================================= */

.travel-guides-hero-content {
position: relative;


z-index: 5;

width: 100%;
max-width: 900px;

margin: 0 auto;

padding: 180px 20px 150px;

text-align: center;

color: #ffffff;


}

/* =========================================================
EYEBROW
========================================================= */

.travel-guides-eyebrow {
display: inline-flex;


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

gap: 10px;

margin-bottom: 25px;

padding: 10px 20px;

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

border-radius: 999px;

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

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

color: #ffffff;

font-size: .82rem;

font-weight: 800;

letter-spacing: 1.5px;

text-transform: uppercase;

box-shadow:
    0 10px 30px rgba(0,0,0,.12);


}

.travel-guides-eyebrow i {
color: #ffd54f;


font-size: 1rem;


}

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

.travel-guides-hero-content h1 {
margin: 0 0 25px;


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

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

line-height: 1.02;

font-weight: 800;

letter-spacing: -3px;

color: #ffffff;

text-shadow:
    0 5px 25px rgba(0,0,0,.35);


}

.travel-guides-hero-content h1 span {
display: inline-block;


background:
    linear-gradient(
        90deg,
        #ffd54f 0%,
        #ffffff 45%,
        #66bb6a 100%
    );

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

-webkit-text-fill-color: transparent;

color: transparent;


}

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

.travel-guides-hero-content p {
max-width: 720px;


margin: 0 auto 35px;

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

font-size: 1.1rem;

line-height: 1.85;

text-shadow:
    0 2px 12px rgba(0,0,0,.45);


}

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

.travel-guides-buttons {
display: flex;


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

flex-wrap: wrap;

gap: 15px;


}

.travel-guides-buttons .btn {
min-width: 175px;


padding: 14px 25px;

border-radius: 999px;

font-weight: 800;

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


}

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

.travel-guides-buttons .btn-warning {
background: #ffd54f;

```
border-color: #ffd54f;

color: #202820;

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


}

.travel-guides-buttons .btn-warning:hover {
background: #ffca28;


border-color: #ffca28;

color: #172017;

transform: translateY(-5px);

box-shadow:
    0 18px 40px rgba(0,0,0,.30);


}

/* =========================================================
TRAVEL TIPS BUTTON
========================================================= */

.travel-guides-buttons .btn-outline-light {
border-width: 2px;


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

color: #ffffff;

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

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


}

.travel-guides-buttons .btn-outline-light:hover {
background: #ffffff;


border-color: #ffffff;

color: #245c30;

transform: translateY(-5px);

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


}

/* =========================================================
SCROLL INDICATOR
========================================================= */

.travel-guides-scroll {
position: absolute;


left: 50%;
bottom: 30px;

z-index: 10;

display: flex;

flex-direction: column;

align-items: center;

gap: 10px;

transform: translateX(-50%);

color: #ffffff;

text-align: center;

pointer-events: none;


}

.travel-guides-scroll span {
position: relative;


display: block;

width: 26px;
height: 42px;

border: 2px solid rgba(255,255,255,.85);

border-radius: 999px;

overflow: hidden;


}

.travel-guides-scroll span::before {
content: "";


position: absolute;

top: 7px;
left: 50%;

width: 5px;
height: 9px;

border-radius: 999px;

background: #ffd54f;

transform: translateX(-50%);

animation:
    travelScrollWheel 1.8s ease-in-out infinite;


}

.travel-guides-scroll small {
color: rgba(255,255,255,.9);


font-size: .7rem;

font-weight: 700;

letter-spacing: 1.5px;

text-transform: uppercase;

text-shadow:
    0 2px 8px rgba(0,0,0,.5);


}

/* =========================================================
SCROLL ANIMATION
========================================================= */

@keyframes travelScrollWheel {


0% {
    opacity: 0;

    transform:
        translateX(-50%)
        translateY(0);
}

20% {
    opacity: 1;
}

70% {
    opacity: 1;
}

100% {
    opacity: 0;

    transform:
        translateX(-50%)
        translateY(20px);
}


}

/* =========================================================
HERO CONTENT ANIMATION SUPPORT
========================================================= */

.travel-guides-hero-content > * {
will-change: transform, opacity;
}

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

@media (max-width: 991px) {


.travel-guides-hero-content {
    padding:
        155px 25px
        125px;
}

.travel-guides-hero-content h1 {
    font-size: clamp(3rem, 9vw, 5rem);
}


}

@media (max-width: 767px) {


.travel-guides-hero-content {
    padding:
        135px 20px
        110px;
}

.travel-guides-eyebrow {
    font-size: .7rem;

    padding:
        9px 15px;
}

.travel-guides-hero-content h1 {
    font-size: clamp(2.6rem, 12vw, 4rem);

    letter-spacing: -1.5px;
}

.travel-guides-hero-content p {
    font-size: .98rem;

    line-height: 1.7;
}

.travel-guides-buttons {
    flex-direction: column;

    width: 100%;
}

.travel-guides-buttons .btn {
    width: min(100%, 280px);
}

.travel-guides-scroll {
    bottom: 20px;
}


}

@media (max-width: 480px) {


.travel-guides-hero-content {
    padding:
        125px 16px
        100px;
}

.travel-guides-eyebrow {
    max-width: 95%;

    letter-spacing: 1px;
}

.travel-guides-hero-content h1 {
    font-size: 2.45rem;
}

.travel-guides-hero-content p {
    font-size: .92rem;
}


}