/* =========================================================
BEYOND BORDERS
Premium Travel / Editorial Page
========================================================= */

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

.beyond-hero {


position: relative;

min-height: 78vh;

display: flex;
align-items: center;

overflow: hidden;

color: #fff;

background: #10251c;


}

.beyond-hero-image {


position: absolute;

inset: 0;

background-image:
    url("../images/beyond-borders/africa.jpg");

background-size: cover;

background-position: center;

transform: scale(1.04);

animation: beyondHeroZoom 14s ease-in-out infinite alternate;


}

@keyframes beyondHeroZoom {


from {
    transform: scale(1.04);
}

to {
    transform: scale(1.12);
}


}

.beyond-hero-overlay {


position: absolute;

inset: 0;

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


}

.beyond-hero-content {


position: relative;

z-index: 2;

max-width: 780px;

padding-top: 80px;


}

.beyond-eyebrow {


display: inline-flex;

align-items: center;

gap: 9px;

padding: 9px 17px;

margin-bottom: 22px;

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

border-radius: 999px;

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

backdrop-filter: blur(12px);

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

font-size: .82rem;

font-weight: 800;

letter-spacing: 1.5px;

text-transform: uppercase;


}

.beyond-eyebrow i {


color: #ffd54f;


}

.beyond-hero h1 {


margin-bottom: 24px;

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

font-size: clamp(3rem, 6vw, 6.2rem);

line-height: .98;

font-weight: 800;

letter-spacing: -3px;


}

.beyond-hero-content p {


max-width: 680px;

margin-bottom: 32px;

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

font-size: 1.12rem;

line-height: 1.8;


}

.beyond-hero .btn {


padding: 14px 28px;

border-radius: 999px;

font-weight: 800;

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

transition: .35s ease;


}

.beyond-hero .btn:hover {


transform: translateY(-5px);


}

.beyond-scroll {


position: absolute;

z-index: 5;

bottom: 28px;

left: 50%;

transform: translateX(-50%);

display: flex;

flex-direction: column;

align-items: center;

gap: 8px;


}

.beyond-scroll span {


width: 2px;

height: 45px;

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

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


}

.beyond-scroll small {


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

font-size: .72rem;

letter-spacing: 1.5px;

text-transform: uppercase;


}

@keyframes scrollLine {


0%,100% {
    transform: scaleY(.45);
    transform-origin: top;
    opacity: .4;
}

50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
}


}

/* =========================================================
INTRODUCTION
========================================================= */

.beyond-intro {


position: relative;

background: #fff;


}

.beyond-image-wrap {


position: relative;

overflow: hidden;

border-radius: 30px;

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


}

.beyond-image-wrap img {


width: 100%;

min-height: 500px;

object-fit: cover;

transition: transform .8s ease;


}

.beyond-image-wrap:hover img {


transform: scale(1.06);


}

.image-badge {


position: absolute;

left: 25px;

bottom: 25px;

display: flex;

align-items: center;

gap: 12px;

padding: 13px 19px;

border-radius: 999px;

color: #fff;

background: rgba(12,46,32,.82);

backdrop-filter: blur(12px);

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

font-weight: 700;


}

.image-badge i {


color: #ffd54f;

font-size: 1.2rem;


}

.section-kicker {


display: inline-block;

margin-bottom: 15px;

color: #198754;

font-size: .78rem;

font-weight: 800;

letter-spacing: 2px;


}

.beyond-intro h2,
.beyond-experience h2 {


margin-bottom: 22px;

color: #17231c;

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

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

line-height: 1.15;

font-weight: 800;


}

.beyond-intro p,
.beyond-experience p {


color: #5d6861;

font-size: 1.02rem;

line-height: 1.9;


}

.beyond-intro .btn {


margin-top: 12px;

padding: 12px 24px;

border-radius: 999px;

font-weight: 700;


}

/* =========================================================
SECTION HEADINGS
========================================================= */

.section-heading {


max-width: 760px;

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


}

.section-heading > span {


display: inline-flex;

align-items: center;

gap: 8px;

margin-bottom: 12px;

color: #198754;

font-size: .78rem;

font-weight: 800;

letter-spacing: 2px;


}

.section-heading h2 {


margin-bottom: 15px;

color: #17231c;

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

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

font-weight: 800;


}

