/* =========================================================
CULTURE PAGE
The Curious Explorer
========================================================= */

.culture-page {
overflow: hidden;
background: #fff;
color: #18231d;
}

/* =========================================================
CULTURE INTRO
========================================================= */

.culture-intro {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
overflow: hidden;
background:
radial-gradient(
circle at 10% 20%,
rgba(255, 193, 7, .20),
transparent 30%
),
radial-gradient(
circle at 90% 80%,
rgba(76, 175, 80, .18),
transparent 30%
),
linear-gradient(
135deg,
#071f16,
#124d35 50%,
#06251b
);
color: #fff;
}

.culture-intro::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(255, 193, 7, .12);
filter: blur(100px);
top: -250px;
right: -100px;
pointer-events: none;
}

.culture-intro::after {
content: "";
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(0, 188, 212, .12);
filter: blur(100px);
bottom: -220px;
left: -120px;
pointer-events: none;
}

.culture-intro-glow {
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(255, 87, 34, .13);
filter: blur(80px);
top: 35%;
left: 48%;
animation: cultureGlow 7s ease-in-out infinite alternate;
}

@keyframes cultureGlow {


from {
    transform: translate(-40px, -20px) scale(1);
}

to {
    transform: translate(60px, 40px) scale(1.25);
}


}

.culture-intro-content {
position: relative;
z-index: 2;
max-width: 850px;
padding: 100px 0;
}

.culture-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
padding: 9px 18px;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 50px;
background: rgba(255, 255, 255, .08);
backdrop-filter: blur(12px);
color: #ffd54f;
font-size: .85rem;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}

.culture-intro h1 {
margin: 0;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: clamp(3rem, 7vw, 6.5rem);
line-height: .98;
font-weight: 800;
letter-spacing: -3px;
}

.culture-intro h1 span {
display: block;
color: #ffd54f;
}

.culture-intro-content > p {
max-width: 720px;
margin: 30px 0;
color: rgba(255, 255, 255, .84);
font-size: 1.15rem;
line-height: 1.9;
}

.culture-intro-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}

.culture-intro-actions .btn-warning {
padding: 13px 26px;
border: none;
border-radius: 50px;
font-weight: 800;
box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
transition: .35s ease;
}

.culture-intro-actions .btn-warning:hover {
transform: translateY(-4px);
box-shadow: 0 18px 35px rgba(0, 0, 0, .30);
}

.culture-outline-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 13px 24px;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 50px;
color: #fff;
text-decoration: none;
font-weight: 700;
transition: .35s ease;
}

.culture-outline-btn:hover {
background: rgba(255, 255, 255, .12);
border-color: #fff;
color: #fff;
transform: translateY(-4px);
}

.culture-scroll {
position: absolute;
bottom: 25px;
left: 50%;
z-index: 3;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
color: rgba(255, 255, 255, .65);
font-size: .75rem;
letter-spacing: 1px;
text-transform: uppercase;
}

.culture-scroll i {
animation: cultureScroll 1.7s infinite;
color: #ffd54f;
}

@keyframes cultureScroll {


0%, 100% {
    transform: translateY(0);
}

50% {
    transform: translateY(7px);
}


}

/* =========================================================
CULTURE FACTS
========================================================= */

.culture-facts {
position: relative;
z-index: 5;
margin-top: -55px;
padding-bottom: 80px;
}

.culture-fact-card {
height: 100%;
padding: 30px 20px;
text-align: center;
border: 1px solid rgba(20, 70, 45, .08);
border-radius: 24px;
background: rgba(255, 255, 255, .96);
box-shadow:
0 20px 50px rgba(16, 48, 32, .10);
transition: .4s ease;
}

.culture-fact-card:hover {
transform: translateY(-10px);
box-shadow:
0 25px 60px rgba(16, 48, 32, .17);
}

.culture-fact-icon {
width: 60px;
height: 60px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
background: #e8f5e9;
color: #16853a;
font-size: 1.35rem;
}

.culture-fact-card strong {
display: block;
margin-bottom: 5px;
color: #143c29;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.45rem;
}

.culture-fact-card span {
display: block;
color: #65736b;
font-size: .9rem;
}

/* =========================================================
SECTION HEADINGS
========================================================= */

.culture-section-heading {
max-width: 760px;
margin: 0 auto 55px;
text-align: center;
}

.culture-section-heading > span {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 14px;
color: #16853a;
font-size: .8rem;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}

.culture-section-heading h2 {
margin-bottom: 18px;
color: #173b29;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 800;
line-height: 1.15;
}

.culture-section-heading p {
margin: 0 auto;
max-width: 700px;
color: #68766e;
font-size: 1rem;
line-height: 1.85;
}

/* =========================================================
CULTURES SECTION
========================================================= */

