html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
button,
input,
textarea,
select,
label {
font-family: Arial, Helvetica, sans-serif !important;
}
/* Font Awesome ko website font se protect karo */
[class^="fa-"],
[class*=" fa-"] {
font-family: "Font Awesome 6 Free" !important;
}
.fa-brands,
[class*="fa-brands"] {
font-family: "Font Awesome 6 Brands" !important;
}
/* header navbar css */
/* =========================================================
TRIPOLOGIX NAVBAR
NO BOOTSTRAP
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.tl-header11 {
width: 100%;
background: #ffffff;
position: sticky;
top: 0;
left: 0;
z-index: 9999;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
transition:
box-shadow 0.35s ease,
transform 0.35s ease,
background 0.35s ease;
}
/* Scroll Effect */
.tl-header11.tl-scrolled12 {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
/* Main Navbar */
.tl-navbar22 {
width: 100%;
min-height: 92px;
display: flex;
align-items: center;
padding: 0 3.8%;
position: relative;
}
/* =========================================================
LOGO
========================================================= */
.tl-logo33 {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.tl-logo33 img {
width: 200px;
max-width: 100%;
height: auto;
display: block;
transition:
transform 0.35s ease,
opacity 0.35s ease;
}
.tl-logo33:hover img {
transform: scale(1.025);
}
/* =========================================================
NAVIGATION
========================================================= */
.tl-nav44 {
margin-left: auto;
display: flex;
align-items: center;
gap: 30px;
}
.tl-nav-link55 {
position: relative;
display: inline-flex;
align-items: center;
height: 92px;
color: #e85f08;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition:
color 0.3s ease,
transform 0.3s ease;
}
/* Hover */
.tl-nav-link55:hover {
color: #0b3976;
transform: translateY(-2px);
}
/* =========================================================
REQUEST ITINERARY BUTTON
========================================================= */
.tl-itinerary-btn88 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 27px;
background: #e98a08;
color: #ffffff;
border-radius: 7px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
position: relative;
overflow: hidden;
transition:
transform 0.3s ease,
background 0.3s ease,
box-shadow 0.3s ease;
}
/* Button Shine */
.tl-itinerary-btn88::before {
content: "";
position: absolute;
top: 0;
left: -110%;
width: 80%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent);
transform: skewX(-20deg);
transition: left 0.65s ease;
}
.tl-itinerary-btn88:hover::before {
left: 130%;
}
.tl-itinerary-btn88:hover {
background: #d97700;
transform: translateY(-3px);
box-shadow: 0 9px 22px rgba(233, 138, 8, 0.25);
color: #ffffff;
}
/* Desktop Button */
.tl-desktop-btn100 {
margin-left: 75px;
}
/* Mobile button hidden */
.tl-mobile-btn99 {
display: none;
}
/* =========================================================
MOBILE HAMBURGER
========================================================= */
.tl-menu-toggle111 {
display: none;
width: 45px;
height: 45px;
border: 0;
background: transparent;
cursor: pointer;
padding: 7px;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.tl-menu-toggle111 span {
display: block;
width: 100%;
height: 3px;
background: #0b3976;
border-radius: 10px;
transition:
transform 0.35s ease,
opacity 0.3s ease,
width 0.3s ease;
}
/* Hamburger Active */
.tl-menu-toggle111.tl-menu-active112 span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.tl-menu-toggle111.tl-menu-active112 span:nth-child(2) {
opacity: 0;
width: 0;
}
.tl-menu-toggle111.tl-menu-active112 span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* =========================================================
NAVBAR ENTRY ANIMATION
========================================================= */
.tl-nav-link55,
.tl-desktop-btn100 {
animation: tlNavbarEntry113 0.7s ease both;
}
.tl-nav-link55:nth-child(1) {
animation-delay: 0.1s;
}
.tl-nav-link55:nth-child(2) {
animation-delay: 0.18s;
}
.tl-nav-link55:nth-child(3) {
animation-delay: 0.26s;
}
.tl-nav-link55:nth-child(4) {
animation-delay: 0.34s;
}
.tl-nav-link55:nth-child(5) {
animation-delay: 0.42s;
}
@keyframes tlNavbarEntry113 {
from {
opacity: 0;
transform: translateY(-15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================================
MOBILE
MAX WIDTH 768PX
========================================================= */
@media (max-width: 768px) {
.tl-header11 {
position: sticky;
top: 0;
}
.tl-navbar22 {
min-height: 75px;
padding: 0 18px;
justify-content: space-between;
}
/* Logo */
.tl-logo33 img {
width: 190px;
}
/* Hide Desktop Button */
.tl-desktop-btn100 {
display: none;
}
/* Hamburger */
.tl-menu-toggle111 {
display: flex;
z-index: 10001;
}
/* Navigation */
.tl-nav44 {
position: absolute;
top: 75px;
left: 0;
width: 100%;
background: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
padding: 10px 20px 25px;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.10);
opacity: 0;
visibility: hidden;
transform: translateY(-15px);
transition:
opacity 0.35s ease,
visibility 0.35s ease,
transform 0.35s ease;
}
/* Open Menu */
.tl-nav44.tl-nav-open114 {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mobile Links */
.tl-nav-link55 {
width: 100%;
height: auto;
min-height: 58px;
justify-content: center;
font-size: 17px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
transform: none !important;
animation: none;
}
.tl-nav-link55:hover {
color: #0b3976;
}
/* Active Dot */
.tl-active-dot77 {
width: 8px;
height: 8px;
bottom: 8px;
}
/* Mobile Itinerary */
.tl-mobile-btn99 {
display: flex;
width: 100%;
min-height: 52px;
margin-top: 20px;
font-size: 16px;
}
}
/* =========================================================
LARGE DESKTOP
MIN WIDTH 1440PX
========================================================= */
@media (min-width: 1440px) {
.tl-navbar22 {
min-height: 105px;
padding-left: 3.1%;
padding-right: 2.5%;
}
.tl-logo33 img {
width: 305px;
}
.tl-nav44 {
gap: 65px;
}
.tl-nav-link55 {
height: 105px;
font-size: 21px;
}
.tl-desktop-btn100 {
margin-left: 70px;
min-height: 71px;
padding: 0 28px;
font-size: 19px;
}
.tl-active-dot77 {
bottom: 17px;
}
}
/* =========================================
TRIPOLOGIX BANNER
========================================= */
.tripBanner11 {
width: 100%;
height: 90vh;
position: relative;
overflow: hidden;
font-family: Arial, sans-serif;
}
/* =========================================
SLIDER
========================================= */
.tripSlider22 {
width: 100%;
height: 100%;
position: relative;
}
/* =========================================
SLIDE
========================================= */
.tripSlide33 {
position: absolute;
width: 100%;
height: 100%;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1s ease, visibility 1s ease;
overflow: hidden;
}
.tripSlide33.activeTrip44 {
opacity: 1;
visibility: visible;
z-index: 2;
}
/* =========================================
BACKGROUND
========================================= */
.tripBackground55 {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transform: scale(1.08);
transition: transform 7s ease;
}
.tripSlide33.activeTrip44 .tripBackground55 {
transform: scale(1);
}
/* =========================================
BACKGROUND IMAGE 1
========================================= */
.tripBgOne66 {
background-image: url("https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1920&q=90");
}
/* =========================================
BACKGROUND IMAGE 2
========================================= */
.tripBgTwo133 {
background-image: url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1920&q=90");
}
/* =========================================
BACKGROUND IMAGE 3
========================================= */
.tripBgThree144 {
background-image: url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1920&q=90");
}
/* =========================================
OVERLAY
========================================= */
.tripOverlay77 {
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
rgba(255, 255, 255, 0.90) 0%,
rgba(255, 255, 255, 0.70) 30%,
rgba(255, 255, 255, 0.25) 58%,
rgba(0, 0, 0, 0.05) 100%);
z-index: 1;
}
/* =========================================
CONTAINER
========================================= */
.tripContainer88 {
width: 100%;
max-width: 1300px;
height: 100%;
margin: auto;
padding: 0 40px;
display: flex;
align-items: center;
position: relative;
z-index: 3;
}
/* =========================================
CONTENT
========================================= */
.tripContent99 {
width: 600px;
padding-top: 30px;
margin-left: 40px;
transform: translateY(50px);
opacity: 0;
transition:
transform 1s ease 0.4s,
opacity 1s ease 0.4s;
}
.tripSlide33.activeTrip44 .tripContent99 {
transform: translateY(0);
opacity: 1;
}
/* =========================================
LOGO
========================================= */
.tripLogoBox101 {
margin-bottom: 20px;
}
.tripLogoBox101 img {
width: 200px;
max-width: 100%;
display: block;
}
/* =========================================
SMALL TITLE
========================================= */
.tripSmallTitle111 {
display: flex;
align-items: center;
gap: 10px;
color: #254a78;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 20px;
}
.tripSmallTitle111 i {
width: 6px;
height: 6px;
background: #ed6b13;
border-radius: 50%;
display: inline-block;
}
img.looogoo{
width: 100px;
}
/* =========================================
HEADING
========================================= */
.tripContent99 h1 {
margin: 0 0 20px;
font-size: 52px;
line-height: 1.12;
font-weight: 700;
color: #173968;
letter-spacing: -2px;
}
/* =========================================
DESCRIPTION
========================================= */
.tripContent99 p {
max-width: 600px;
margin: 0 0 35px;
color: #303b49;
font-size: 20px;
line-height: 1.7;
font-weight: 400;
}
.tripContent99 p strong {
color: #173968;
}
.tripContent99 p strong span {
color: #ed6b13;
}
/* =========================================
BUTTON
========================================= */
.tripButton122 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 230px;
padding: 20px 30px;
text-decoration: none;
background: #ed6b13;
color: #ffffff;
font-size: 21px;
font-weight: 600;
letter-spacing: 0.5px;
border-radius: 4px;
transition:
transform 0.4s ease,
background 0.4s ease,
box-shadow 0.4s ease;
}
.tripButton122:hover {
background: #d95c08;
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.20);
}
/* =========================================
ARROWS
========================================= */
.tripArrow155 {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 65px;
height: 65px;
border: none;
background: transparent;
color: #ffffff;
font-size: 65px;
font-weight: 200;
cursor: pointer;
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.tripArrow155:hover {
transform: translateY(-50%) scale(1.15);
}
.tripPrev166 {
left: 20px;
}
.tripNext177 {
right: 20px;
}
/* =========================================
DOTS
========================================= */
.tripDots188 {
position: absolute;
left: 50%;
bottom: 45px;
transform: translateX(-50%);
z-index: 20;
display: flex;
align-items: center;
gap: 14px;
}
.tripDot199 {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #ffffff;
background: transparent;
padding: 0;
cursor: pointer;
transition:
background 0.4s ease,
transform 0.4s ease;
}
.tripDot199.activeDot200 {
background: #ffffff;
transform: scale(1.15);
}
/* =========================================
ONLY MAX WIDTH 768PX
========================================= */
@media (max-width: 768px) {
.tripBanner11 {
height: 100vh;
min-height: 600px;
}
.tripContainer88 {
align-items: center;
text-align: center;
}
.tripContent99 {
width: 100%;
padding-top: 0;
margin-left: 0;
text-align: center;
}
.tripLogoBox101 {
margin-bottom: 40px;
text-align: center;
}
.tripLogoBox101 img {
width: 200px;
}
.tripLogoBox101 {
text-align: center;
}
.tripLogoBox101 img {
display: block;
margin: 0 auto;
}
.tripSmallTitle111 {
font-size: 11px;
letter-spacing: 2px;
gap: 6px;
margin-bottom: 15px;
justify-content: center;
}
.tripSmallTitle111 i {
width: 5px;
height: 5px;
}
.tripContent99 h1 {
font-size: 32px;
line-height: 1.15;
letter-spacing: -1px;
text-align: center;
}
.tripContent99 p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 25px;
text-align: center;
}
.tripButton122 {
min-width: 180px;
padding: 16px 25px;
font-size: 17px;
}
.tripArrow155 {
width: 45px;
height: 55px;
font-size: 45px;
}
.tripPrev166 {
left: 5px;
}
.tripNext177 {
right: 5px;
}
.tripDots188 {
bottom: 25px;
gap: 10px;
}
.tripDot199 {
width: 14px;
height: 14px;
}
.tripOverlay77 {
background:
linear-gradient(90deg,
rgba(255, 255, 255, 0.88) 0%,
rgba(255, 255, 255, 0.72) 50%,
rgba(255, 255, 255, 0.30) 100%);
}
}
/* =========================================
MAIN SECTION
========================================= */
.travel-gallery-x11 {
width: 100%;
padding: 100px 0;
background: #f5f6f8;
}
.travel-container-x22 {
width: 90%;
max-width: 1800px;
margin: 0 auto;
}
/* =========================================
SECTION HEADING
========================================= */
.travel-heading-x33 {
max-width: 1100px;
margin: 0 auto 60px;
text-align: center;
}
.travel-subtitle-x44 {
display: block;
font-size: 25px;
font-weight: 700;
letter-spacing: 1px;
color: #e87532;
margin-bottom: 18px;
}
.travel-heading-x33 h3 {
margin: 0 0 22px;
color: #1d314f;
font-size: 40px;
font-weight: 700;
line-height: 1.2;
}
.travel-heading-x33 p {
max-width: 1000px;
margin: 0 auto;
color: #657184;
font-size: 19px;
line-height: 1.6;
}
/* =========================================
CARD GRID
========================================= */
.travel-grid-x55 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
/* =========================================
CARD
========================================= */
.travel-card-x66 {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.10);
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
animation:
travelCardAnimation-x300 0.8s ease both;
}
.travel-card-x66:hover {
transform: translateY(-10px);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.16);
}
/* =========================================
IMAGE
========================================= */
.travel-image-x77 {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.travel-image-x77 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform 0.7s ease;
}
.travel-card-x66:hover .travel-image-x77 img {
transform: scale(1.10);
}
/* =========================================
ONLY IMAGE TITLE
========================================= */
.travel-image-title-x501 {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 35px 20px 22px;
box-sizing: border-box;
text-align: center;
color: #ffffff;
font-size: 30px;
font-weight: 700;
z-index: 5;
/* background:
linear-gradient(
to top,
rgba(0, 0, 0, 0.80),
rgba(0, 0, 0, 0)
); */
pointer-events: none;
}
/* =========================================
OLD OVERLAY HIDDEN
========================================= */
.travel-overlay-x88 {
display: none !important;
}
/* =========================================
VIEW MORE AREA
========================================= */
.travel-button-area-x111 {
padding: 20px;
text-align: center;
background: #ffffff;
}
/* =========================================
VIEW MORE BUTTON
========================================= */
.travel-popup-btn-x112 {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 15px;
background: #ffffff;
border:
1px solid #e87532;
border-radius: 6px;
color: #1d314f;
font-size: 17px;
font-weight: 700;
cursor: pointer;
transition:
all 0.3s ease;
}
.travel-popup-btn-x112:hover {
color: #ffffff;
background: #e87532;
transform:
translateY(-3px);
box-shadow:
0 8px 20px rgba(232, 117, 50, 0.30);
}
/* =========================================
POPUP BACKGROUND
========================================= */
.travel-popup-x200 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
align-items: center;
justify-content: center;
padding: 30px;
background:
rgba(0, 0, 0, 0.80);
z-index: 999999;
overflow-y: auto;
}
/* ACTIVE POPUP */
.travel-popup-x200.travel-popup-active-x205 {
display: flex;
}
/* =========================================
POPUP BOX
========================================= */
.travel-popup-box-x201 {
width: 100%;
max-width: 1200px;
max-height: 90vh;
overflow-y: auto;
background: #ffffff;
border-radius: 20px;
animation:
travelPopupAnimation-x400 0.4s ease;
}
/* =========================================
POPUP HEADER
========================================= */
.travel-popup-header-x202 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 25px 30px;
border-bottom:
1px solid #eeeeee;
}
.travel-popup-header-x202 span {
display: block;
color: #e87532;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 7px;
}
.travel-popup-header-x202 h3 {
margin: 0;
color: #1d314f;
font-size: 30px;
font-weight: 700;
}
/* =========================================
CLOSE BUTTON
========================================= */
.travel-close-x203 {
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
background: #f1f2f4;
color: #1d314f;
font-size: 22px;
cursor: pointer;
transition:
all 0.3s ease;
}
.travel-close-x203:hover {
background: #e87532;
color: #ffffff;
transform:
rotate(90deg);
}
/* =========================================
POPUP IMAGES
========================================= */
.travel-popup-images-x204 {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 25px;
padding: 25px;
}
.travel-popup-images-x204 img {
width: 100%;
height: 330px;
display: block;
object-fit: cover;
border-radius: 15px;
transition:
transform 0.4s ease;
}
.travel-popup-images-x204 img:hover {
transform:
scale(1.03);
}
/* =========================================
ANIMATION
========================================= */
@keyframes travelCardAnimation-x300 {
from {
opacity: 0;
transform:
translateY(50px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
@keyframes travelPopupAnimation-x400 {
from {
opacity: 0;
transform:
translateY(-40px) scale(0.95);
}
to {
opacity: 1;
transform:
translateY(0) scale(1);
}
}
/* =========================================
MIN WIDTH 1440px
========================================= */
@media (min-width: 1440px) {
.travel-container-x22 {
width: 94%;
}
.travel-gallery-x11 {
padding: 120px 0;
}
.travel-heading-x33 h2 {
font-size: 54px;
}
.travel-image-x77 {
height: 520px;
}
}
/* =========================================
MAX WIDTH 768px
========================================= */
@media (max-width: 768px) {
.travel-gallery-x11 {
padding: 65px 15px;
}
.travel-container-x22 {
width: 100%;
}
.travel-heading-x33 {
margin-bottom: 40px;
}
.travel-subtitle-x44 {
font-size: 14px;
}
.travel-heading-x33 h2 {
font-size: 32px;
}
.travel-heading-x33 p {
font-size: 15px;
}
.travel-heading-x33 p br {
display: none;
}
.travel-grid-x55 {
grid-template-columns: 1fr;
gap: 25px;
}
.travel-image-x77 {
height: 420px;
}
.travel-image-title-x501 {
font-size: 27px;
padding: 35px 15px 20px;
}
.travel-popup-x200 {
padding: 15px;
}
.travel-popup-box-x201 {
max-height: 92vh;
}
.travel-popup-header-x202 {
padding: 20px;
}
.travel-popup-header-x202 h3 {
font-size: 24px;
}
.travel-popup-images-x204 {
grid-template-columns: 1fr;
gap: 15px;
padding: 15px;
}
.travel-popup-images-x204 img {
height: 250px;
}
}
/* =========================================
INTERNATIONAL DESTINATION SECTION
========================================= */
.intl-destination-sec-x101 {
width: 100%;
overflow: hidden;
padding: 90px 0 100px;
background: #f5f6f8;
}
/* =========================================
HEADING
========================================= */
.intl-destination-heading-x102 {
width: 90%;
max-width: 1250px;
margin: 0 auto 55px;
text-align: center;
}
.intl-destination-subtitle-x103 {
display: block;
margin-bottom: 18px;
color: #e86f2c;
font-size: 25px;
font-weight: 700;
letter-spacing: 0.5px;
}
.intl-destination-heading-x102 h3 {
margin: 0 0 24px;
color: #1c3150;
font-size: 40px;
font-weight: 700;
line-height: 1.15;
}
.intl-destination-heading-x102 p {
max-width: 1100px;
margin: 0 auto;
color: #657184;
font-size: 19px;
font-weight: 400;
line-height: 1.6;
}
/* =========================================
SLIDER MAIN
========================================= */
.intl-slider-main-x104 {
position: relative;
width: 92%;
max-width: 1800px;
margin: 0 auto;
}
/* =========================================
SLIDER WINDOW
========================================= */
.intl-slider-window-x107 {
width: 100%;
overflow: hidden;
}
/* =========================================
SLIDER TRACK
========================================= */
.intl-slider-track-x108 {
display: flex;
transition: transform 0.7s cubic-bezier(0.22,
0.61,
0.36,
1);
will-change: transform;
}
/* =========================================
SLIDE ITEM
========================================= */
.intl-slide-item-x109 {
flex: 0 0 25%;
box-sizing: border-box;
padding: 0 15px;
}
/* =========================================
CARD
========================================= */
.intl-destination-card-x110 {
width: 100%;
border-radius: 20px;
margin: 20px 0;
overflow: hidden;
background: #ffffff;
box-shadow:
0 15px 40px rgba(23, 43, 77, 0.10);
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
.intl-destination-card-x110:hover {
transform: translateY(-10px);
box-shadow:
0 25px 55px rgba(23, 43, 77, 0.18);
}
/* =========================================
IMAGE BOX
========================================= */
.intl-image-box-x111 {
position: relative;
width: 100%;
height: 450px;
overflow: hidden;
}
.intl-image-box-x111 img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform 0.7s ease;
}
.intl-destination-card-x110:hover .intl-image-box-x111 img {
transform: scale(1.10);
}
/* =========================================
MAIN IMAGE NAME
========================================= */
.intl-main-image-name-x121 {
position: absolute;
left: 50%;
bottom:0;
transform: translateX(-50%);
z-index: 5;
color: #ffffff;
font-size: 32px;
font-weight: 700;
letter-spacing: 2px;
text-align: center;
white-space: nowrap;
padding: 35px 150px 22px;
/* background:
linear-gradient(
to top,
rgba(0, 0, 0, 0.80),
rgba(0, 0, 0, 0)
); */
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
/* HIDE MAIN NAME ON HOVER */
.intl-destination-card-x110:hover .intl-main-image-name-x121 {
opacity: 0;
transform:
translateX(-50%)
translateY(10px);
}
/* =========================================
HOVER OVERLAY
========================================= */
.intl-hover-overlay-x112 {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
text-align: center;
opacity: 0;
background:
linear-gradient(to bottom,
rgba(10, 23, 45, 0.88),
rgba(8, 18, 37, 0.95));
transition:
opacity 0.45s ease;
}
.intl-destination-card-x110:hover .intl-hover-overlay-x112 {
opacity: 1;
}
/* =========================================
HOVER CONTENT
========================================= */
.intl-hover-content-x113 {
width: 100%;
transform:
translateY(30px);
transition:
transform 0.5s ease;
}
.intl-destination-card-x110:hover .intl-hover-content-x113 {
transform:
translateY(0);
}
/* DESTINATION NAME */
.intl-hover-content-x113 h3 {
margin: 0 0 45px;
margin-top: 100px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
}
/* STARTING FROM */
.intl-hover-content-x113 h5 {
margin: 0 0 8px;
color: #ffffff;
font-size: 18px;
font-weight: 700;
}
/* PRICE */
.intl-hover-content-x113 h4 {
margin: 0 0 8px;
color: #ffffff;
font-size: 26px;
font-weight: 800;
line-height: 1;
}
/* DAYS */
.intl-hover-content-x113 p {
margin: 0 0 30px;
color: #ffffff;
font-size: 18px;
font-weight: 400;
}
/* EXPLORE BUTTON */
.intl-hover-content-x113 a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 220px;
padding: 14px 20px;
border: 1px solid rgba(255, 255, 255, 0.40);
border-radius: 10px;
color: #ffffff;
text-decoration: none;
font-size: 18px;
font-weight: 600;
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.intl-hover-content-x113 a:hover {
color: #1c3150;
background: #ffffff;
transform: translateY(-4px);
}
.intl-hover-content-x113 a span {
font-size: 24px;
line-height: 1;
}
/* =========================================
SLIDER ARROWS
========================================= */
.intl-slider-arrow-x105 {
position: absolute;
top: 50%;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
color: #ffffff;
background: #1c3150;
font-size: 24px;
cursor: pointer;
z-index: 20;
transform: translateY(-50%);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.18);
transition:
background 0.3s ease,
transform 0.3s ease;
}
.intl-slider-arrow-x105:hover {
background: #e86f2c;
transform:
translateY(-50%) scale(1.08);
}
/* PREVIOUS */
.intl-prev-arrow-x106 {
left: -10px;
}
/* NEXT */
.intl-next-arrow-x114 {
right: -10px;
}
/* =========================================
SLIDER DOTS
========================================= */
.intl-slider-dots-x115 {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 35px;
}
.intl-dot-x116 {
width: 9px;
height: 9px;
padding: 0;
border: none;
border-radius: 50%;
background: #b7bec8;
cursor: pointer;
transition:
width 0.3s ease,
background 0.3s ease;
}
.intl-dot-x116.intl-dot-active-x117 {
width: 28px;
border-radius: 20px;
background: #e86f2c;
}
/* =========================================
CARD ENTRY ANIMATION
========================================= */
@keyframes intlCardAnimation-x118 {
from {
opacity: 0;
transform:
translateY(40px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
.intl-slide-item-x109 {
animation:
intlCardAnimation-x118 0.8s ease both;
}
/* =========================================
MIN WIDTH 1440PX
========================================= */
@media (min-width: 1440px) {
.intl-destination-sec-x101 {
padding: 110px 0 120px;
}
.intl-destination-heading-x102 h2 {
font-size: 62px;
}
.intl-destination-heading-x102 p {
font-size: 20px;
}
.intl-slider-main-x104 {
width: 94%;
max-width: 1900px;
}
.intl-slide-item-x109 {
padding: 0 18px;
}
.intl-image-box-x111 {
height: 450px;
}
}
/* =========================================
MAX WIDTH 768PX
========================================= */
@media (max-width: 768px) {
.intl-destination-sec-x101 {
padding: 65px 0 75px;
}
/* HEADING */
.intl-destination-heading-x102 {
width: 90%;
margin-bottom: 40px;
}
.intl-destination-subtitle-x103 {
margin-bottom: 12px;
font-size: 15px;
}
.intl-destination-heading-x102 h2 {
margin-bottom: 18px;
font-size: 34px;
}
.intl-destination-heading-x102 p {
font-size: 15px;
}
.intl-destination-heading-x102 p br {
display: none;
}
/* SLIDER */
.intl-slider-main-x104 {
width: 100%;
}
.intl-slider-window-x107 {
width: 90%;
margin: 0 auto;
}
.intl-slide-item-x109 {
flex: 0 0 100%;
padding: 0 5px;
}
/* IMAGE */
.intl-image-box-x111 {
height: 450px;
}
/* MAIN IMAGE NAME */
.intl-main-image-name-x121 {
font-size: 30px;
letter-spacing: 1.5px;
}
/* CONTENT */
.intl-hover-content-x113 h3 {
margin-bottom: 35px;
font-size: 35px;
}
.intl-hover-content-x113 h4 {
font-size: 40px;
}
.intl-hover-content-x113 p {
font-size: 22px;
}
.intl-hover-content-x113 a {
min-width: 200px;
padding: 12px 15px;
font-size: 16px;
}
/* ARROWS */
.intl-slider-arrow-x105 {
width: 42px;
height: 42px;
font-size: 20px;
}
.intl-prev-arrow-x106 {
left: 2px;
}
.intl-next-arrow-x114 {
right: 2px;
}
}
.intl-slider-window-x107 {
cursor: grab;
}
.intl-slider-window-x107:active {
cursor: grabbing;
}
.intl-track-x108,
.intl-slider-track-x108 {
user-select: none;
}
/* =========================================
EXPLORE BUTTON CLICK FIX
========================================= */
.intl-hover-content-x113 {
position: relative;
z-index: 9999;
}
.intl-hover-content-x113 a {
position: relative;
z-index: 10000;
pointer-events: auto !important;
cursor: pointer !important;
}
/* =========================================
WHY CHOOSE US SECTION
========================================= */
.travel-why-section-x501 {
width: 100%;
padding: 20px 20px;
background: #ffffff;
overflow: hidden;
}
.travel-why-container-x502 {
max-width: 1400px;
margin: auto;
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 70px;
}
/* =========================================
LEFT CONTENT
========================================= */
.travel-why-content-x503 {
flex: 1;
padding: 55px 0;
opacity: 0;
transform: translateX(-70px);
transition: all 1s ease;
}
.travel-why-content-x503.travel-show-x520 {
opacity: 1;
transform: translateX(0);
}
.travel-why-subtitle-x504 {
display: inline-block;
font-size: 22px;
font-weight: 700;
letter-spacing: 1px;
color: #e66c2c;
margin-bottom: 20px;
}
.travel-why-title-x505 {
font-size: 34px;
line-height: 1.2;
font-weight: 700;
color: #1d3557;
margin: 0 0 22px;
}
.travel-why-description-x506 {
max-width: 760px;
font-size: 20px;
line-height: 1.9;
color: #687385;
margin: 0 0 65px;
}
/* =========================================
FEATURES
========================================= */
.travel-feature-list-x507 {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 50px;
row-gap: 28px;
margin-bottom: 65px;
}
.travel-feature-item-x508 {
display: flex;
align-items: center;
gap: 18px;
font-size: 18px;
font-weight: 500;
color: #26384e;
transition: all 0.3s ease;
}
.travel-feature-item-x508:hover {
transform: translateX(8px);
color: #e66c2c;
}
.travel-check-icon-x509 {
width: 29px;
height: 29px;
min-width: 29px;
display: flex;
align-items: center;
justify-content: center;
background: #ff7538;
color: #1d3557;
font-size: 22px;
font-weight: 700;
line-height: 1;
}
/* =========================================
CONTACT BUTTON
========================================= */
.travel-contact-btn-x510 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 70px;
background: #405ab5;
color: #ffffff;
text-decoration: none;
font-size: 19px;
font-weight: 600;
border-radius: 4px;
transition: all 0.4s ease;
box-shadow: 0 10px 25px rgba(64, 90, 181, 0.2);
}
.travel-contact-btn-x510:hover {
background: #e66c2c;
color: #fff;
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(230, 108, 44, 0.3);
}
/* =========================================
RIGHT IMAGE
========================================= */
.travel-image-box-x511 {
width: 400px;
min-width: 400px;
height: 500px;
margin-top: 100px;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateX(70px);
transition: all 1s ease;
}
.travel-image-box-x511.travel-image-show-x521 {
opacity: 1;
transform: translateX(0);
}
.travel-main-image-x512 {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1s ease;
}
.travel-image-box-x511:hover .travel-main-image-x512 {
transform: scale(1.08);
}
/* =========================================
IMAGE OVERLAY
========================================= */
.travel-image-overlay-x513 {
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(12, 29, 58, 0.55),
rgba(12, 29, 58, 0.35),
rgba(12, 29, 58, 0.55));
}
/* =========================================
OFFER CONTENT
========================================= */
.travel-offer-content-x514 {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 60px 25px;
color: #ffffff;
}
.travel-discover-text-x515 {
font-size: 42px;
line-height: 1;
margin-top: 10px;
margin-bottom: 20px;
}
.travel-limited-text-x516 {
font-size: 17px;
font-weight: 400;
margin-bottom: 15px;
}
.travel-discount-box-x517 {
display: flex;
align-items: baseline;
justify-content: center;
gap: 12px;
color: #ff7538;
margin-bottom: 20px;
}
.travel-discount-box-x517 img {
width: 200px;
height: auto;
}
.travel-experience-text-x518 {
font-size: 17px;
font-weight: 600;
margin-bottom: auto;
}
.travel-book-btn-x519 {
padding: 15px 35px;
text-align: center;
background: #ff6f32;
color: #ffffff;
text-decoration: none;
font-size: 20px;
font-weight: 600;
border-radius: 8px;
margin-bottom: 40px;
transition: all 0.4s ease;
}
.travel-book-btn-x519:hover {
background: #ffffff;
color: #1d3557;
transform: translateY(-6px);
}
/* =========================================
ANIMATION
========================================= */
.travel-feature-item-x508 {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease,
transform 0.6s ease,
color 0.3s ease;
}
.travel-feature-item-x508.travel-feature-show-x522 {
opacity: 1;
transform: translateY(0);
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 768px) {
.travel-why-section-x501 {
padding: 60px 20px;
}
.travel-why-container-x502 {
flex-direction: column;
gap: 30px;
}
.travel-why-content-x503 {
padding: 0;
}
.travel-why-subtitle-x504 {
font-size: 18px;
}
.travel-why-title-x505 {
font-size: 36px;
}
.travel-why-description-x506 {
font-size: 16px;
line-height: 1.8;
margin-bottom: 40px;
}
.travel-feature-list-x507 {
grid-template-columns: 1fr;
row-gap: 24px;
margin-bottom: 45px;
}
.travel-feature-item-x508 {
font-size: 16px;
}
.travel-contact-btn-x510 {
width: 100%;
padding: 16px 20px;
}
.travel-image-box-x511 {
width: 100%;
min-width: 100%;
height: 600px;
}
.travel-discover-text-x515 {
font-size: 42px;
}
.travel-limited-text-x516 {
font-size: 16px;
}
.travel-discount-box-x517 strong {
font-size: 85px;
}
.travel-discount-box-x517 span {
font-size: 25px;
}
.travel-experience-text-x518 {
font-size: 18px;
}
.travel-book-btn-x519 {
width: 230px;
}
}
/* =========================================
LARGE SCREEN
========================================= */
@media (min-width: 1440px) {
.travel-why-container-x502 {
max-width: 1600px;
}
.travel-why-title-x505 {
font-size: 58px;
}
.travel-why-content-x503 {
padding: 65px 0;
}
}
/* =====================================
TRAVEL COUNTER SECTION
===================================== */
.travel-counter-sec-a101 {
width: 100%;
min-height: 300px;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
margin-bottom: 40px;
display: flex;
align-items: center;
}
/* =====================================
DARK BLUE OVERLAY
===================================== */
.travel-counter-overlay-a102 {
position: absolute;
inset: 0;
background: rgba(10, 39, 76, 0.82);
z-index: 1;
}
/* =====================================
CONTAINER
===================================== */
.travel-counter-container-a103 {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 70px 25px;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
/* =====================================
COUNTER ITEM
===================================== */
.travel-counter-item-a104 {
text-align: center;
color: #ffffff;
position: relative;
opacity: 0;
transform: translateY(50px);
transition:
opacity 0.7s ease,
transform 0.7s ease;
}
.travel-counter-item-a104.travel-counter-show-a109 {
opacity: 1;
transform: translateY(0);
}
/* =====================================
ICON CIRCLE
===================================== */
.travel-counter-icon-wrap-a105 {
width: 150px;
height: 150px;
margin: 0 auto 35px;
border: 10px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.4s ease;
}
.travel-counter-icon-a106 {
width: 110px;
height: 110px;
border: 2px solid rgba(255, 255, 255, 0.70);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 45px;
color: #ffffff;
transition: all 0.4s ease;
}
/* =====================================
HOVER EFFECT
===================================== */
.travel-counter-item-a104:hover .travel-counter-icon-wrap-a105 {
transform: translateY(-8px) rotate(5deg);
border-color: rgba(255, 255, 255, 0.40);
}
.travel-counter-item-a104:hover .travel-counter-icon-a106 {
background: rgba(255, 255, 255, 0.12);
transform: scale(1.08);
}
/* =====================================
NUMBER
===================================== */
.travel-counter-number-a107 {
font-size: 40px;
font-weight: 700;
line-height: 1;
margin: 0 0 22px;
color: #ffffff;
}
/* =====================================
TITLE
===================================== */
.travel-counter-title-a108 {
font-size: 24px;
font-weight: 600;
margin: 0;
color: #ffffff;
}
/* =====================================
MOBILE RESPONSIVE
===================================== */
@media (max-width: 768px) {
.travel-counter-sec-a101 {
min-height: auto;
}
.travel-counter-container-a103 {
grid-template-columns: repeat(2, 1fr);
padding: 60px 20px;
gap: 50px 20px;
}
.travel-counter-icon-wrap-a105 {
width: 105px;
height: 105px;
border-width: 7px;
margin-bottom: 25px;
}
.travel-counter-icon-a106 {
width: 76px;
height: 76px;
font-size: 32px;
}
.travel-counter-number-a107 {
font-size: 42px;
margin-bottom: 15px;
}
.travel-counter-title-a108 {
font-size: 17px;
line-height: 1.4;
}
}
/* =====================================
LARGE SCREEN
===================================== */
@media (min-width: 1440px) {
.travel-counter-sec-a101 {
min-height: 550px;
}
.travel-counter-container-a103 {
max-width: 1800px;
padding-left: 50px;
padding-right: 50px;
}
.travel-counter-icon-wrap-a105 {
width: 160px;
height: 160px;
}
.travel-counter-icon-a106 {
width: 118px;
height: 118px;
}
}
/* =========================================
TOUR REVIEW SECTION
========================================= */
.travel-review-section-r501 {
width: 100%;
padding: 100px 20px;
background: #f7f8fb;
overflow: hidden;
}
.travel-review-container-r502 {
width: 100%;
max-width: 1300px;
margin: 0 auto;
}
/* =========================================
HEADING
========================================= */
.travel-review-heading-r503 {
max-width: 800px;
margin: 0 auto 60px;
text-align: center;
}
.travel-review-subtitle-r504 {
display: inline-block;
margin-bottom: 15px;
color: #e66c2c;
font-size: 25px;
font-weight: 700;
letter-spacing: 2px;
}
.travel-review-heading-r503 h2 {
margin: 0 0 18px;
color: #1d3557;
font-size: 40px;
font-weight: 700;
line-height: 1.2;
}
.travel-review-heading-r503 p {
margin: 0;
color: #6c7788;
font-size: 18px;
line-height: 1.7;
}
/* =========================================
SLIDER
========================================= */
.travel-review-slider-r505 {
width: 100%;
display: flex;
align-items: center;
gap: 20px;
position: relative;
}
/* =========================================
WINDOW
========================================= */
.travel-review-window-r507 {
width: 100%;
overflow: hidden;
cursor: grab;
}
.travel-review-window-r507:active {
cursor: grabbing;
}
/* =========================================
TRACK
========================================= */
.travel-review-track-r508 {
display: flex;
transition: transform 0.7s cubic-bezier(0.22,
0.61,
0.36,
1);
will-change: transform;
user-select: none;
}
/* =========================================
SLIDE
========================================= */
.travel-review-slide-r509 {
flex: 0 0 33.333%;
padding: 12px;
box-sizing: border-box;
}
/* =========================================
REVIEW CARD
========================================= */
.travel-review-card-r510 {
height: 100%;
padding: 35px;
background: #ffffff;
border-radius: 15px;
box-shadow:
0 15px 45px rgba(24, 48, 82, 0.10);
position: relative;
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
.travel-review-card-r510:hover {
transform: translateY(-10px);
box-shadow:
0 25px 55px rgba(24, 48, 82, 0.16);
}
/* =========================================
STARS
========================================= */
.travel-review-stars-r511 {
color: #f5a623;
font-size: 21px;
letter-spacing: 3px;
margin-bottom: 22px;
}
/* =========================================
REVIEW TEXT
========================================= */
.travel-review-text-r512 {
color: #657084;
font-size: 16px;
line-height: 1.8;
margin: 0 0 30px;
}
/* =========================================
USER
========================================= */
.travel-review-user-r513 {
display: flex;
align-items: center;
gap: 14px;
padding-top: 20px;
border-top:
1px solid #edf0f5;
}
.travel-review-avatar-r514 {
width: 55px;
height: 55px;
min-width: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e66c2c;
color: #ffffff;
font-size: 21px;
font-weight: 700;
}
.travel-review-user-r513 h4 {
margin: 0 0 5px;
color: #1d3557;
font-size: 17px;
}
.travel-review-user-r513 span {
color: #8a94a3;
font-size: 14px;
}
/* =========================================
ARROWS
========================================= */
.travel-review-prev-r506,
.travel-review-next-r515 {
width: 52px;
height: 52px;
min-width: 52px;
border: none;
border-radius: 50%;
background: #ffffff;
color: #1d3557;
font-size: 28px;
cursor: pointer;
box-shadow:
0 8px 25px rgba(20, 40, 70, 0.12);
transition: all 0.3s ease;
}
.travel-review-prev-r506:hover,
.travel-review-next-r515:hover {
background: #e66c2c;
color: #ffffff;
transform: scale(1.08);
}
/* =========================================
DOTS
========================================= */
.travel-review-dots-r516 {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 35px;
}
.travel-review-dot-r517 {
width: 9px;
height: 9px;
border: none;
border-radius: 50%;
background: #c5cad3;
cursor: pointer;
padding: 0;
transition: all 0.3s ease;
}
.travel-review-dot-r517.travel-review-dot-active-r518 {
width: 28px;
border-radius: 20px;
background: #e66c2c;
}
/* =========================================
MOBILE RESPONSIVE
========================================= */
@media (max-width: 768px) {
.travel-review-section-r501 {
padding: 70px 15px;
}
.travel-review-heading-r503 {
margin-bottom: 40px;
}
.travel-review-heading-r503 h2 {
font-size: 34px;
}
.travel-review-heading-r503 p {
font-size: 16px;
}
.travel-review-subtitle-r504 {
font-size: 14px;
}
.travel-review-slider-r505 {
gap: 8px;
}
.travel-review-slide-r509 {
flex: 0 0 100%;
padding: 8px;
}
.travel-review-card-r510 {
padding: 28px 22px;
}
.travel-review-prev-r506,
.travel-review-next-r515 {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 22px;
}
}
/* =========================================
LARGE SCREEN
========================================= */
@media (min-width: 1440px) {
.travel-review-container-r502 {
max-width: 1500px;
}
.travel-review-heading-r503 h2 {
font-size: 54px;
}
.travel-review-card-r510 {
padding: 42px;
}
}
/* =========================================
TOUR & TRAVEL FOOTER
========================================= */
.travel-footer-z101 {
width: 100%;
background: #000000;
color: #ffffff;
overflow: hidden;
}
/* =========================================
TOP AREA
========================================= */
.travel-footer-top-z102 {
max-width: 1400px;
margin: 0 auto;
padding: 80px 30px 60px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 55px;
}
/* =========================================
COLUMN ANIMATION
========================================= */
.travel-footer-column-z103 {
opacity: 0;
transform: translateY(45px);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
.travel-footer-column-z103.travel-footer-show-z120 {
opacity: 1;
transform: translateY(0);
}
/* =========================================
ABOUT TEXT
========================================= */
.travel-footer-about-z106 {
max-width: 340px;
color: rgba(255, 255, 255, 0.70);
font-size: 16px;
line-height: 1.8;
margin: 0 0 28px;
}
/* =========================================
SOCIAL ICONS
========================================= */
.travel-footer-social-z107 {
display: flex;
gap: 12px;
}
.travel-footer-social-z107 a {
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #ffffff;
font-size: 18px;
transition: all 0.35s ease;
}
.travel-footer-social-z107 a i {
display: none;
}
.travel-footer-social-z107 a:hover {
background: #f47a3c;
border-color: #f47a3c;
transform: translateY(-6px) rotate(8deg);
}
/* =========================================
FOOTER HEADINGS
========================================= */
.travel-footer-heading-z108 {
position: relative;
font-size: 20px;
font-weight: 600;
margin: 8px 0 28px;
padding-bottom: 14px;
}
.travel-footer-heading-z108::after {
content: "";
width: 45px;
height: 2px;
background: #f47a3c;
position: absolute;
left: 0;
bottom: 0;
}
/* =========================================
LINKS
========================================= */
.travel-footer-links-z109 {
padding: 0;
margin: 0;
list-style: none;
}
.travel-footer-links-z109 li {
margin-bottom: 14px;
}
.travel-footer-links-z109 a {
position: relative;
color: rgba(255, 255, 255, 0.68);
font-size: 15px;
text-decoration: none;
transition: all 0.3s ease;
}
.travel-footer-links-z109 a::before {
content: "→";
opacity: 0;
margin-right: 0;
color: #f47a3c;
transition: all 0.3s ease;
}
.travel-footer-links-z109 a:hover {
color: #ffffff;
}
.travel-footer-links-z109 a:hover::before {
opacity: 1;
margin-right: 8px;
}
/* =========================================
CONTACT
========================================= */
.travel-footer-contact-item-z111 {
display: flex;
align-items: flex-start;
gap: 13px;
margin-bottom: 20px;
}
.travel-footer-contact-icon-z112 {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background: rgba(244, 122, 60, 0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.travel-footer-contact-item-z111 p {
margin: 7px 0 0;
color: rgba(255, 255, 255, 0.68);
font-size: 13px;
line-height: 1.5;
}
/* =========================================
NEWSLETTER
========================================= */
.travel-footer-newsletter-z113 {
max-width: 1340px;
margin: 0 auto;
padding: 35px 40px;
background: #f47a3c;
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
position: relative;
opacity: 0;
transform: translateY(50px);
transition: all 0.9s ease;
}
.travel-footer-newsletter-z113.travel-newsletter-show-z121 {
opacity: 1;
transform: translateY(0);
}
.travel-footer-newsletter-text-z114 span {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 8px;
}
.travel-footer-newsletter-text-z114 h2 {
margin: 0;
font-size: 27px;
font-weight: 600;
}
/* =========================================
FORM
========================================= */
.travel-footer-form-z115 {
display: flex;
width: 100%;
max-width: 480px;
}
.travel-footer-form-z115 input {
width: 100%;
height: 54px;
border: none;
outline: none;
padding: 0 18px;
font-size: 15px;
color: #1d3557;
}
.travel-footer-form-z115 button {
border: none;
min-width: 135px;
background: #11233d;
color: #ffffff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.travel-footer-form-z115 button:hover {
background: #ffffff;
color: #11233d;
}
/* =========================================
BOTTOM
========================================= */
.travel-footer-bottom-z118 {
max-width: 1400px;
margin: 0 auto;
padding: 28px 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.travel-footer-bottom-z118 p {
margin: 0;
color: rgba(255, 255, 255, 0.55);
font-size: 14px;
}
.travel-footer-bottom-links-z119 {
display: flex;
gap: 25px;
}
.travel-footer-bottom-links-z119 a {
color: rgba(255, 255, 255, 0.55);
font-size: 14px;
text-decoration: none;
transition: 0.3s ease;
}
.travel-footer-bottom-links-z119 a:hover {
color: #f47a3c;
}
/* =========================================
MOBILE RESPONSIVE
========================================= */
@media (max-width: 768px) {
.travel-footer-top-z102 {
grid-template-columns: 1fr;
padding: 60px 20px 45px;
gap: 35px;
}
.travel-footer-newsletter-z113 {
margin: 0 20px;
padding: 30px 20px;
flex-direction: column;
align-items: flex-start;
}
.travel-footer-newsletter-text-z114 h2 {
font-size: 23px;
}
.travel-footer-form-z115 {
max-width: 100%;
flex-direction: column;
gap: 10px;
}
.travel-footer-form-z115 input {
height: 52px;
}
.travel-footer-form-z115 button {
width: 100%;
min-height: 52px;
}
.travel-footer-bottom-z118 {
padding: 25px 20px;
flex-direction: column;
text-align: center;
}
}
/* =========================================
LARGE SCREEN
========================================= */
@media (min-width: 1440px) {
.travel-footer-top-z102 {
max-width: 1600px;
padding-top: 95px;
padding-bottom: 70px;
}
.travel-footer-newsletter-z113 {
max-width: 1500px;
padding: 42px 55px;
}
.travel-footer-bottom-z118 {
max-width: 1600px;
}
}
/* about page banner css */
/* =====================================
ABOUT PAGE BANNER
===================================== */
.about-banner-x11 {
width: 100%;
min-height: 300px;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
background-size: cover;
background-position: center;
isolation: isolate;
}
/* =====================================
DARK OVERLAY
===================================== */
.about-overlay-x12 {
position: absolute;
inset: 0;
background:
linear-gradient(90deg,
rgba(5, 20, 30, 0.78),
rgba(5, 15, 25, 0.60),
rgba(0, 0, 0, 0.45));
z-index: -1;
}
/* =====================================
CONTENT
===================================== */
.about-content-x13 {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 80px 5%;
color: #ffffff;
}
/* =====================================
TITLE
===================================== */
.about-title-x14 {
margin: 0 0 38px;
font-size: 40px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -2px;
opacity: 0;
transform: translateY(50px);
animation: aboutTitleAnimation-x19 1s ease forwards;
}
@keyframes aboutTitleAnimation-x19 {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* =====================================
BREADCRUMB
===================================== */
.about-breadcrumb-x15 {
display: flex;
align-items: center;
gap: 25px;
opacity: 0;
transform: translateX(-50px);
animation: aboutBreadAnimation-x20 1s ease forwards;
animation-delay: 0.4s;
}
@keyframes aboutBreadAnimation-x20 {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* =====================================
HOME LINK
===================================== */
.about-home-x16 {
color: #ffffff;
text-decoration: none;
font-size: 18px;
font-weight: 400;
transition: 0.3s ease;
}
.about-home-x16:hover {
color: #e6e6e6;
transform: translateX(5px);
}
/* =====================================
ARROW CIRCLE
===================================== */
.about-arrow-circle-x17 {
width: 56px;
height: 56px;
border: 2px solid rgba(255, 255, 255, 0.85);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 28px;
line-height: 1;
transition: 0.4s ease;
}
.about-arrow-circle-x17:hover {
background: #ffffff;
color: #15283a;
transform: rotate(360deg);
}
/* =====================================
CURRENT PAGE
===================================== */
.about-current-x18 {
color: #ffffff;
font-size: 18px;
font-weight: 400;
}
/* =====================================
BACKGROUND ZOOM ANIMATION
===================================== */
.about-banner-x11::before {
content: "";
position: absolute;
inset: -20px;
background-image: inherit;
background-size: cover;
background-position: center;
z-index: -2;
animation: aboutBackgroundZoom-x21 12s ease-in-out infinite alternate;
}
@keyframes aboutBackgroundZoom-x21 {
0% {
transform: scale(1);
}
100% {
transform: scale(1.08);
}
}
/* =====================================
MOBILE RESPONSIVE
===================================== */
@media (max-width: 768px) {
.about-banner-x11 {
min-height: 380px;
background-position: center;
}
.about-content-x13 {
padding: 60px 25px;
}
.about-title-x14 {
font-size: 50px;
margin-bottom: 28px;
letter-spacing: -1px;
}
.about-breadcrumb-x15 {
gap: 15px;
}
.about-home-x16,
.about-current-x18 {
font-size: 20px;
}
.about-arrow-circle-x17 {
width: 55px;
height: 55px;
font-size: 28px;
}
}
/* =====================================
LARGE SCREEN 1440px+
===================================== */
@media (min-width: 1440px) {
.about-banner-x11 {
min-height: 500px;
}
.about-content-x13 {
max-width: 1700px;
padding-left: 6%;
padding-right: 6%;
}
.about-title-x14 {
font-size: 84px;
}
}
/* =========================================
ABOUT COMPANY SECTION
========================================= */
.travel-about-section {
width: 100%;
padding: 20px 20px;
background: #f7f7f5;
overflow: hidden;
}
.travel-about-container {
max-width: 1450px;
width: 100%;
margin: auto;
display: flex;
align-items: center;
gap: 80px;
}
/* =========================================
LEFT IMAGE SIDE
========================================= */
.travel-about-image-side {
min-height: 650px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* MAIN IMAGE */
.travel-main-image {
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
animation: travelImageFloat 4s ease-in-out infinite;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.travel-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.travel-main-image:hover img {
transform: scale(1.08);
}
/* SMALL IMAGE */
.travel-small-image {
width: 250px;
height: 250px;
position: absolute;
top: 0;
left: -20px;
border-radius: 50%;
overflow: hidden;
border: 12px solid #f7f7f5;
z-index: 2;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
animation: travelSmallFloat 5s ease-in-out infinite;
}
.travel-small-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.travel-small-image:hover img {
transform: scale(1.08);
}
/* =========================================
RIGHT CONTENT
========================================= */
.travel-about-content {
width: 54%;
animation: travelContentShow 1s ease forwards;
}
.travel-about-subtitle {
display: block;
font-size: 20px;
font-weight: 600;
color: #e36b32;
margin-bottom: 18px;
letter-spacing: 0.5px;
}
.travel-about-content h2 {
font-size: 32px;
line-height: 1.25;
font-weight: 700;
color: #1e3556;
margin: 0 0 35px;
}
.travel-about-content p {
font-size: 19px;
line-height: 1.7;
color: #647181;
margin-bottom: 18px;
max-width: 850px;
}
/* =========================================
COUNTER AREA
========================================= */
.travel-about-counter-box {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
margin-top: 55px;
}
.travel-about-counter-item {
flex: 1;
}
.travel-about-counter-item h3 {
margin: 0 0 5px;
font-size: 36px;
line-height: 1;
font-weight: 700;
color: #1e3556;
}
.travel-about-counter-item p {
margin: 0;
font-size: 18px;
line-height: 1.35;
font-weight: 600;
color: #1e3556;
}
/* =========================================
ANIMATIONS
========================================= */
@keyframes travelImageFloat {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-12px);
}
100% {
transform: translateY(0px);
}
}
@keyframes travelSmallFloat {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}
@keyframes travelContentShow {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* =========================================
MIN WIDTH 1440PX
========================================= */
@media (min-width: 1440px) {
.travel-about-section {
padding: 40px 30px;
}
.travel-about-container {
max-width: 1650px;
gap: 100px;
}
.travel-main-image {
width: 680px;
height: 680px;
}
.travel-small-image {
width: 420px;
height: 420px;
}
.travel-about-content h2 {
font-size: 58px;
}
.travel-about-content p {
font-size: 20px;
}
}
/* =========================================
MAX WIDTH 768PX
========================================= */
@media (max-width: 768px) {
.travel-about-section {
padding: 60px 15px;
}
.travel-about-container {
flex-direction: column;
gap: 50px;
}
/* LEFT SIDE */
.travel-about-image-side {
width: 100%;
min-height: 480px;
}
.travel-main-image {
width: 90%;
height: 430px;
margin-top: 50px;
}
.travel-small-image {
width: 210px;
height: 210px;
top: 0;
left: 0;
border-width: 8px;
}
/* RIGHT SIDE */
.travel-about-content {
width: 100%;
}
.travel-about-subtitle {
font-size: 17px;
margin-bottom: 12px;
}
.travel-about-content h2 {
font-size: 34px;
line-height: 1.25;
margin-bottom: 22px;
}
.travel-about-content h2 br {
display: none;
}
.travel-about-content p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 20px;
}
/* COUNTERS */
.travel-about-counter-box {
margin-top: 35px;
gap: 20px;
flex-wrap: wrap;
}
.travel-about-counter-item {
min-width: 30%;
}
.travel-about-counter-item h3 {
font-size: 48px;
}
.travel-about-counter-item p {
font-size: 15px;
}
}
/* contact css */
/* =====================================
CONTACT SECTION
===================================== */
.contact-travel-section {
width: 100%;
padding: 90px 20px;
background: #f6f7f9;
overflow: hidden;
box-sizing: border-box;
}
/* =====================================
CONTAINER
===================================== */
.contact-travel-container {
width: 100%;
max-width: 1300px;
margin: auto;
display: flex;
align-items: center;
gap: 70px;
box-sizing: border-box;
}
/* =====================================
LEFT SIDE
===================================== */
.contact-travel-info {
width: 45%;
animation: contactLeftAnimation 1s ease forwards;
box-sizing: border-box;
}
.contact-travel-tag {
display: inline-block;
font-size: 15px;
font-weight: 700;
letter-spacing: 2px;
color: #e96b32;
margin-bottom: 15px;
}
.contact-travel-info h2 {
margin: 0 0 25px;
font-size: 50px;
line-height: 1.2;
color: #1d3557;
}
.contact-travel-info h2 span {
color: #e96b32;
}
.contact-travel-info > p {
margin: 0 0 35px;
font-size: 17px;
line-height: 1.8;
color: #647181;
}
/* =====================================
CONTACT DETAILS
===================================== */
.contact-travel-details {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-detail-item {
display: flex;
align-items: center;
gap: 18px;
padding: 16px;
background: #ffffff;
border-radius: 12px;
transition: 0.4s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
}
.contact-detail-item:hover {
transform: translateX(10px);
}
.contact-detail-icon {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 22px;
background: #fff1ea;
border-radius: 50%;
}
.contact-detail-item h4 {
margin: 0 0 5px;
font-size: 17px;
color: #1d3557;
}
.contact-detail-item p {
margin: 0;
font-size: 14px;
color: #647181;
}
/* =====================================
FORM BOX
===================================== */
.contact-travel-form-box {
width: 55%;
padding: 45px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(20, 40, 70, 0.1);
animation: contactRightAnimation 1s ease forwards;
box-sizing: border-box;
min-width: 0;
}
/* IMPORTANT FORM FIX */
.contact-travel-form-box *,
.contact-travel-form-box {
box-sizing: border-box;
}
/* =====================================
FORM HORIZONTAL LAYOUT
===================================== */
.contact-travel-form-box form {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 18px;
row-gap: 0;
}
/* FULL WIDTH FIELDS */
.contact-travel-form-box form > .contact-input-group:nth-child(3),
.contact-travel-form-box form > .contact-input-group:nth-child(8),
.contact-travel-form-box form > .contact-send-button {
grid-column: 1 / -1;
}
/* =====================================
FORM HEADING
===================================== */
.contact-form-heading {
margin-bottom: 30px;
}
.contact-form-heading h3 {
margin: 0 0 8px;
font-size: 30px;
color: #1d3557;
}
.contact-form-heading p {
margin: 0;
font-size: 15px;
color: #6d7785;
}
/* =====================================
INPUTS
===================================== */
.contact-input-group {
width: 100%;
margin-bottom: 20px;
}
.contact-input-group label,
.tl-trip-field44 > label {
display: block;
margin-bottom: 8px;
font-size: 15px;
font-weight: 600;
color: #1d3557;
}
.contact-input-group input,
.contact-input-group textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid #e1e5ea;
border-radius: 10px;
outline: none;
font-family: inherit;
font-size: 15px;
color: #1d3557;
transition: 0.3s ease;
box-sizing: border-box;
}
.contact-input-group textarea {
resize: none;
}
.contact-input-group input:focus,
.contact-input-group textarea:focus {
border-color: #e96b32;
box-shadow: 0 0 0 4px rgba(233, 107, 50, 0.1);
}
/* =====================================
DOMESTIC / INTERNATIONAL FIELD
===================================== */
.tl-trip-field44 {
width: 100%;
margin-bottom: 20px;
position: relative;
}
.tl-custom-select55 {
position: relative;
width: 100%;
box-sizing: border-box;
}
/* =====================================
SELECT BUTTON
===================================== */
.tl-select-button66 {
position: relative;
width: 100%;
height: 52px;
padding: 0 48px 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #e1e5ea;
border-radius: 10px;
background: #ffffff;
color: #1d3557;
font-family: inherit;
font-size: 15px;
cursor: pointer;
outline: none;
text-align: left;
transition: 0.3s ease;
box-sizing: border-box;
}
.tl-select-button66:hover {
border-color: #e96b32;
}
.tl-custom-select55.tl-select-open-x123
.tl-select-button66 {
border-color: #e96b32;
box-shadow: 0 0 0 4px rgba(233, 107, 50, 0.1);
}
/* =====================================
SELECT TEXT
===================================== */
.tl-select-text77 {
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #647181;
}
/* =====================================
SELECT ARROW
===================================== */
.tl-select-arrow88 {
position: absolute;
right: 18px;
top: 50%;
width: 9px;
height: 9px;
border-right: 2px solid #1d3557;
border-bottom: 2px solid #1d3557;
transform: translateY(-65%) rotate(45deg);
transition: 0.3s ease;
pointer-events: none;
}
.tl-custom-select55.tl-select-open-x123
.tl-select-arrow88 {
transform: translateY(-25%) rotate(225deg);
}
/* =====================================
DROPDOWN
===================================== */
.tl-select-dropdown99 {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
width: 100%;
max-height: 220px;
overflow-y: auto;
padding: 6px 0;
background: #ffffff;
border: 1px solid #e1e5ea;
border-radius: 10px;
box-shadow: 0 15px 35px rgba(20, 40, 70, 0.15);
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.25s ease;
pointer-events: none;
}
.tl-custom-select55.tl-select-open-x123
.tl-select-dropdown99 {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* =====================================
DROPDOWN OPTIONS
===================================== */
.tl-option100 {
width: 100%;
padding: 12px 16px;
background: #ffffff;
color: #1d3557;
font-size: 15px;
line-height: 1.4;
cursor: pointer;
transition: 0.25s ease;
box-sizing: border-box;
}
.tl-option100:hover {
background: #fff1ea;
color: #e96b32;
}
/* =====================================
HIDDEN VALUE
===================================== */
.tl-hidden-value101 {
display: none !important;
}
/* =====================================
DATE FIELD
===================================== */
.tl-date-wrapper102 {
position: relative;
width: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
}
.tl-date-display103 {
width: 100%;
height: 52px;
padding: 0 16px;
border: 1px solid #e1e5ea;
border-radius: 10px;
background: #ffffff;
color: #1d3557;
font-family: inherit;
font-size: 15px;
outline: none;
cursor: pointer;
box-sizing: border-box;
transition: 0.3s ease;
}
.tl-date-display103:focus {
border-color: #e96b32;
box-shadow: 0 0 0 4px rgba(233, 107, 50, 0.1);
}
/* =====================================
REAL DATE PICKER
===================================== */
.tl-hidden-date105 {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
left: 50%;
top: 50%;
}
/* =====================================
SEND BUTTON
===================================== */
.contact-send-button {
width: 100%;
padding: 15px 20px;
margin-top: 0;
border: none;
border-radius: 10px;
background: #e96b32;
color: #ffffff;
font-size: 17px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: 0.4s ease;
box-sizing: border-box;
}
.contact-send-button:hover {
transform: translateY(-4px);
background: #1d3557;
box-shadow: 0 12px 25px rgba(29, 53, 87, 0.2);
}
.contact-send-arrow {
font-size: 22px;
transition: 0.3s ease;
}
.contact-send-button:hover .contact-send-arrow {
transform: translateX(6px);
}
/* =====================================
ANIMATIONS
===================================== */
@keyframes contactLeftAnimation {
from {
opacity: 0;
transform: translateX(-60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes contactRightAnimation {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* =====================================
MIN WIDTH 1440PX
===================================== */
@media (min-width: 1440px) {
.contact-travel-container {
max-width: 1500px;
gap: 100px;
}
.contact-travel-section {
padding: 110px 30px;
}
.contact-travel-info h2 {
font-size: 58px;
}
.contact-travel-form-box {
padding: 55px;
}
}
/* =====================================
MAX WIDTH 768PX
===================================== */
@media (max-width: 768px) {
.contact-travel-section {
padding: 60px 15px;
}
.contact-travel-container {
flex-direction: column;
gap: 40px;
}
.contact-travel-info,
.contact-travel-form-box {
width: 100%;
}
.contact-travel-info h2 {
font-size: 35px;
}
.contact-travel-info > p {
font-size: 15px;
}
.contact-travel-form-box {
padding: 25px 20px;
border-radius: 15px;
}
.contact-form-heading h3 {
font-size: 25px;
}
/* MOBILE SINGLE COLUMN */
.contact-travel-form-box form {
grid-template-columns: 1fr;
column-gap: 0;
}
.contact-travel-form-box form > .contact-input-group:nth-child(3),
.contact-travel-form-box form > .contact-input-group:nth-child(8),
.contact-travel-form-box form > .contact-send-button {
grid-column: auto;
}
.contact-detail-item:hover {
transform: translateX(0);
}
.tl-select-button66,
.tl-date-display103 {
height: 50px;
}
.tl-select-dropdown99 {
max-height: 200px;
}
}
/* veitnam css */
/* =========================================
GLOBAL CONTAINER
========================================= */
.vietnam-main-container-b2 {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* =========================================
HERO SECTION
========================================= */
.vietnam-tour-hero-a1 {
width: 100%;
min-height: 500px;
position: relative;
display: flex;
align-items: flex-end;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.vietnam-tour-overlay-a2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.vietnam-tour-hero-inner-a3 {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 100px 20px 90px;
position: relative;
z-index: 2;
box-sizing: border-box;
}
.vietnam-tour-hero-content-a4 {
max-width: 760px;
color: #000000;
animation: vietnamHeroAnimation 1.2s ease forwards;
}
.vietnam-tour-label-a5 {
display: inline-block;
padding: 10px 18px;
border-radius: 30px;
background: #e96d35;
color: #ffffff;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 20px;
}
.vietnam-tour-hero-content-a4 h1 {
margin: 0 0 20px;
font-size: 75px;
line-height: 1;
font-weight: 800;
letter-spacing: 2px;
}
.vietnam-tour-description-a6 {
max-width: 650px;
margin: 0 0 30px;
font-size: 19px;
line-height: 1.7;
color: rgba(0, 0, 0, 0.88);
}
.vietnam-tour-information-a7 {
display: flex;
flex-direction: column;
gap: 15px;
}
.vietnam-tour-info-item-a8 {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
color: #000000;
}
.vietnam-tour-info-item-a8 p {
margin: 0;
}
.vietnam-tour-icon-a9 {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
}
/* =========================================
ITINERARY SECTION
========================================= */
.vietnam-itinerary-section-b1 {
padding: 100px 0;
background: #f7f8fa;
}
.vietnam-section-heading-b3 {
text-align: center;
max-width: 700px;
margin: 0 auto 70px;
}
.vietnam-section-heading-b3>span {
display: inline-block;
color: #e96d35;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 15px;
}
.vietnam-section-heading-b3 h2 {
margin: 0 0 15px;
font-size: 46px;
color: #183153;
}
.vietnam-section-heading-b3 p {
margin: 0;
font-size: 18px;
color: #6d7885;
}
/* =========================================
ITINERARY LIST
========================================= */
.vietnam-itinerary-list-b4 {
display: flex;
flex-direction: column;
gap: 25px;
position: relative;
}
.vietnam-day-box-b5 {
width: 100%;
display: flex;
gap: 35px;
padding: 35px;
box-sizing: border-box;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 10px 35px rgba(20, 40, 70, 0.07);
transition: 0.4s ease;
border-left: 4px solid transparent;
}
.vietnam-day-box-b5:hover {
transform: translateY(-6px);
border-left-color: #e96d35;
box-shadow: 0 20px 45px rgba(20, 40, 70, 0.12);
}
.vietnam-day-count-b6 {
min-width: 85px;
height: 85px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #183153;
color: #ffffff;
font-size: 26px;
font-weight: 800;
}
.vietnam-day-details-b7 {
flex: 1;
}
.vietnam-day-label-b8 {
display: inline-block;
color: #e96d35;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 8px;
}
.vietnam-day-details-b7 h3 {
margin: 0 0 20px;
font-size: 27px;
color: #183153;
}
/* =========================================
DAY POINTS
========================================= */
.vietnam-day-points-b9 {
margin-bottom: 20px;
}
.vietnam-day-points-b9 p {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 12px;
font-size: 16px;
line-height: 1.6;
color: #657180;
}
.vietnam-day-points-b9 p span {
color: #e96d35;
font-weight: 700;
}
/* =========================================
TAGS
========================================= */
.vietnam-day-tags-b10 {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.vietnam-day-tags-b10 span {
padding: 8px 14px;
background: #fff2eb;
color: #d85f28;
border-radius: 30px;
font-size: 13px;
font-weight: 600;
transition: 0.3s ease;
}
.vietnam-day-tags-b10 span:hover {
background: #e96d35;
color: #ffffff;
}
/* =========================================
PACKAGE SUMMARY
========================================= */
.vietnam-package-summary-c1 {
padding: 80px 0 100px;
background: #ffffff;
}
.vietnam-summary-wrapper-c2 {
display: flex;
align-items: stretch;
gap: 30px;
}
/* SUMMARY CARD */
.vietnam-summary-card-c3 {
width: 70%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 35px;
background: #f7f8fa;
border-radius: 20px;
box-sizing: border-box;
}
.vietnam-summary-item-c4 {
padding: 20px;
background: #ffffff;
border-radius: 14px;
border: 1px solid #edf0f3;
transition: 0.3s ease;
}
.vietnam-summary-item-c4:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(20, 40, 70, 0.08);
}
.vietnam-summary-item-c4 span {
display: block;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #e96d35;
}
.vietnam-summary-item-c4 strong {
font-size: 18px;
line-height: 1.4;
color: #183153;
}
/* =========================================
PRICE CARD
========================================= */
.vietnam-price-card-c5 {
width: 30%;
padding: 40px 30px;
background: #183153;
border-radius: 20px;
color: #ffffff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
transition: 0.4s ease;
}
.vietnam-price-card-c5:hover {
transform: translateY(-8px);
}
.vietnam-price-card-c5 small {
font-size: 14px;
color: rgba(255, 255, 255, 0.65);
margin-bottom: 10px;
}
.vietnam-price-card-c5 h3 {
margin: 0;
font-size: 45px;
color: #ffffff;
}
.vietnam-price-card-c5>span {
margin: 8px 0 30px;
color: rgba(255, 255, 255, 0.70);
font-size: 14px;
}
/* BUTTON */
.vietnam-enquire-button-c6 {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 20px;
background: #e96d35;
color: #ffffff;
text-decoration: none;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
transition: 0.3s ease;
}
.vietnam-enquire-button-c6:hover {
background: #ffffff;
color: #183153;
}
.vietnam-enquire-button-c6 b {
font-size: 22px;
transition: 0.3s ease;
}
.vietnam-enquire-button-c6:hover b {
transform: translateX(5px);
}
/* =========================================
REVEAL ANIMATION
========================================= */
.vietnam-reveal-animation {
opacity: 0;
transform: translateY(50px);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
.vietnam-reveal-animation.vietnam-show-animation {
opacity: 1;
transform: translateY(0);
}
/* HERO ANIMATION */
@keyframes vietnamHeroAnimation {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================================
MIN WIDTH 1440PX
========================================= */
@media (min-width: 1440px) {
.vietnam-main-container-b2 {
max-width: 1450px;
}
.vietnam-tour-hero-inner-a3 {
max-width: 1450px;
}
.vietnam-tour-hero-a1 {
min-height: 750px;
}
.vietnam-tour-hero-content-a4 h1 {
font-size: 90px;
}
.vietnam-section-heading-b3 h2 {
font-size: 54px;
}
.vietnam-day-box-b5 {
padding: 45px;
}
}
/* =========================================
MAX WIDTH 768PX
========================================= */
@media (max-width: 768px) {
.vietnam-main-container-b2 {
padding: 0 15px;
}
/* HERO */
.vietnam-tour-hero-a1 {
min-height: 600px;
background-position: center;
}
.vietnam-tour-hero-inner-a3 {
padding: 80px 20px 60px;
}
.vietnam-tour-overlay-a2 {
background: rgba(255, 255, 255, 0.75);
}
.vietnam-tour-label-a5 {
font-size: 11px;
padding: 9px 14px;
}
.vietnam-tour-hero-content-a4 h1 {
font-size: 50px;
}
.vietnam-tour-description-a6 {
font-size: 16px;
}
.vietnam-tour-info-item-a8 {
align-items: flex-start;
font-size: 14px;
}
/* ITINERARY */
.vietnam-itinerary-section-b1 {
padding: 65px 0;
}
.vietnam-section-heading-b3 {
margin-bottom: 45px;
}
.vietnam-section-heading-b3 h2 {
font-size: 32px;
}
.vietnam-section-heading-b3 p {
font-size: 15px;
}
.vietnam-day-box-b5 {
flex-direction: column;
gap: 20px;
padding: 25px 20px;
}
.vietnam-day-count-b6 {
min-width: 65px;
width: 65px;
height: 65px;
font-size: 20px;
}
.vietnam-day-details-b7 h3 {
font-size: 23px;
}
.vietnam-day-points-b9 p {
font-size: 14px;
}
/* SUMMARY */
.vietnam-package-summary-c1 {
padding: 50px 0 70px;
}
.vietnam-summary-wrapper-c2 {
flex-direction: column;
}
.vietnam-summary-card-c3 {
width: 100%;
grid-template-columns: 1fr;
padding: 20px;
}
.vietnam-price-card-c5 {
width: 100%;
padding: 40px 25px;
}
}
/* =========================================
LEFT CALL BUTTON
========================================= */
.cc-side-call-101 {
position: fixed;
left: 20px;
bottom: 5%;
transform: translateY(-50%);
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
background: #e98a08;
color: #ffffff;
border-radius: 50%;
text-decoration: none;
z-index: 99999;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.30);
animation: cc-call-animation-303 2.5s infinite;
transition: all 0.3s ease;
}
/* =========================================
RIGHT WHATSAPP BUTTON
========================================= */
.cc-side-whatsapp-202 {
position: fixed;
right: 20px;
bottom: 5%;
transform: translateY(-50%);
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
background: #25D366;
color: #ffffff;
border-radius: 50%;
text-decoration: none;
z-index: 99999;
box-shadow: 0 5px 20px rgba(37, 211, 102, 0.35);
animation: cc-whatsapp-animation-404 2.5s infinite;
transition: all 0.3s ease;
}
/* ICON SIZE */
.cc-side-call-101 i {
font-size: 21px;
}
.cc-side-whatsapp-202 i {
font-size: 28px;
}
/* =========================================
HOVER
========================================= */
.cc-side-call-101:hover,
.cc-side-whatsapp-202:hover {
transform: translateY(-50%) scale(1.12);
}
/* =========================================
CALL ANIMATION
========================================= */
@keyframes cc-call-animation-303 {
0% {
transform: translateY(-50%) scale(1);
}
10% {
transform: translateY(-50%) scale(1.10);
}
20% {
transform: translateY(-50%) scale(1);
}
30% {
transform: translateY(-50%) scale(1.07);
}
40% {
transform: translateY(-50%) scale(1);
}
100% {
transform: translateY(-50%) scale(1);
}
}
/* =========================================
WHATSAPP ANIMATION
========================================= */
@keyframes cc-whatsapp-animation-404 {
0% {
transform: translateY(-50%) scale(1);
}
10% {
transform: translateY(-50%) scale(1.10);
}
20% {
transform: translateY(-50%) scale(1);
}
30% {
transform: translateY(-50%) scale(1.07);
}
40% {
transform: translateY(-50%) scale(1);
}
100% {
transform: translateY(-50%) scale(1);
}
}
/* =========================================
MOBILE - MAX 768px
========================================= */
@media (max-width: 768px) {
.cc-side-call-101 {
left: 10px;
width: 45px;
height: 45px;
}
.cc-side-whatsapp-202 {
right: 10px;
width: 45px;
height: 45px;
}
.cc-side-call-101 i {
font-size: 18px;
}
.cc-side-whatsapp-202 i {
font-size: 23px;
}
}
/* =========================================
LARGE SCREEN - MIN 1440px
========================================= */
@media (min-width: 1440px) {
.cc-side-call-101 {
left: 28px;
width: 60px;
height: 60px;
}
.cc-side-whatsapp-202 {
right: 28px;
width: 60px;
height: 60px;
}
.cc-side-call-101 i {
font-size: 23px;
}
.cc-side-whatsapp-202 i {
font-size: 30px;
}
}