.section-heading p {


margin: 0;

color: #69736d;

line-height: 1.8;


}

/* =========================================================
DESTINATIONS
========================================================= */

.beyond-destinations {


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


}

.border-card {


height: 100%;

overflow: hidden;

border-radius: 25px;

background: #fff;

border: 1px solid rgba(21,65,42,.08);

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

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


}

.border-card:hover {


transform: translateY(-12px);

border-color: rgba(25,135,84,.25);

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


}

.border-card-image {


position: relative;

height: 270px;

overflow: hidden;


}

.border-card-image::after {


content: "";

position: absolute;

inset: 0;

background:
    linear-gradient(
        to top,
        rgba(0,0,0,.5),
        transparent 50%
    );


}

.border-card-image img {


width: 100%;

height: 100%;

object-fit: cover;

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


}

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


transform: scale(1.1);


}

.destination-label {


position: absolute;

z-index: 2;

top: 18px;

left: 18px;

padding: 7px 13px;

border-radius: 999px;

color: #fff;

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

backdrop-filter: blur(8px);

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

font-size: .72rem;

font-weight: 700;

letter-spacing: .7px;


}

.border-card-body {


position: relative;

padding: 32px 28px 30px;


}

.destination-icon {


width: 52px;

height: 52px;

margin-bottom: 18px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 16px;

color: #fff;

background:
    linear-gradient(
        135deg,
        #198754,
        #0b6b43
    );

font-size: 1.25rem;

box-shadow:
    0 10px 25px rgba(25,135,84,.25);

transition: .35s ease;


}

.border-card:hover .destination-icon {


transform:
    rotate(-6deg)
    scale(1.08);


}

.border-card-body h3 {


margin-bottom: 12px;

color: #17231c;

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

font-size: 1.5rem;

font-weight: 800;


}

.border-card-body p {


min-height: 108px;

margin-bottom: 20px;

color: #68736c;

line-height: 1.75;


}

.border-card-body > a {


display: inline-flex;

align-items: center;

gap: 10px;

color: #198754;

text-decoration: none;

font-weight: 800;

transition: .3s ease;


}

.border-card-body > a i {


transition: transform .3s ease;


}

.border-card-body > a:hover {


color: #0d6e42;


}

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


transform: translateX(6px);


}

/* =========================================================
EXPERIENCE SECTION
========================================================= */

