/* Start custom CSS for html, class: .elementor-element-aa335ba *//* ==========================================
VOYANEST CONTACT V2
MINIMAL LUXURY TRAVEL DESIGN
========================================== */
.vn-contact-v2 {
--dark: #103f3c;
--dark2: #082f2d;
--green: #1c7068;
--cream: #f5f1e9;
--cream2: #ebe5d9;
--text: #647572;
width: 100%;
margin: 0;
padding: 0;
background: var(--cream);
color: var(--dark);
font-family:
Arial,
Helvetica,
sans-serif;
overflow: hidden;
}
/* ==========================================
HERO
========================================== */
.vn-c2-hero {
min-height: 680px;
display: grid;
grid-template-columns: 45% 55%;
position: relative;
background: var(--cream);
}
.vn-c2-hero-left {
padding:
110px
8vw
80px
9vw;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 2;
}
.vn-c2-label {
font-size: 10px;
letter-spacing: 4px;
font-weight: 700;
color: var(--green);
display: block;
margin-bottom: 22px;
}
.vn-c2-hero h1 {
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(80px, 9vw, 145px);
line-height: .78;
letter-spacing: -7px;
font-weight: 400;
margin: 0;
color: var(--dark);
}
.vn-c2-hero h1 i {
color: var(--green);
font-weight: 400;
transition:
letter-spacing .5s ease,
transform .5s ease;
}
.vn-c2-hero h1 i:hover {
letter-spacing: 3px;
display: inline-block;
transform: translateX(12px);
}
.vn-c2-hero-left > p {
max-width: 370px;
margin:
42px 0 0;
font-size: 14px;
line-height: 1.9;
color: var(--text);
}
.vn-c2-scroll {
position: absolute;
bottom: 55px;
left: 9vw;
display: flex;
align-items: center;
gap: 12px;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text);
}
.vn-c2-scroll span {
width: 35px;
height: 1px;
background: var(--green);
display: block;
animation:
vnLineMove 2s infinite;
}
/* HERO IMAGE */
.vn-c2-hero-image {
position: relative;
height: 680px;
overflow: hidden;
}
.vn-c2-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition:
transform 1.2s ease;
}
.vn-c2-hero-image:hover img {
transform: scale(1.06);
}
.vn-c2-image-note {
position: absolute;
right: 45px;
bottom: 45px;
width: 190px;
padding: 20px;
background:
rgba(255,255,255,.88);
backdrop-filter: blur(12px);
font-family:
Georgia,
serif;
font-size: 15px;
line-height: 1.35;
color: var(--dark);
border-radius: 3px;
transition:
transform .5s ease;
}
.vn-c2-image-note span {
display: block;
font-family: Arial;
color: var(--green);
margin-bottom: 10px;
}
.vn-c2-hero-image:hover .vn-c2-image-note {
transform:
translateY(-8px);
}
/* ==========================================
CONTACT AREA
========================================== */
.vn-c2-contact {
display: grid;
grid-template-columns:
.85fr
1.15fr;
gap: 100px;
padding:
120px
9vw;
background: white;
position: relative;
}
/* DETAILS */
.vn-c2-details {
padding-top: 20px;
}
.vn-c2-details h2 {
font-family:
Georgia,
serif;
font-size: 58px;
line-height: .95;
font-weight: 400;
letter-spacing: -2px;
margin: 0 0 30px;
}
.vn-c2-details h2 i {
color: var(--green);
font-weight: 400;
}
.vn-c2-description {
max-width: 400px;
font-size: 13px;
line-height: 1.9;
color: var(--text);
margin-bottom: 45px;
}
.vn-c2-detail {
display: flex;
align-items: center;
gap: 18px;
padding: 17px 0;
border-bottom:
1px solid #e5e5df;
max-width: 390px;
transition:
padding-left .35s ease;
}
.vn-c2-detail:hover {
padding-left: 10px;
}
.vn-c2-detail-icon {
width: 38px;
height: 38px;
border:
1px solid
rgba(16,63,60,.3);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--green);
transition:
background .35s ease,
color .35s ease,
transform .35s ease;
}
.vn-c2-detail:hover
.vn-c2-detail-icon {
background: var(--dark);
color: white;
transform: rotate(15deg);
}
.vn-c2-detail small {
display: block;
font-size: 8px;
letter-spacing: 2px;
margin-bottom: 5px;
color: var(--text);
}
.vn-c2-detail a,
.vn-c2-detail p {
margin: 0;
text-decoration: none;
font-size: 12px;
color: var(--dark);
}
.vn-c2-social {
margin-top: 40px;
}
.vn-c2-social > span {
font-size: 8px;
letter-spacing: 2px;
color: var(--text);
}
.vn-c2-social div {
display: flex;
gap: 20px;
margin-top: 12px;
}
.vn-c2-social a {
font-family:
Georgia,
serif;
font-size: 12px;
color: var(--dark);
text-decoration: none;
position: relative;
}
.vn-c2-social a:after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 1px;
background: var(--green);
transition: width .3s ease;
}
.vn-c2-social a:hover:after {
width: 100%;
}
/* ==========================================
FORM
========================================== */
.vn-c2-form-wrap {
background: var(--cream);
padding: 55px;
position: relative;
box-shadow:
0 25px 70px
rgba(16,63,60,.08);
transition:
transform .5s ease,
box-shadow .5s ease;
}
.vn-c2-form-wrap:hover {
transform:
translateY(-7px);
box-shadow:
0 35px 80px
rgba(16,63,60,.13);
}
.vn-c2-form-heading {
display: flex;
justify-content:
space-between;
align-items: flex-start;
margin-bottom: 35px;
}
.vn-c2-form-heading > span {
font-size: 9px;
letter-spacing: 2px;
color: var(--green);
}
.vn-c2-form-heading h3 {
font-family:
Georgia,
serif;
font-size: 36px;
line-height: 1;
font-weight: 400;
margin: 0;
}
.vn-c2-form-heading h3 i {
color: var(--green);
font-weight: 400;
}
.vn-c2-input {
margin-bottom: 25px;
position: relative;
}
.vn-c2-input label {
display: block;
font-size: 9px;
letter-spacing: 1px;
color: var(--dark);
margin-bottom: 8px;
}
.vn-c2-input input,
.vn-c2-input select,
.vn-c2-input textarea {
width: 100%;
box-sizing: border-box;
border: none;
border-bottom:
1px solid
rgba(16,63,60,.25);
background: transparent;
padding:
10px 0;
outline: none;
font-size: 12px;
color: var(--dark);
font-family: inherit;
transition:
border-color .35s ease;
}
.vn-c2-input textarea {
min-height: 80px;
resize: vertical;
}
.vn-c2-input input:focus,
.vn-c2-input select:focus,
.vn-c2-input textarea:focus {
border-color:
var(--green);
}
.vn-c2-input input::placeholder,
.vn-c2-input textarea::placeholder {
color: #9aa7a4;
}
.vn-c2-form button {
margin-top: 5px;
border: none;
background: var(--dark);
color: white;
padding:
15px 27px;
border-radius: 30px;
font-size: 10px;
letter-spacing: 1px;
cursor: pointer;
transition:
background .35s ease,
transform .35s ease;
}
.vn-c2-form button span {
margin-left: 20px;
transition:
transform .35s ease;
display: inline-block;
}
.vn-c2-form button:hover {
background: var(--green);
transform:
translateY(-4px);
}
.vn-c2-form button:hover span {
transform:
translate(5px,-5px);
}
/* ==========================================
SUPPORT
========================================== */
.vn-c2-support {
padding:
100px 9vw;
background: var(--cream);
display: grid;
grid-template-columns:
.7fr 1.3fr;
gap: 80px;
}
.vn-c2-support-title h2 {
font-family:
Georgia,
serif;
font-size: 55px;
line-height: .95;
font-weight: 400;
margin: 0;
letter-spacing: -2px;
}
.vn-c2-support-title h2 i {
color: var(--green);
font-weight: 400;
}
.vn-c2-support-grid {
display: grid;
grid-template-columns:
repeat(3,1fr);
gap: 15px;
}
.vn-c2-support-card {
min-height: 240px;
padding: 27px;
border:
1px solid
rgba(16,63,60,.14);
position: relative;
transition:
transform .4s ease,
background .4s ease;
}
.vn-c2-support-card:hover {
transform:
translateY(-10px);
background: white;
}
.vn-c2-support-card > span {
position: absolute;
right: 20px;
top: 20px;
font-size: 9px;
color: #9aa5a2;
}
.vn-c2-card-icon {
width: 45px;
height: 45px;
border:
1px solid
var(--green);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--green);
font-size: 20px;
margin-bottom: 40px;
transition:
transform .5s ease,
background .4s ease,
color .4s ease;
}
.vn-c2-support-card:hover
.vn-c2-card-icon {
transform:
rotate(360deg);
background: var(--green);
color: white;
}
.vn-c2-support-card h3 {
font-family:
Georgia,
serif;
font-size: 18px;
font-weight: 400;
margin: 0 0 10px;
}
.vn-c2-support-card p {
font-size: 10px;
line-height: 1.7;
color: var(--text);
margin: 0;
}
/* ==========================================
CTA
========================================== */
.vn-c2-cta {
min-height: 430px;
position: relative;
display: flex;
align-items: center;
padding:
70px 9vw;
overflow: hidden;
color: white;
}
.vn-c2-cta-image {
position: absolute;
inset: 0;
background-image:
url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=2000&q=90");
background-size: cover;
background-position: center;
transition:
transform 1s ease;
}
.vn-c2-cta:hover
.vn-c2-cta-image {
transform: scale(1.04);
}
.vn-c2-cta-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(5,43,41,.97),
rgba(5,43,41,.65),
rgba(5,43,41,.2)
);
}
.vn-c2-cta-content {
position: relative;
z-index: 2;
}
.vn-c2-cta-content > span {
font-size: 9px;
letter-spacing: 3px;
display: block;
margin-bottom: 18px;
}
.vn-c2-cta-content h2 {
font-family:
Georgia,
serif;
font-size:
clamp(55px,7vw,90px);
line-height: .85;
font-weight: 400;
letter-spacing: -4px;
margin: 0 0 40px;
}
.vn-c2-cta-content h2 i {
color: #d7e5df;
font-weight: 400;
}
.vn-c2-cta-content a {
display: inline-flex;
align-items: center;
gap: 25px;
padding:
13px 23px;
border:
1px solid
rgba(255,255,255,.65);
border-radius: 30px;
color: white;
text-decoration: none;
font-size: 10px;
transition:
background .35s ease,
transform .35s ease;
}
.vn-c2-cta-content a:hover {
background: white;
color: var(--dark);
transform:
translateY(-5px);
}
.vn-c2-cta-mark {
position: absolute;
right: 8vw;
bottom: 35px;
z-index: 2;
font-size: 9px;
letter-spacing: 5px;
opacity: .65;
transform: rotate(-90deg);
}
/* ==========================================
ANIMATIONS
========================================== */
@keyframes vnLineMove {
0% {
width: 15px;
opacity: .3;
}
50% {
width: 35px;
opacity: 1;
}
100% {
width: 15px;
opacity: .3;
}
}
/* ==========================================
TABLET
========================================== */
@media(max-width: 1000px) {
.vn-c2-hero {
grid-template-columns: 1fr;
}
.vn-c2-hero-left {
min-height: 500px;
}
.vn-c2-hero-image {
height: 500px;
}
.vn-c2-contact {
grid-template-columns: 1fr;
gap: 60px;
}
.vn-c2-support {
grid-template-columns: 1fr;
}
}
/* ==========================================
MOBILE
========================================== */
@media(max-width: 600px) {
.vn-c2-hero-left {
padding:
80px 7vw;
}
.vn-c2-hero h1 {
font-size: 75px;
}
.vn-c2-hero-image {
height: 420px;
}
.vn-c2-image-note {
right: 20px;
bottom: 20px;
}
.vn-c2-contact {
padding:
70px 7vw;
}
.vn-c2-details h2 {
font-size: 48px;
}
.vn-c2-form-wrap {
padding: 30px 22px;
}
.vn-c2-form-heading h3 {
font-size: 28px;
}
.vn-c2-support {
padding:
70px 7vw;
}
.vn-c2-support-title h2 {
font-size: 45px;
}
.vn-c2-support-grid {
grid-template-columns: 1fr;
}
.vn-c2-cta {
min-height: 500px;
padding:
60px 7vw;
}
.vn-c2-cta-content h2 {
font-size: 60px;
}
}
body {
margin: 0;
padding: 0;
}
.contact-page {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
/* ===== VOYANEST CONTACT - TRUE FULL WIDTH ===== */
html,
body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
}
.vn-contact-v2 {
width: 100vw !important;
max-width: none !important;
position: relative !important;
left: 50% !important;
right: auto !important;
margin-left: -50vw !important;
margin-right: 0 !important;
padding: 0 !important;
transform: none !important;
box-sizing: border-box !important;
}
/* HERO */
.vn-contact-v2 .vn-c2-hero {
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* CTA */
.vn-contact-v2 .vn-c2-cta {
width: 100vw !important;
max-width: 100vw !important;
margin: 0 !important;
padding-left: 9vw !important;
padding-right: 9vw !important;
}
/* Make image actually touch both edges */
.vn-contact-v2 .vn-c2-hero-image {
width: 100% !important;
}
.vn-contact-v2 .vn-c2-cta-image {
width: 100% !important;
}
/* Stop Elementor from clipping the full-width section */
.elementor-element:has(.vn-contact-v2) {
overflow: visible !important;
}
.elementor-element:has(.vn-contact-v2) > .elementor-widget-container {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}/* End custom CSS */