/* Start custom CSS for html, class: .elementor-element-f2cd18e *//* =========================================================
DH TOURS & TRAVELS
SERVICES PAGE
========================================================= */
#dhtt-services-page{
--dhtt-navy:#101C2C;
--dhtt-navy-2:#16263B;
--dhtt-yellow:#FFB703;
--dhtt-blue:#009FE3;
--dhtt-teal:#14B8A6;
--dhtt-bg:#F7FAFC;
--dhtt-white:#FFFFFF;
--dhtt-text:#172033;
--dhtt-muted:#687386;
--dhtt-border:#E5EAF0;
--dhtt-radius:22px;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color:var(--dhtt-text);
background:var(--dhtt-bg);
overflow:hidden;
}
#dhtt-services-page *,
#dhtt-services-page *::before,
#dhtt-services-page *::after{
box-sizing:border-box;
}
#dhtt-services-page img{
max-width:100%;
display:block;
}
#dhtt-services-page a{
text-decoration:none;
}
.dhtt-srv-container{
width:min(1180px, calc(100% - 40px));
margin:auto;
}
/* =========================================================
HERO
========================================================= */
.dhtt-srv-hero{
min-height:650px;
position:relative;
display:flex;
align-items:center;
background:
linear-gradient(
90deg,
rgba(9,19,33,.96) 0%,
rgba(9,19,33,.82) 45%,
rgba(9,19,33,.25) 100%
),
url("https://images.unsplash.com/photo-1512343879784-a960bf40e7f2?auto=format&fit=crop&w=1900&q=90")
center/cover no-repeat;
}
.dhtt-srv-hero-bg{
position:absolute;
inset:0;
background:
radial-gradient(
circle at 72% 30%,
rgba(255,183,3,.17),
transparent 28%
);
pointer-events:none;
}
.dhtt-srv-hero-content{
position:relative;
z-index:2;
max-width:730px;
padding:110px 0 100px;
}
.dhtt-srv-eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
font-size:12px;
font-weight:800;
letter-spacing:2px;
color:#fff;
margin-bottom:22px;
}
.dhtt-srv-eyebrow span{
width:28px;
height:3px;
background:var(--dhtt-yellow);
display:block;
}
.dhtt-srv-hero h1{
margin:0;
color:#fff;
font-size:clamp(42px, 5.4vw, 76px);
line-height:1.02;
letter-spacing:-3px;
font-weight:800;
}
.dhtt-srv-hero h1 strong{
display:block;
color:var(--dhtt-yellow);
font-weight:800;
}
.dhtt-srv-hero p{
max-width:650px;
margin:27px 0 34px;
color:rgba(255,255,255,.82);
font-size:17px;
line-height:1.8;
}
.dhtt-srv-hero-actions{
display:flex;
gap:14px;
flex-wrap:wrap;
}
.dhtt-srv-btn{
min-height:54px;
padding:0 24px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
border-radius:12px;
font-size:14px;
font-weight:800;
transition:.3s ease;
}
.dhtt-srv-btn-primary{
background:var(--dhtt-yellow);
color:#101820;
}
.dhtt-srv-btn-primary:hover{
background:#ffc532;
color:#101820;
transform:translateY(-2px);
}
.dhtt-srv-btn-outline{
border:1px solid rgba(255,255,255,.35);
color:#fff;
background:rgba(255,255,255,.07);
backdrop-filter:blur(8px);
}
.dhtt-srv-btn-outline:hover{
border-color:#fff;
color:#fff;
background:rgba(255,255,255,.14);
}
.dhtt-wa-icon{
color:#55D36A;
font-size:18px;
}
.dhtt-srv-hero-note{
margin-top:25px;
color:rgba(255,255,255,.66);
font-size:13px;
}
.dhtt-srv-hero-note span{
color:var(--dhtt-yellow);
font-weight:900;
margin-right:7px;
}
/* =========================================================
INTRO
========================================================= */
.dhtt-srv-intro{
padding:95px 0 55px;
background:#fff;
}
.dhtt-srv-section-heading{
max-width:760px;
}
.dhtt-srv-section-heading.centered{
text-align:center;
margin:0 auto 50px;
}
.dhtt-srv-mini-label{
display:inline-block;
color:var(--dhtt-blue);
font-size:11px;
letter-spacing:2px;
font-weight:900;
margin-bottom:14px;
}
.dhtt-srv-section-heading h2{
margin:0;
font-size:clamp(32px,4vw,52px);
line-height:1.1;
letter-spacing:-1.8px;
color:var(--dhtt-navy);
}
.dhtt-srv-section-heading h2 span{
color:var(--dhtt-blue);
}
.dhtt-srv-section-heading p{
margin:20px 0 0;
color:var(--dhtt-muted);
line-height:1.8;
font-size:16px;
}
/* =========================================================
SERVICE SECTION
========================================================= */
.dhtt-service-section{
padding:25px 0 110px;
background:#fff;
}
.dhtt-service-grid{
display:grid;
grid-template-columns:
repeat(2, minmax(0,1fr));
gap:24px;
}
.dhtt-service-card{
border:1px solid var(--dhtt-border);
border-radius:var(--dhtt-radius);
overflow:hidden;
background:#fff;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
opacity:0;
transform:translateY(35px);
}
.dhtt-service-card.dhtt-visible{
opacity:1;
transform:translateY(0);
}
.dhtt-service-card:hover{
transform:translateY(-7px);
border-color:rgba(0,159,227,.25);
box-shadow:
0 22px 55px rgba(16,28,44,.10);
}
.dhtt-service-card.dhtt-visible:hover{
transform:translateY(-7px);
}
.dhtt-service-image{
height:250px;
position:relative;
overflow:hidden;
}
.dhtt-service-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease;
}
.dhtt-service-card:hover
.dhtt-service-image img{
transform:scale(1.06);
}
.dhtt-service-number{
position:absolute;
left:18px;
bottom:18px;
width:48px;
height:48px;
border-radius:13px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(16,28,44,.88);
color:#fff;
font-size:13px;
font-weight:900;
backdrop-filter:blur(8px);
}
.dhtt-service-body{
padding:28px 28px 30px;
}
.dhtt-service-tag{
color:var(--dhtt-blue);
font-size:10px;
letter-spacing:1.6px;
font-weight:900;
}
.dhtt-service-body h3{
margin:10px 0 11px;
color:var(--dhtt-navy);
font-size:25px;
letter-spacing:-.7px;
}
.dhtt-service-body p{
margin:0 0 22px;
color:var(--dhtt-muted);
font-size:14px;
line-height:1.75;
}
.dhtt-service-link{
display:inline-flex;
align-items:center;
gap:9px;
color:var(--dhtt-navy);
font-size:13px;
font-weight:900;
transition:.25s ease;
}
.dhtt-service-link span{
color:var(--dhtt-blue);
font-size:18px;
transition:.25s ease;
}
.dhtt-service-link:hover{
color:var(--dhtt-blue);
}
.dhtt-service-link:hover span{
transform:translateX(4px);
}
/* =========================================================
PROCESS
========================================================= */
.dhtt-srv-process{
padding:110px 0;
background:
linear-gradient(
135deg,
#101C2C 0%,
#16263B 100%
);
color:#fff;
}
.dhtt-process-layout{
display:grid;
grid-template-columns:
.85fr 1.15fr;
gap:80px;
align-items:center;
}
.dhtt-process-content h2{
margin:0;
font-size:clamp(34px,4vw,52px);
line-height:1.1;
letter-spacing:-2px;
color:#fff;
}
.dhtt-process-content h2 span{
display:block;
color:var(--dhtt-yellow);
}
.dhtt-process-content p{
color:rgba(255,255,255,.68);
line-height:1.8;
margin:20px 0 28px;
max-width:470px;
}
.dhtt-process-steps{
border-left:1px solid rgba(255,255,255,.15);
padding-left:40px;
}
.dhtt-process-step{
display:flex;
gap:20px;
padding:23px 0;
opacity:0;
transform:translateX(30px);
transition:.5s ease;
}
.dhtt-process-step.dhtt-visible{
opacity:1;
transform:translateX(0);
}
.dhtt-process-icon{
flex:0 0 54px;
height:54px;
border-radius:16px;
background:rgba(255,183,3,.12);
border:1px solid rgba(255,183,3,.28);
display:flex;
align-items:center;
justify-content:center;
color:var(--dhtt-yellow);
font-weight:900;
font-size:12px;
}
.dhtt-process-step h3{
margin:2px 0 7px;
color:#fff;
font-size:18px;
}
.dhtt-process-step p{
margin:0;
color:rgba(255,255,255,.62);
font-size:13px;
line-height:1.7;
}
/* =========================================================
FLEET
========================================================= */
.dhtt-srv-fleet{
padding:105px 0;
background:var(--dhtt-bg);
}
.dhtt-mini-fleet{
display:grid;
grid-template-columns:
repeat(5,minmax(0,1fr));
gap:15px;
}
.dhtt-mini-car{
background:#fff;
border:1px solid var(--dhtt-border);
border-radius:18px;
overflow:hidden;
transition:.35s ease;
opacity:0;
transform:translateY(25px);
}
.dhtt-mini-car.dhtt-visible{
opacity:1;
transform:translateY(0);
}
.dhtt-mini-car:hover{
transform:translateY(-6px);
box-shadow:
0 18px 35px rgba(16,28,44,.09);
}
.dhtt-mini-car-image{
height:150px;
background:#f3f6f8;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.dhtt-mini-car-image img{
width:100%;
height:100%;
object-fit:contain;
padding:8px;
transition:.4s ease;
}
.dhtt-mini-car:hover
.dhtt-mini-car-image img{
transform:scale(1.05);
}
.dhtt-mini-car-info{
padding:17px;
}
.dhtt-mini-car-info span{
display:block;
color:var(--dhtt-blue);
font-size:9px;
font-weight:900;
letter-spacing:1.2px;
}
.dhtt-mini-car-info h3{
margin:6px 0 0;
font-size:17px;
color:var(--dhtt-navy);
}
/* =========================================================
ENQUIRY
========================================================= */
.dhtt-srv-enquiry{
padding:100px 0;
background:#fff;
}
.dhtt-enquiry-box{
background:
linear-gradient(
135deg,
#f2f8fb,
#f8fafc
);
border:1px solid #e3ebf0;
border-radius:28px;
padding:55px;
display:grid;
grid-template-columns:
1fr 430px;
gap:60px;
align-items:center;
}
.dhtt-enquiry-content h2{
margin:0;
color:var(--dhtt-navy);
font-size:clamp(32px,4vw,49px);
line-height:1.1;
letter-spacing:-1.7px;
}
.dhtt-enquiry-content h2 span{
display:block;
color:var(--dhtt-blue);
}
.dhtt-enquiry-content p{
color:var(--dhtt-muted);
line-height:1.8;
max-width:580px;
margin:18px 0 25px;
}
.dhtt-enquiry-points{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.dhtt-enquiry-points div{
color:#4d596b;
font-size:12px;
font-weight:700;
}
.dhtt-enquiry-points span{
color:var(--dhtt-teal);
margin-right:7px;
}
.dhtt-enquiry-actions{
display:flex;
flex-direction:column;
gap:13px;
}
.dhtt-enquiry-whatsapp,
.dhtt-enquiry-form-btn{
width:100%;
min-height:82px;
padding:17px 20px;
border-radius:16px;
display:flex;
align-items:center;
gap:15px;
text-align:left;
}
.dhtt-enquiry-whatsapp{
background:var(--dhtt-navy);
color:#fff;
}
.dhtt-enquiry-whatsapp:hover{
color:#fff;
background:#172b42;
transform:translateY(-2px);
}
.dhtt-wa-large{
width:44px;
height:44px;
flex:0 0 44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:13px;
background:rgba(255,255,255,.1);
color:#55D36A;
font-size:20px;
}
.dhtt-enquiry-whatsapp strong,
.dhtt-enquiry-form-btn strong{
display:block;
font-size:14px;
}
.dhtt-enquiry-whatsapp small,
.dhtt-enquiry-form-btn small{
display:block;
margin-top:4px;
font-size:11px;
opacity:.65;
}
.dhtt-arrow{
margin-left:auto;
font-size:20px;
}
.dhtt-enquiry-form-btn{
border:1px solid #dce3e9;
background:#fff;
color:var(--dhtt-navy);
cursor:pointer;
font-family:inherit;
}
.dhtt-enquiry-form-btn:hover{
border-color:var(--dhtt-blue);
transform:translateY(-2px);
}
.dhtt-enquiry-form-btn > span:first-child{
font-size:21px;
color:var(--dhtt-blue);
}
/* =========================================================
FINAL CTA
========================================================= */
.dhtt-srv-final{
padding:90px 0;
background:var(--dhtt-yellow);
}
.dhtt-final-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}
.dhtt-final-inner h2{
margin:0;
font-size:clamp(34px,4vw,53px);
line-height:1.05;
letter-spacing:-2px;
color:var(--dhtt-navy);
}
.dhtt-final-inner h2 span{
display:block;
}
.dhtt-final-inner p{
margin:13px 0 0;
color:#59616b;
font-size:14px;
}
.dhtt-final-btn{
min-height:60px;
padding:0 27px;
display:inline-flex;
align-items:center;
gap:16px;
background:var(--dhtt-navy);
color:#fff;
border-radius:13px;
font-size:13px;
font-weight:900;
white-space:nowrap;
transition:.3s ease;
}
.dhtt-final-btn:hover{
background:#1a3048;
color:#fff;
transform:translateY(-3px);
}
.dhtt-final-btn span{
font-size:20px;
}
/* =========================================================
FLOATING WHATSAPP
========================================================= */
.dhtt-floating-whatsapp{
position:fixed;
right:24px;
bottom:25px;
z-index:9999;
min-height:52px;
padding:0 18px;
border-radius:30px;
background:#172033;
color:#fff;
display:flex;
align-items:center;
gap:9px;
box-shadow:
0 12px 35px rgba(0,0,0,.20);
font-size:12px;
}
.dhtt-floating-whatsapp:hover{
color:#fff;
transform:translateY(-3px);
}
.dhtt-floating-whatsapp span{
color:#55D36A;
font-size:18px;
}
/* =========================================================
MOBILE BAR
========================================================= */
.dhtt-mobile-bar{
display:none;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1000px){
.dhtt-srv-container{
width:min(100% - 32px, 900px);
}
.dhtt-service-grid{
grid-template-columns:1fr;
}
.dhtt-process-layout{
grid-template-columns:1fr;
gap:45px;
}
.dhtt-mini-fleet{
grid-template-columns:
repeat(3,minmax(0,1fr));
}
.dhtt-enquiry-box{
grid-template-columns:1fr;
gap:35px;
}
.dhtt-final-inner{
align-items:flex-start;
flex-direction:column;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:700px){
#dhtt-services-page{
padding-bottom:64px;
}
.dhtt-srv-container{
width:calc(100% - 28px);
}
.dhtt-srv-hero{
min-height:650px;
background-position:
62% center;
}
.dhtt-srv-hero-content{
padding:90px 0 80px;
}
.dhtt-srv-hero h1{
font-size:43px;
letter-spacing:-2px;
}
.dhtt-srv-hero p{
font-size:14px;
line-height:1.75;
}
.dhtt-srv-hero-actions{
flex-direction:column;
}
.dhtt-srv-btn{
width:100%;
}
.dhtt-srv-intro{
padding:70px 0 35px;
}
.dhtt-srv-section-heading h2{
font-size:35px;
}
.dhtt-service-section{
padding-bottom:75px;
}
.dhtt-service-grid{
gap:18px;
}
.dhtt-service-image{
height:205px;
}
.dhtt-service-body{
padding:23px;
}
.dhtt-service-body h3{
font-size:22px;
}
.dhtt-service-body p{
font-size:13px;
}
.dhtt-srv-process{
padding:75px 0;
}
.dhtt-process-content h2{
font-size:36px;
}
.dhtt-process-steps{
padding-left:17px;
}
.dhtt-process-step{
gap:14px;
}
.dhtt-process-icon{
flex-basis:46px;
height:46px;
border-radius:13px;
}
.dhtt-mini-fleet{
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:12px;
}
.dhtt-mini-car-image{
height:125px;
}
.dhtt-mini-car-info{
padding:13px;
}
.dhtt-mini-car-info h3{
font-size:15px;
}
.dhtt-srv-fleet{
padding:75px 0;
}
.dhtt-enquiry-box{
padding:30px 20px;
border-radius:21px;
}
.dhtt-enquiry-content h2{
font-size:35px;
}
.dhtt-enquiry-points{
grid-template-columns:1fr;
}
.dhtt-srv-enquiry{
padding:70px 0;
}
.dhtt-srv-final{
padding:70px 0;
}
.dhtt-final-inner h2{
font-size:38px;
}
.dhtt-final-btn{
width:100%;
justify-content:center;
white-space:normal;
text-align:center;
}
.dhtt-floating-whatsapp{
display:none;
}
.dhtt-mobile-bar{
position:fixed;
left:0;
right:0;
bottom:0;
height:64px;
z-index:10000;
display:grid;
grid-template-columns:1fr 1fr;
box-shadow:
0 -8px 25px rgba(0,0,0,.12);
}
.dhtt-mobile-bar a{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
font-size:13px;
font-weight:900;
}
.dhtt-mobile-call{
background:#fff;
color:var(--dhtt-navy);
border-top:1px solid #e6ebef;
}
.dhtt-mobile-call:hover{
color:var(--dhtt-navy);
}
.dhtt-mobile-wa{
background:var(--dhtt-navy);
color:#fff;
}
.dhtt-mobile-wa:hover{
color:#fff;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:420px){
.dhtt-srv-hero h1{
font-size:38px;
}
.dhtt-srv-hero{
min-height:620px;
}
.dhtt-mini-fleet{
grid-template-columns:1fr 1fr;
}
.dhtt-mini-car-image{
height:105px;
}
.dhtt-enquiry-whatsapp,
.dhtt-enquiry-form-btn{
min-height:76px;
}
}/* End custom CSS */