.cultures-section {
padding: 100px 0;
background:
radial-gradient(
circle at 10% 10%,
rgba(255, 193, 7, .08),
transparent 25%
),
#f8faf8;
}

/* =========================================================
CULTURE CARD
========================================================= */

.culture-card {
height: 100%;
overflow: hidden;
border: 1px solid rgba(20, 70, 45, .08);
border-radius: 28px;
background: #fff;
box-shadow: 0 15px 45px rgba(20, 60, 40, .08);
transition:
transform .45s cubic-bezier(.22, 1, .36, 1),
box-shadow .45s ease;
}

.culture-card:hover {
transform: translateY(-12px);
box-shadow:
0 30px 65px rgba(20, 60, 40, .16);
}

.culture-card-image {
position: relative;
height: 270px;
overflow: hidden;
}

.culture-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.culture-card:hover .culture-card-image img {
transform: scale(1.1);
}

.culture-card-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(0, 0, 0, .58),
transparent 65%
);
}

.culture-location {
position: absolute;
left: 20px;
bottom: 18px;
padding: 7px 13px;
border-radius: 50px;
background: rgba(0, 0, 0, .38);
backdrop-filter: blur(8px);
color: #fff;
font-size: .75rem;
font-weight: 700;
}

.culture-card-body {
position: relative;
padding: 30px;
}

.culture-card-icon {
width: 52px;
height: 52px;
margin-top: -55px;
margin-bottom: 18px;
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
border: 5px solid #fff;
border-radius: 17px;
background: #16853a;
color: #fff;
font-size: 1.15rem;
box-sizing: content-box;
}

.culture-card-body h3 {
margin-bottom: 12px;
color: #173b29;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.45rem;
font-weight: 800;
}

.culture-card-body p {
min-height: 85px;
margin-bottom: 20px;
color: #69766e;
line-height: 1.75;
}

.culture-card-body > a {
display: inline-flex;
align-items: center;
gap: 10px;
color: #16853a;
text-decoration: none;
font-weight: 800;
transition: .3s ease;
}

.culture-card-body > a i {
transition: .3s ease;
}

.culture-card-body > a:hover {
color: #0b5d27;
}

.culture-card-body > a:hover i {
transform: translateX(6px);
}

/* =========================================================
FOOD SECTION
========================================================= */

.culture-food {
padding: 110px 0;
background: #fff;
}

.culture-feature-image {
position: relative;
overflow: hidden;
border-radius: 32px;
box-shadow: 0 25px 65px rgba(20, 50, 35, .16);
}

.culture-feature-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(20, 100, 55, .10),
transparent 60%
);
pointer-events: none;
}

.culture-feature-image img {
width: 100%;
min-height: 500px;
object-fit: cover;
display: block;
transition: transform .8s ease;
}

.culture-feature-image:hover img {
transform: scale(1.04);
}

.culture-image-badge {
position: absolute;
left: 25px;
bottom: 25px;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
border-radius: 50px;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(12px);
color: #173b29;
font-weight: 800;
}

.culture-image-badge i {
color: #e67e22;
}

.culture-feature-content {
padding-left: 25px;
}

.culture-small-title {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 15px;
color: #16853a;
font-size: .8rem;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}

.culture-feature-content h2 {
margin-bottom: 20px;
color: #173b29;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1.15;
font-weight: 800;
}

.culture-feature-content h2 span {
color: #16853a;
}

.culture-feature-content > p {
margin-bottom: 30px;
color: #69766e;
line-height: 1.9;
}

.food-list {
display: flex;
flex-direction: column;
gap: 18px;
}

.food-item {
display: flex;
gap: 16px;
padding: 18px;
border-radius: 18px;
background: #f7faf7;
transition: .35s ease;
}

.food-item:hover {
transform: translateX(8px);
background: #edf7ef;
}

.food-item > i {
flex-shrink: 0;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #e4f3e7;
color: #16853a;
}

.food-item h5 {
margin: 0 0 5px;
color: #173b29;
font-weight: 800;
}

.food-item p {
margin: 0;
color: #748078;
font-size: .9rem;
line-height: 1.6;
}

/* =========================================================
MUSIC SECTION
========================================================= */

.culture-music {
position: relative;
overflow: hidden;
padding: 110px 0;
background:
radial-gradient(
circle at 15% 20%,
rgba(255, 193, 7, .16),
transparent 28%
),
radial-gradient(
circle at 90% 80%,
rgba(0, 188, 212, .13),
transparent 30%
),
linear-gradient(
135deg,
#09291c,
#11623d,
#082619
);
}

.culture-music::before {
content: "";
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .08);
top: -180px;
right: -100px;
}

.culture-section-heading.light > span {
color: #ffd54f;
}

.culture-section-heading.light h2 {
color: #fff;
}

.culture-section-heading.light p {
color: rgba(255, 255, 255, .72);
}

