/* Start custom CSS for html, class: .elementor-element-4f39ba2 *//* =========================================================
DH TOURS & TRAVELS
CONTACT + BOOKING PAGE
========================================================= */
#dhtt-contact-page{
--contact-navy:#101C2C;
--contact-navy2:#16263B;
--contact-yellow:#FFB703;
--contact-blue:#009FE3;
--contact-teal:#14B8A6;
--contact-bg:#F7FAFC;
--contact-white:#FFFFFF;
--contact-text:#172033;
--contact-muted:#687386;
--contact-border:#E3E9EF;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
color:var(--contact-text);
background:var(--contact-bg);
overflow:hidden;
}
#dhtt-contact-page *,
#dhtt-contact-page *::before,
#dhtt-contact-page *::after{
box-sizing:border-box;
}
#dhtt-contact-page img{
display:block;
max-width:100%;
}
#dhtt-contact-page a{
text-decoration:none;
}
.dhtt-contact-container{
width:min(
1180px,
calc(100% - 40px)
);
margin:auto;
}
/* =========================================================
HERO
========================================================= */
.dhtt-contact-hero{
min-height:600px;
position:relative;
display:flex;
align-items:center;
background:
linear-gradient(
90deg,
rgba(7,17,29,.96),
rgba(7,17,29,.79) 48%,
rgba(7,17,29,.25)
),
url("https://images.unsplash.com/photo-1530789253388-582c481c54b0?auto=format&fit=crop&w=1900&q=90")
center/cover no-repeat;
}
.dhtt-contact-hero-overlay{
position:absolute;
inset:0;
background:
radial-gradient(
circle at 75% 45%,
rgba(255,183,3,.15),
transparent 28%
);
}
.dhtt-contact-hero-content{
position:relative;
z-index:2;
max-width:730px;
padding:105px 0 90px;
}
.dhtt-contact-eyebrow{
display:flex;
align-items:center;
gap:10px;
color:#fff;
font-size:11px;
font-weight:900;
letter-spacing:2px;
margin-bottom:21px;
}
.dhtt-contact-eyebrow span{
width:28px;
height:3px;
background:var(--contact-yellow);
}
.dhtt-contact-hero h1{
margin:0;
color:#fff;
font-size:clamp(
44px,
5.8vw,
74px
);
line-height:1;
letter-spacing:-3px;
}
.dhtt-contact-hero h1 strong{
display:block;
color:var(--contact-yellow);
}
.dhtt-contact-hero p{
max-width:650px;
margin:26px 0 31px;
color:rgba(255,255,255,.77);
font-size:16px;
line-height:1.8;
}
.dhtt-contact-hero-actions{
display:flex;
flex-wrap:wrap;
gap:13px;
}
.dhtt-contact-btn{
min-height:54px;
padding:0 24px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
border-radius:12px;
font-size:13px;
font-weight:900;
transition:.3s ease;
}
.dhtt-contact-btn-primary{
background:var(--contact-yellow);
color:#111a23;
}
.dhtt-contact-btn-primary:hover{
color:#111a23;
background:#ffc532;
transform:translateY(-2px);
}
.dhtt-contact-btn-outline{
color:#fff;
border:1px solid rgba(255,255,255,.32);
background:rgba(255,255,255,.07);
}
.dhtt-contact-btn-outline:hover{
color:#fff;
background:rgba(255,255,255,.14);
border-color:#fff;
}
.dhtt-contact-btn-outline span{
color:#55D36A;
}
/* =========================================================
QUICK CONTACT
========================================================= */
.dhtt-contact-quick{
background:#fff;
padding:22px 0;
border-bottom:1px solid var(--contact-border);
}
.dhtt-contact-quick-grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:13px;
}
.dhtt-contact-quick-card{
min-height:82px;
padding:14px 17px;
display:flex;
align-items:center;
gap:13px;
border-radius:15px;
background:#fff;
color:var(--contact-navy);
border:1px solid var(--contact-border);
transition:.3s ease;
opacity:0;
transform:translateY(15px);
}
.dhtt-contact-quick-card.dhtt-contact-visible{
opacity:1;
transform:translateY(0);
}
.dhtt-contact-quick-card:hover{
color:var(--contact-navy);
border-color:var(--contact-blue);
transform:translateY(-3px);
}
.dhtt-contact-quick-icon{
width:43px;
height:43px;
flex:0 0 43px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:#eef7fa;
color:var(--contact-blue);
font-size:18px;
}
.dhtt-contact-quick-icon.whatsapp{
color:#55D36A;
background:#edf9f0;
}
.dhtt-contact-quick-icon.email{
color:#7b61ff;
background:#f2efff;
}
.dhtt-contact-quick-card small{
display:block;
color:#8993a1;
font-size:8px;
letter-spacing:1.3px;
font-weight:900;
}
.dhtt-contact-quick-card strong{
display:block;
margin-top:4px;
font-size:12px;
}
.dhtt-contact-arrow{
margin-left:auto;
color:#8d98a5;
font-size:17px;
}
/* =========================================================
BOOKING SECTION
========================================================= */
.dhtt-booking-section{
padding:100px 0;
background:var(--contact-bg);
}
.dhtt-booking-layout{
display:grid;
grid-template-columns:
.72fr 1.28fr;
gap:65px;
align-items:start;
}
/* =========================================================
BOOKING INFO
========================================================= */
.dhtt-booking-info{
position:sticky;
top:90px;
}
.dhtt-contact-label{
display:inline-block;
margin-bottom:13px;
color:var(--contact-blue);
font-size:10px;
font-weight:900;
letter-spacing:2px;
}
.dhtt-booking-info h2{
margin:0;
color:var(--contact-navy);
font-size:clamp(
36px,
4vw,
51px
);
line-height:1.05;
letter-spacing:-2px;
}
.dhtt-booking-info h2 span{
display:block;
color:var(--contact-blue);
}
.dhtt-booking-info > p{
margin:19px 0 30px;
color:var(--contact-muted);
font-size:14px;
line-height:1.8;
}
.dhtt-booking-benefits{
border-top:1px solid var(--contact-border);
}
.dhtt-booking-benefits > div{
display:flex;
gap:14px;
padding:19px 0;
border-bottom:1px solid var(--contact-border);
opacity:0;
transform:translateX(-20px);
transition:.5s ease;
}
.dhtt-booking-benefits > div.dhtt-contact-visible{
opacity:1;
transform:translateX(0);
}
.dhtt-booking-benefits > div > span{
width:36px;
height:36px;
flex:0 0 36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:#edf7fb;
color:var(--contact-blue);
font-size:9px;
font-weight:900;
}
.dhtt-booking-benefits strong{
display:block;
color:var(--contact-navy);
font-size:12px;
}
.dhtt-booking-benefits small{
display:block;
margin-top:5px;
color:var(--contact-muted);
font-size:10px;
line-height:1.5;
}
.dhtt-booking-direct{
margin-top:28px;
padding:17px;
display:flex;
align-items:center;
gap:13px;
border-radius:14px;
background:#fff;
border:1px solid var(--contact-border);
}
.dhtt-direct-icon{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:#edf9f0;
color:#55D36A;
}
.dhtt-booking-direct small{
display:block;
color:#8a94a2;
font-size:8px;
font-weight:900;
letter-spacing:1.2px;
}
.dhtt-booking-direct strong{
display:block;
margin-top:4px;
color:var(--contact-navy);
font-size:13px;
}
/* =========================================================
BOOKING CARD
========================================================= */
.dhtt-booking-card{
padding:34px;
background:#fff;
border:1px solid var(--contact-border);
border-radius:24px;
box-shadow:
0 20px 55px
rgba(16,28,44,.06);
}
.dhtt-booking-card-head{
display:flex;
align-items:center;
justify-content:space-between;
padding-bottom:25px;
border-bottom:1px solid var(--contact-border);
}
.dhtt-booking-card-head > div > span{
color:var(--contact-blue);
font-size:9px;
font-weight:900;
letter-spacing:1.5px;
}
.dhtt-booking-card-head h3{
margin:7px 0 0;
color:var(--contact-navy);
font-size:23px;
letter-spacing:-.7px;
}
.dhtt-form-step{
width:43px;
height:43px;
display:flex;
align-items:center;
justify-content:center;
border-radius:13px;
background:var(--contact-navy);
color:var(--contact-yellow);
font-size:10px;
font-weight:900;
}
/* =========================================================
FORM SECTION TITLES
========================================================= */
.dhtt-form-section-title{
margin:27px 0 16px;
display:flex;
align-items:center;
gap:9px;
color:var(--contact-navy);
font-size:11px;
font-weight:900;
}
.dhtt-form-section-title span{
width:25px;
height:25px;
display:flex;
align-items:center;
justify-content:center;
border-radius:7px;
background:#edf7fb;
color:var(--contact-blue);
font-size:8px;
}
/* =========================================================
FORM GRID
========================================================= */
.dhtt-form-grid{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:16px;
}
.dhtt-field{
min-width:0;
}
.dhtt-field-full{
margin-top:0;
}
.dhtt-field label{
display:block;
margin-bottom:7px;
color:#465164;
font-size:10px;
font-weight:800;
}
.dhtt-field label b{
color:#e14d4d;
margin-left:2px;
}
.dhtt-field input,
.dhtt-field select,
.dhtt-field textarea{
width:100%;
border:1px solid #dce4ea;
background:#fbfcfd;
border-radius:10px;
color:var(--contact-text);
font-family:inherit;
font-size:12px;
outline:none;
transition:.25s ease;
}
.dhtt-field input,
.dhtt-field select{
height:47px;
padding:0 13px;
}
.dhtt-field textarea{
min-height:115px;
padding:13px;
resize:vertical;
line-height:1.6;
}
.dhtt-field input::placeholder,
.dhtt-field textarea::placeholder{
color:#a4adb8;
}
.dhtt-field input:focus,
.dhtt-field select:focus,
.dhtt-field textarea:focus{
border-color:var(--contact-blue);
background:#fff;
box-shadow:
0 0 0 3px
rgba(0,159,227,.08);
}
/* =========================================================
CONSENT
========================================================= */
.dhtt-consent{
margin-top:20px;
display:flex;
align-items:flex-start;
gap:10px;
cursor:pointer;
}
.dhtt-consent input{
position:absolute;
opacity:0;
}
.dhtt-consent > span{
width:17px;
height:17px;
flex:0 0 17px;
border-radius:5px;
border:1px solid #cbd4dc;
background:#fff;
position:relative;
}
.dhtt-consent input:checked + span{
background:var(--contact-blue);
border-color:var(--contact-blue);
}
.dhtt-consent input:checked + span::after{
content:"✓";
position:absolute;
left:3px;
top:0px;
color:#fff;
font-size:11px;
font-weight:900;
}
.dhtt-consent small{
color:#7a8593;
font-size:9px;
line-height:1.5;
}
/* =========================================================
FORM ACTIONS
========================================================= */
.dhtt-form-actions{
margin-top:23px;
display:grid;
grid-template-columns:
1fr 1fr;
gap:10px;
}
.dhtt-submit-whatsapp,
.dhtt-submit-email{
min-height:54px;
padding:0 15px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
border-radius:11px;
font-family:inherit;
font-size:10px;
font-weight:900;
cursor:pointer;
transition:.3s ease;
}
.dhtt-submit-whatsapp{
background:var(--contact-navy);
color:#fff;
border:1px solid var(--contact-navy);
}
.dhtt-submit-whatsapp:hover{
background:#1a3048;
transform:translateY(-2px);
}
.dhtt-submit-whatsapp span{
color:#55D36A;
font-size:17px;
}
.dhtt-submit-email{
background:#fff;
color:var(--contact-navy);
border:1px solid #d8e1e8;
}
.dhtt-submit-email:hover{
border-color:var(--contact-blue);
color:var(--contact-blue);
transform:translateY(-2px);
}
.dhtt-submit-email span{
color:var(--contact-blue);
font-size:16px;
}
.dhtt-submit-whatsapp b,
.dhtt-submit-email b{
font-size:16px;
margin-left:auto;
}
/* =========================================================
FORM STATUS
========================================================= */
.dhtt-form-status{
min-height:0;
margin-top:14px;
border-radius:10px;
font-size:10px;
line-height:1.5;
}
.dhtt-form-status.success{
padding:12px;
color:#17753d;
background:#edf9f0;
border:1px solid #ccebd5;
}
.dhtt-form-status.error{
padding:12px;
color:#a33838;
background:#fff1f1;
border:1px solid #f0cccc;
}
.dhtt-form-security{
margin-top:15px;
padding-top:14px;
border-top:1px solid var(--contact-border);
color:#8a94a2;
font-size:9px;
}
.dhtt-form-security span{
color:var(--contact-teal);
margin-right:5px;
}
/* =========================================================
EXPERIENCE
========================================================= */
.dhtt-contact-experience{
padding:100px 0;
background:#fff;
}
.dhtt-contact-experience-head{
max-width:700px;
}
.dhtt-contact-experience-head h2{
margin:0;
color:var(--contact-navy);
font-size:clamp(
34px,
4vw,
50px
);
line-height:1.08;
letter-spacing:-1.8px;
}
.dhtt-contact-experience-head h2 span{
color:var(--contact-blue);
}
.dhtt-contact-experience-grid{
margin-top:45px;
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:18px;
}
.dhtt-contact-experience-grid > div{
padding:27px;
border:1px solid var(--contact-border);
border-radius:18px;
opacity:0;
transform:translateY(25px);
transition:.5s ease;
}
.dhtt-contact-experience-grid > div.dhtt-contact-visible{
opacity:1;
transform:translateY(0);
}
.dhtt-contact-experience-grid > div > span{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:9px;
background:#edf7fb;
color:var(--contact-blue);
font-size:9px;
font-weight:900;
}
.dhtt-contact-experience-grid h3{
margin:20px 0 9px;
color:var(--contact-navy);
font-size:17px;
}
.dhtt-contact-experience-grid p{
margin:0;
color:var(--contact-muted);
font-size:12px;
line-height:1.7;
}
/* =========================================================
FAQ
========================================================= */
.dhtt-contact-faq{
padding:95px 0;
background:var(--contact-bg);
}
.dhtt-contact-faq-grid{
display:grid;
grid-template-columns:
.7fr 1.3fr;
gap:80px;
align-items:start;
}
.dhtt-contact-faq-grid h2{
margin:0;
color:var(--contact-navy);
font-size:clamp(
35px,
4vw,
49px
);
line-height:1.05;
letter-spacing:-1.8px;
}
.dhtt-contact-faq-grid h2 span{
color:var(--contact-blue);
}
.dhtt-contact-faq-grid > div > p{
margin:18px 0 0;
color:var(--contact-muted);
font-size:13px;
line-height:1.8;
}
.dhtt-faq-list{
border-top:1px solid var(--contact-border);
}
.dhtt-faq-list details{
border-bottom:1px solid var(--contact-border);
}
.dhtt-faq-list summary{
min-height:65px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
cursor:pointer;
list-style:none;
color:var(--contact-navy);
font-size:12px;
font-weight:800;
}
.dhtt-faq-list summary::-webkit-details-marker{
display:none;
}
.dhtt-faq-list summary span{
color:var(--contact-blue);
font-size:20px;
transition:.25s ease;
}
.dhtt-faq-list details[open]
summary span{
transform:rotate(45deg);
}
.dhtt-faq-list details p{
margin:0 30px 20px 0;
color:var(--contact-muted);
font-size:11px;
line-height:1.75;
}
/* =========================================================
FINAL CTA
========================================================= */
.dhtt-contact-final{
padding:85px 0;
background:var(--contact-yellow);
}
.dhtt-contact-final-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}
.dhtt-contact-final-inner > div > span{
display:block;
margin-bottom:12px;
color:#626973;
font-size:10px;
font-weight:900;
letter-spacing:2px;
}
.dhtt-contact-final h2{
margin:0;
color:var(--contact-navy);
font-size:clamp(
35px,
4vw,
52px
);
line-height:1.05;
letter-spacing:-2px;
}
.dhtt-contact-final h2 strong{
display:block;
}
.dhtt-contact-final-btn{
min-height:59px;
padding:0 25px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:13px;
border-radius:12px;
background:var(--contact-navy);
color:#fff;
font-size:12px;
font-weight:900;
white-space:nowrap;
}
.dhtt-contact-final-btn:hover{
color:#fff;
background:#1a3048;
transform:translateY(-3px);
}
.dhtt-contact-final-btn span{
font-size:19px;
}
/* =========================================================
FLOATING WHATSAPP
========================================================= */
.dhtt-contact-floating{
position:fixed;
right:24px;
bottom:25px;
z-index:9999;
min-height:51px;
padding:0 19px;
display:flex;
align-items:center;
gap:9px;
border-radius:30px;
background:var(--contact-navy);
color:#fff;
font-size:12px;
font-weight:900;
box-shadow:
0 12px 35px rgba(0,0,0,.20);
}
.dhtt-contact-floating:hover{
color:#fff;
transform:translateY(-3px);
}
.dhtt-contact-floating span{
color:#55D36A;
font-size:18px;
}
/* =========================================================
MOBILE BAR
========================================================= */
.dhtt-contact-mobile-bar{
display:none;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1000px){
.dhtt-contact-container{
width:min(
calc(100% - 32px),
900px
);
}
.dhtt-booking-layout{
grid-template-columns:1fr;
gap:40px;
}
.dhtt-booking-info{
position:static;
}
.dhtt-contact-faq-grid{
grid-template-columns:1fr;
gap:40px;
}
.dhtt-contact-final-inner{
flex-direction:column;
align-items:flex-start;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:700px){
#dhtt-contact-page{
padding-bottom:64px;
}
.dhtt-contact-container{
width:calc(100% - 28px);
}
.dhtt-contact-hero{
min-height:610px;
}
.dhtt-contact-hero-content{
padding:90px 0 75px;
}
.dhtt-contact-hero h1{
font-size:43px;
letter-spacing:-2px;
}
.dhtt-contact-hero p{
font-size:14px;
}
.dhtt-contact-hero-actions{
flex-direction:column;
}
.dhtt-contact-btn{
width:100%;
}
.dhtt-contact-quick{
padding:14px 0;
}
.dhtt-contact-quick-grid{
grid-template-columns:1fr;
}
.dhtt-contact-quick-card{
min-height:69px;
}
.dhtt-booking-section{
padding:70px 0;
}
.dhtt-booking-info h2{
font-size:37px;
}
.dhtt-booking-card{
padding:23px 18px;
border-radius:20px;
}
.dhtt-form-grid{
grid-template-columns:1fr;
gap:13px;
}
.dhtt-form-actions{
grid-template-columns:1fr;
}
.dhtt-contact-experience{
padding:75px 0;
}
.dhtt-contact-experience-head h2{
font-size:36px;
}
.dhtt-contact-experience-grid{
grid-template-columns:1fr;
gap:13px;
}
.dhtt-contact-faq{
padding:75px 0;
}
.dhtt-contact-faq-grid h2{
font-size:36px;
}
.dhtt-contact-final{
padding:70px 0;
}
.dhtt-contact-final h2{
font-size:38px;
}
.dhtt-contact-final-btn{
width:100%;
white-space:normal;
}
.dhtt-contact-floating{
display:none;
}
.dhtt-contact-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-contact-mobile-bar a{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
font-size:13px;
font-weight:900;
}
.dhtt-contact-mobile-call{
background:#fff;
color:var(--contact-navy);
border-top:1px solid #e6ebef;
}
.dhtt-contact-mobile-call:hover{
color:var(--contact-navy);
}
.dhtt-contact-mobile-wa{
background:var(--contact-navy);
color:#fff;
}
.dhtt-contact-mobile-wa:hover{
color:#fff;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:420px){
.dhtt-contact-hero h1{
font-size:38px;
}
.dhtt-contact-hero{
min-height:590px;
}
.dhtt-booking-card{
padding:20px 15px;
}
.dhtt-booking-card-head h3{
font-size:20px;
}
}/* End custom CSS */