/* Start custom CSS for html, class: .elementor-element-3ee92cc *//* =========================================================
VOYANEST HOMEPAGE
========================================================= */
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
.voyanest-home,
.voyanest-home * {
box-sizing: border-box;
}
.voyanest-home {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: #f7f4ed;
color: #17231f;
font-family: Arial, Helvetica, sans-serif;
}
.voyanest-home img {
display: block;
max-width: 100%;
}
.voyanest-home a {
text-decoration: none;
color: inherit;
}
/* =========================================================
FULL WIDTH
========================================================= */
.vn-hero,
.vn-final {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* =========================================================
HERO
========================================================= */
.vn-hero {
position: relative;
width: 100vw;
height: 710px;
overflow: hidden;
background: #142c3b;
color: white;
}
/* =========================================================
SLIDE
========================================================= */
.vn-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition:
opacity 1s ease,
visibility 1s ease;
}
.vn-slide.active {
opacity: 1;
visibility: visible;
z-index: 2;
}
/* =========================================================
HERO IMAGE
========================================================= */
.vn-slide-bg {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center center;
transform: scale(1.04);
filter: saturate(.92);
transition:
transform 7s ease;
}
.vn-slide.active .vn-slide-bg {
transform: scale(1.10);
}
/* =========================================================
OVERLAY
========================================================= */
.vn-hero-overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
linear-gradient(
90deg,
rgba(8,25,37,.78) 0%,
rgba(8,25,37,.47) 44%,
rgba(8,25,37,.14) 100%
);
}
/* =========================================================
HERO CONTENT
========================================================= */
.vn-hero-content {
position: absolute;
z-index: 7;
left: 6.4%;
top: 145px;
width: 565px;
max-width: 45vw;
}
.vn-slide.active .vn-hero-content {
animation:
vnTextEnter .9s ease forwards;
}
@keyframes vnTextEnter {
from {
opacity: 0;
transform:
translateY(32px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================================
KICKER
========================================================= */
.vn-kicker {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 25px;
color: #efb43a;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
}
.vn-kicker span {
width: 35px;
height: 1px;
background: #efb43a;
}
/* =========================================================
HERO TITLE
========================================================= */
.vn-hero-content h1 {
margin: 0;
color: #fff;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(58px, 5.4vw, 78px);
line-height: .92;
font-weight: 400;
letter-spacing: -4px;
}
.vn-hero-content h1 em {
display: block;
color: #efb43a;
font-family:
"Brush Script MT",
"Segoe Script",
cursive;
font-size: 1.04em;
font-style: normal;
letter-spacing: -2px;
animation:
vnGoldMove 3s ease-in-out infinite;
}
@keyframes vnGoldMove {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(5px);
}
}
/* =========================================================
HERO DESCRIPTION
========================================================= */
.vn-hero-content p {
width: 480px;
max-width: 100%;
margin: 30px 0;
color:
rgba(255,255,255,.85);
font-size: 14px;
line-height: 1.7;
}
/* =========================================================
GOLD BUTTON
========================================================= */
.vn-gold-btn {
display: inline-flex;
align-items: center;
gap: 13px;
padding:
6px
7px
6px
24px;
border-radius: 50px;
background: #efb43a;
color: #17231f !important;
font-size: 11px;
font-weight: 700;
transition: .35s ease;
}
.vn-gold-btn b {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #142c3b;
color: white;
font-size: 16px;
}
.vn-gold-btn:hover {
transform: translateY(-4px);
box-shadow:
0 15px 30px rgba(0,0,0,.25);
}
/* =========================================================
POLAROID
========================================================= */
.vn-polaroid {
position: absolute;
z-index: 8;
right: 9%;
top: 125px;
width: 185px;
padding:
10px
10px
20px;
background: #fbf8ef;
color: #26342f;
transform:
rotate(5deg);
box-shadow:
0 22px 40px rgba(0,0,0,.28);
animation:
vnPolaroidFloat
5s
ease-in-out
infinite;
}
@keyframes vnPolaroidFloat {
0%,
100% {
transform:
rotate(5deg)
translateY(0);
}
50% {
transform:
rotate(2deg)
translateY(-12px);
}
}
.vn-polaroid img {
width: 100% !important;
height: 215px !important;
object-fit: cover;
}
.vn-polaroid span {
display: block;
padding-top: 13px;
text-align: center;
font-family:
"Brush Script MT",
cursive;
font-size: 16px;
}
.vn-tape {
position: absolute;
z-index: 5;
top: -9px;
left: 50%;
width: 68px;
height: 22px;
transform:
translateX(-50%)
rotate(2deg);
background:
rgba(236,181,139,.72);
}
/* =========================================================
FLIGHT PATH
========================================================= */
.vn-flight-path {
position: absolute;
z-index: 5;
top: 30px;
right: 23%;
width: 420px;
height: 225px;
pointer-events: none;
}
.vn-plane {
position: absolute;
z-index: 6;
top: 34px;
right: 27%;
color: white;
font-size: 23px;
animation:
vnPlaneFloat
3s
ease-in-out
infinite;
}
@keyframes vnPlaneFloat {
0%,
100% {
transform:
translateY(0)
rotate(-7deg);
}
50% {
transform:
translateY(-8px)
rotate(-2deg);
}
}
/* =========================================================
HERO ARROWS
========================================================= */
.vn-hero-arrow {
position: absolute;
z-index: 20;
top: 53%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid
rgba(255,255,255,.62);
border-radius: 50%;
background:
rgba(0,0,0,.08);
color: white;
font-size: 20px;
cursor: pointer;
transition: .3s;
}
.vn-prev {
left: 24px;
}
.vn-next {
right: 24px;
}
.vn-hero-arrow:hover {
background: #efb43a;
border-color: #efb43a;
color: #17231f;
}
/* =========================================================
COUNTER
========================================================= */
.vn-counter {
position: absolute;
z-index: 20;
right: 7%;
bottom: 28px;
display: flex;
align-items: center;
gap: 12px;
font-size: 10px;
}
.vn-counter strong {
color: #efb43a;
}
.vn-counter span {
width: 58px;
height: 2px;
background:
linear-gradient(
to right,
#efb43a 50%,
rgba(255,255,255,.4) 50%
);
}
.vn-counter b {
font-weight: 400;
}
/* =========================================================
INTRO
========================================================= */
.vn-intro {
padding:
115px
7%
80px;
background: #f7f4ed;
}
.vn-section-label {
color: #969991;
font-size: 9px;
font-weight: 700;
letter-spacing: 3px;
}
.vn-intro-grid {
display: grid;
grid-template-columns:
1.1fr
.7fr
.25fr;
gap: 75px;
align-items: end;
margin-top: 30px;
}
.vn-intro-grid h2 {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(48px, 5vw, 68px);
line-height: .95;
font-weight: 400;
letter-spacing: -3px;
}
.vn-intro-grid h2 em {
display: block;
font-style: italic;
}
.vn-mini-line {
display: block;
width: 25px;
height: 2px;
margin-top: 25px;
background: #e6ad37;
}
.vn-intro-text p {
margin: 0 0 22px;
color: #6c716b;
font-size: 13px;
line-height: 1.8;
}
.vn-intro-text a {
color: #17231f;
font-size: 10px;
font-weight: 700;
}
.vn-stamp {
width: 104px;
height: 104px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border:
1px dashed
#cbbb98;
border-radius: 50%;
color: #c4ae82;
}
.vn-stamp small {
font-size: 6px;
letter-spacing: 2px;
}
.vn-stamp strong {
margin: 4px 0;
font-size: 20px;
}
.vn-stamp span {
text-align: center;
font-size: 5px;
letter-spacing: 1px;
}
/* =========================================================
INSPIRE
========================================================= */
.vn-inspire {
padding:
55px
7%
100px;
background: #f7f4ed;
}
.vn-center-heading {
margin-bottom: 60px;
text-align: center;
}
.vn-center-heading h2 {
margin: 18px 0 0;
font-family: Georgia, serif;
font-size:
clamp(48px, 5vw, 67px);
line-height: .95;
font-weight: 400;
letter-spacing: -3px;
}
.vn-center-heading h2 em {
font-style: italic;
}
.vn-interest-grid {
display: grid;
grid-template-columns:
repeat(5, 1fr);
gap: 20px;
}
.vn-interest-card {
color: #17231f;
text-align: center;
transition:
transform .35s ease;
}
.vn-interest-card:hover {
transform: translateY(-8px);
}
.vn-interest-image {
position: relative;
height: 265px;
}
.vn-interest-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 14px;
transition:
transform .55s ease;
}
.vn-interest-card:hover img {
transform: scale(1.05);
}
.vn-interest-icon {
position: absolute;
z-index: 3;
left: 50%;
bottom: -27px;
transform: translateX(-50%);
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: white;
box-shadow:
0 8px 20px rgba(0,0,0,.14);
font-size: 19px;
}
.vn-interest-card h3 {
margin: 38px 0 0;
font-family: Georgia, serif;
font-size: 17px;
font-weight: 400;
}
.vn-interest-card h3 em {
font-style: italic;
}
/* =========================================================
TRAVEL YOUR WAY
========================================================= */
.vn-way {
padding:
78px
6%
100px;
background: #efede6;
}
.vn-way-heading {
margin-bottom: 42px;
}
.vn-way-heading h2 {
margin: 17px 0 0;
font-family: Georgia, serif;
font-size:
clamp(50px, 5vw, 67px);
line-height: .95;
font-weight: 400;
letter-spacing: -3px;
}
.vn-way-heading h2 em {
font-style: italic;
}
.vn-way-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
border-top:
1px solid #d2cec5;
border-left:
1px solid #d2cec5;
}
.vn-way-card {
position: relative;
height: 275px;
padding: 32px;
border-right:
1px solid #d2cec5;
border-bottom:
1px solid #d2cec5;
color: #17231f;
transition: .4s ease;
}
.vn-way-card small {
color: #95978f;
font-size: 10px;
letter-spacing: 2px;
}
.vn-way-card div {
position: absolute;
left: 32px;
bottom: 62px;
}
.vn-way-card h3 {
margin: 0 0 10px;
font-family: Georgia, serif;
font-size: 24px;
font-weight: 400;
}
.vn-way-card p {
margin: 0;
color: #777b75;
font-size: 11px;
}
.vn-way-card > b {
position: absolute;
right: 32px;
bottom: 28px;
font-size: 19px;
font-weight: 400;
}
.vn-way-card:hover,
.vn-way-card.active {
background: #162723;
color: white;
}
.vn-way-card:hover small,
.vn-way-card.active small {
color: #efb43a;
}
.vn-way-card:hover p,
.vn-way-card.active p {
color:
rgba(255,255,255,.65);
}
/* =========================================================
DESTINATIONS
========================================================= */
.vn-destinations {
padding:
78px
7%
90px;
background: #f7f4ed;
}
.vn-destination-heading {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 30px;
}
.vn-destination-heading h2 {
margin: 13px 0 0;
font-family: Georgia, serif;
font-size: 42px;
font-weight: 400;
}
.vn-destination-heading a {
color: #17231f;
font-size: 10px;
font-weight: 700;
}
.vn-destination-grid {
display: grid;
grid-template-columns:
repeat(4,1fr);
gap: 13px;
}
.vn-destination-card {
position: relative;
height: 175px;
overflow: hidden;
border-radius: 9px;
color: white;
}
.vn-destination-card img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
transition:
transform .7s ease;
}
.vn-destination-card:hover img {
transform: scale(1.08);
}
.vn-destination-card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
transparent 30%,
rgba(0,0,0,.72)
);
}
.vn-destination-card div {
position: absolute;
z-index: 3;
left: 17px;
right: 17px;
bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
.vn-destination-card strong {
font-size: 10px;
letter-spacing: 2px;
}
.vn-destination-card span {
font-size: 9px;
}
/* =========================================================
STORIES
========================================================= */
.vn-stories {
padding:
40px
7%
100px;
background: #f7f4ed;
}
.vn-story-heading {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 34px;
}
.vn-story-heading h2 {
margin: 15px 0 0;
max-width: 620px;
font-family: Georgia, serif;
font-size: 42px;
line-height: 1;
font-weight: 400;
}
.vn-story-heading h2 em {
font-style: italic;
}
.vn-story-heading a {
color: #17231f;
font-size: 10px;
font-weight: 700;
}
.vn-story-grid {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 16px;
}
.vn-story-card {
display: grid;
grid-template-columns:
43% 57%;
min-height: 195px;
overflow: hidden;
border:
1px solid #ddd9d0;
border-radius: 9px;
background: #faf8f1;
transition:
transform .35s ease;
}
.vn-story-card:hover {
transform:
translateY(-6px);
}
.vn-story-card > img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.vn-story-card > div {
padding: 20px;
}
.vn-story-card small {
color: #a18f6d;
font-size: 7px;
font-weight: 700;
letter-spacing: 1.5px;
}
.vn-story-card h3 {
margin: 12px 0 21px;
font-family: Georgia, serif;
font-size: 17px;
font-weight: 400;
line-height: 1.22;
}
.vn-story-card a {
color: #17231f;
font-size: 9px;
font-weight: 700;
}
/* =========================================================
FINAL CTA
========================================================= */
.vn-final {
position: relative;
height: 410px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
color: white;
}
.vn-final > img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
animation:
vnFinalZoom
12s
ease-in-out
infinite alternate;
}
@keyframes vnFinalZoom {
from {
transform: scale(1);
}
to {
transform: scale(1.08);
}
}
.vn-final-overlay {
position: absolute;
inset: 0;
background:
rgba(8,26,32,.66);
}
.vn-final-content {
position: relative;
z-index: 3;
}
.vn-final-content .vn-kicker {
justify-content: center;
}
.vn-final-content h2 {
margin: 16px 0;
font-family: Georgia, serif;
font-size: 62px;
font-weight: 400;
line-height: .93;
letter-spacing: -4px;
}
.vn-final-content h2 em {
color: #efb43a;
font-style: italic;
}
.vn-final-content p {
margin: 0 0 25px;
color:
rgba(255,255,255,.82);
font-size: 12px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.vn-hero {
height: 720px;
}
.vn-hero-content {
left: 6%;
max-width: 54vw;
}
.vn-polaroid {
right: 7%;
transform: scale(.9);
}
.vn-interest-grid {
grid-template-columns:
repeat(3,1fr);
}
.vn-way-grid {
grid-template-columns:
repeat(2,1fr);
}
.vn-destination-grid {
grid-template-columns:
repeat(2,1fr);
}
.vn-story-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.vn-hero {
height: 760px;
}
.vn-hero-content {
left: 7%;
top: 115px;
width: 86%;
max-width: none;
}
.vn-hero-content h1 {
font-size: 50px;
letter-spacing: -3px;
}
.vn-hero-content p {
width: 100%;
font-size: 13px;
}
.vn-polaroid {
top: 360px;
right: 7%;
width: 135px;
}
.vn-polaroid img {
height: 150px !important;
}
.vn-flight-path {
display: none;
}
.vn-plane {
display: none;
}
.vn-hero-arrow {
width: 40px;
height: 40px;
}
.vn-prev {
left: 8px;
}
.vn-next {
right: 8px;
}
.vn-counter {
right: 7%;
bottom: 22px;
}
/* INTRO */
.vn-intro {
padding:
85px
7%
70px;
}
.vn-intro-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.vn-intro-grid h2 {
font-size: 47px;
}
.vn-stamp {
display: none;
}
/* INSPIRE */
.vn-inspire {
padding:
75px
5%
90px;
}
.vn-center-heading h2 {
font-size: 48px;
}
.vn-interest-grid {
display: flex;
overflow-x: auto;
gap: 15px;
scrollbar-width: none;
}
.vn-interest-grid::-webkit-scrollbar {
display: none;
}
.vn-interest-card {
flex:
0 0
72vw;
}
/* WAY */
.vn-way {
padding:
75px
5%
85px;
}
.vn-way-grid {
grid-template-columns: 1fr;
}
/* DESTINATIONS */
.vn-destinations {
padding:
75px
5%
80px;
}
.vn-destination-heading {
display: block;
}
.vn-destination-heading a {
display: block;
margin-top: 15px;
}
.vn-destination-grid {
grid-template-columns:
repeat(2,1fr);
}
/* STORIES */
.vn-stories {
padding:
35px
5%
80px;
}
.vn-story-heading {
display: block;
}
.vn-story-heading a {
display: inline-block;
margin-top: 18px;
}
/* CTA */
.vn-final {
height: 430px;
}
.vn-final-content h2 {
font-size: 49px;
}
}
/* ==========================================
DESTINATION IMAGE TEXT = WHITE
========================================== */
.vn-destination-card .vn-destination-info,
.vn-destination-card .vn-destination-info strong,
.vn-destination-card .vn-destination-info span {
color: #ffffff !important;
.vn-destination-card .vn-destination-info strong {
font-weight: 700;
.vn-destination-card .vn-destination-info span {
font-weight: 400;
.vn-destination-card::after {
background: linear-gradient(
to bottom,
rgba(0,0,0,0.02) 20%,
rgba(0,0,0,0.72) 100%
) !important;
}/* End custom CSS */