/*==========================
Google Fonts
==========================*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Oswald:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&family=Libertinus+Math&display=swap');
/* */
*{
margin:0;
/* padding:0; */
box-sizing:border-box;
}
html{ scroll-behavior:smooth;}
body{ font-family: 'Lato', sans-serif; overflow-x:hidden; line-height: 1.7; /* background:#322720; */ font-family: 'Barlow', sans-serif; ; }
a{ text-decoration:none;}
ul{ list-style:none;}
h1,h2,h3,h4,h5,h6{font-family: 'Lato', sans-serif; font-family: "Libertinus Math", system-ui;margin:10px 0;}
h1{}h2{font-size:25px;}h3{font-size:22px;}h4{}
.f35{font-size:35px;} .cwhite{color:#fff;}
/*==========================
HEADER
==========================*/
header{ position:fixed; top:0; left:0; width:100%; padding:15px 80px; display:flex; justify-content:space-between; align-items:center;
z-index:999; transition:.4s; background: white;}
.logo{ display: flex; align-items: center;}
.logo img{ height: 55px; /* Zarurat ke hisab se 45-70px kar sakte ho */ width: auto; display: block;}
nav ul{ display:flex; gap:45px; font-family: 'Barlow', sans-serif;}
nav ul li a{ color:black; transition:.4s;}
nav ul li a:hover{ color:#b88a54;}
nav ul{ display:flex; /* align-items:center; */ gap:30px; list-style:none;}
nav ul li{ position:relative;}
/* Dropdown */
.submenu{
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
background: #fff;
display: flex;
flex-direction: column;
gap: 0; /* Important */
padding: 5px 0; /* Top & Bottom only */
margin: 0;
list-style: none;
opacity: 0;
visibility: hidden;
transition: .3s;
box-shadow: 0 10px 25px rgba(0,0,0,.12);
z-index: 999;
}
.dropdown:hover .submenu{
opacity: 1;
visibility: visible;
}
.submenu li{
margin: 0;
padding: 0;
line-height: 1;
}
.submenu li a{
display: block;
padding: 10px 20px; /* 12px ki jagah 10px */
margin: 0;
line-height: 1.4;
color: #333;
text-decoration: none;
white-space: nowrap;
}
.submenu li a:hover{
background: #162537;
color: #fff;
}
/* ================= MOBILE SUBMENU ================= */
@media (max-width: 991px) {
.submenu {
position: static;
width: 100%;
min-width: 100%;
background: #fff;
display: none;
opacity: 1;
visibility: visible;
transform: none;
padding: 0;
margin: 0;
box-shadow: none;
border-top: 1px solid #eee;
}
.dropdown.active .submenu {
display: block;
}
.submenu li {
width: 100%;
margin: 0;
padding: 0;
}
.submenu li a {
display: block;
padding: 12px 18px;
font-size: 14px;
color: #333;
line-height: 1.4;
border-bottom: 1px solid #eee;
text-decoration: none;
}
.submenu li:last-child a {
border-bottom: none;
}
.submenu li a:hover {
background: #b88a54;
color: #fff;
}
/* Hover mobile me disable */
.dropdown:hover .submenu {
display: none;
}
.dropdown.active:hover .submenu {
display: block;
}
}
.active{
color:#b88a54;
}
.menu-btn{
display:none;
color:#fff;
font-size:30px;
cursor:pointer;
}
/*======================
SLIDER
=======================*/
.hero{ position:relative; width:100%; height:100vh; overflow:hidden;}
.slide{ position:absolute; width:100%; height:100%; opacity:0; transition:1s;}
.slide.active{ opacity:1; z-index:2;}
.slide img{ width:100%; height:100%; object-fit:cover; object-position: top;}
.overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55);}
.content{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; color:#fff; width:80%;}
.stars{ color:#d8a252; font-size:28px; margin-bottom:20px;}.content h4{ font-size:20px; letter-spacing:7px; margin-botom:20px;}
.content h1,
.content div.sliderhead {
font-family: 'Cinzel', serif;
font-size: 72px;
font-weight: 400;
line-height: 1.2;
margin-bottom: 45px;
}.content a{ display:inline-block; padding:14px 18px; border:1px solid #fff; color:#fff; letter-spacing:3px; transition:.4s;}
.content a:hover{ background:#b88a54; border-color:#b88a54;}
/* Mobile */
@media (max-width: 767px) {
.content h1,
.content div.sliderhead {
font-size: 30px;
line-height: 1.3;
margin-bottom: 20px;
}
}
/*==================
LEFT CONTACT
==================*/
.left-contact{
position:absolute;
left:40px;
top:50%;
transform:translateY(-50%) rotate(-90deg);
color:#fff;
z-index:20;
display:flex;
align-items:center;
gap:25px;
}
.left-contact p{
letter-spacing:5px;
font-size:14px;
}
.left-contact span{
color:#b88a54;
font-size:28px;
}
.phone{
width:60px;
height:60px;
border:1px solid #fff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
transform:rotate(90deg);
}
.phone i{
color:#fff;
font-size:22px;
}
/*======================
RIGHT PAGINATION
=======================*/
.pagination{
position:absolute;
right:55px;
top:50%;
transform:translateY(-50%);
display:flex;
flex-direction:column;
gap:20px;
z-index:50;
}
.pagination span{
color:#fff;
cursor:pointer;
transition:.3s;
}
.pagination span.active{
color:#d7a04f;
font-size:22px;
}
/*====================
ARROWS
====================*/
.arrows{
position:absolute;
right:70px;
bottom:45px;
display:flex;
gap:18px;
z-index:20;
}
.prev,
.next{
width:58px;
height:58px;
border:1px solid rgba(255,255,255,.5);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
cursor:pointer;
transition:.4s;
}
.prev:hover,
.next:hover{
background:#b88a54;
border-color:#b88a54;
}
/*=====================================
RESPONSIVE
======================================*/
@media (max-width:1200px){
header{
padding:20px 40px;
}
.content h1{
font-size:58px;
}
.left-contact{
left:10px;
}
}
@media (max-width:768px){
.hero{
height:450px; /* 100vh mat rakho */
}
.slide{
height:450px;
/* margin-top: 60px*/
}
.slide img{
height:450px;
object-fit:cover;
object-position:center;
}
.content{
width:90%;
}
.stars{
font-size:16px;
margin-bottom:8px;
}
.content h4{
font-size:13px;
letter-spacing:3px;
margin-bottom:8px;
}
.content h1{
font-size:30px;
line-height:1.3;
margin-bottom:18px;
}
.content h3{
font-size:22px;
gap:10px;
}
.phone{
width:42px;
height:42px;
}
.phone i{
font-size:15px;
}
/* Dots bottom center */
.pagination{
left:50%;
right:auto;
top:auto;
bottom:15px;
transform:translateX(-50%);
flex-direction:row;
gap:12px;
}
/* Hide arrows */
.arrows{
display:none;
}
}
/*========================
992px
========================*/
@media (max-width:992px){
header{
/* background: linear-gradient(to top, rgb(255 255 255 / 21%), rgb(243 243 243 / 52%), rgb(253 253 253 / 76%)); */
padding:18px 25px;
}
.logo h1{
font-size:28px;
color:#b88a54;
}
.logo span{
color:#444;
letter-spacing:3px;
font-size:12px;
}
.menu-btn{
display:block;
color:#333;
}
nav{
position:fixed;
top:75px;
left:-100%;
width:280px;
height:100vh;
background:#fff;
transition:.4s;
box-shadow:0 10px 20px rgba(0,0,0,.2);
}
nav.active{
left:0;
}
nav ul{
flex-direction:column;
gap:0;
}
nav ul li{
border-bottom:1px solid #eee;
}
nav ul li a{
display:block;
color:#333;
padding:18px 25px;
font-size:15px;
}
nav ul li a:hover{
background:#f8f8f8;
}
.content{
width:90%;
}
.content h1{
font-size:45px;
}
.content h4{
font-size:18px;
}
.left-contact{
display:none;
}
.pagination{
right:20px;
}
.arrows{
right:20px;
bottom:25px;
}
}
/*====================
768px
====================*/
@media (max-width:768px){
.slide img{
object-position:center;
}
.content{
width:95%;
}
.stars{
font-size:22px;
}
.content h4{
font-size:15px;
letter-spacing:4px;
}
.content h1{
font-size:34px;
line-height:1.4;
margin-bottom:30px;
}
.content a{
padding:13px 28px;
font-size:13px;
}
.pagination{
display:none;
}
.arrows{
left:50%;
transform:translateX(-50%);
right:auto;
}
}
/*====================
576px
====================*/
@media(max-width:576px){
header{
padding:15px;
}
.logo h1{
font-size:22px;
}
.logo span{
font-size:10px;
}
.menu-btn{
font-size:28px;
}
.content h1{
font-size:28px;
}
.content h4{
font-size:14px;
}
.content a{
padding:12px 22px;
letter-spacing:2px;
}
.prev,
.next{
width:45px;
height:45px;
}
}
/*====================
Sticky Header
====================*/
header.sticky{
background:white;
box-shadow:0 5px 15px rgba(0,0,0,.1);
}
header.sticky .logo h1{
color:#b88a54;
}
header.sticky .logo span{
color:#444;
}
/* header.sticky nav ul li a{
color:#333;
} */
header.sticky nav ul li a.active{
color:#b88a54;
}
header.sticky .menu-btn{
color:#333;
}
/* second section */
/*======================
ABOUT
======================*/
/* =========================================================
BORANA CABS - PREMIUM ABOUT SECTION
========================================================= */
.borana-about-premium {
padding: 20px 0;
background: #111111;
overflow: hidden;
}
.borana-about-premium-container {
width: 90%;
max-width: 1250px;
margin: auto;
}
/* =========================================================
MAIN GRID
========================================================= */
.borana-about-premium-main {
display: grid;
grid-template-columns: 42% 58%;
align-items: center;
gap: 50px;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.borana-premium-content {
position: relative;
z-index: 2;
}
.borana-premium-tag {
display: inline-flex;
align-items: center;
gap: 10px;
color: #d7b45c;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 20px;
}
.borana-premium-tag::before {
content: "";
width: 32px;
height: 2px;
background: #d7b45c;
}
.borana-premium-content h2 {
margin: 0 0 22px;
color: #ffffff;
font-family: "Libertinus Math", system-ui;
font-size: clamp(40px, 5vw, 45px);
line-height: 1.05;
font-weight: 800;
}
.borana-premium-content h2 span {
color: #d7b45c;
}
.borana-premium-content > p {
margin: 0 0 17px;
color: #a9a9a9;
/* font-size: 15px; */
line-height: 1.9;
}
.borana-premium-rating {
display: flex;
align-items: center;
gap: 12px;
margin: 25px 0;
}
.borana-premium-stars {
color: #d7b45c;
letter-spacing: 3px;
}
.borana-premium-rating span {
color: #aaa;
/* font-size: 13px; */
}
/* =========================================================
BUTTON
========================================================= */
.borana-premium-actions {
display: flex;
align-items: center;
gap: 13px;
margin-top: 28px;
}
.borana-premium-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 14px 24px;
border-radius: 6px;
background: #d7b45c;
color: #111;
text-decoration: none;
font-size: 14px;
font-weight: 700;
transition: .3s ease;
}
.borana-premium-btn:hover {
background: #fff;
color: #111;
}
.borana-premium-call {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 13px 19px;
border: 1px solid #444;
border-radius: 6px;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: .3s ease;
}
.borana-premium-call:hover {
border-color: #d7b45c;
color: #d7b45c;
}
/* =========================================================
RIGHT VEHICLE AREA
========================================================= */
.borana-premium-vehicle {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
justify-content: center;
}
.borana-premium-vehicle::before {
content: "";
position: absolute;
width: 430px;
height: 430px;
border-radius: 50%;
background: #29241a;
right: 25px;
top: 55px;
z-index: 0;
}
.borana-premium-vehicle-image {
position: relative;
width: 100%;
max-width: 650px;
height: 460px;
object-fit: cover;
border-radius: 25px;
z-index: 1;
box-shadow: 0 30px 70px rgba(0,0,0,.45);
}
/* =========================================================
FLOATING EXPERIENCE CARD
========================================================= */
.borana-premium-experience {
position: absolute;
left: 0;
bottom: 28px;
width: 190px;
padding: 20px;
background: #ffffff;
border-radius: 15px;
box-shadow: 0 20px 45px rgba(0,0,0,.3);
z-index: 4;
}
.borana-premium-experience-number {
display: block;
color: #b8860b;
font-size: 34px;
font-weight: 800;
line-height: 1;
}
.borana-premium-experience strong {
display: block;
color: #222;
/* font-size: 14px; */
margin-top: 7px;
}
.borana-premium-experience small {
color: #888;
/* font-size: 11px; */
}
/* =========================================================
FLOATING SERVICE CARD
========================================================= */
.borana-premium-service {
position: absolute;
right: 0;
top: 35px;
width: 205px;
padding: 19px;
background: rgba(17,17,17,.94);
border: 1px solid #403a2c;
border-radius: 15px;
z-index: 4;
}
.borana-premium-service-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: #d7b45c;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.borana-premium-service-icon i {
color: #111;
font-size: 17px;
}
.borana-premium-service strong {
display: block;
color: #fff;
margin-bottom: 5px;
}
.borana-premium-service span {
color: #999;
line-height: 1.5;
}
/* =========================================================
BOTTOM BENEFITS
========================================================= */
.borana-premium-benefits {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 70px;
border-top: 1px solid #303030;
border-bottom: 1px solid #303030;
}
.borana-premium-benefit {
display: flex;
align-items: center;
gap: 17px;
padding: 27px 20px;
}
.borana-premium-benefit + .borana-premium-benefit {
border-left: 1px solid #303030;
}
.borana-benefit-icon {
width: 46px;
height: 46px;
flex-shrink: 0;
border: 1px solid #5a4b2c;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.borana-benefit-icon i {
color: #d7b45c;
font-size: 17px;
}
.borana-premium-benefit strong {
display: block;
color: #fff;
margin-bottom: 4px;
}
.borana-premium-benefit span {
color: #888;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 991px) {
.borana-about-premium {
padding: 75px 0;
}
.borana-about-premium-main {
grid-template-columns: 1fr;
gap: 45px;
}
.borana-premium-content {
text-align: center;
max-width: 750px;
margin: auto;
}
.borana-premium-tag {
justify-content: center;
}
.borana-premium-rating {
justify-content: center;
}
.borana-premium-actions {
justify-content: center;
}
.borana-premium-vehicle {
min-height: 520px;
}
.borana-premium-benefits {
grid-template-columns: 1fr;
}
.borana-premium-benefit + .borana-premium-benefit {
border-left: 0;
border-top: 1px solid #303030;
}
}
@media (max-width: 576px) {
.borana-about-premium {
padding: 20px 0;
}
.borana-about-premium-container {
width: 92%;
}
.borana-premium-tag {
font-size: 10px;
letter-spacing: 2px;
}
.borana-premium-content h2 {
font-size: 38px;
}
.borana-premium-content > p {
/* font-size: 14px; */
line-height: 1.8;
text-align: left;
}
.borana-premium-rating {
justify-content: flex-start;
}
.borana-premium-actions {
flex-direction: column;
align-items: stretch;
}
.borana-premium-btn,
.borana-premium-call {
width: 100%;
}
.borana-premium-vehicle {
min-height: 400px;
}
.borana-premium-vehicle::before {
width: 270px;
height: 270px;
right: 0;
top: 50px;
}
.borana-premium-vehicle-image {
height: 300px;
border-radius: 18px;
}
.borana-premium-experience {
left: -5px;
bottom: 0;
width: 145px;
padding: 15px;
}
.borana-premium-experience-number {
font-size: 27px;
}
.borana-premium-experience strong {
font-size: 14px;
}
.borana-premium-service {
right: -5px;
top: 15px;
width: 155px;
padding: 14px;
}
.borana-premium-service-icon {
width: 35px;
height: 35px;
margin-bottom: 8px;
}
.borana-premium-service strong {
font-size: 15px;
}
.borana-premium-service span {
font-size: 13px;
}
.borana-premium-benefits {
margin-top: 45px;
}
.borana-premium-benefit {
padding: 20px 8px;
}
}
/* third section */
/*====================================
FEATURED SECTION
====================================*/
/*==================================================
FEATURED PACKAGES SECTION
==================================================*/
.featured{
padding:50px 0;
background:#cac8c8;
position:relative;
}
.featured .container{
width:1320px;
max-width:95%;
margin:auto;
}
/*==============================
HEADING
==============================*/
.featured-heading{
text-align:center;
max-width:760px;
margin:0 auto 60px;
}
.featured-heading .sub-title{
display:inline-block;
color:#b8893d;
font-size:13px;
letter-spacing:5px;
text-transform:uppercase;
font-weight:600;
margin-bottom:15px;
}
.featured-heading h2{
font-family:"Libertinus Math", system-ui;
font-size:55px;
color:#222;
font-weight:600;
margin-bottom:0px;
line-height:1.2;
}
.featured-heading p{
color:#666;
font-size:16px;
line-height:30px;
}
/*==============================
GRID
==============================*/
.featured-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:30px;
}
.big{
grid-column:span 3;
height:470px;
}
.tour:not(.big){
grid-column:span 2;
height:420px;
}
/*==============================
CARD
==============================*/
.tour{
position:relative;
overflow:hidden;
border-radius:22px;
background:#000;
box-shadow:0 20px 40px rgba(0,0,0,.12);
transition:.45s;
}
.tour:hover{
transform:translateY(-12px);
box-shadow:0 30px 60px rgba(0,0,0,.18);
}
.tour img{
width:100%;
height:100%;
object-fit:cover;
transition:1.2s;
}
.tour:hover img{
transform:scale(1.12);
}
/*==============================
OVERLAY
==============================*/
.tour-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.92),
rgba(0,0,0,.35),
rgba(0,0,0,.05)
);
transition:.5s;
}
.tour:hover .tour-overlay{
background:linear-gradient(
to top,
rgba(0,0,0,.95),
rgba(0,0,0,.45),
rgba(0,0,0,.15)
);
}
/*==============================
TOP BADGES
==============================*/
.package-top{
position:absolute;
top:20px;
left:20px;
right:20px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:10;
}
.duration{
background:rgba(255,255,255,.18);
backdrop-filter:blur(10px);
color:#fff;
padding:9px 16px;
border-radius:40px;
font-size:13px;
font-weight:500;
}
.duration i{
margin-right:6px;
}
.price{
background:#c79a4a;
color:#fff;
padding:10px 16px;
border-radius:40px;
font-size:13px;
font-weight:600;
}
/*==============================
CONTENT
==============================*/
.tour-info{
position:absolute;
left:30px;
right:30px;
bottom:30px;
color:#fff;
z-index:10;
transition:.45s;
}
.tour:hover .tour-info{
bottom:40px;
}
.category{
display:inline-block;
padding:7px 16px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(8px);
border-radius:30px;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:16px;
}
.tour-info h3{
font-family:"Libertinus Math", system-ui;
font-size:31px;
line-height:1.3;
margin-bottom:16px;
font-weight:600;
transition:.4s;
}
.tour:hover h3{
color:#dcb16c;
}
.tour-info p{
font-size:15px;
line-height:28px;
color:#ececec;
margin-bottom:22px;
}
/*==============================
BUTTON
==============================*/
.view-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:13px 28px;
border-radius:50px;
background:#c79a4a;
color:#fff;
text-decoration:none;
font-weight:600;
transition:.4s;
}
.view-btn i{
transition:.4s;
}
.view-btn:hover{
background:#fff;
color:#222;
}
.view-btn:hover i{
transform:translateX(6px);
}
/*==============================
LIGHT EFFECT
==============================*/
.tour::before{
content:"";
position:absolute;
width:160%;
height:100%;
background:linear-gradient(
120deg,
transparent 25%,
rgba(255,255,255,.18) 45%,
transparent 65%
);
left:-180%;
top:0;
transition:1.1s;
z-index:5;
}
.tour:hover::before{
left:130%;
}
/*=========================================
RESPONSIVE CSS
=========================================*/
/* Large Laptop */
@media (max-width:1400px){
.featured .container{
width:95%;
}
.featured-heading h2{
font-size:48px;
}
.big{
height:430px;
}
.tour:not(.big){
height:390px;
}
}
/* Laptop */
@media (max-width:1200px){
.featured{
padding:90px 0;
}
.featured-grid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}
.big{
grid-column:span 1;
height:400px;
}
.tour:not(.big){
grid-column:span 1;
height:400px;
}
.featured-heading{
max-width:700px;
margin-bottom:50px;
}
.featured-heading h2{
font-size:44px;
}
.featured-heading p{
font-size:15px;
line-height:28px;
}
.tour-info h3{
font-size:28px;
}
}
/* Tablet */
@media (max-width:991px){
.featured{
padding:80px 0;
}
.featured-grid{
grid-template-columns:repeat(2,1fr);
gap:22px;
}
.big,
.tour:not(.big){
height:360px;
}
.package-top{
top:18px;
left:18px;
right:18px;
}
.duration{
padding:8px 14px;
font-size:12px;
}
.price{
padding:8px 14px;
font-size:12px;
}
.tour-info{
left:22px;
right:22px;
bottom:22px;
}
.tour-info h3{
font-size:24px;
}
.tour-info p{
font-size:14px;
line-height:24px;
}
.view-btn{
padding:12px 22px;
font-size:14px;
}
}
/* Mobile */
@media (max-width:768px){
.featured{
padding:70px 0;
}
.featured-heading{
margin-bottom:40px;
}
.featured-heading .sub-title{
font-size:11px;
letter-spacing:3px;
}
.featured-heading h2{
font-size:34px;
}
.featured-heading p{
font-size:15px;
line-height:27px;
}
.featured-grid{
grid-template-columns:1fr;
gap:20px;
}
.big,
.tour:not(.big){
grid-column:span 1;
height:360px;
}
.package-top{
flex-direction:column;
align-items:flex-start;
gap:10px;
}
.duration{
font-size:11px;
}
.price{
font-size:11px;
}
.category{
font-size:11px;
padding:6px 14px;
}
.tour-info h3{
font-size:24px;
}
.tour-info p{
font-size:14px;
line-height:24px;
margin-bottom:18px;
}
.view-btn{
width:100%;
justify-content:center;
}
}
/* Small Mobile */
@media (max-width:576px){
.featured{
padding:30px 0;
}
.featured-heading h2{
font-size:28px;
}
.featured-heading p{
font-size:14px;
line-height:24px;
}
.tour{
border-radius:18px;
}
.big,
.tour:not(.big){
height:330px;
}
.package-top{
top:15px;
left:15px;
right:15px;
}
.duration{
padding:7px 12px;
font-size:10px;
}
.price{
padding:7px 12px;
font-size:10px;
}
.tour-info{
left:18px;
right:18px;
bottom:18px;
}
.category{
font-size:10px;
letter-spacing:1px;
}
.tour-info h3{
font-size:21px;
margin-bottom:12px;
}
.tour-info p{
font-size:13px;
line-height:22px;
margin-bottom:16px;
}
.view-btn{
padding:11px 18px;
font-size:13px;
}
}
/*=========================================
SMOOTH ANIMATIONS
=========================================*/
.tour,
.tour img,
.tour-overlay,
.tour-info,
.view-btn,
.view-btn i,
.category,
.duration,
.price{
transition:all .4s ease;
}
/*=========================================
IMAGE ZOOM
=========================================*/
.tour:hover img{
transform:scale(1.08) rotate(.5deg);
}
/*=========================================
CARD BORDER EFFECT
=========================================*/
.tour::after{
content:"";
position:absolute;
inset:0;
border:1px solid rgba(255,255,255,.12);
border-radius:22px;
pointer-events:none;
}
.tour:hover::after{
border-color:rgba(199,154,74,.6);
}
/*=========================================
BUTTON SHADOW
=========================================*/
.view-btn{
box-shadow:0 10px 25px rgba(199,154,74,.35);
}
.view-btn:hover{
box-shadow:0 15px 35px rgba(255,255,255,.25);
}
/*=========================================
CATEGORY HOVER
=========================================*/
.tour:hover .category{
background:#c79a4a;
color:#fff;
}
/*=========================================
PRICE HOVER
=========================================*/
.tour:hover .price{
transform:translateY(-3px);
}
/*=========================================
DURATION HOVER
=========================================*/
.tour:hover .duration{
transform:translateY(-3px);
}
/*=========================================
REMOVE TAP HIGHLIGHT
=========================================*/
*{
-webkit-tap-highlight-color:transparent;
}
forth seciton
/*=====================================
OUR SERVICES
=====================================*/
/*==============================================
PREMIUM SERVICES SECTION
==============================================*/
/* =========================================================
BORANA CABS - DARK PREMIUM SERVICES
========================================================= */
.borana-dark-services{
width:100%;
padding:95px 0;
background:#0b0d10;
overflow:hidden;
}
.borana-dark-services-container{
width:90%;
max-width:1250px;
margin:auto;
}
/* =========================================================
HEADER
========================================================= */
.borana-dark-services-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:40px;
margin-bottom:55px;
}
.borana-dark-service-row:hover h3 {
color: #fff;
}
.borana-dark-services-heading{
max-width:700px;
}
.borana-dark-services-label{
display:flex;
align-items:center;
gap:12px;
color:#d4aa55;
font-size:11px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:16px;
}
.borana-dark-services-label span{
width:38px;
height:1px;
background:#d4aa55;
}
.borana-dark-services-heading h2{
margin:0;
color:#fff;
font-family:"Libertinus Math",system-ui;
font-size:clamp(38px,5vw,62px);
line-height:1.04;
font-weight:700;
}
.borana-dark-services-heading h2 em{
color:#d4aa55;
font-style:normal;
}
.borana-dark-services-heading p{
max-width:650px;
margin:18px 0 0;
color:#9ba3aa;
font-size:14px;
line-height:1.8;
}
/* =========================================================
HEADER STAT
========================================================= */
.borana-dark-services-stat{
min-width:190px;
padding-left:25px;
border-left:1px solid rgba(255,255,255,.12);
}
.borana-dark-services-stat strong{
display:block;
color:#d4aa55;
font-size:44px;
line-height:1;
font-weight:700;
}
.borana-dark-services-stat span{
display:block;
margin-top:8px;
color:#78828a;
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
}
/* =========================================================
SERVICE WRAPPER
========================================================= */
.borana-dark-service-wrapper{
width:100%;
border-top:1px solid rgba(255,255,255,.13);
}
/* =========================================================
SERVICE ROW
========================================================= */
.borana-dark-service-row{
position:relative;
display:grid;
grid-template-columns:75px 1fr 300px 55px;
align-items:center;
gap:25px;
min-height:145px;
padding:18px 20px;
border-bottom:1px solid rgba(255,255,255,.10);
background:transparent;
transition:.45s ease;
overflow:hidden;
}
.borana-dark-service-row::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background:#d4aa55;
transform:scaleY(0);
transform-origin:center;
transition:.4s ease;
}
.borana-dark-service-row:hover{
background:#15191e;
padding-left:28px;
}
.borana-dark-service-row:hover::before{
transform:scaleY(1);
}
/* =========================================================
NUMBER
========================================================= */
.borana-dark-service-number{
color:#59636b;
font-size:12px;
font-weight:700;
letter-spacing:2px;
transition:.3s;
}
.borana-dark-service-row:hover
.borana-dark-service-number{
color:#d4aa55;
}
/* =========================================================
SERVICE MAIN
========================================================= */
.borana-dark-service-main{
display:flex;
align-items:center;
gap:18px;
}
/* =========================================================
SERVICE ICON
========================================================= */
.borana-dark-service-icon{
width:48px;
height:48px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(212,170,85,.35);
border-radius:50%;
color:#d4aa55;
font-size:17px;
transition:.4s;
}
.borana-dark-service-row:hover
.borana-dark-service-icon{
background:#d4aa55;
color:#0b0d10;
border-color:#d4aa55;
transform:rotate(8deg);
}
/* =========================================================
SERVICE TITLE
========================================================= */
.borana-dark-service-title h3{
margin:0;
color:black;
font-family:"Libertinus Math",system-ui;
font-size:23px;
font-weight:600;
line-height:1.2;
}
.borana-dark-service-title p{
margin:7px 0 0;
color:#7e8991;
line-height:1.5;
}
/* =========================================================
SERVICE IMAGE
========================================================= */
.borana-dark-service-image{
width:100%;
height:105px;
overflow:hidden;
opacity:.65;
background:#11151a;
transition:.45s;
}
.borana-dark-service-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:.7s;
}
.borana-dark-service-row:hover
.borana-dark-service-image{
opacity:1;
}
.borana-dark-service-row:hover
.borana-dark-service-image img{
transform:scale(1.08);
}
/* =========================================================
ARROW
========================================================= */
.borana-dark-service-arrow{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.15);
border-radius:50%;
background:#11151a;
color:#777f86;
font-size:12px;
transition:.4s;
}
.borana-dark-service-row:hover
.borana-dark-service-arrow{
background:#d4aa55;
border-color:#d4aa55;
color:#0b0d10;
transform:translateX(4px);
}
/* =========================================================
LINK
========================================================= */
.borana-dark-service-link{
display:block;
color:inherit;
text-decoration:none;
}
/* =========================================================
BOTTOM CTA
========================================================= */
.borana-dark-services-bottom{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:35px;
padding:25px 28px;
background:#12161b;
border:1px solid rgba(255,255,255,.08);
}
.borana-dark-services-bottom-left{
display:flex;
align-items:center;
gap:14px;
}
.borana-dark-services-bottom-left i{
color:#d4aa55;
font-size:18px;
}
.borana-dark-services-bottom-left span{
color:#9da5ab;
}
.borana-dark-services-phone{
display:flex;
align-items:center;
gap:10px;
color:#fff;
text-decoration:none;
font-weight:700;
transition:.3s;
}
.borana-dark-services-phone i{
color:#d4aa55;
transition:.3s;
}
.borana-dark-services-phone:hover{
color:#d4aa55;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1050px){
.borana-dark-services{
padding:75px 0;
}
.borana-dark-services-header{
margin-bottom:45px;
}
.borana-dark-service-row{
grid-template-columns:60px 1fr 230px 50px;
gap:18px;
}
.borana-dark-service-image{
height:95px;
}
}
/* =========================================================
TABLET / SMALL SCREEN
========================================================= */
@media(max-width:800px){
.borana-dark-services-container{
width:92%;
}
.borana-dark-services-header{
display:block;
}
.borana-dark-services-stat{
display:none;
}
.borana-dark-services-heading h2{
font-size:45px;
}
.borana-dark-service-row{
grid-template-columns:55px 1fr 180px 45px;
min-height:130px;
padding:15px;
}
.borana-dark-service-title h3{
font-size:20px;
}
.borana-dark-service-image{
height:90px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:600px){
.borana-dark-services{
padding:58px 0;
background:white;
}
.borana-dark-services-container{
width:92%;
}
/* HEADER */
.borana-dark-services-header{
display:block;
margin-bottom:32px;
}
.borana-dark-services-label{
gap:9px;
font-size:9px;
letter-spacing:2px;
margin-bottom:13px;
}
.borana-dark-services-label span{
width:28px;
}
.borana-dark-services-heading h2{
font-size:36px;
line-height:1.08;
}
.borana-dark-services-heading p{
max-width:100%;
margin-top:14px;
color:#8d969d;
font-size:12px;
line-height:1.7;
}
/* SERVICE WRAPPER */
.borana-dark-service-wrapper{
border-top:1px solid rgba(255,255,255,.12);
}
/* SERVICE ROW */
.borana-dark-service-row{
display:grid;
grid-template-columns:35px 1fr 38px;
grid-template-areas:
"number main arrow"
"number image arrow";
gap:10px 10px;
min-height:auto;
padding:17px 5px;
background:transparent;
}
.borana-dark-service-row:hover{
padding-left:5px;
background:#15191e;
}
/* NUMBER */
.borana-dark-service-number{
grid-area:number;
align-self:start;
padding-top:4px;
font-size:9px;
letter-spacing:1px;
}
/* MAIN */
.borana-dark-service-main{
grid-area:main;
display:flex;
align-items:flex-start;
gap:10px;
min-width:0;
}
/* ICON */
.borana-dark-service-icon{
width:37px;
height:37px;
font-size:13px;
}
/* TITLE */
.borana-dark-service-title{
min-width:0;
}
.borana-dark-service-title h3{
font-size:18px;
line-height:1.15;
}
.borana-dark-service-title p{
margin-top:5px;
color:#7f8991;
line-height:1.5;
}
/* IMAGE */
.borana-dark-service-image{
grid-area:image;
width:100%;
height:92px;
opacity:.8;
margin-top:1px;
}
/* ARROW */
.borana-dark-service-arrow{
grid-area:arrow;
width:34px;
height:34px;
align-self:center;
font-size:10px;
}
/* BOTTOM CTA */
.borana-dark-services-bottom{
display:block;
margin-top:25px;
padding:19px;
background:#12161b;
}
.borana-dark-services-bottom-left{
gap:10px;
margin-bottom:14px;
}
.borana-dark-services-bottom-left i{
font-size:15px;
}
.borana-dark-services-bottom-left span{
line-height:1.5;
}
.borana-dark-services-phone{
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:380px){
.borana-dark-services{
padding:50px 0;
}
.borana-dark-services-heading h2{
font-size:32px;
}
.borana-dark-service-row{
grid-template-columns:30px 1fr 35px;
gap:9px;
}
.borana-dark-service-icon{
width:34px;
height:34px;
font-size:12px;
}
.borana-dark-service-title h3{
font-size:16px;
}
.borana-dark-service-title p{
font-size:9px;
}
.borana-dark-service-image{
height:80px;
}
.borana-dark-service-arrow{
width:31px;
height:31px;
}
}
/* =========================================================
ENQUIRY BUTTON
========================================================= */
.borana-dark-service-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
}
/* ENQUIRY */
.borana-dark-enquiry-btn{
display:flex;
align-items:center;
gap:7px;
padding:9px 13px;
border:1px solid rgba(212,170,85,.35);
border-radius:30px;
background:transparent;
color:#d4aa55;
font-weight:600;
cursor:pointer;
transition:.35s ease;
}
.borana-dark-enquiry-btn i{
font-size:10px;
}
.borana-dark-enquiry-btn:hover{
background:#d4aa55;
border-color:#d4aa55;
color:#0b0d10;
transform:translateY(-2px);
}
/* =========================================================
DESKTOP SERVICE GRID
========================================================= */
@media(min-width:801px){
.borana-dark-service-row{
grid-template-columns:75px 1fr 300px 150px;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:800px) and (min-width:601px){
.borana-dark-service-row{
grid-template-columns:55px 1fr 180px 125px;
}
.borana-dark-enquiry-btn{
padding:8px 10px;
font-size:9px;
}
.borana-dark-service-arrow{
width:35px;
height:35px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:600px){
.borana-dark-service-actions{
grid-area:arrow;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
}
.borana-dark-enquiry-btn{
width:34px;
height:34px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:11px;
}
.borana-dark-enquiry-btn span{
display:none;
}
.borana-dark-service-arrow{
width:34px;
height:34px;
}
}
/*=========================================
ACCESSIBILITY
=========================================*/
.service-content a:focus,
.main-btn:focus{
outline:2px solid #c89b3c;
outline-offset:4px;
}
/*=========================================
REMOVE MOBILE TAP HIGHLIGHT
=========================================*/
*{
-webkit-tap-highlight-color:transparent;
}
/* five section */
/*======================================
MULTI DAY TOURS
======================================*/
.multi-tour{
padding:100px 0;
background:#fff;
overflow:hidden;
}
.multi-tour .container{
width:1320px;
max-width:95%;
margin:auto;
}
.section-title{
text-align:center;
margin-bottom:60px;
}
.section-title span{
display:block;
color:#b68b4c;
font-size:13px;
letter-spacing:7px;
text-transform:uppercase;
margin-bottom:15px;
}
.section-title h2{
font-family:"Libertinus Math", system-ui;
font-size:55px;
font-weight:400;
color:#222;
}
.tour-list{
display:flex;
flex-direction:column;
gap:45px;
}
.tour-item{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
background:#faf8f4;
overflow:hidden;
}
.tour-item.reverse{
direction:rtl;
}
.tour-item.reverse .tour-content{
direction:ltr;
}
.tour-img{
overflow:hidden;
position:relative;
}
.tour-img img{
width:100%;
height:370px;
object-fit:cover;
display:block;
transition:1s;
}
.tour-item:hover img{
transform:scale(1.08);
}
.tour-content{
padding:22px;
}
.tour-days{
display:block;
color:#999;
font-size:12px;
letter-spacing:5px;
margin-bottom:18px;
}
.tour-content h3{
font-size:36px;
font-weight:400;
color:#222;
line-height:1.3;
margin-bottom:20px; font-weight: bold;
}
.tour-content p{
color:#666;
font-size:16px;
line-height:1.9;
margin-bottom:35px;
}
.tour-content .tour-btn{
display:inline-block;
padding:8px;
background:#b68b4c;
color:#fff;
text-decoration:none;
font-size:12px;
letter-spacing:3px;
transition:.4s;
width: 100%
}
.tour-content .tour-btn:hover{
background:#222;
}
/*======================================
PARTNER LOGO SLIDER
======================================*/
.partners{
padding:80px 0;
background:#fff;
overflow:hidden;
}
.partner-slider{
width:100%;
overflow:hidden;
position:relative;
}
.partner-track{
display:flex;
align-items:center;
gap:40px;
width:max-content;
}
.partner-item{
width:220px;
height:110px;
background:#fff;
border:1px solid #ececec;
display:flex;
justify-content:center;
align-items:center;
flex-shrink:0;
transition:.4s;
}
.partner-item img{
max-width:150px;
max-height:60px;
transition:.4s;
}
.partner-item:hover{
border-color:#b68b4c;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.partner-item:hover img{
transform:scale(1.08);
}
/*======================================
WHY CHOOSE US
======================================*/
.why-us{
padding:100px 0;
background:#f8f8f8;
}
.why-us .container{
width:1320px;
max-width:95%;
margin:auto;
}
.why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:60px;
}
.why-box{
background:#fff;
padding:40px 35px;
text-align:center;
border:1px solid #ececec;
transition:.4s;
}
.why-box:hover{
transform:translateY(-10px);
box-shadow:0 15px 35px rgba(0,0,0,.08);
border-color:#b68b4c;
}
.why-icon{
width:75px;
height:75px;
margin:auto;
margin-bottom:25px;
border:2px solid #b68b4c;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
}
.why-icon i{
font-size:30px;
color:#b68b4c;
}
.why-box h3{
font-family:"Libertinus Math", system-ui;
font-size:28px;
color:#222;
margin-bottom:15px;
font-weight:400;
}
.why-box p{
color:#666;
line-height:1.9;
font-size:15px;
}
/*======================================
PARTNER SLIDER HOVER
======================================*/
.partner-slider:hover .partner-track{
animation-play-state:paused;
}
.partner-item img{
filter:grayscale(100%);
opacity:.8;
}
.partner-item:hover img{
filter:grayscale(0);
opacity:1;
}
/*======================================
RESPONSIVE
======================================*/
@media(max-width:1200px){
.tour-item{
grid-template-columns:1fr;
}
.tour-item.reverse{
direction:ltr;
}
.tour-content{
padding:40px;
}
.why-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:992px){
.section-title h2{
font-size:44px;
}
.tour-img img{
height:300px;
}
.tour-content h3{
font-size:30px;
}
.partner-item{
width:180px;
height:90px;
}
}
@media(max-width:768px){
.multi-tour,
.partners,
.why-us{
padding:70px 0;
}
.section-title{
margin-bottom:40px;
}
.section-title h2{
font-size:36px;
}
.tour-content{
padding:25px;
}
.tour-content h3{
font-size:26px;
}
.tour-img img{
height:230px;
}
.partner-track{
gap:20px;
}
.partner-item{
width:150px;
height:80px;
}
.partner-item img{
max-width:110px;
}
.why-grid{
grid-template-columns:1fr;
gap:20px;
}
}
@media(max-width:576px){
.section-title span{
font-size:11px;
letter-spacing:4px;
}
.section-title h2{
font-size:30px;
}
.tour-days{
letter-spacing:3px;
}
.tour-content h3{
font-size:22px;
}
.tour-content p{
font-size:14px;
}
.tour-content a{
padding:12px 22px;
font-size:16px;
}
.partner-item{
width:130px;
height:70px;
}
.partner-item img{
max-width:90px;
}
.why-box{
padding:25px;
}
.why-icon{
width:60px;
height:60px;
}
.why-icon i{
font-size:24px;
}
.why-box h3{
font-size:22px;
}
}
/* SECTION */
.features-section{
padding:80px 15px; background:#fff;
}
/* CONTAINER */
.features-container{
max-width:1100px;
margin:auto;
width:100%;
}
/* TITLE */
.features-title{
text-align:left;
margin-bottom:40px;
}
.features-title span{
font-size:12px;
letter-spacing:3px;
color:#888;
}
.features-title h2{
font-size:36px;
margin-top:5px;
font-weight:500;
color:#222;
}
/* GRID - BEST RESPONSIVE FIX */
.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));
gap:25px;
}
/* CARD */
.feature-card{
background:#fff;
border:1px solid #eee;
padding:5px;
transition:0.3s;
}
.feature-card i{
font-size:30px;
color:#b8895b;
margin-bottom:15px;
}
.feature-card h3{
font-size:22px;
margin-bottom:10px;
font-weight:500; font-family: 'Barlow', sans-serif;
}
.feature-card p{
font-size:14px;
color:#777;
line-height:1.6;
}
/* HOVER */
.feature-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}
/* TABLET */
@media(max-width:992px){
.features-title h2{
font-size:30px;
}
}
/* MOBILE */
@media(max-width:600px){
.features-section{
padding:50px 12px;
}
.features-title{
text-align:center;
}
.features-title h2{
font-size:24px;
}
.features-title span{
font-size:11px;
letter-spacing:2px;
}
.feature-card{
padding:20px;
}
.feature-card h3{
font-size:16px;
}
.feature-card p{
font-size:13px;
}
}
/* six section */
/*=====================================
GLOBAL RESET
======================================*/
.testimonial-box{
margin:0;
padding:0;
box-sizing:border-box;
}
.testimonial-box{
font-family:'Poppins',sans-serif;
background:#111;
color:#fff;
overflow-x:hidden;
}
/*=====================================
TOUR SECTION
======================================*/
.tour-showcase{
position:relative;
width:100%;
padding:100px 0;
background: url("https://images.unsplash.com/photo-1564507592333-c60657eea523?q=80&w=1920&auto=format&fit=crop") center center/cover no-repeat;
background-attachment:fixed;
}
.tour-overlay{
position:absolute;
inset:0;
}
.tour-container{
position:relative;
z-index:2;
width:90%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr ;
gap:20px;
align-items:center;
}
/*=====================================
COMMON
======================================*/
.section-subtitle{
display:inline-block;
color:#d6a354;
text-transform:uppercase;
letter-spacing:3px;
font-size:13px;
margin-bottom:15px;
font-weight:600;
}
.testimonial-box h2,
.about-card h2,
.faq-wrapper h2{
font-size:46px;
line-height:1.2;
margin-bottom:25px;
font-weight:700;
}
.testimonial-box p,
.about-card p{
color:#ddd;
line-height:1.9;
font-size:16px;
}
/*=====================================
TESTIMONIAL
======================================*/
.testimonial-box{
background:rgba(255,255,255,.08);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
padding:50px;
transition:.4s;
}
.testimonial-box:hover{
transform:translateY(-8px);
}
.rating{
color:#FDBA12;
font-size:24px;
margin:25px 0;
letter-spacing:4px;
}
.client-info{
display:flex;
align-items:center;
gap:18px;
margin-top:25px;
}
.client-info img{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
border:3px solid #fff;
}
.client-info h4{
font-size:18px;
margin-bottom:5px;
}
.client-info span{
color:#ccc;
font-size:14px;
}
/*=====================================
ABOUT CARD
======================================*/
.about-card{
background:#1b1b1b;
padding:60px;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,.45);
transition:.4s;
}
.about-card:hover{
transform:translateY(-8px);
}
.about-card p{
margin:25px 0;
}
.tour-btn{
display:inline-block;
padding:14px 35px;
border:2px solid #d6a354;
color:#d6a354;
text-decoration:none;
border-radius:40px;
font-weight:600;
transition:.35s;
}
.tour-btn:hover{
background:#d6a354;
color:#fff;
}
/*=====================================
FAQ WRAPPER
======================================*/
.faq-wrapper{
grid-column:1 / -1;
margin-top:40px;
}
/*=====================================
FAQ SECTION
======================================*/
.faq-wrapper{
margin-top:70px;
}
.faq-wrapper h2{
margin-bottom:35px;
}
.faq-item{
background:#fff;
border-radius:12px;
overflow:hidden;
margin-bottom:18px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
transition:.3s;
}
.faq-item:hover{
transform:translateY(-3px);
}
.faq-question{
width:100%;
border:none;
background:#fff;
color:#222;
padding:22px 28px;
font-size:18px;
font-weight:600;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
transition:.3s;
}
.faq-question:hover{
background:#fafafa;
}
.faq-question span{
width:34px;
height:34px;
border-radius:50%;
background:#d6a354;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
transition:.35s;
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .45s ease;
background:#f8f8f8;
}
.faq-answer p{
padding:0 28px 25px;
color:#555;
line-height:1.9;
font-size:15px;
}
.faq-item.active .faq-answer{
max-height:220px;
}
.faq-item.active .faq-question span{
transform:rotate(45deg);
}
/*=====================================
SCROLL ANIMATION
======================================*/
.testimonial-box,
.about-card,
.faq-item{
transition:.35s ease;
}
.testimonial-box:hover,
.about-card:hover{
box-shadow:0 20px 40px rgba(0,0,0,.35);
}
/*=====================================
TABLET
======================================*/
@media(max-width:992px){
.tour-container{
grid-template-columns:1fr;
gap:45px;
}
.testimonial-box,
.about-card{
padding:40px;
}
.testimonial-box h2,
.about-card h2,
.faq-wrapper h2{
font-size:38px;
}
.faq-wrapper{
margin-top:20px;
}
}
.testimonial-slider{
position:relative;
min-height:240px;
}
.testimonial-item{
display:none;
animation:fade .6s ease;
}
.testimonial-item.active{
display:block;
}
@keyframes fade{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*=====================================
MOBILE
======================================*/
@media(max-width:768px){
.tour-showcase{
padding:70px 0;
background-attachment:scroll;
}
.tour-container{
width:92%;
}
.testimonial-box,
.about-card{
padding:30px 22px;
}
.testimonial-box h2,
.about-card h2,
.faq-wrapper h2{
font-size:30px;
}
.testimonial-box p,
.about-card p{
font-size:15px;
}
.client-info{
flex-direction:column;
text-align:center;
}
.client-info img{
width:65px;
height:65px;
}
.faq-question{
padding:18px;
font-size:16px;
}
.faq-question span{
width:30px;
height:30px;
font-size:18px;
}
.faq-answer p{
padding:0 18px 18px;
font-size:14px;
}
.tour-btn{
width:100%;
text-align:center;
}
}
/*=====================================
SMALL MOBILE
======================================*/
@media(max-width:480px){
.tour-showcase{
padding:60px 0;
}
.section-subtitle{
font-size:12px;
letter-spacing:2px;
}
.testimonial-box h2,
.about-card h2,
.faq-wrapper h2{
font-size:25px;
}
.testimonial-box,
.about-card{
padding:22px 18px;
}
.rating{
font-size:20px;
}
.client-info img{
width:55px;
height:55px;
}
.faq-question{
font-size:15px;
padding:16px;
}
.faq-answer p{
font-size:13px;
}
}
/* seciton */
/*=====================================
ENQUIRY SECTION
======================================*/
/*=====================================
ENQUIRY SECTION RESET
======================================*/
/*==========================
ENQUIRY SECTION
==========================*/
.enquiry-section{
padding:110px 0;
background:linear-gradient(180deg,#faf7f2,#ffffff);
}
.enquiry-container{
width:90%;
max-width:1250px;
margin:auto;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;
}
/*==========================
LEFT
==========================*/
.enquiry-content h3{
line-height:1.2;
margin-bottom:25px;
color:#222;
}
.enquiry-content p{
font-size:18px;
line-height:1.9;
color:#666;
margin-bottom:40px;
max-width:620px;
}
/*==========================
CONTACT CARD
==========================*/
.contact-box{
display:flex;
align-items:center;
gap:20px;
background:#fff;
border-radius:18px;
padding:22px 25px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
width:max-content;
transition:.35s;
}
.contact-box:hover{
transform:translateY(-6px);
}
.contact-icon{
width:70px;
height:70px;
background:#b88a54;
color:#fff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
}
.contact-info span{
display:block;
color:#888;
margin-bottom:6px;
font-size:14px;
}
.contact-info a{
color:#222;
font-size:30px;
font-weight:700;
text-decoration:none;
}
/*==========================
FORM
==========================*/
.enquiry-form{
background:#fff;
border-radius:25px;
padding:45px;
box-shadow:0 20px 60px rgba(0,0,0,.08);
}
.enquiry-form h3{
font-size:34px;
margin-bottom:30px;
color:#222;
text-align:center;
font-family:"Libertinus Math", system-ui;
}
.form-group{
margin-bottom:18px;
}
.form-group input,
.form-group textarea,select{
width:100%;
padding:18px 22px;
border:1px solid #e5e5e5;
border-radius:12px;
font-size:15px;
transition:.3s;
background:#fafafa;
}
.form-group textarea{
height:160px;
resize:none;
}
.form-group input:focus,
.form-group textarea:focus{
border-color:#b88a54;
background:#fff;
box-shadow:0 0 0 4px rgba(184,138,84,.12);
}
/*==========================
BUTTON
==========================*/
.enquiry-btn{
width:100%;
padding:18px;
border:none;
border-radius:12px;
background:#b88a54;
color:#fff;
font-size:15px;
letter-spacing:2px;
font-weight:600;
cursor:pointer;
transition:.35s;
}
.enquiry-btn:hover{
background:#222;
transform:translateY(-2px);
}
/*==========================
TABLET
==========================*/
@media(max-width:992px){
.enquiry-container{
grid-template-columns:1fr;
}
.enquiry-content{
text-align:center;
}
.contact-box{
margin:auto;
}
.enquiry-content p{
max-width:100%;
}
}
/*==========================
MOBILE
==========================*/
@media(max-width:768px){
.enquiry-section{
padding:70px 0;
}
.enquiry-container{
width:92%;
}
.enquiry-content h3{
font-size:34px;
}
.enquiry-content p{
font-size:16px;
}
.contact-box{
width:100%;
justify-content:center;
flex-direction:column;
text-align:center;
}
.contact-info a{
font-size:24px;
}
.enquiry-form{
padding:25px;
}
.enquiry-form h3{
font-size:28px;
}
.form-group input,
.form-group textarea{
padding:15px;
}
}
/* =========================================================
PROFESSIONAL FOOTER
========================================================= */
.tm-footer{
position:relative;
background:#101820;
color:#c8ced5;
overflow:hidden;
border-top:1px solid rgba(255,255,255,.06);
}
.tm-footer *,
.tm-footer *::before,
.tm-footer *::after{
box-sizing:border-box;
}
/* =========================================================
TOP DECORATIVE LINE
========================================================= */
.tm-footer-top-line{
width:100%;
height:4px;
background:#b88b4a;
}
/* =========================================================
FOOTER MAIN
========================================================= */
.tm-footer-main{
width:90%;
max-width:1380px;
margin:0 auto;
padding:70px 0 55px;
}
/* =========================================================
FOOTER GRID
========================================================= */
.tm-footer-container{
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1.25fr;
gap:55px;
align-items:start;
}
/* =========================================================
BRAND COLUMN
========================================================= */
.tm-footer-brand{
padding-right:25px;
}
.tm-footer-logo{
margin-bottom:24px;
}
.tm-footer-logo img{
width:230px;
max-width:100%;
height:auto;
display:block;
background:#fff;
padding:10px 14px;
border-radius:8px;
}
.tm-footer-about{
max-width:420px;
margin:0;
color:#aeb6bf;
line-height:1.9;
}
/* =========================================================
COLUMN TITLE
========================================================= */
.tm-footer-col h3{
position:relative;
margin:0 0 25px;
padding-bottom:13px;
color:#fff;
font-weight:700;
}
.tm-footer-col h3::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:42px;
height:2px;
background:#b88b4a;
}
/* =========================================================
FOOTER LINKS
========================================================= */
.tm-footer-links{
list-style:none;
margin:0;
padding:0;
}
.tm-footer-links li{
margin:0 0 14px;
}
.tm-footer-links li:last-child{
margin-bottom:0;
}
.tm-footer-links li a{
position:relative;
display:inline-flex;
align-items:center;
color:#b9c0c8;
text-decoration:none;
transition:.3s ease;
}
.tm-footer-links li a::before{
content:"";
width:0;
height:1px;
background:#b88b4a;
margin-right:0;
transition:.3s ease;
}
.tm-footer-links li a:hover{
color:#fff;
transform:translateX(5px);
}
.tm-footer-links li a:hover::before{
width:15px;
margin-right:7px;
}
/* =========================================================
CONTACT COLUMN
========================================================= */
.tm-footer-contact{
list-style:none;
padding:0;
margin:0;
}
.tm-footer-contact li{
display:flex;
align-items:flex-start;
gap:13px;
margin-bottom:18px;
}
.tm-footer-contact li:last-child{
margin-bottom:0;
}
.tm-footer-contact-icon{
flex:0 0 38px;
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(184,139,74,.35);
border-radius:8px;
color:#b88b4a;
}
.tm-footer-contact-text{
color:#b9c0c8;
line-height:1.7;
text-decoration:none;
word-break:break-word;
transition:.3s ease;
}
a.tm-footer-contact-text:hover{
color:#fff;
}
/* =========================================================
SOCIAL
========================================================= */
.tm-footer-social{
display:flex;
align-items:center;
gap:10px;
margin-top:28px;
}
.tm-footer-social a{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.14);
border-radius:50%;
color:#d7dbe0;
text-decoration:none;
transition:.35s ease;
}
.tm-footer-social a:hover{
background:#b88b4a;
border-color:#b88b4a;
color:#fff;
transform:translateY(-4px);
}
/* =========================================================
FOOTER BOTTOM
========================================================= */
.tm-footer-bottom{
border-top:1px solid rgba(255,255,255,.08);
background:#0c141b;
}
.tm-footer-bottom-inner{
width:90%;
max-width:1380px;
margin:auto;
min-height:70px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.tm-footer-bottom p{
margin:0;
color:#8f98a2;
line-height:1.7;
}
.tm-footer-bottom-links{
display:flex;
align-items:center;
gap:20px;
}
.tm-footer-bottom-links a{
color:#8f98a2;
text-decoration:none;
transition:.3s;
}
.tm-footer-bottom-links a:hover{
color:#b88b4a;
}
/* =========================================================
SCROLL TOP
========================================================= */
.tm-scroll-top{
position:fixed;
right:24px;
bottom:25px;
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
background:#b18729;
color:#fff;
text-decoration:none;
border-radius:50%;
box-shadow:0 10px 25px rgba(0,0,0,.25);
z-index:999;
transition:.35s ease;
}
.tm-scroll-top:hover{
background:#fff;
color:#b88b4a;
transform:translateY(-5px);
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1100px){
.tm-footer-main{
width:92%;
padding:60px 0 45px;
}
.tm-footer-container{
grid-template-columns:1.4fr 1fr 1fr;
gap:45px;
}
.tm-footer-brand{
grid-column:1 / -1;
padding-right:0;
}
.tm-footer-about{
max-width:700px;
}
}
/* =========================================================
TABLET / MOBILE
========================================================= */
@media(max-width:768px){
.tm-footer-main{
width:92%;
padding:50px 0 40px;
}
.tm-footer-container{
grid-template-columns:1fr 1fr;
gap:40px 30px;
}
.tm-footer-brand{
grid-column:1 / -1;
text-align:center;
}
.tm-footer-logo{
display:flex;
justify-content:center;
}
.tm-footer-logo img{
width:210px;
}
.tm-footer-about{
max-width:650px;
margin:0 auto;
}
.tm-footer-col h3{
margin-bottom:20px;
}
.tm-footer-social{
justify-content:center;
}
.tm-footer-bottom-inner{
width:92%;
min-height:auto;
padding:18px 0;
flex-direction:column;
justify-content:center;
text-align:center;
}
.tm-footer-bottom-links{
justify-content:center;
flex-wrap:wrap;
gap:12px 20px;
}
.tm-scroll-top{
width:44px;
height:44px;
right:16px;
bottom:75px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:576px){
.tm-footer-top-line{
height:3px;
}
.tm-footer-main{
width:90%;
padding:45px 0 35px;
}
.tm-footer-container{
grid-template-columns:1fr;
gap:32px;
}
.tm-footer-brand{
grid-column:auto;
padding-bottom:8px;
}
.tm-footer-logo{
margin-bottom:20px;
}
.tm-footer-logo img{
width:195px;
}
.tm-footer-about{
line-height:1.8;
}
.tm-footer-col{
text-align:left;
}
.tm-footer-col h3{
margin-bottom:18px;
padding-bottom:11px;
}
.tm-footer-links li{
margin-bottom:12px;
}
.tm-footer-links li a{
width:100%;
}
.tm-footer-contact li{
gap:11px;
margin-bottom:15px;
}
.tm-footer-contact-icon{
flex:0 0 35px;
width:35px;
height:35px;
}
.tm-footer-social{
justify-content:flex-start;
margin-top:22px;
}
.tm-footer-social a{
width:38px;
height:38px;
}
.tm-footer-bottom-inner{
width:90%;
}
.tm-footer-bottom p{
line-height:1.6;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:380px){
.tm-footer-main{
width:92%;
}
.tm-footer-logo img{
width:180px;
}
.tm-footer-social{
gap:8px;
}
.tm-footer-social a{
width:36px;
height:36px;
}
}
/* =========================================================
MOBILE BOTTOM MENU
========================================================= */
.mobile-bottom-menu{
position:fixed;
left:0;
right:0;
bottom:0;
height:64px;
display:none;
align-items:center;
justify-content:space-around;
background:#101820;
border-top:1px solid rgba(255,255,255,.12);
box-shadow:0 -8px 25px rgba(0,0,0,.18);
z-index:99999;
}
.mobile-bottom-menu a{
position:relative;
flex:1;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
color:#c8ced5;
text-decoration:none;
transition:.3s ease;
}
.mobile-bottom-menu a i{
font-size:18px;
line-height:1;
}
.mobile-bottom-menu a span{
line-height:1;
}
.mobile-bottom-menu a:hover,
.mobile-bottom-menu a:focus{
color:#b88b4a;
}
.mobile-bottom-menu a:nth-child(3){
color:#45d483;
}
.mobile-bottom-menu a:nth-child(4){
color:#b88b4a;
}
@media(max-width:768px){
.mobile-bottom-menu{
display:flex;
}
body{
padding-bottom:64px;
}
}
/*=========================================
EXTRA SMALL
==========================================*/
@media(max-width:360px){
.tm-logo h2{
font-size:26px;
}
.tm-footer-col h3{
font-size:22px;
}
.tm-about p,
.tm-contact p,
.tm-footer-col ul li a{
font-size:13px;
}
.tm-contact a{
font-size:13px;
}
.tm-social a{
width:36px;
height:36px;
}
.tm-scroll-top{
width:38px;
height:38px;
}
}
/* about */
/* .about-page{
background:#f8f9fa;
color:#444;
line-height:1.8;
}
.about-page .container{
width:90%;
max-width:1200px;
margin:auto;
}
.about-page img{
max-width:100%;
display:block;
}
.about-page a{
text-decoration:none;
}
.about-page ul{
list-style:none;
padding:0;
margin:0;
}
.container{
width:90%;
max-width:1200px;
margin:auto;
}
.hero{
height:450px;
background:url('https://images.unsplash.com/photo-1500530855697-b586d89ba3ee') center/cover;
position:relative;
}
.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#fff;
text-align:center;
}
.overlay h1{
font-size:55px;
margin-bottom:15px;
}
.overlay p{
font-size:24px;
letter-spacing:2px;
}
.about{
padding:90px 0;
}
.about .container{
display:flex;
gap:60px;
align-items:center;
flex-wrap:wrap;
}
.about-image{
flex:1;
}
.about-image img{
width:100%;
border-radius:15px;
}
.about-content{
flex:1;
}
.about-content span{
color:#d4a017;
font-weight:bold;
letter-spacing:2px;
}
.about-content h2{
font-size:40px;
margin:15px 0;
color:#222;
}
.about-content p{
margin-bottom:20px;
}
.btn{
display:inline-block;
padding:14px 35px;
background:#d4a017;
color:#fff;
text-decoration:none;
border-radius:40px;
transition:.3s;
}
.btn:hover{
background:#222;
}
.choose{
padding:90px 0;
background:#fff;
}
.title{
text-align:center;
margin-bottom:50px;
}
.title h2{
font-size:40px;
}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
width:90%;
margin:auto;
}
.card{
background:#fff;
padding:40px;
text-align:center;
border-radius:12px;
box-shadow:0 5px 25px rgba(0,0,0,.08);
transition:.3s;
}
.card:hover{
transform:translateY(-8px);
}
.card i{
font-size:45px;
color:#d4a017;
margin-bottom:20px;
}
.card h3{
margin-bottom:15px;
}
.mission{
padding:90px 0;
background:#f3f3f3;
}
.mission .container{
display:flex;
gap:40px;
flex-wrap:wrap;
}
.box{
flex:1;
background:#fff;
padding:40px;
border-left:5px solid #d4a017;
border-radius:10px;
}
.counter{
background:#d4a017;
padding:70px 0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
text-align:center;
color:#fff;
}
.counter h2{
font-size:48px;
}
.services{
padding:90px 0;
}
.service-grid{
width:90%;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}
.service{
background:#fff;
padding:40px;
text-align:center;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,.08);
transition:.3s;
}
.service:hover{
background:#d4a017;
color:#fff;
}
.service:hover i{
color:#fff;
}
.service i{
font-size:45px;
color:#d4a017;
margin-bottom:20px;
}
.cta{
padding:90px 20px;
text-align:center;
background:#222;
color:#fff;
}
.cta h2{
font-size:42px;
margin-bottom:20px;
}
.cta p{
margin-bottom:30px;
font-size:18px;
}
@media(max-width:768px){
.hero{
height:320px;
}
.overlay h1{
font-size:35px;
}
.overlay p{
font-size:18px;
}
.about .container{
flex-direction:column;
}
.about-content h2{
font-size:30px;
}
.title h2{
font-size:30px;
}
.cta h2{
font-size:30px;
}
} */
/* gallery */
.travel-gallery-section{
padding:90px 0;
}
.travel-gallery-heading{
text-align:center;
margin-bottom:50px;
}
.travel-gallery-heading span{
color:#c89637;
display:block;
margin-bottom:10px;
letter-spacing:2px;
}
.travel-gallery-heading h2{
color:#ffffff;
margin-bottom:15px;
}
.travel-gallery-heading p{
max-width:700px;
margin:auto;
color:#ffffff;
}
/* Grid */
.travel-gallery-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.travel-gallery-item{
position:relative;
overflow:hidden;
border-radius:16px;
cursor:pointer;
}
.travel-gallery-item::after{
content:"+";
position:absolute;
inset:0;
background:rgba(0,0,0,.35);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:.4s;
font-size: 40px;
font-weight: bold;
/* ←←← Yeh line add karo */
pointer-events: none;
}
.travel-gallery-item:hover::after{
opacity:1;
}
.travel-gallery-item img{
width:100%;
height:280px;
object-fit:cover;
display:block;
transition:.5s;
}
.travel-gallery-item:hover img{
transform:scale(1.1);
}
/* Popup */
.travel-gallery-popup{
position:fixed;
inset:0;
background:rgba(0,0,0,.92);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
}
.travel-gallery-popup.active{
display:flex;
}
.travel-gallery-popup-image{
max-width:90%;
max-height:85vh;
border-radius:12px;
}
.travel-gallery-close{
position:absolute;
top:25px;
right:35px;
color:#fff;
cursor:pointer;
line-height:1;
}
.travel-gallery-prev,
.travel-gallery-next{
position:absolute;
top:50%;
transform:translateY(-50%);
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#c89637;
color:#fff;
cursor:pointer;
}
.travel-gallery-prev{
left:30px;
}
.travel-gallery-next{
right:30px;
}
.travel-gallery-prev:hover,
.travel-gallery-next:hover{
background:#fff;
color:#222;
}
/* Responsive */
@media(max-width:991px){
.travel-gallery-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:600px){
.travel-gallery-grid{
grid-template-columns:1fr;
}
.travel-gallery-item img{
height:240px;
}
.travel-gallery-prev,
.travel-gallery-next{
width:45px;
height:45px;
}
.travel-gallery-prev{
left:10px;
}
.travel-gallery-next{
right:10px;
}
.travel-gallery-close{
right:20px;
}
}
.travel-gallery-popup {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
display: none;
justify-content: center;
align-items: center;
z-index: 99999;
}
.travel-gallery-popup.active {
display: flex;
}
/* Make sure image is responsive */
.travel-gallery-popup-image {
max-width: 90%;
max-height: 88vh;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
/* packages */
.tour-banner{
position:relative;
width:100%;
min-height:620px;
overflow:hidden;
display:flex;
align-items:center;
}
.tour-banner img{
position:absolute;
top:50px;
left:0;
width:100%;
/* height:100%; */
object-fit:cover;
z-index:0;
}
.tour-banner-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
z-index:1;
}
.tour-banner-content{
position: relative;
z-index: 2;
max-width: 700px;
margin: 80px 8%;
padding: 40px 0;
}
/* Left */
.tour-banner-content.left{
margin-left:8%;
margin-right:auto;
text-align:left;
}
/* Center */
.tour-banner-content.center{
margin:0px auto;
text-align:center;
}
/* Right */
.tour-banner-content.right{
margin-left:auto;
margin-right:8%;
text-align:right;
}
.tour-banner-content h1{
margin:0 0 15px;
font-size:48px;
line-height:1.2;
font-weight:700;
color:#000;
}
.tour-banner-content p{
margin:0 0 25px;
font-size:18px;
line-height:30px;
color:#000;
}
.tour-banner-btn{
display:inline-block;
padding:14px 32px;
background:#ff9800;
color:#fff;
text-decoration:none;
border-radius:6px;
}
.tour-overlay{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:#fff;
text-align:center;
padding:20px;
}
.tour-overlay h1{
margin:0 0 15px;
font-weight:700;
letter-spacing:1px;
}
.tour-breadcrumb{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.tour-breadcrumb a{
color:#fff;
text-decoration:none;
transition:.3s;
}
.tour-breadcrumb a:hover{
color:#ffd26a;
}
.tour-package-section{
padding:70px 15px;
background:#f8f9fb;
}
.tour-heading{
max-width:750px;
margin:0 auto 45px;
text-align:center;
}
.tour-heading h2{
margin-bottom:15px;
color:#163560;
}
.tour-heading p{
color:#666;
line-height:28px;
}
.tour-package-grid{
max-width:1320px;
margin:auto;
}
@media(max-width:991px){
.tour-banner{
height:340px;
}
.tour-package-section{
padding:55px 15px;
}
}
@media(max-width:767px){
.tour-banner{
height:270px;
}
.tour-overlay{
padding:15px;
}
.tour-heading{
margin-bottom:35px;
}
.tour-heading p{
line-height:26px;
}
}
@media(max-width:480px){
.tour-banner{
height:220px;
}
.tour-breadcrumb{
justify-content:center;
}
}
.tour-section{
padding:0px 20px;
background:#fff;
}
.tour-container{
max-width:1240px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}
.tour-card{
background:#fff;
border:1px solid #e8e8e8;
border-radius:12px;
overflow:hidden;
transition:.35s;
box-shadow:0 4px 18px rgba(0,0,0,.08);
}
.tour-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,.15);
}
.tour-img{
padding:12px;
}
.tour-img img{
width:100%;
height:200px;
display:block;
border-radius:8px;
object-fit:cover;
}
.tour-content{
padding:10px 28px 28px;
}
.tour-content h3{
margin:0;
font-size:24px;
line-height:1.4;
min-height:75px;
}
.tour-content h3 a{
color:#163265;
text-decoration:none;
}
.tour-content h3 a:hover{
color:#cea62d;
}
.tour-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-top:18px;
color:#555;
font-size:15px;
}
.tour-meta i{
color:#c89d24;
}
.tour-star{
color:#f4b400;
letter-spacing:2px;
}
.tour-btn{
display:block;
margin-top:25px;
background:#132f75;
color:#fff;
text-align:center;
text-decoration:none;
padding:14px;
border-radius:5px;
font-weight:600;
}
.tour-btn:hover{
background:#ff9800;
}
/* Tablet */
@media(max-width:992px){
.tour-container{
grid-template-columns:repeat(2,1fr);
}
.tour-content h3{
font-size:22px;
}
}
/* Mobile */
@media(max-width:768px){
.tour-banner{
min-height:320px;
}
.tour-banner-content{
margin:90px 20px 30px;
max-width:100%;
}
.tour-banner-content h1{
font-size:28px;
line-height:1.3;
margin-bottom:10px;
}
.tour-banner-content p{
font-size:15px;
line-height:24px;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.tour-banner-btn{
margin-top:18px;
}
.tour-section{
padding:50px 15px;
}
.tour-container{
grid-template-columns:1fr;
}
.tour-img img{
height:220px;
}
.tour-content{
padding:18px;
}
.tour-content h3{
font-size:20px;
min-height:auto;
}
.tour-meta{
font-size:14px;
gap:10px;
}
.tour-btn{
width:100%;
text-align:center;
padding:15px 0;
}
}
/* tour detail */
/*==============================
Tour Detail Main Section
==============================*/
.tour-detail-hero {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.tour-detail-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tour-detail-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgb(24 24 24 / 75%), rgb(145 145 145 / 75%), rgb(255 255 255 / 75%));
}
.tour-detail-hero-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 1200px;
color: #fff;
z-index: 5;
}
.tour-detail-badge {
display: inline-block;
background: #c89b3c;
color: #fff;
padding: 10px 22px;
border-radius: 30px;
margin-bottom: 20px;
font-weight: 600;
}
.tour-detail-main-title {
color: #fff;
margin: 0 0 20px;
line-height: 1.2;
}
.tour-detail-hero-text {
color: rgba(255,255,255,.92);
max-width: 700px;
line-height: 1.8;
}
/*==============================
Intro Section
==============================*/
.tour-detail-intro {
padding: 80px 0;
background: #fff;
}
.tour-detail-container {
width: 90%;
max-width: 1320px;
margin: auto;
}
.tour-detail-heading {
text-align: center;
margin-bottom: 55px;
}
.tour-detail-heading span {
display: inline-block;
color: #c89b3c;
font-weight: 600;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.tour-detail-heading h2 {
color: #1d2736;
margin-bottom: 20px;
}
.tour-detail-heading p {
color: #666;
line-height: 1.9;
max-width: 850px;
margin: auto;
}
/*==============================
Info Boxes
==============================*/
.tour-detail-info-row {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 25px;
}
.tour-detail-info-box {
background: #fff;
padding: 35px 25px;
text-align: center;
border-radius: 15px;
border: 1px solid #ececec;
transition: .35s;
box-shadow: 0 10px 35px rgba(0,0,0,.05);
}
.tour-detail-info-box:hover {
transform: translateY(-8px);
box-shadow: 0 18px 45px rgba(0,0,0,.12);
}
.tour-detail-info-box i {
width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
background: #f8f3e9;
color: #c89b3c;
margin-bottom: 18px;
}
.tour-detail-info-box h4 {
margin-bottom: 10px;
color: #222;
}
.tour-detail-info-box p {
color: #777;
}
/*==============================
Main Layout
==============================*/
.tour-detail-section {
padding: 80px 0;
background: #f8f9fb;
}
.tour-detail-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: start;
margin:5px
}
.tour-detail-left {
display: flex;
flex-direction: column;
gap: 35px;
}
.tour-detail-right {
position: sticky;
top: 30px;
display: flex;
flex-direction: column;
gap: 25px;
}
/*==============================
Cards
==============================*/
.tour-detail-card,
.tour-detail-sidebar-card {
background: #fff;
border-radius: 5 px;
padding: 35px;
border: 1px solid #ececec;
box-shadow: 0 12px 35px rgba(0,0,0,.05);
position: relative;
}
.tour-detail-card h1, .tour-detail-sidebar-card h2{ position: relative;}
.tour-detail-card h2::after, .tour-detail-card h1::after,
.tour-detail-sidebar-card h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 70px;
height: 3px;
background: #c89b3c;
}
.tour-detail-card p {
color: #444;
/*line-height: 1.9; */
margin-bottom: 10px;
}
/*==============================
Highlight List
==============================*/
.tour-detail-highlight-list {
list-style: none;
display: grid;
grid-template-columns: repeat(2,1fr);
gap: 18px;
padding: 0;
margin: 0;
}
.tour-detail-highlight-list li {
display: flex;
align-items: center;
gap: 12px;
background: #fafafa;
padding: 15px 18px;
border-radius: 10px;
transition: .3s;
}
.tour-detail-highlight-list li:hover {
background: #f3ead7;
}
.tour-detail-highlight-list i {
color: #c89b3c;
}
/*==================================
Sidebar Form
==================================*/
.tour-detail-form{
display:flex;
flex-direction:column;
gap:5px;
margin-top:5px;
}
.tour-detail-form-group{
width:100%;
}
.tour-detail-form input,
.tour-detail-form select,
.tour-detail-form textarea{
width:100%;
padding:15px 18px;
border:1px solid #ddd;
border-radius:8px;
outline:none;
background:#fff;
transition:.3s;
resize:none;
color:#555;
}
.tour-detail-form input:focus,
.tour-detail-form select:focus,
.tour-detail-form textarea:focus{
border-color:#c89b3c;
}
.tour-detail-btn{
width:100%;
border:none;
background:#c89b3c;
color:#fff;
padding:16px;
border-radius:8px;
cursor:pointer;
transition:.3s;
}
.tour-detail-btn:hover{
background:#a77d28;
}
.tour-detail-btn-outline{
background:transparent;
border:2px solid #fff;
color:#fff;
}
.tour-detail-btn-outline:hover{
background:#fff;
color:#222;
}
/*==================================
Sidebar List
==================================*/
.tour-detail-sidebar-list,
.tour-detail-related-list{
list-style:none;
margin:0;
padding:0;
}
.tour-detail-sidebar-list li,
.tour-detail-related-list li{
display:flex;
align-items:center;
gap:12px;
padding:14px 0;
border-bottom:1px solid #eee;
}
.tour-detail-sidebar-list li:last-child,
.tour-detail-related-list li:last-child{
border-bottom:none;
}
.tour-detail-sidebar-list i{
color:#c89b3c;
}
.tour-detail-related-list a{
color:#444;
text-decoration:none;
transition:.3s;
}
.tour-detail-related-list a:hover{
color:#c89b3c;
}
.tour-detail-contact-card{
background:#1e2432;
color:#fff;
}
.tour-detail-contact-card span{
display:block;
margin-bottom:10px;
color:#d9d9d9;
}
.tour-detail-contact-card h3{
color:#fff;
}
.tour-detail-contact-card h3:after{
background:#fff;
}
.tour-detail-contact-card a{
display:flex;
align-items:center;
gap:12px;
color:#fff;
text-decoration:none;
margin-top:18px;
}
.tour-detail-contact-card i{
color:#c89b3c;
}
/*==================================
Inclusion Exclusion
==================================*/
.tour-detail-content-section{
padding:80px 0;
background:#fff;
}
.tour-detail-inclusion-wrapper{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-bottom:70px;
}
.tour-detail-inclusion-card,
.tour-detail-exclusion-card{
background:#fff;
border-radius:15px;
padding:35px;
border:1px solid #ececec;
box-shadow:0 10px 35px rgba(0,0,0,.05);
}
.tour-detail-inclusion-card h2,
.tour-detail-exclusion-card h2{
margin-bottom:25px;
color:#1d2736;
}
.tour-detail-inclusion-card ul,
.tour-detail-exclusion-card ul{
list-style:none;
margin:0;
padding:0;
}
.tour-detail-inclusion-card li,
.tour-detail-exclusion-card li{
display:flex;
align-items:center;
gap:12px;
padding:14px 0;
border-bottom:1px solid #eee;
}
.tour-detail-inclusion-card li:last-child,
.tour-detail-exclusion-card li:last-child{
border-bottom:none;
}
.tour-detail-inclusion-card i{
color:#28a745;
}
.tour-detail-exclusion-card i{
color:#dc3545;
}
/*==================================
Timeline
==================================*/
.tour-detail-itinerary{
margin-bottom:70px;
}
.tour-detail-itinerary h2{
margin-bottom:40px;
}
.tour-detail-timeline{
position:relative;
padding-left:35px;
}
.tour-detail-timeline:before{
content:"";
position:absolute;
left:9px;
top:0;
width:2px;
height:100%;
background:#d8d8d8;
}
.tour-detail-timeline-item{
position:relative;
margin-bottom:40px;
}
.tour-detail-timeline-item:before{
content:"";
position:absolute;
left:-35px;
top:6px;
width:20px;
height:20px;
border-radius:50%;
background:#c89b3c;
}
.tour-detail-time{
color:#c89b3c;
font-weight:600;
margin-bottom:10px;
}
.tour-detail-timeline-content{
background:#fff;
padding:25px;
border-radius:12px;
border:1px solid #ececec;
box-shadow:0 8px 25px rgba(0,0,0,.05);
}
.tour-detail-timeline-content h3{
margin-bottom:12px;
color:#222;
}
.tour-detail-timeline-content p{
color:#666;
line-height:1.8;
}
.tour-img{
padding:0;
position:relative;
}
.tour-img img{
width:100%;
height:240px;
display:block;
object-fit:cover;
}
.tour-card:hover img{
transform:scale(1.08);
}
.tour-overlay{
position:absolute;
inset:0;
/* background:linear-gradient(to top,
rgba(0,0,0,.75),
rgba(0,0,0,.75),
rgba(0,0,0,.75)); */
display:flex;
flex-direction:column;
justify-content:space-between;
padding:20px;
}
.tour-day{
color:#fff;
font-size:14px;
font-weight:700;
letter-spacing:2px;
border-left:3px solid #fff;
padding-left:10px;
width:max-content;
}
/* Hover Content */
.tour-hover{
opacity:0;
transform:translateY(20px);
transition:.35s;
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end; /* Sab content bottom me */
padding: 20px;
}
.tour-card:hover .tour-hover{
opacity:1;
transform:translateY(0);
}
.tour-icons{
display:flex;
gap:18px;
margin-bottom:15px;
}
.tour-icons i{
width:42px;
height:42px;
border:1px solid rgba(255,255,255,.4);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
background:rgba(255,255,255,.15);
transition:.3s;
}
.tour-icons i:hover{
background:#c89b3c;
border-color:#c89b3c;
}
.tour-read{
color:#fff;
text-decoration:none;
font-size:14px;
letter-spacing:2px;
font-weight:600;
}
.tour-read:hover{
color:#c89b3c;
}
/*==================================
Gallery
==================================*/
.tour-detail-gallery h2{
margin-bottom:35px;
}
.tour-detail-gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}
.tour-detail-gallery-item{
overflow:hidden;
border-radius:14px;
}
.tour-detail-gallery-item img{
width:100%;
display:block;
transition:.5s;
}
.tour-detail-gallery-item:hover img{
transform:scale(1.08);
}
/*==================================
FAQ Section
==================================*/
.tour-detail-faq-section{
padding:80px 0;
background:#e0e1e2;
}
.tour-detail-section-title{
text-align:center;
margin-bottom:50px;
}
.tour-detail-section-title span{
color:#c89b3c;
font-weight:600;
text-transform:uppercase;
letter-spacing:1px;
}
.tour-detail-section-title h2{
color:#222;
margin-top:10px;
}
.tour-detail-faq{
max-width:900px;
margin:auto;
}
.tour-detail-faq-item{
background:#fff;
border:1px solid #ececec;
border-radius:12px;
margin-bottom:20px;
overflow:hidden;
}
.tour-detail-faq-question{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 25px;
cursor:pointer;
font-weight:600;
color:#222;
}
.tour-detail-faq-question i{
color:#c89b3c;
transition:.3s;
}
.tour-detail-faq-answer{
display:none;
padding:0 25px 22px;
color:#666;
line-height:1.8;
}
.tour-detail-faq-item.active .tour-detail-faq-answer{
display:block;
}
.tour-detail-faq-item.active .tour-detail-faq-question i{
transform:rotate(45deg);
}
/*==================================
CTA Section
==================================*/
.tour-detail-cta{
padding:90px 0;
background:#1d2736;
}
.tour-detail-cta-box{
text-align:center;
color:#fff;
max-width:900px;
margin:auto;
}
.tour-detail-cta-box span{
color:#c89b3c;
text-transform:uppercase;
font-weight:600;
letter-spacing:1px;
}
.tour-detail-cta-box h2{
margin:20px 0;
color:#fff;
}
.tour-detail-cta-box p{
color:#ddd;
line-height:1.9;
margin-bottom:35px;
}
.tour-detail-cta-buttons{
display:flex;
justify-content:center;
gap:20px;
}
.tour-detail-cta-buttons .tour-detail-btn{
width:auto;
padding:16px 35px;
text-decoration:none;
}
/*==================================
Bottom Bar
==================================*/
.tour-detail-bottom-bar{
background:#111;
padding:18px 0;
}
.tour-detail-bottom-bar p{
color:#bbb;
text-align:center;
margin:0;
}
.tour-detail-bottom-space{
height:40px;
}
/*==================================
Responsive 1200
==================================*/
@media(max-width:1200px){
.tour-detail-wrapper{
gap:30px;
}
.tour-detail-info-row{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:1400px){
.tour-banner img{
height: 100%;
}
}
/*==================================
Responsive 992
==================================*/
@media(max-width:992px){
.tour-detail-wrapper{
grid-template-columns:1fr;
}
.tour-detail-right{
position:relative;
top:0;
}
.tour-detail-highlight-list{
grid-template-columns:1fr;
}
.tour-detail-gallery-grid{
grid-template-columns:repeat(2,1fr);
}
.tour-detail-inclusion-wrapper{
grid-template-columns:1fr;
}
.tour-detail-hero{
height:500px;
}
}
/*==================================
Responsive 768
==================================*/
@media(max-width:768px){
.tour-detail-intro,
.tour-detail-section,
.tour-detail-content-section,
.tour-detail-faq-section,
.tour-detail-cta{
padding:15px 0;
}
.tour-detail-hero{
height:420px;
}
.tour-detail-hero-content{
text-align:center;
}
.tour-detail-info-row{
grid-template-columns:1fr;
}
.tour-detail-card,
.tour-detail-sidebar-card,
.tour-detail-inclusion-card,
.tour-detail-exclusion-card{
padding:15px;
}
.tour-detail-gallery-grid{
grid-template-columns:1fr;
}
.tour-detail-cta-buttons{
flex-direction:column;
align-items:center;
}
.tour-detail-cta-buttons .tour-detail-btn{
width:250px;
}
}
/*==================================
Responsive 576
==================================*/
@media(max-width:576px){
.tour-detail-container{
width:100%;
}
.tour-detail-hero{
height:200px;
}
.tour-detail-badge{
padding:8px 18px;
}
.tour-detail-info-box{
padding:25px 20px;
}
.tour-detail-info-box i{
width:60px;
height:60px;
line-height:60px;
}
.tour-detail-timeline{
padding-left:25px;
}
.tour-detail-timeline-item:before{
left:-25px;
width:16px;
height:16px;
}
.tour-detail-timeline-content{
padding:20px;
}
.tour-detail-faq-question{
padding:18px;
}
.tour-detail-faq-answer{
padding:0 18px 18px;
}
}
/* contact */
/*==================================
CONTACT HERO
==================================*/
.contact-page-hero{
position:relative;
height:550px;
overflow:hidden;
}
.contact-page-hero img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.contact-page-overlay{
position:absolute;
inset:0;
background:linear-gradient(rgba(8,18,35,.78),rgba(8,18,35,.55));
}
.contact-page-hero-content{
position:absolute;
left:0;
top:50%;
width:100%;
transform:translateY(-50%);
z-index:2;
}
.contact-page-container{
width:90%;
max-width:1320px;
margin:auto;
}
/*==================================
BREADCRUMB
==================================*/
.contact-page-breadcrumb{
display:flex;
align-items:center;
gap:12px;
margin:0 0 20px;
padding:0;
list-style:none;
}
.contact-page-breadcrumb li{
color:rgba(255,255,255,.85);
}
.contact-page-breadcrumb a{
color:#fff;
text-decoration:none;
transition:.3s;
}
.contact-page-breadcrumb a:hover{
color:#c89b3c;
}
.contact-page-breadcrumb i{
color:#c89b3c;
}
/*==================================
HERO CONTENT
==================================*/
.contact-page-tag{
display:inline-block;
padding:10px 22px;
background:#c89b3c;
color:#fff;
border-radius:40px;
margin-bottom:18px;
}
.contact-page-hero-content h1{
color:#fff;
margin-bottom:20px;
line-height:1.2;
max-width:700px;
}
.contact-page-hero-content p{
color:rgba(255,255,255,.92);
line-height:1.9;
max-width:700px;
}
/*==================================
CONTACT INFO
==================================*/
.contact-page-info{
padding:80px 0;
background:#fff;
}
.contact-page-info-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}
.contact-page-info-card{
text-align:center;
padding:35px 25px;
background:#fff;
border-radius:18px;
border:1px solid #ececec;
transition:.35s;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.contact-page-info-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.contact-page-info-card i{
width:72px;
height:72px;
line-height:72px;
border-radius:50%;
background:#f7f2e8;
color:#c89b3c;
margin-bottom:20px;
}
.contact-page-info-card h3{
margin-bottom:12px;
color:#222;
}
.contact-page-info-card a{
color:#666;
text-decoration:none;
transition:.3s;
}
.contact-page-info-card a:hover{
color:#c89b3c;
}
.contact-page-info-card p{
color:#666;
line-height:1.8;
margin:0;
}
/*==================================
MAIN SECTION
==================================*/
.contact-page-main{
padding:90px 0;
background:#f8f9fb;
}
.contact-page-wrapper{
display:grid;
grid-template-columns:2fr 1fr;
gap:35px;
align-items:start;
}
.contact-page-left{
display:flex;
flex-direction:column;
gap:30px;
}
.contact-page-right{
display:flex;
flex-direction:column;
gap:25px;
}
/*==================================
COMMON CARD
==================================*/
.contact-page-card,
.contact-page-sidebar{
background:#fff;
border-radius:18px;
padding:35px;
border:1px solid #ececec;
box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.contact-page-subtitle{
display:inline-block;
color:#c89b3c;
margin-bottom:12px;
text-transform:uppercase;
letter-spacing:1px;
}
.contact-page-card h2{
color:#222;
margin-bottom:18px;
position:relative;
padding-bottom:15px;
}
.contact-page-card h2::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:70px;
height:3px;
background:#c89b3c;
}
.contact-page-card p{
color:#666;
line-height:1.9;
margin-bottom:25px;
}
/*==================================
FORM
==================================*/
.contact-page-form{
display:flex;
flex-direction:column;
gap:20px;
}
.contact-page-form-row{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.contact-page-form-group{
width:100%;
}
.contact-page-form input,
.contact-page-form select,
.contact-page-form textarea{
width:100%;
padding:16px 18px;
border:1px solid #ddd;
border-radius:10px;
outline:none;
transition:.3s;
resize:none;
background:#fff;
}
.contact-page-form input:focus,
.contact-page-form select:focus,
.contact-page-form textarea:focus{
border-color:#c89b3c;
box-shadow:0 0 0 3px rgba(200,155,60,.15);
}
.contact-page-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:16px 30px;
background:#c89b3c;
color:#fff;
text-decoration:none;
border:none;
border-radius:10px;
cursor:pointer;
transition:.35s;
}
.contact-page-btn:hover{
background:#a97d2d;
transform:translateY(-3px);
}
/*==================================
ABOUT FEATURES
==================================*/
.contact-page-feature-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:30px;
}
.contact-page-feature{
display:flex;
align-items:center;
gap:12px;
padding:18px;
border:1px solid #ececec;
border-radius:12px;
background:#fafafa;
transition:.3s;
}
.contact-page-feature:hover{
background:#f8f2e7;
transform:translateY(-5px);
}
.contact-page-feature i{
color:#28a745;
}
.contact-page-feature span{
color:#444;
}
/*==================================
SIDEBAR
==================================*/
.contact-page-sidebar span{
display:inline-block;
color:#c89b3c;
text-transform:uppercase;
margin-bottom:10px;
}
.contact-page-sidebar h3{
color:#222;
margin-bottom:15px;
}
.contact-page-sidebar p{
color:#666;
line-height:1.8;
margin-bottom:25px;
}
/*==================================
CALL BUTTON
==================================*/
.contact-page-call-btn{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
width:100%;
padding:16px;
margin-bottom:15px;
text-decoration:none;
color:#fff;
background:#c89b3c;
border-radius:10px;
transition:.3s;
}
.contact-page-call-btn:hover{
background:#af8128;
}
/*==================================
WHATSAPP BUTTON
==================================*/
.contact-page-whatsapp-btn{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
width:100%;
padding:16px;
text-decoration:none;
color:#fff;
background:#25D366;
border-radius:10px;
transition:.3s;
}
.contact-page-whatsapp-btn:hover{
background:#1fb356;
}
/*==================================
OFFICE LIST
==================================*/
.contact-page-office-list{
list-style:none;
margin:0;
padding:0;
}
.contact-page-office-list li{
display:flex;
gap:15px;
align-items:flex-start;
padding:16px 0;
border-bottom:1px solid #ececec;
color:#555;
}
.contact-page-office-list li:last-child{
border-bottom:none;
}
.contact-page-office-list i{
color:#c89b3c;
width:22px;
text-align:center;
}
/*==================================
GOOGLE MAP
==================================*/
.contact-page-map{
width:100%;
height:500px;
}
.contact-page-map iframe{
width:100%;
height:100%;
border:none;
}
/*==================================
FAQ
==================================*/
.contact-page-faq{
padding:90px 0;
background:#fff;
}
.contact-page-heading{
text-align:center;
margin-bottom:55px;
}
.contact-page-heading span{
color:#c89b3c;
text-transform:uppercase;
}
.contact-page-heading h2{
color:#222;
margin-top:15px;
}
.contact-page-faq-wrapper{
max-width:900px;
margin:auto;
}
.contact-page-faq-item{
border:1px solid #ececec;
border-radius:12px;
margin-bottom:18px;
overflow:hidden;
}
.contact-page-faq-question{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px;
cursor:pointer;
}
.contact-page-faq-question span{
color:#222;
}
.contact-page-faq-question i{
color:#c89b3c;
transition:.3s;
}
.contact-page-faq-answer{
display:none;
padding:0 22px 22px;
}
.contact-page-faq-answer p{
color:#666;
line-height:1.8;
}
.contact-page-faq-item.active .contact-page-faq-answer{
display:block;
}
.contact-page-faq-item.active .contact-page-faq-question i{
transform:rotate(45deg);
}
/*==================================
CTA
==================================*/
.contact-page-cta{
padding:90px 0;
background:#1d2736;
}
.contact-page-cta-box{
max-width:900px;
margin:auto;
text-align:center;
}
.contact-page-cta-box span{
color:#c89b3c;
text-transform:uppercase;
}
.contact-page-cta-box h2{
color:#fff;
margin:18px 0;
}
.contact-page-cta-box p{
color:#ddd;
line-height:1.9;
margin-bottom:35px;
}
.contact-page-cta-btns{
display:flex;
justify-content:center;
gap:20px;
}
.contact-page-btn-outline{
background:transparent;
border:2px solid #fff;
}
.contact-page-btn-outline:hover{
background:#fff;
color:#222;
}
/*==================================
RESPONSIVE
==================================*/
@media(max-width:1200px){
.contact-page-info-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:992px){
.contact-page-wrapper{
grid-template-columns:1fr;
}
.contact-page-right{
order:-1;
}
}
@media(max-width:768px){
.contact-page-hero{
height:420px;
}
.contact-page-form-row,
.contact-page-feature-list,
.contact-page-info-grid{
grid-template-columns:1fr;
}
.contact-page-card,
.contact-page-sidebar{
padding:25px;
}
.contact-page-cta-btns{
flex-direction:column;
align-items:center;
}
.contact-page-cta-btns .contact-page-btn{
width:230px;
}
.contact-page-map{
height:350px;
}
}
@media(max-width:576px){
.contact-page-container{
width:92%;
}
.contact-page-hero{
height:360px;
}
.contact-page-breadcrumb{
flex-wrap:wrap;
}
.contact-page-info{
padding:60px 0;
}
.contact-page-main,
.contact-page-faq,
.contact-page-cta{
padding:70px 0;
}
.contact-page-faq-question{
padding:18px;
}
.contact-page-faq-answer{
padding:0 18px 18px;
}
}
/* new taj mahal packages */
.tour-package-sec {
max-width: 1320px;
margin: 80px auto;
padding: 0 15px;
}
.tour-package-head {
/* max-width: 800px; */
margin: auto;
text-align: center;
margin-bottom: 50px;
}
.tour-small-title {
display: inline-block;
color: #c7a008;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
}
.tour-package-head h2 {
color: black;
font-size: 42px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 18px;
}
.tour-package-head p {
color: black;
line-height: 30px;
/* max-width: 720px; */
margin: auto;
}
.tour-package-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 28px;
}
.tour-package-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 35px rgba(0,0,0,.08);
transition: .4s;
border: 1px solid #f1f1f1;
}
.tour-package-card:hover {
transform: translateY(-10px);
box-shadow: 0 18px 45px rgba(0,0,0,.14);
}
.tour-package-image {
position: relative;
overflow: hidden;
/* height: 250px; */
}
.tour-package-image img {
width: 100%;
/* height: 100%; */
object-fit: cover;
transition: .6s;
}
.tour-package-card:hover .tour-package-image img {
transform: scale(1.08);
}
.tour-day-badge {
position: absolute;
top: 18px;
left: -10px;
background: linear-gradient(135deg, #d4af37, #b8860b);
color: #fff;
padding: 9px 18px;
border-radius: 10px;
font-weight: 600;
display: flex;
align-items: center;
gap: 7px;
box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}
.tour-package-content {
padding: 24px;
}
.tour-rating {
display: flex;
align-items: center;
gap: 8px;
color: #f4b400;
margin-bottom: 16px;
font-size: 17px;
}
.tour-rating span {
color: #333;
font-weight: 700;
}
.tour-package-content h3 {
color: #222;
line-height: 32px;
margin-bottom: 18px;
transition: .3s;
font-family: 'Barlow', sans-serif;
font-size: 20px;
}
.tour-package-card:hover h3 {
color: #c7a008;
}
.tour-location {
display: flex;
align-items: center;
gap: 10px;
color: #666;
margin-bottom: 25px;
padding-bottom: 18px;
border-bottom: 1px solid #eee;
}
.tour-location i {
color: #c7a008;
}
.tour-buttons {
display: flex;
gap: 12px;
}
.tour-buttons a {
flex: 1;
text-decoration: none;
text-align: center;
padding: 8px;
border-radius: 10px;
font-weight: 600;
transition: .35s;
}
.tour-whatsapp {
background: #0aa34f;
color: #fff;
}
.tour-whatsapp:hover {
background: #087f3d;
}
.tour-view {
background: linear-gradient(135deg,#d4af37,#b8860b);
color: #fff;
}
.tour-view:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(212,175,55,.35);
}
.tour-all-btn {
text-align: center;
margin-top: 50px;
}
.tour-all-btn a {
display: inline-block;
text-decoration: none;
background: linear-gradient(135deg,#d4af37,#b8860b);
color: #fff;
padding: 16px 42px;
border-radius: 50px;
font-weight: 700;
letter-spacing: .5px;
transition: .35s;
}
.tour-all-btn a:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(212,175,55,.35);
}
/*==========================
Tablet
==========================*/
@media(max-width:991px){
.tour-package-grid{
grid-template-columns:repeat(2,1fr);
}
.tour-package-head h2{
font-size:34px;
}
}
/*==========================
Mobile
==========================*/
@media(max-width:767px){
.tour-package-sec{
margin:60px auto;
}
.tour-package-grid{
grid-template-columns:1fr;
gap:22px;
}
.tour-package-head{
margin-bottom:35px;
}
.tour-package-head h2{
font-size:28px;
}
.tour-package-head p{
line-height:28px;
}
.tour-package-image{
height:230px;
}
.tour-package-content{
padding:20px;
}
.tour-package-content h3{
line-height:28px;
}
.tour-buttons{
flex-direction:column;
}
.tour-buttons a{
width:100%;
}
.tour-all-btn{
margin-top:35px;
}
.tour-all-btn a{
width:100%;
max-width:300px;
}
}
/* new seciton happy cilent */
.travel-experience-section{
position:relative;
width:100%;
padding:100px 0 70px;
background:url("image/about-bg.webp") center center/cover no-repeat;
overflow:hidden;
z-index:1;
}
.travel-overlay{
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(16,16,16,.90),rgba(16,16,16,.70),rgba(16,16,16,.88));
z-index:-1;
}
.travel-container{
max-width:1320px;
margin:auto;
padding:0 15px;
}
.travel-content{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;
margin-bottom:80px;
}
.travel-left{
color:#fff;
}
.travel-tag{
display:inline-block;
padding:10px 22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18);
border-radius:40px;
color:#d4af37;
font-weight:600;
margin-bottom:25px;
backdrop-filter:blur(12px);
}
.travel-left h2{
font-size:58px;
line-height:1.18;
font-weight:800;
color:#fff;
margin-bottom:28px;
}
.travel-left h2 span{
color:#d4af37;
}
.travel-left p{
max-width:640px;
color:#d8d8d8;
line-height:32px;
margin-bottom:40px;
}
.travel-btns{
display:flex;
gap:18px;
flex-wrap:wrap;
}
.travel-primary-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 36px;
border-radius:50px;
background:linear-gradient(135deg,#e2c15b,#c5951d);
color:#fff;
font-weight:700;
transition:.35s;
}
.travel-primary-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(212,175,55,.35);
}
.travel-secondary-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
border-radius:50px;
border:1px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.06);
backdrop-filter:blur(12px);
color:#fff;
font-weight:600;
transition:.35s;
}
.travel-secondary-btn:hover{
background:#fff;
color:#222;
}
.travel-right{
display:flex;
justify-content:flex-end;
}
.travel-info-box{
width:100%;
max-width:480px;
padding:45px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(20px);
border-radius:24px;
box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.travel-mini-title{
display:inline-block;
color:#d4af37;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:16px;
}
.travel-info-box h3{
color:#fff;
font-size:34px;
line-height:1.3;
margin-bottom:20px;
}
.travel-info-box p{
color:#d8d8d8;
line-height:30px;
margin-bottom:30px;
}
.travel-list{
margin:0;
padding:0;
}
.travel-list li{
display:flex;
align-items:center;
gap:12px;
color:#fff;
margin-bottom:18px;
font-weight:500;
}
.travel-list li:last-child{
margin-bottom:0;
}
.travel-list i{
color:#d4af37;
font-size:18px;
}
/* Tablet */
@media(max-width:991px){
.travel-content{
grid-template-columns:1fr;
gap:45px;
}
.travel-left{
text-align:center;
}
.travel-left p{
margin:auto auto 35px;
}
.travel-btns{
justify-content:center;
}
.travel-right{
justify-content:center;
}
.travel-info-box{
max-width:700px;
}
.travel-left h2{
font-size:44px;
}
}
/* Mobile */
@media(max-width:767px){
.travel-experience-section{
padding:70px 0 50px;
}
.travel-tag{
font-size:13px;
}
.travel-left h2{
font-size:32px;
}
.travel-left p{
font-size:15px;
line-height:28px;
}
.travel-btns{
flex-direction:column;
}
.travel-primary-btn,
.travel-secondary-btn{
width:100%;
}
.travel-info-box{
padding:28px 24px;
}
.travel-info-box h3{
font-size:26px;
}
.travel-info-box p{
font-size:15px;
line-height:28px;
}
.travel-list li{
font-size:15px;
}
}
/*==========================
Stats Section
===========================*/
.travel-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
margin-top:30px;
}
.travel-stat-card{
position:relative;
overflow:hidden;
text-align:center;
padding:35px 25px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(18px);
transition:.4s;
}
.travel-stat-card::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:100%;
height:100%;
background:linear-gradient(90deg,
transparent,
rgba(255,255,255,.15),
transparent);
transition:.7s;
}
.travel-stat-card:hover::before{
left:120%;
}
.travel-stat-card:hover{
transform:translateY(-10px);
border-color:#d4af37;
box-shadow:0 20px 45px rgba(0,0,0,.35);
}
.travel-stat-icon{
width:70px;
height:70px;
margin:auto;
margin-bottom:18px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#e2c15b,#c5951d);
color:#fff;
font-size:26px;
}
.travel-stat-card h3{
color:#fff;
font-size:44px;
margin-bottom:10px;
font-weight:700;
}
.travel-stat-card p{
color:#d8d8d8;
margin:0;
font-weight:500;
line-height:28px;
}
/*==========================
Bottom Section
===========================*/
.travel-bottom{
margin-top:70px;
display:flex;
justify-content:space-between;
align-items:center;
gap:25px;
padding:28px 35px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(18px);
}
.travel-trust{
display:flex;
align-items:center;
gap:15px;
color:#fff;
font-size:18px;
font-weight:600;
}
.travel-trust i{
color:#d4af37;
font-size:34px;
}
.travel-bottom-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:16px 32px;
border-radius:50px;
background:linear-gradient(135deg,#e2c15b,#c5951d);
color:#fff;
font-weight:700;
transition:.35s;
}
.travel-bottom-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(212,175,55,.35);
}
.travel-bottom-btn i{
transition:.35s;
}
.travel-bottom-btn:hover i{
transform:translateX(6px);
}
/*==========================
Floating Animation
===========================*/
.travel-stat-card:nth-child(1){
animation:floatBox 5s ease-in-out infinite;
}
.travel-stat-card:nth-child(2){
animation:floatBox 6s ease-in-out infinite;
}
.travel-stat-card:nth-child(3){
animation:floatBox 7s ease-in-out infinite;
}
.travel-stat-card:nth-child(4){
animation:floatBox 8s ease-in-out infinite;
}
@keyframes floatBox{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
}
/*==========================
Tablet
===========================*/
@media(max-width:991px){
.travel-stats{
grid-template-columns:repeat(2,1fr);
}
.travel-bottom{
flex-direction:column;
text-align:center;
}
}
/*==========================
Mobile
===========================*/
@media(max-width:767px){
.travel-stats{
grid-template-columns:1fr;
gap:20px;
margin-top:20px;
}
.travel-stat-card{
padding:30px 20px;
}
.travel-stat-icon{
width:60px;
height:60px;
font-size:22px;
}
.travel-stat-card h3{
font-size:34px;
}
.travel-stat-card p{
font-size:15px;
line-height:24px;
}
.travel-bottom{
padding:25px 20px;
margin-top:45px;
}
.travel-trust{
flex-direction:column;
font-size:16px;
gap:10px;
}
.travel-trust i{
font-size:28px;
}
.travel-bottom-btn{
width:100%;
justify-content:center;
}
}
.travel-hidden{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}
.travel-show{
opacity:1;
transform:translateY(0);
}
/* email box */
.top-contact-bar{
border-top:1px solid #ffe0e6;
border-bottom:1px solid #ffe0e6;
padding:50px 0;
}
.top-contact-container{
max-width:1320px;
margin:auto;
padding:0 15px;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}
.top-contact-item{
flex:1;
display:flex;
align-items:center;
gap:18px;
padding:18px 22px;
background:#fff;
border-radius:14px;
transition:.35s;
border:1px solid #f2f2f2;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.top-contact-item:hover{
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(0,0,0,.12);
}
.top-contact-icon{
width:58px;
height:58px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#d4af37,#b8860b);
color:#fff;
font-size:22px;
flex-shrink:0;
}
.whatsapp-box .top-contact-icon{
background:linear-gradient(135deg,#25d366,#0f9d58);
}
.top-contact-info{
display:flex;
flex-direction:column;
}
.top-contact-info span{
color:#777;
font-size:14px;
margin-bottom:4px;
}
.top-contact-info strong{
color:#222;
font-size:18px;
font-weight:700;
word-break:break-word;
}
.top-contact-item:hover .top-contact-info strong{
color:#c89a16;
}
.whatsapp-box:hover .top-contact-info strong{
color:#25d366;
}
/* Tablet */
@media(max-width:991px){
.top-contact-container{
flex-wrap:wrap;
}
.top-contact-item{
min-width:calc(50% - 10px);
}
}
/* Mobile */
@media(max-width:767px){
.top-contact-container{
flex-direction:column;
}
.top-contact-item{
width:100%;
padding:16px;
}
.top-contact-icon{
width:50px;
height:50px;
font-size:18px;
}
.top-contact-info strong{
font-size:16px;
}
}
/* model css */
.tour-enquiry-btn{
display:inline-flex;
align-items:center;
gap:8px;
background:#0b7d39;
color:#fff;
padding:12px 22px;
border-radius:6px;
text-decoration:none;
font-weight:600;
transition:.3s;
}
.tour-enquiry-btn:hover{
background:#085f2b;
}
.tour-enquiry-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.65);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
padding:20px;
}
.tour-enquiry-box{
width:100%;
max-width:600px;
background:#fff;
border-radius:12px;
padding:30px;
position:relative;
animation:popup .3s ease;
}
@keyframes popup{
from{
transform:translateY(-20px);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}
.tour-close{
position:absolute;
right:18px;
top:12px;
font-size:28px;
cursor:pointer;
}
.tour-enquiry-box h3{
margin-bottom:25px;
text-align:center;
}
.tour-form-row{
margin-bottom:18px;
}
.tour-form-row input,
.tour-form-row select,
.tour-form-row textarea{
width:100%;
padding:13px 15px;
border:1px solid #ddd;
border-radius:6px;
outline:none;
box-sizing:border-box;
}
.tour-form-row input:focus,
.tour-form-row select:focus,
.tour-form-row textarea:focus{
border-color:#0b7d39;
}
.tour-form-two{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-bottom:18px;
}
@media(max-width:576px){
.tour-form-two{
display:grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap:10px !important;
}
.tour-form-two .tour-detail-form-group{
width:100%;
}
.tour-form-two input,
.tour-form-two select{
width:100%;
min-width:0;
}
}
.tour-form-two input{
width:100%;
padding:13px;
border:1px solid #ddd;
border-radius:6px;
box-sizing:border-box;
}
.tour-submit-btn{
width:100%;
background:#0b7d39;
color:#fff;
border:none;
padding:14px;
border-radius:6px;
cursor:pointer;
font-size:16px;
font-weight:600;
}
.tour-submit-btn:hover{
background:#085f2b;
}
@media(max-width:600px){
.tour-enquiry-box{
padding:20px;
}
.tour-form-two{
grid-template-columns:1fr;
}
}
/* button shi 5 seciton code */
.button-group {
display: flex;
align-items: center;
gap: 12px;
margin-top: 15px;
}
.button-group a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 22px;
border-radius: 8px;
text-decoration: none;
font-size: 15px;
font-weight: 600;
transition: all 0.3s ease;
}
/* View Button */
.btn-view {
background: #0d6efd;
color: #fff;
}
.btn-view:hover {
background: #0b5ed7;
transform: translateY(-2px);
}
/* Enquiry Button */
.btn-enquiry {
background: #28a745;
color: #fff;
}
.btn-enquiry:hover {
background: #218838;
transform: translateY(-2px);
}
@media (max-width: 576px) {
.button-group {
flex-direction: row;
gap: 10px;
}
.button-group a {
flex: 1;
padding: 10px;
font-size: 14px;
}
}
/* form date */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
visibility:hidden;
}
input[type="date"]{
height:55px;
border:2px solid #e5e7eb;
border-radius:12px;
padding:0 18px;
font-size:16px;
}
/* =========================================================
BORANA CABS - AWARDS & RECOGNITION
========================================================= */
.borana-awards {
width: 100%;
padding: 20px 0;
background: #ffffff;
overflow: hidden;
}
.borana-awards-container {
width: 90%;
max-width: 1250px;
margin: auto;
}
/* =========================================================
HEADING
========================================================= */
.borana-awards-heading {
text-align: center;
max-width: 650px;
margin: 0 auto 45px;
}
.borana-awards-label {
display: inline-flex;
align-items: center;
gap: 10px;
color: #b8860b;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 12px;
}
.borana-awards-label::before,
.borana-awards-label::after {
content: "";
width: 25px;
height: 1px;
background: #d8c69b;
}
.borana-awards-heading h2 {
margin: 0;
color: #222;
font-size: clamp(30px, 4vw, 45px);
line-height: 1.15;
font-weight: 800;
font-family: "Libertinus Math", system-ui;
}
.borana-awards-heading h2 span {
color: #b8860b;
}
.borana-awards-heading p {
margin: 12px 0 0;
color: #888;
line-height: 1.7;
}
/* =========================================================
SLIDER
========================================================= */
.borana-awards-slider {
width: 100%;
overflow: hidden;
position: relative;
}
/* soft fade edges */
.borana-awards-slider::before,
.borana-awards-slider::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 90px;
z-index: 3;
pointer-events: none;
}
.borana-awards-slider::before {
left: 0;
background: linear-gradient(
to right,
#ffffff,
rgba(255,255,255,0)
);
}
.borana-awards-slider::after {
right: 0;
background: linear-gradient(
to left,
#ffffff,
rgba(255,255,255,0)
);
}
/* =========================================================
TRACK
========================================================= */
.borana-awards-track {
display: flex;
align-items: center;
gap: 22px;
width: max-content;
animation: boranaAwardMove 28s linear infinite;
}
.borana-awards-track:hover {
animation-play-state: paused;
}
/* =========================================================
CARD
========================================================= */
.borana-award-card {
width: 210px;
height: 150px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #eee7d9;
border-radius: 18px;
box-shadow:
0 8px 25px rgba(0,0,0,.055);
transition: .35s ease;
position: relative;
}
.borana-award-card::after {
content: "";
position: absolute;
width: 35px;
height: 2px;
bottom: 14px;
background: #d4b96d;
opacity: .7;
}
.borana-award-card:hover {
transform: translateY(-7px);
border-color: #ddc995;
box-shadow:
0 18px 35px rgba(0,0,0,.10);
}
.borana-award-card img {
width: 145px;
height: 105px;
object-fit: contain;
display: block;
}
/* =========================================================
ANIMATION
========================================================= */
@keyframes boranaAwardMove {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* =========================================================
BOTTOM LINE
========================================================= */
.borana-awards-bottom {
display: flex;
justify-content: center;
margin-top: 35px;
}
.borana-awards-bottom span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 18px;
background: #faf8f2;
border: 1px solid #eee5d2;
border-radius: 30px;
color: #777;
}
.borana-awards-bottom i {
color: #b8860b;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width: 768px) {
.borana-awards {
padding: 20px 0;
}
.borana-awards-heading {
margin-bottom: 32px;
}
.borana-awards-heading h2 {
font-size: 30px;
}
.borana-awards-heading p {
font-size: 13px;
}
.borana-award-card {
width: 165px;
height: 125px;
border-radius: 15px;
}
.borana-award-card img {
width: 115px;
height: 85px;
}
.borana-awards-track {
gap: 15px;
animation-duration: 23s;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width: 480px) {
.borana-awards {
padding: 50px 0;
}
.borana-awards-container {
width: 94%;
}
.borana-awards-label {
font-size: 9px;
letter-spacing: 2px;
}
.borana-awards-heading h2 {
font-size: 27px;
}
.borana-awards-heading p {
padding: 0 10px;
font-size: 12px;
}
.borana-awards-slider::before,
.borana-awards-slider::after {
width: 35px;
}
.borana-award-card {
width: 145px;
height: 110px;
border-radius: 13px;
}
.borana-award-card img {
width: 100px;
height: 72px;
}
.borana-award-card::after {
bottom: 9px;
width: 25px;
}
.borana-awards-track {
gap: 12px;
animation-duration: 20s;
}
.borana-awards-bottom {
margin-top: 25px;
}
.borana-awards-bottom span {
font-size: 10px;
padding: 8px 14px;
}
}
ul.exinclude, ul.included { list-style: none;}
.exinclude li::before { content: "✘ ";
color: red;
margin-right: 6px;
}
.included li::before {
content: "✓";
color: green;
margin-right: 6px;
}
ul.included {
padding-left: 0px !important;
}
ul.exinclude, ul.included {
padding-left: 0px !important;
}
/* =========================================================
BORANA CABS - DESTINATION JOURNEY SECTION
========================================================= */
.borana-journey-section {
width: 100%;
padding: 25px 0 90px;
background: #ffffff;
overflow: hidden;
}
.borana-journey-container {
width: 90%;
max-width: 1240px;
margin: auto;
}
/* =========================================================
SECTION HEADING
========================================================= */
.borana-journey-heading {
text-align: center;
max-width: 760px;
margin: 0 auto 60px;
}
.borana-journey-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
color: #b68a2c;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 16px;
}
.borana-journey-kicker::before,
.borana-journey-kicker::after {
content: "";
width: 28px;
height: 1px;
background: #d6c18d;
}
.borana-journey-heading h2 {
margin: 0;
color: #1d1d1d;
font-family: "Libertinus Math", system-ui;
font-size: clamp(38px, 5vw, 60px);
line-height: 1.05;
font-weight: 700;
}
.borana-journey-heading h2 span {
color: #b68a2c;
}
.borana-journey-heading p {
max-width: 650px;
margin: 18px auto 0;
color: #777;
font-size: 14px;
line-height: 1.8;
}
/* =========================================================
MAIN DESTINATION STAGE
========================================================= */
.borana-journey-stage {
position: relative;
min-height: 570px;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
BACKGROUND CIRCLE
========================================================= */
.borana-journey-circle {
position: absolute;
width: 480px;
height: 480px;
border-radius: 50%;
background: #faf7ef;
border: 1px solid #eee5d2;
z-index: 0;
}
.borana-journey-circle::before {
content: "";
position: absolute;
inset: 25px;
border-radius: 50%;
border: 1px dashed #dfcfaa;
}
.borana-journey-circle::after {
content: "";
position: absolute;
inset: 75px;
border-radius: 50%;
border: 1px solid rgba(182,138,44,.13);
}
/* =========================================================
CENTER CONTENT
========================================================= */
.borana-journey-center {
position: relative;
z-index: 4;
width: 270px;
height: 270px;
border-radius: 50%;
overflow: hidden;
box-shadow:
0 25px 60px rgba(0,0,0,.18);
border: 7px solid #ffffff;
}
.borana-journey-center img {
width: 100%;
height: 100%;
object-fit: cover;
transition: .6s ease;
}
.borana-journey-center:hover img {
transform: scale(1.08);
}
.borana-journey-center-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,.65),
transparent 60%
);
}
.borana-journey-center-content {
position: absolute;
left: 0;
right: 0;
bottom: 28px;
text-align: center;
}
.borana-journey-center-content small {
color: #e5c778;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.borana-journey-center-content strong {
display: block;
color: #fff;
font-family: "Libertinus Math", system-ui;
font-size: 25px;
margin-top: 4px;
}
/* =========================================================
FLOATING DESTINATION CARDS
========================================================= */
.borana-journey-place {
position: absolute;
z-index: 5;
width: 225px;
background: #ffffff;
padding: 10px;
border: 1px solid #eee7da;
box-shadow:
0 18px 45px rgba(0,0,0,.10);
transition: .4s ease;
}
.borana-journey-place:hover {
transform: translateY(-8px);
box-shadow:
0 25px 55px rgba(0,0,0,.15);
}
.borana-journey-place-image {
width: 100%;
height: 125px;
overflow: hidden;
position: relative;
}
.borana-journey-place-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: .6s ease;
}
.borana-journey-place:hover img {
transform: scale(1.08);
}
.borana-journey-place-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 4px 4px;
}
.borana-journey-place-info div strong {
display: block;
color: #222;
font-family: "Libertinus Math", system-ui;
font-size: 18px;
}
.borana-journey-place-info div span {
display: block;
color: #4D4D4D;
font-size: 15px;
margin-top: 2px;
}
.borana-journey-place-number {
color: #c5b58e;
font-size: 11px;
font-weight: 700;
}
/* =========================================================
POSITION 1
========================================================= */
.borana-place-jaipur {
top: 20px;
left: 2%;
transform: rotate(-2deg);
}
.borana-place-jaipur:hover {
transform: rotate(0) translateY(-8px);
}
/* =========================================================
POSITION 2
========================================================= */
.borana-place-delhi {
top: 35px;
right: 2%;
transform: rotate(2deg);
}
.borana-place-delhi:hover {
transform: rotate(0) translateY(-8px);
}
/* =========================================================
POSITION 3
========================================================= */
.borana-place-mathura {
bottom: 25px;
left: 8%;
transform: rotate(2deg);
}
.borana-place-mathura:hover {
transform: rotate(0) translateY(-8px);
}
/* =========================================================
POSITION 4
========================================================= */
.borana-place-udaipur {
bottom: 10px;
right: 8%;
transform: rotate(-2deg);
}
.borana-place-udaipur:hover {
transform: rotate(0) translateY(-8px);
}
/* =========================================================
SMALL ROUTE DOTS
========================================================= */
.borana-route-dot {
position: absolute;
width: 7px;
height: 7px;
background: #b68a2c;
border-radius: 50%;
z-index: 2;
}
.borana-route-dot.one {
top: 32%;
left: 26%;
}
.borana-route-dot.two {
top: 25%;
right: 28%;
}
.borana-route-dot.three {
bottom: 29%;
left: 29%;
}
.borana-route-dot.four {
bottom: 25%;
right: 30%;
}
/* =========================================================
BOTTOM DESTINATION NAV
========================================================= */
.borana-journey-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-top: 45px;
border-top: 1px solid #eee8dd;
border-bottom: 1px solid #eee8dd;
}
.borana-journey-nav-item {
display: flex;
align-items: center;
gap: 9px;
padding: 16px 25px;
color: #777;
font-weight: 600;
text-decoration: none;
transition: .3s ease;
}
.borana-journey-nav-item + .borana-journey-nav-item {
border-left: 1px solid #eee8dd;
}
.borana-journey-nav-item i {
color: #b68a2c;
font-size: 9px;
}
.borana-journey-nav-item:hover {
color: #b68a2c;
background: #faf8f2;
}
/* =========================================================
BOTTOM CTA
========================================================= */
.borana-journey-bottom {
text-align: center;
margin-top: 32px;
}
.borana-journey-bottom p {
margin: 0 0 13px;
color: #999;
}
.borana-journey-button {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 22px;
background: #1d1d1d;
color: #fff;
text-decoration: none;
font-size: 11px;
font-weight: 700;
transition: .3s ease;
}
.borana-journey-button:hover {
background: #b68a2c;
color: #fff;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width: 991px) {
.borana-journey-section {
padding: 75px 0;
}
.borana-journey-stage {
min-height: 720px;
}
.borana-journey-circle {
width: 430px;
height: 430px;
}
.borana-journey-center {
width: 240px;
height: 240px;
}
.borana-journey-place {
width: 190px;
}
.borana-journey-place-image {
height: 105px;
}
.borana-place-jaipur {
left: 0;
}
.borana-place-delhi {
right: 0;
}
.borana-place-mathura {
left: 2%;
}
.borana-place-udaipur {
right: 2%;
}
.borana-journey-nav-item {
padding: 14px 16px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width: 576px) {
.borana-journey-section {
padding: 25px 0;
}
.borana-journey-container {
width: 92%;
}
.borana-journey-heading {
margin-bottom: 35px;
}
.borana-journey-kicker {
font-size: 9px;
letter-spacing: 2px;
}
.borana-journey-heading h2 {
font-size: 36px;
line-height: 1.08;
}
.borana-journey-heading p {
font-size: 13px;
line-height: 1.7;
}
/* stage becomes vertical */
.borana-journey-stage {
min-height: auto;
display: flex;
flex-direction: column;
gap: 13px;
}
.borana-journey-circle {
display: none;
}
/* center destination */
.borana-journey-center {
width: 100%;
height: 290px;
border-radius: 18px;
border-width: 4px;
}
.borana-journey-center-content {
bottom: 25px;
}
.borana-journey-center-content strong {
font-size: 28px;
}
/* remove absolute positioning */
.borana-journey-place {
position: relative;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: 100%;
padding: 8px;
display: flex;
align-items: center;
gap: 12px;
transform: none !important;
border-radius: 10px;
}
.borana-journey-place:hover {
transform: translateY(-3px) !important;
}
.borana-journey-place-image {
width: 105px;
height: 78px;
flex-shrink: 0;
}
.borana-journey-place-info {
flex: 1;
padding: 0;
}
.borana-journey-place-info div strong {
font-size: 20px;
}
.borana-journey-place-info div span {
font-size: 13px;
}
.borana-journey-place-number {
padding-right: 8px;
}
.borana-route-dot {
display: none;
}
/* navigation */
.borana-journey-nav {
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
margin-top: 30px;
}
.borana-journey-nav::-webkit-scrollbar {
display: none;
}
.borana-journey-nav-item {
flex-shrink: 0;
padding: 13px 17px;
font-size: 11px;
}
.borana-journey-bottom {
margin-top: 25px;
}
}
/* =========================================================
BORANA CABS - WHY CHOOSE US
========================================================= */
.borana-why-section{
width:100%;
padding:50px 0;
background:#080a0d;
overflow:hidden;
}
.borana-why-container{
width:90%;
max-width:1250px;
margin:auto;
}
/* =========================================================
HEADER
========================================================= */
.borana-why-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:40px;
margin-bottom:55px;
}
.borana-why-heading{
max-width:700px;
}
.borana-why-label{
display:flex;
align-items:center;
gap:12px;
color:#d4aa55;
font-size:11px;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:15px;
}
.borana-why-label span{
width:38px;
height:1px;
background:#d4aa55;
}
.borana-why-heading h2{
margin:0;
color:#fff;
font-family:"Libertinus Math",system-ui;
font-size:clamp(38px,5vw,58px);
line-height:1.05;
font-weight:700;
}
.borana-why-heading h2 em{
color:#d4aa55;
font-style:normal;
}
.borana-why-heading p{
max-width:600px;
margin:17px 0 0;
color:#858d94;
font-size:14px;
line-height:1.8;
}
/* =========================================================
HEADER BADGE
========================================================= */
.borana-why-badge{
min-width:145px;
padding:18px 20px;
border:1px solid rgba(212,170,85,.25);
text-align:center;
}
.borana-why-badge strong{
display:block;
color:#d4aa55;
font-size:31px;
line-height:1;
}
.borana-why-badge span{
display:block;
margin-top:7px;
color:#747d84;
font-size:9px;
letter-spacing:2px;
text-transform:uppercase;
}
/* =========================================================
FEATURE GRID
========================================================= */
.borana-why-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
border-top:1px solid rgba(255,255,255,.10);
border-left:1px solid rgba(255,255,255,.10);
}
/* =========================================================
FEATURE ITEM
========================================================= */
.borana-why-card{
position:relative;
display:grid;
grid-template-columns:55px 58px 1fr;
align-items:center;
gap:18px;
min-height:150px;
padding:25px;
border-right:1px solid rgba(255,255,255,.10);
border-bottom:1px solid rgba(255,255,255,.10);
background:#080a0d;
transition:.4s ease;
overflow:hidden;
}
/* gold hover line */
.borana-why-card::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background:#d4aa55;
transform:scaleY(0);
transform-origin:center;
transition:.4s ease;
}
.borana-why-card:hover{
background:#11151a;
}
.borana-why-card:hover::before{
transform:scaleY(1);
}
/* =========================================================
NUMBER
========================================================= */
.borana-why-number{
color:#3f464c;
font-size:11px;
font-weight:700;
letter-spacing:2px;
transition:.3s;
}
.borana-why-card:hover
.borana-why-number{
color:#d4aa55;
}
/* =========================================================
ICON
========================================================= */
.borana-why-icon{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(212,170,85,.30);
border-radius:50%;
color:#d4aa55;
font-size:18px;
transition:.4s;
}
.borana-why-card:hover
.borana-why-icon{
background:#d4aa55;
border-color:#d4aa55;
color:#080a0d;
transform:rotate(8deg);
}
/* =========================================================
CONTENT
========================================================= */
.borana-why-content h3{
margin:0;
color:#fff;
font-family:"Libertinus Math",system-ui;
font-size:21px;
line-height:1.2;
font-weight:600;
}
.borana-why-content p{
margin:8px 0 0;
color:#7d868d;
line-height:1.65;
}
/* =========================================================
BOTTOM LINE
========================================================= */
.borana-why-bottom{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:35px;
padding:20px 25px;
background:#11151a;
border:1px solid rgba(255,255,255,.08);
}
.borana-why-bottom-left{
display:flex;
align-items:center;
gap:12px;
}
.borana-why-bottom-left i{
color:#d4aa55;
}
.borana-why-bottom-left span{
color:#8a9298;
/* font-size:11px; */
}
.borana-why-bottom-right{
display:flex;
align-items:center;
gap:9px;
color:#fff;
font-weight:700;
}
.borana-why-bottom-right i{
color:#d4aa55;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:850px){
.borana-why-section{
padding:75px 0;
}
.borana-why-header{
display:block;
margin-bottom:40px;
}
.borana-why-badge{
display:none;
}
.borana-why-grid{
grid-template-columns:1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:600px){
.borana-why-section{
padding:25px 0;
background:#080a0d;
}
.borana-why-container{
width:92%;
}
/* HEADER */
.borana-why-header{
margin-bottom:30px;
}
.borana-why-label{
gap:9px;
font-size:9px;
letter-spacing:2px;
margin-bottom:13px;
}
.borana-why-label span{
width:28px;
}
.borana-why-heading h2{
font-size:36px;
line-height:1.08;
}
.borana-why-heading p{
margin-top:13px;
font-size:12px;
line-height:1.7;
}
/* GRID */
.borana-why-grid{
display:block;
border-top:1px solid rgba(255,255,255,.10);
border-left:0;
}
/* CARD */
.borana-why-card{
display:grid;
grid-template-columns:30px 44px 1fr;
gap:11px;
min-height:auto;
padding:20px 7px;
border-left:0;
border-right:0;
}
/* NUMBER */
.borana-why-number{
align-self:start;
padding-top:5px;
font-size:9px;
letter-spacing:1px;
}
/* ICON */
.borana-why-icon{
width:42px;
height:42px;
font-size:15px;
}
/* CONTENT */
.borana-why-content{
min-width:0;
}
.borana-why-content h3{
line-height:1.15;
}
.borana-why-content p{
margin-top:6px;
line-height:1.55;
}
/* BOTTOM */
.borana-why-bottom{
display:block;
margin-top:22px;
padding:18px;
}
.borana-why-bottom-left{
margin-bottom:12px;
}
.borana-why-bottom-left span{
line-height:1.5;
}
.borana-why-bottom-right{
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:380px){
.borana-why-heading h2{
font-size:32px;
}
.borana-why-card{
grid-template-columns:27px 40px 1fr;
gap:9px;
}
.borana-why-icon{
width:39px;
height:39px;
font-size:13px;
}
.borana-why-content h3{
font-size:16px;
}
.borana-why-content p{
font-size:9px;
}
}