.beyond-experience {

```
background: #fff;


}

.beyond-feature-image {


position: relative;

overflow: hidden;

border-radius: 30px;

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


}

.beyond-feature-image img {


width: 100%;

min-height: 560px;

object-fit: cover;

transition: transform .8s ease;


}

.beyond-feature-image:hover img {


transform: scale(1.05);


}

.floating-stat {


position: absolute;

right: 25px;

bottom: 25px;

display: flex;

align-items: center;

gap: 14px;

padding: 18px 22px;

border-radius: 20px;

color: #fff;

background: rgba(12,46,32,.82);

backdrop-filter: blur(14px);

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


}

.floating-stat strong {


color: #ffd54f;

font-size: 2.2rem;

line-height: 1;


}

.floating-stat span {


font-size: .82rem;

line-height: 1.35;

font-weight: 700;


}

.experience-list {


margin-top: 30px;


}

.experience-item {


display: flex;

gap: 18px;

margin-bottom: 25px;


}

.experience-icon {


flex: 0 0 52px;

width: 52px;

height: 52px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 15px;

color: #198754;

background: #eaf7f0;

font-size: 1.2rem;

transition: .35s ease;


}

.experience-item:hover .experience-icon {


color: #fff;

background: #198754;

transform: translateY(-4px);


}

.experience-item h5 {


margin: 0 0 5px;

color: #17231c;

font-weight: 800;


}

.experience-item p {


margin: 0;

font-size: .93rem;

line-height: 1.65;


}

/* =========================================================
INSPIRATION
========================================================= */

.beyond-inspiration {


background:
    linear-gradient(
        180deg,
        #f6faf7,
        #eef7f1
    );


}

.inspiration-card {


height: 100%;

padding: 40px 30px;

text-align: center;

border-radius: 25px;

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

border: 1px solid rgba(25,135,84,.08);

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

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


}

.inspiration-card:hover {


transform: translateY(-10px);

box-shadow:
    0 25px 50px rgba(0,0,0,.11);


}

.inspiration-card > i {


width: 72px;

height: 72px;

margin: 0 auto 22px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

color: #198754;

background: #e4f5eb;

font-size: 1.7rem;

transition: .4s ease;


}

.inspiration-card:hover > i {


color: #fff;

background: #198754;

transform: rotate(360deg);


}

.inspiration-card h4 {


margin-bottom: 12px;

color: #17231c;

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

font-weight: 800;


}

.inspiration-card p {


color: #68736c;

line-height: 1.75;


}

.inspiration-card a {


display: inline-block;

margin-top: 10px;

color: #198754;

text-decoration: none;

font-weight: 800;


}

.inspiration-card a:hover {


text-decoration: underline;


}

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

.beyond-cta {


position: relative;

min-height: 500px;

display: flex;

align-items: center;

overflow: hidden;

background:
    url("../images/beyond-borders/adventure.jpg")
    center / cover no-repeat;


}

.beyond-cta-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        135deg,
        rgba(4,31,19,.9),
        rgba(14,75,46,.68)
    );


}

.beyond-cta-content {


position: relative;

z-index: 2;

max-width: 800px;

margin: auto;

color: #fff;


}

.beyond-cta-content > span {


display: inline-flex;

align-items: center;

gap: 8px;

margin-bottom: 18px;

color: #ffd54f;

font-size: .8rem;

font-weight: 800;

letter-spacing: 2px;


}

.beyond-cta h2 {


margin-bottom: 20px;

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

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

line-height: 1.08;

font-weight: 800;


}

.beyond-cta p {


max-width: 650px;

margin: 0 auto 30px;

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

font-size: 1.05rem;

line-height: 1.8;


}

.beyond-cta .btn {


padding: 14px 30px;

border-radius: 999px;

font-weight: 800;

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

transition: .35s ease;


}

.beyond-cta .btn:hover {


transform: translateY(-5px) scale(1.02);


}

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

.border-card,
.inspiration-card,
.experience-item,
.beyond-image-wrap,
.beyond-feature-image {


will-change: transform;


}

/* =========================================================
TABLETS
========================================================= */

@media (max-width: 991px) {


.beyond-hero {

    min-height: 70vh;

}

.beyond-hero-content {

    padding-top: 100px;

}

.beyond-hero h1 {

    letter-spacing: -2px;

}

.beyond-image-wrap img {

    min-height: 420px;

}

.beyond-feature-image img {

    min-height: 450px;

}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 767px) {


.beyond-hero {

    min-height: 78vh;

}

.beyond-hero-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(3,18,12,.48),
            rgba(3,18,12,.88)
        );

}

.beyond-hero-content {

    padding-top: 100px;

}

.beyond-hero h1 {

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

    letter-spacing: -1.5px;

}

.beyond-hero-content p {

    font-size: 1rem;

    line-height: 1.7;

}

.beyond-scroll {

    display: none;

}

.beyond-image-wrap {

    border-radius: 22px;

}

.beyond-image-wrap img {

    min-height: 340px;

}

.beyond-intro h2,
.beyond-experience h2 {

    font-size: 2rem;

}

.border-card {

    border-radius: 21px;

}

.border-card-image {

    height: 240px;

}

.border-card-body {

    padding: 27px 23px;

}

.border-card-body p {

    min-height: auto;

}

.beyond-feature-image {

    border-radius: 22px;

}

.beyond-feature-image img {

    min-height: 380px;

}

.floating-stat {

    right: 15px;

    bottom: 15px;

    padding: 14px 17px;

}

.beyond-cta {

    min-height: 470px;

}

.beyond-cta h2 {

    font-size: 2.3rem;

}


}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {


.beyond-hero-content {

    padding-left: 8px;

    padding-right: 8px;

}

.beyond-eyebrow {

    font-size: .7rem;

}

.beyond-hero h1 {

    font-size: 2.55rem;

}

.beyond-hero .btn {

    width: 100%;

}

.image-badge {

    left: 15px;

    bottom: 15px;

}

.experience-item {

    gap: 13px;

}

.experience-icon {

    flex-basis: 45px;

    width: 45px;

    height: 45px;

}

.floating-stat strong {

    font-size: 1.7rem;

}

.beyond-cta h2 {

    font-size: 2rem;

}


}