.music-card {
position: relative;
height: 100%;
padding: 38px 30px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 25px;
background: rgba(255, 255, 255, .07);
backdrop-filter: blur(15px);
color: #fff;
text-align: center;
transition: .4s ease;
}

.music-card:hover {
transform: translateY(-10px);
border-color: rgba(255, 213, 79, .45);
background: rgba(255, 255, 255, .11);
box-shadow: 0 25px 55px rgba(0, 0, 0, .20);
}

.music-icon {
width: 70px;
height: 70px;
margin: 0 auto 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
background: rgba(255, 213, 79, .15);
color: #ffd54f;
font-size: 1.5rem;
}

.music-card h3 {
margin-bottom: 13px;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.35rem;
font-weight: 800;
}

.music-card p {
margin: 0;
color: rgba(255, 255, 255, .68);
line-height: 1.8;
}

/* =========================================================
HERITAGE
========================================================= */

.culture-heritage {
padding: 110px 0;
background: #f8faf8;
}

.heritage-card {
height: 100%;
overflow: hidden;
border-radius: 26px;
background: #fff;
box-shadow: 0 15px 45px rgba(20, 60, 40, .08);
transition: .4s ease;
}

.heritage-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(20, 60, 40, .15);
}

.heritage-image {
height: 250px;
overflow: hidden;
}

.heritage-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .8s ease;
}

.heritage-card:hover .heritage-image img {
transform: scale(1.08);
}

.heritage-body {
padding: 28px;
}

.heritage-body > span {
color: #16853a;
font-size: .75rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}

.heritage-body h3 {
margin: 10px 0;
color: #173b29;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 1.4rem;
font-weight: 800;
}

.heritage-body p {
color: #69766e;
line-height: 1.75;
}

.heritage-body a {
display: inline-flex;
align-items: center;
gap: 10px;
color: #16853a;
text-decoration: none;
font-weight: 800;
}

.heritage-body a i {
transition: .3s ease;
}

.heritage-body a:hover i {
transform: translateX(6px);
}

/* =========================================================
CTA
========================================================= */

.culture-cta {
padding: 100px 0;
background: #fff;
}

.culture-cta-box {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 55px 60px;
border-radius: 32px;
background:
radial-gradient(
circle at 90% 20%,
rgba(255, 213, 79, .18),
transparent 30%
),
linear-gradient(
135deg,
#11623d,
#0a3824
);
color: #fff;
box-shadow: 0 25px 65px rgba(15, 70, 40, .20);
}

.culture-cta-box::before {
content: "";
position: absolute;
width: 250px;
height: 250px;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 50%;
right: -80px;
bottom: -130px;
}

.culture-cta-box > div {
position: relative;
z-index: 2;
}

.culture-cta-box > div > span {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 13px;
color: #ffd54f;
font-size: .8rem;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}

.culture-cta-box h2 {
margin-bottom: 12px;
font-family: "Plus Jakarta Sans", sans-serif;
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 800;
}

.culture-cta-box p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, .72);
line-height: 1.8;
}

.culture-cta-box > a {
position: relative;
z-index: 2;
flex-shrink: 0;
padding: 14px 25px;
border-radius: 50px;
font-weight: 800;
box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
transition: .35s ease;
}

.culture-cta-box > a:hover {
transform: translateY(-5px);
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 991px) {


.culture-intro {
    min-height: 580px;
}

.culture-intro-content {
    padding: 90px 0;
}

.culture-facts {
    margin-top: -35px;
}

.culture-feature-content {
    padding-left: 0;
}

.culture-cta-box {
    padding: 45px;
}


}

@media (max-width: 767px) {


.culture-intro {
    min-height: 560px;
}

.culture-intro-content {
    padding: 80px 0;
}

.culture-intro h1 {
    font-size: 3.2rem;
    letter-spacing: -1.5px;
}

.culture-intro-content > p {
    font-size: 1rem;
    line-height: 1.75;
}

.culture-intro-actions {
    flex-direction: column;
    align-items: flex-start;
}

.culture-facts {
    margin-top: 0;
    padding: 50px 0;
    background: #f8faf8;
}

.culture-card-image {
    height: 250px;
}

.culture-feature-image img {
    min-height: 350px;
}

.culture-food,
.cultures-section,
.culture-music,
.culture-heritage {
    padding: 75px 0;
}

.culture-section-heading {
    margin-bottom: 40px;
}

.culture-cta {
    padding: 70px 0;
}

.culture-cta-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 30px;
    border-radius: 25px;
}


}

@media (max-width: 480px) {


.culture-intro h1 {
    font-size: 2.7rem;
}

.culture-eyebrow {
    font-size: .7rem;
}

.culture-card-body {
    padding: 25px;
}

.culture-card-body p {
    min-height: auto;
}

.culture-feature-content h2 {
    font-size: 2rem;
}

.culture-cta-box h2 {
    font-size: 1.9rem;
}


}
