/* Start custom CSS for html, class: .elementor-element-bf56333 *//* =========================================================
DH TOURS & TRAVELS
ABOUT PAGE
PREMIUM RESPONSIVE DESIGN
========================================================= */
#dhtt-about-page {
--dhtt-navy: #101c2c;
--dhtt-navy-2: #17263b;
--dhtt-yellow: #ffb703;
--dhtt-yellow-dark: #e79f00;
--dhtt-blue: #009fe3;
--dhtt-blue-dark: #0077b6;
--dhtt-teal: #14b8a6;
--dhtt-bg: #f7fafc;
--dhtt-white: #ffffff;
--dhtt-text: #172033;
--dhtt-muted: #667085;
--dhtt-border: #e5eaf0;
--dhtt-radius: 24px;
--dhtt-radius-small: 16px;
--dhtt-shadow:
0 20px 60px rgba(16, 28, 44, .10);
--dhtt-shadow-hover:
0 28px 70px rgba(16, 28, 44, .16);
--dhtt-max: 1240px;
color: var(--dhtt-text);
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
overflow: hidden;
}
/* =========================================================
RESET
========================================================= */
#dhtt-about-page *,
#dhtt-about-page *::before,
#dhtt-about-page *::after {
box-sizing: border-box;
}
#dhtt-about-page img {
max-width: 100%;
}
#dhtt-about-page a {
text-decoration: none;
}
#dhtt-about-page h1,
#dhtt-about-page h2,
#dhtt-about-page h3,
#dhtt-about-page p {
margin-top: 0;
}
/* =========================================================
CONTAINER
========================================================= */
#dhtt-about-page .dhtt-container {
width: min(
calc(100% - 40px),
var(--dhtt-max)
);
margin-inline: auto;
}
/* =========================================================
SECTION
========================================================= */
#dhtt-about-page .dhtt-section {
padding: 110px 0;
}
#dhtt-about-page .dhtt-section-white {
background: #fff;
}
#dhtt-about-page .dhtt-section-light {
background: var(--dhtt-bg);
}
#dhtt-about-page .dhtt-section-soft {
background:
linear-gradient(
180deg,
#f7fafc 0%,
#eef7fb 100%
);
}
/* =========================================================
EYEBROW
========================================================= */
#dhtt-about-page .dhtt-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--dhtt-blue-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 18px;
}
#dhtt-about-page .dhtt-eyebrow::before {
content: "";
width: 28px;
height: 3px;
background: var(--dhtt-yellow);
border-radius: 10px;
}
#dhtt-about-page .dhtt-eyebrow-light {
color: #fff;
}
#dhtt-about-page .dhtt-eyebrow-yellow {
color: var(--dhtt-yellow);
}
/* =========================================================
HERO
========================================================= */
#dhtt-about-page .dhtt-about-hero {
position: relative;
min-height: 720px;
display: flex;
align-items: center;
overflow: hidden;
color: #fff;
}
#dhtt-about-page .dhtt-hero-bg {
position: absolute;
inset: 0;
background-image:
url("https://images.unsplash.com/photo-1512343879784-a960bf40e7f2?auto=format&fit=crop&w=2200&q=90");
background-size: cover;
background-position: center;
transform: scale(1.02);
}
#dhtt-about-page .dhtt-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(7, 17, 30, .92) 0%,
rgba(7, 17, 30, .76) 42%,
rgba(7, 17, 30, .25) 100%
);
}
#dhtt-about-page .dhtt-hero-content {
position: relative;
z-index: 2;
padding-top: 70px;
padding-bottom: 70px;
}
#dhtt-about-page .dhtt-hero-copy {
max-width: 720px;
}
#dhtt-about-page .dhtt-hero-copy h1 {
font-family:
"Plus Jakarta Sans",
Inter,
sans-serif;
font-size:
clamp(48px, 6vw, 82px);
line-height: 1.02;
letter-spacing: -3px;
font-weight: 800;
margin-bottom: 26px;
}
#dhtt-about-page .dhtt-hero-copy h1 span {
display: block;
color: var(--dhtt-yellow);
}
#dhtt-about-page .dhtt-hero-copy > p {
max-width: 640px;
font-size: 20px;
line-height: 1.75;
color: rgba(255,255,255,.84);
margin-bottom: 35px;
}
/* =========================================================
BUTTONS
========================================================= */
#dhtt-about-page .dhtt-hero-actions,
#dhtt-about-page .dhtt-final-actions,
#dhtt-about-page .dhtt-human-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
#dhtt-about-page .dhtt-btn {
min-height: 54px;
padding: 15px 23px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 14px;
font-weight: 800;
letter-spacing: .3px;
transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease;
}
#dhtt-about-page .dhtt-btn:hover {
transform: translateY(-3px);
}
#dhtt-about-page .dhtt-btn span {
font-size: 20px;
transition:
transform .25s ease;
}
#dhtt-about-page .dhtt-btn:hover span {
transform: translateX(4px);
}
#dhtt-about-page .dhtt-btn-primary {
background: var(--dhtt-yellow);
color: #171717;
box-shadow:
0 12px 35px rgba(255,183,3,.25);
}
#dhtt-about-page .dhtt-btn-primary:hover {
background: #ffc329;
box-shadow:
0 18px 40px rgba(255,183,3,.35);
}
#dhtt-about-page .dhtt-btn-whatsapp {
background: rgba(255,255,255,.10);
color: #fff;
border: 1px solid rgba(255,255,255,.24);
backdrop-filter: blur(12px);
}
#dhtt-about-page .dhtt-btn-whatsapp:hover {
background: rgba(255,255,255,.18);
}
#dhtt-about-page .dhtt-btn-dark {
background: var(--dhtt-navy);
color: #fff;
}
#dhtt-about-page .dhtt-btn-outline-light {
color: #fff;
border: 1px solid rgba(255,255,255,.4);
background: rgba(255,255,255,.05);
}
#dhtt-about-page .dhtt-btn-outline-light:hover {
background: rgba(255,255,255,.13);
}
#dhtt-about-page .dhtt-btn-large {
min-height: 60px;
padding-inline: 30px;
}
/* =========================================================
HERO MINI TRUST
========================================================= */
#dhtt-about-page .dhtt-hero-mini-trust {
display: flex;
gap: 38px;
margin-top: 45px;
padding-top: 25px;
border-top:
1px solid rgba(255,255,255,.18);
}
#dhtt-about-page .dhtt-hero-mini-trust div {
display: flex;
flex-direction: column;
gap: 5px;
}
#dhtt-about-page .dhtt-hero-mini-trust strong {
font-size: 14px;
}
#dhtt-about-page .dhtt-hero-mini-trust span {
color: rgba(255,255,255,.62);
font-size: 12px;
}
/* =========================================================
HERO SCROLL
========================================================= */
#dhtt-about-page .dhtt-hero-scroll {
position: absolute;
z-index: 3;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
letter-spacing: 1px;
color: rgba(255,255,255,.65);
text-transform: uppercase;
}
#dhtt-about-page .dhtt-hero-scroll span {
width: 18px;
height: 30px;
border:
1px solid rgba(255,255,255,.5);
border-radius: 20px;
position: relative;
}
#dhtt-about-page .dhtt-hero-scroll span::after {
content: "";
position: absolute;
width: 3px;
height: 6px;
background: var(--dhtt-yellow);
border-radius: 4px;
top: 6px;
left: 50%;
transform: translateX(-50%);
}
/* =========================================================
STORY
========================================================= */
#dhtt-about-page .dhtt-story-grid {
display: grid;
grid-template-columns:
minmax(0, .9fr)
minmax(0, 1.1fr);
gap: 90px;
align-items: center;
}
#dhtt-about-page .dhtt-story-image-wrap {
position: relative;
}
#dhtt-about-page .dhtt-story-image {
border-radius: 30px;
overflow: hidden;
box-shadow: var(--dhtt-shadow);
}
#dhtt-about-page .dhtt-story-image img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
transition:
transform .7s ease;
}
#dhtt-about-page .dhtt-story-image:hover img {
transform: scale(1.045);
}
#dhtt-about-page .dhtt-image-badge {
position: absolute;
right: -25px;
bottom: 35px;
background: #fff;
border-radius: 18px;
padding: 15px 18px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: var(--dhtt-shadow);
}
#dhtt-about-page .dhtt-badge-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--dhtt-yellow);
color: var(--dhtt-navy);
font-size: 20px;
}
#dhtt-about-page .dhtt-image-badge strong {
display: block;
font-size: 14px;
}
#dhtt-about-page .dhtt-image-badge small {
display: block;
color: var(--dhtt-muted);
font-size: 11px;
margin-top: 3px;
}
#dhtt-about-page .dhtt-story-content h2,
#dhtt-about-page .dhtt-section-heading h2 {
font-family:
"Plus Jakarta Sans",
Inter,
sans-serif;
font-size:
clamp(36px, 4vw, 54px);
line-height: 1.08;
letter-spacing: -2px;
margin-bottom: 25px;
}
#dhtt-about-page h2 span {
color: var(--dhtt-blue-dark);
}
#dhtt-about-page .dhtt-story-content p {
color: var(--dhtt-muted);
font-size: 16px;
line-height: 1.8;
margin-bottom: 18px;
}
#dhtt-about-page .dhtt-story-content .dhtt-lead {
color: var(--dhtt-text);
font-size: 19px;
line-height: 1.65;
font-weight: 600;
}
#dhtt-about-page .dhtt-story-points {
margin-top: 30px;
display: grid;
gap: 17px;
}
#dhtt-about-page .dhtt-story-point {
display: flex;
gap: 16px;
align-items: flex-start;
}
#dhtt-about-page .dhtt-story-point > span {
flex: 0 0 38px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: #e9f7fc;
color: var(--dhtt-blue-dark);
font-size: 11px;
font-weight: 800;
}
#dhtt-about-page .dhtt-story-point strong {
display: block;
margin-bottom: 3px;
}
#dhtt-about-page .dhtt-story-point p {
font-size: 13px;
line-height: 1.5;
margin: 0;
}
/* =========================================================
BRAND SECTION
========================================================= */
#dhtt-about-page .dhtt-brand-section {
padding: 35px 0 110px;
background: #fff;
}
#dhtt-about-page .dhtt-brand-card {
display: grid;
grid-template-columns: 80px 1fr 1.3fr;
gap: 30px;
align-items: center;
padding: 55px;
border-radius: 28px;
background:
linear-gradient(
135deg,
#eefaff,
#f7fffd
);
border:
1px solid #d9f0f6;
}
#dhtt-about-page .dhtt-brand-icon {
width: 68px;
height: 68px;
display: grid;
place-items: center;
border-radius: 22px;
background: var(--dhtt-navy);
color: var(--dhtt-yellow);
font-size: 27px;
}
#dhtt-about-page .dhtt-brand-copy span {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.8px;
color: var(--dhtt-blue-dark);
}
#dhtt-about-page .dhtt-brand-copy h2 {
font-family:
"Plus Jakarta Sans",
sans-serif;
font-size: 38px;
line-height: 1.05;
letter-spacing: -1.5px;
margin: 9px 0 0;
}
#dhtt-about-page .dhtt-brand-text p {
color: var(--dhtt-muted);
line-height: 1.75;
margin-bottom: 15px;
}
#dhtt-about-page .dhtt-text-link {
color: var(--dhtt-blue-dark);
font-size: 13px;
font-weight: 800;
}
/* =========================================================
SECTION HEADINGS
========================================================= */
#dhtt-about-page .dhtt-section-heading {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(280px, .7fr);
gap: 70px;
align-items: end;
margin-bottom: 55px;
}
#dhtt-about-page .dhtt-section-heading > p {
color: var(--dhtt-muted);
line-height: 1.75;
margin: 0;
}
#dhtt-about-page .dhtt-heading-dark h2,
#dhtt-about-page .dhtt-heading-dark > p {
color: #fff;
}
#dhtt-about-page .dhtt-heading-dark h2 span {
color: var(--dhtt-yellow);
}
#dhtt-about-page .dhtt-heading-centered {
display: block;
max-width: 720px;
margin-inline: auto;
text-align: center;
}
#dhtt-about-page .dhtt-heading-centered h2 {
margin-bottom: 16px;
}
/* =========================================================
VALUES
========================================================= */
#dhtt-about-page .dhtt-values-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 22px;
}
#dhtt-about-page .dhtt-value-card {
position: relative;
background: #fff;
padding: 38px;
border:
1px solid var(--dhtt-border);
border-radius: var(--dhtt-radius);
overflow: hidden;
transition:
transform .3s ease,
box-shadow .3s ease;
}
#dhtt-about-page .dhtt-value-card:hover {
transform: translateY(-8px);
box-shadow: var(--dhtt-shadow-hover);
}
#dhtt-about-page .dhtt-value-number {
position: absolute;
top: 24px;
right: 28px;
font-size: 12px;
font-weight: 800;
color: #b7c0ca;
}
#dhtt-about-page .dhtt-value-icon {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 18px;
background: #eaf8fd;
color: var(--dhtt-blue-dark);
font-size: 24px;
margin-bottom: 25px;
}
#dhtt-about-page .dhtt-value-card h3 {
font-family:
"Plus Jakarta Sans",
sans-serif;
font-size: 21px;
margin-bottom: 12px;
}
#dhtt-about-page .dhtt-value-card p {
color: var(--dhtt-muted);
line-height: 1.75;
font-size: 14px;
margin-bottom: 20px;
}
#dhtt-about-page .dhtt-small-link,
#dhtt-about-page .dhtt-small-wa {
color: var(--dhtt-blue-dark);
font-size: 12px;
font-weight: 800;
}
/* =========================================================
NAVY GOA SECTION
========================================================= */
#dhtt-about-page .dhtt-section-navy {
background:
radial-gradient(
circle at 90% 10%,
rgba(0,159,227,.16),
transparent 28%
),
var(--dhtt-navy);
color: #fff;
}
/* =========================================================
GOA CARDS
========================================================= */
#dhtt-about-page .dhtt-goa-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 22px;
}
#dhtt-about-page .dhtt-goa-card {
overflow: hidden;
border-radius: 25px;
background: #18283c;
border:
1px solid rgba(255,255,255,.08);
transition:
transform .3s ease,
box-shadow .3s ease;
}
#dhtt-about-page .dhtt-goa-card:hover {
transform: translateY(-7px);
box-shadow:
0 30px 70px rgba(0,0,0,.25);
}
#dhtt-about-page .dhtt-goa-card-wide {
grid-column: 1 / -1;
display: grid;
grid-template-columns: .95fr 1.05fr;
}
#dhtt-about-page .dhtt-goa-image {
position: relative;
overflow: hidden;
}
#dhtt-about-page .dhtt-goa-image img {
width: 100%;
height: 100%;
min-height: 280px;
object-fit: cover;
display: block;
transition:
transform .6s ease;
}
#dhtt-about-page .dhtt-goa-card:hover
.dhtt-goa-image img {
transform: scale(1.05);
}
#dhtt-about-page .dhtt-goa-image > span {
position: absolute;
top: 18px;
left: 18px;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--dhtt-yellow);
color: var(--dhtt-navy);
font-size: 12px;
font-weight: 900;
}
#dhtt-about-page .dhtt-goa-content {
padding: 38px;
}
#dhtt-about-page .dhtt-goa-tag {
color: var(--dhtt-yellow);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.7px;
margin-bottom: 14px;
}
#dhtt-about-page .dhtt-goa-content h3 {
font-family:
"Plus Jakarta Sans",
sans-serif;
font-size: 26px;
line-height: 1.2;
margin-bottom: 15px;
}
#dhtt-about-page .dhtt-goa-content p {
color: rgba(255,255,255,.65);
line-height: 1.7;
font-size: 14px;
margin-bottom: 24px;
}
#dhtt-about-page .dhtt-goa-wa {
color: var(--dhtt-yellow);
font-size: 13px;
font-weight: 800;
}
/* =========================================================
FLEET
========================================================= */
#dhtt-about-page .dhtt-fleet-mini-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 22px;
}
#dhtt-about-page .dhtt-fleet-mini {
background: #fff;
border:
1px solid var(--dhtt-border);
border-radius: 24px;
overflow: hidden;
transition:
transform .3s ease,
box-shadow .3s ease;
}
#dhtt-about-page .dhtt-fleet-mini:hover {
transform: translateY(-7px);
box-shadow: var(--dhtt-shadow-hover);
}
#dhtt-about-page .dhtt-fleet-image {
position: relative;
background:
linear-gradient(
145deg,
#eef6fa,
#f9fbfc
);
overflow: hidden;
}
#dhtt-about-page .dhtt-fleet-image img {
display: block;
width: 100%;
height: 240px;
object-fit: contain;
padding: 18px;
transition:
transform .5s ease;
}
#dhtt-about-page .dhtt-fleet-mini:hover
.dhtt-fleet-image img {
transform: scale(1.045);
}
#dhtt-about-page .dhtt-fleet-label {
position: absolute;
top: 16px;
left: 16px;
padding: 7px 11px;
background: var(--dhtt-yellow);
color: #151515;
border-radius: 999px;
font-size: 9px;
font-weight: 900;
letter-spacing: .7px;
}
#dhtt-about-page .dhtt-fleet-content {
padding: 25px;
}
#dhtt-about-page .dhtt-fleet-content > span {
color: var(--dhtt-blue-dark);
font-size: 10px;
font-weight: 900;
letter-spacing: 1.4px;
}
#dhtt-about-page .dhtt-fleet-content h3 {
font-family:
"Plus Jakarta Sans",
sans-serif;
font-size: 23px;
margin: 8px 0 10px;
}
#dhtt-about-page .dhtt-fleet-content p {
color: var(--dhtt-muted);
font-size: 13px;
line-height: 1.7;
margin-bottom: 18px;
}
#dhtt-about-page .dhtt-fleet-wa {
color: var(--dhtt-blue-dark);
font-size: 12px;
font-weight: 800;
}
#dhtt-about-page .dhtt-centered-action {
text-align: center;
margin-top: 45px;
}
/* =========================================================
HOW IT WORKS
========================================================= */
#dhtt-about-page .dhtt-steps {
display: flex;
align-items: flex-start;
justify-content: center;
}
#dhtt-about-page .dhtt-step {
flex: 1;
max-width: 300px;
text-align: center;
}
#dhtt-about-page .dhtt-step-number {
color: #b5c1cb;
font-size: 11px;
font-weight: 900;
letter-spacing: 1px;
margin-bottom: 12px;
}
#dhtt-about-page .dhtt-step-icon {
width: 70px;
height: 70px;
display: grid;
place-items: center;
margin: 0 auto 20px;
border-radius: 50%;
background: #fff;
border:
1px solid #dfe9ee;
color: var(--dhtt-blue-dark);
font-size: 25px;
box-shadow:
0 10px 30px rgba(16,28,44,.07);
}
#dhtt-about-page .dhtt-step h3 {
font-family:
"Plus Jakarta Sans",
sans-serif;
font-size: 20px;
margin-bottom: 10px;
}
#dhtt-about-page .dhtt-step p {
color: var(--dhtt-muted);
font-size: 13px;
line-height: 1.7;
margin: 0;
}
#dhtt-about-page .dhtt-step-line {
flex: 0 0 100px;
height: 1px;
margin-top: 115px;
background:
repeating-linear-gradient(
90deg,
#b7d5e2 0 8px,
transparent 8px 15px
);
}
/* =========================================================
HUMAN SECTION
========================================================= */
#dhtt-about-page .dhtt-human-section {
position: relative;
padding: 125px 0;
background-image:
url("https://images.unsplash.com/photo-1470214304380-aadaedcfff1b?auto=format&fit=crop&w=2200&q=85");
background-size: cover;
background-position: center;
}
#dhtt-about-page .dhtt-human-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(9,20,34,.94),
rgba(9,20,34,.73)
);
}
#dhtt-about-page .dhtt-human-content {
position: relative;
z-index: 2;
max-width: 760px;
color: #fff;
}
#dhtt-about-page .dhtt-human-content h2 {
font-family:
"Plus Jakarta Sans",
sans-serif;
font-size:
clamp(38px, 5vw, 62px);
line-height: 1.05;
letter-spacing: -2px;
margin-bottom: 25px;
}
#dhtt-about-page .dhtt-human-content h2 span {
color: var(--dhtt-yellow);
}
#dhtt-about-page .dhtt-human-content p {
max-width: 700px;
color: rgba(255,255,255,.74);
line-height: 1.8;
font-size: 16px;
margin-bottom: 14px;
}
/* =========================================================
CONTACT
========================================================= */
#dhtt-about-page .dhtt-contact-section {
padding: 80px 0;
background: var(--dhtt-bg);
}
#dhtt-about-page .dhtt-contact-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: 50px;
padding: 55px;
background: #fff;
border:
1px solid var(--dhtt-border);
border-radius: 28px;
box-shadow: var(--dhtt-shadow);
}
#dhtt-about-page .dhtt-contact-main {
max-width: 600px;
}
#dhtt-about-page .dhtt-contact-main h2 {
font-family:
"Plus Jakarta Sans",
sans-serif;
font-size:
clamp(34px, 4vw, 48px);
line-height: 1.08;
letter-spacing: -1.7px;
margin-bottom: 15px;
}
#dhtt-about-page .dhtt-contact-main h2 span {
color: var(--dhtt-blue-dark);
}
#dhtt-about-page .dhtt-contact-main p {
color: var(--dhtt-muted);
line-height: 1.7;
margin: 0;
}
#dhtt-about-page .dhtt-contact-details {
display: flex;
gap: 18px;
}
#dhtt-about-page .dhtt-contact-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 16px;
background: #f6fafc;
color: var(--dhtt-text);
border:
1px solid #e3edf1;
transition:
transform .25s ease,
border .25s ease;
}
#dhtt-about-page .dhtt-contact-item:hover {
transform: translateY(-3px);
border-color:
var(--dhtt-blue);
}
#dhtt-about-page .dhtt-contact-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: #e7f7fc;
color: var(--dhtt-blue-dark);
}
#dhtt-about-page .dhtt-contact-wa {
background: #e7faf6;
color: #087c6e;
}
#dhtt-about-page .dhtt-contact-item small {
display: block;
color: #8994a0;
font-size: 9px;
font-weight: 900;
letter-spacing: 1px;
margin-bottom: 3px;
}
#dhtt-about-page .dhtt-contact-item strong {
display: block;
font-size: 13px;
}
/* =========================================================
FINAL CTA
========================================================= */
#dhtt-about-page .dhtt-final-cta {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
text-align: center;
color: #fff;
overflow: hidden;
}
#dhtt-about-page .dhtt-final-bg {
position: absolute;
inset: 0;
background-image:
url("https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?auto=format&fit=crop&w=2200&q=88");
background-size: cover;
background-position: center;
}
#dhtt-about-page .dhtt-final-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(8,20,34,.93),
rgba(0,77,112,.72)
);
}
#dhtt-about-page .dhtt-final-content {
position: relative;
z-index: 2;
}
#dhtt-about-page .dhtt-final-content h2 {
font-family:
"Plus Jakarta Sans",
sans-serif;
font-size:
clamp(48px, 7vw, 78px);
line-height: 1;
letter-spacing: -3px;
margin-bottom: 20px;
}
#dhtt-about-page .dhtt-final-content h2 span {
color: var(--dhtt-yellow);
}
#dhtt-about-page .dhtt-final-content p {
color: rgba(255,255,255,.76);
font-size: 18px;
margin-bottom: 32px;
}
#dhtt-about-page .dhtt-final-actions {
justify-content: center;
}
/* =========================================================
FLOATING WHATSAPP
========================================================= */
#dhtt-about-page .dhtt-floating-wa {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 999;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 17px 10px 10px;
background: #0b8f7d;
color: #fff;
border-radius: 999px;
box-shadow:
0 15px 40px rgba(0,0,0,.20);
font-size: 12px;
font-weight: 800;
transition:
transform .25s ease;
}
#dhtt-about-page .dhtt-floating-wa:hover {
transform: translateY(-4px);
}
#dhtt-about-page .dhtt-floating-wa-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: #fff;
color: #087c6e;
font-size: 22px;
}
/* =========================================================
MOBILE STICKY
========================================================= */
#dhtt-about-page .dhtt-mobile-bar {
display: none;
}
/* =========================================================
REVEAL
========================================================= */
#dhtt-about-page .dhtt-reveal {
opacity: 0;
transform: translateY(25px);
transition:
opacity .7s ease,
transform .7s ease;
}
#dhtt-about-page .dhtt-visible {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
#dhtt-about-page .dhtt-section {
padding: 85px 0;
}
#dhtt-about-page .dhtt-story-grid {
grid-template-columns: 1fr 1fr;
gap: 50px;
}
#dhtt-about-page .dhtt-image-badge {
right: -10px;
}
#dhtt-about-page .dhtt-brand-card {
grid-template-columns: 70px 1fr;
padding: 40px;
}
#dhtt-about-page .dhtt-brand-text {
grid-column: 2;
}
#dhtt-about-page .dhtt-values-grid {
grid-template-columns: repeat(2,1fr);
}
#dhtt-about-page .dhtt-fleet-mini-grid {
grid-template-columns: repeat(2,1fr);
}
#dhtt-about-page .dhtt-contact-card {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
#dhtt-about-page {
padding-bottom: 64px;
}
#dhtt-about-page .dhtt-container {
width:
min(
calc(100% - 28px),
var(--dhtt-max)
);
}
#dhtt-about-page .dhtt-section {
padding: 68px 0;
}
/* HERO */
#dhtt-about-page .dhtt-about-hero {
min-height: 720px;
align-items: flex-end;
}
#dhtt-about-page .dhtt-hero-overlay {
background:
linear-gradient(
180deg,
rgba(7,17,30,.35),
rgba(7,17,30,.94) 75%
);
}
#dhtt-about-page .dhtt-hero-content {
padding-top: 100px;
padding-bottom: 75px;
}
#dhtt-about-page .dhtt-hero-copy h1 {
font-size: 48px;
letter-spacing: -2px;
}
#dhtt-about-page .dhtt-hero-copy > p {
font-size: 16px;
line-height: 1.65;
}
#dhtt-about-page .dhtt-hero-actions {
display: grid;
grid-template-columns: 1fr;
}
#dhtt-about-page .dhtt-btn {
width: 100%;
}
#dhtt-about-page .dhtt-hero-mini-trust {
gap: 20px;
margin-top: 30px;
}
#dhtt-about-page .dhtt-hero-mini-trust div {
flex: 1;
}
#dhtt-about-page .dhtt-hero-mini-trust strong {
font-size: 12px;
}
#dhtt-about-page .dhtt-hero-mini-trust span {
font-size: 10px;
}
#dhtt-about-page .dhtt-hero-scroll {
display: none;
}
/* STORY */
#dhtt-about-page .dhtt-story-grid {
grid-template-columns: 1fr;
gap: 50px;
}
#dhtt-about-page .dhtt-story-image img {
aspect-ratio: 1 / 1;
}
#dhtt-about-page .dhtt-image-badge {
right: 15px;
bottom: 18px;
}
#dhtt-about-page .dhtt-story-content h2,
#dhtt-about-page .dhtt-section-heading h2 {
font-size: 36px;
letter-spacing: -1.5px;
}
/* BRAND */
#dhtt-about-page .dhtt-brand-section {
padding: 10px 0 68px;
}
#dhtt-about-page .dhtt-brand-card {
grid-template-columns: 1fr;
gap: 20px;
padding: 30px;
border-radius: 22px;
}
#dhtt-about-page .dhtt-brand-text {
grid-column: auto;
}
#dhtt-about-page .dhtt-brand-copy h2 {
font-size: 32px;
}
/* SECTION HEADINGS */
#dhtt-about-page .dhtt-section-heading {
display: block;
margin-bottom: 38px;
}
#dhtt-about-page .dhtt-section-heading > p {
margin-top: 18px;
}
/* VALUES */
#dhtt-about-page .dhtt-values-grid {
grid-template-columns: 1fr;
gap: 16px;
}
#dhtt-about-page .dhtt-value-card {
padding: 30px;
}
/* GOA */
#dhtt-about-page .dhtt-goa-grid {
grid-template-columns: 1fr;
}
#dhtt-about-page .dhtt-goa-card-wide {
grid-column: auto;
display: block;
}
#dhtt-about-page .dhtt-goa-image img {
min-height: 230px;
}
#dhtt-about-page .dhtt-goa-content {
padding: 28px;
}
#dhtt-about-page .dhtt-goa-content h3 {
font-size: 23px;
}
/* FLEET */
#dhtt-about-page .dhtt-fleet-mini-grid {
grid-template-columns: 1fr;
}
#dhtt-about-page .dhtt-fleet-image img {
height: 220px;
}
/* STEPS */
#dhtt-about-page .dhtt-steps {
flex-direction: column;
align-items: center;
gap: 20px;
}
#dhtt-about-page .dhtt-step {
width: 100%;
max-width: 360px;
}
#dhtt-about-page .dhtt-step-line {
width: 1px;
height: 40px;
flex: 0 0 40px;
margin: 0;
background:
repeating-linear-gradient(
180deg,
#b7d5e2 0 8px,
transparent 8px 15px
);
}
/* HUMAN */
#dhtt-about-page .dhtt-human-section {
padding: 80px 0;
}
#dhtt-about-page .dhtt-human-content h2 {
font-size: 40px;
letter-spacing: -1.7px;
}
#dhtt-about-page .dhtt-human-actions {
display: grid;
grid-template-columns: 1fr;
margin-top: 28px;
}
/* CONTACT */
#dhtt-about-page .dhtt-contact-section {
padding: 55px 0;
}
#dhtt-about-page .dhtt-contact-card {
padding: 30px;
border-radius: 22px;
gap: 30px;
}
#dhtt-about-page .dhtt-contact-details {
width: 100%;
flex-direction: column;
}
#dhtt-about-page .dhtt-contact-item {
width: 100%;
}
/* FINAL CTA */
#dhtt-about-page .dhtt-final-cta {
min-height: 520px;
}
#dhtt-about-page .dhtt-final-content h2 {
font-size: 48px;
letter-spacing: -2px;
}
#dhtt-about-page .dhtt-final-actions {
display: grid;
grid-template-columns: 1fr;
}
/* FLOATING WHATSAPP */
#dhtt-about-page .dhtt-floating-wa {
display: none;
}
/* MOBILE BAR */
#dhtt-about-page .dhtt-mobile-bar {
position: fixed;
display: grid;
grid-template-columns: .7fr 1.3fr;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background: #fff;
box-shadow:
0 -8px 30px rgba(16,28,44,.13);
padding:
8px;
gap: 8px;
}
#dhtt-about-page .dhtt-mobile-bar a {
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-size: 12px;
font-weight: 900;
}
#dhtt-about-page .dhtt-mobile-call {
color: var(--dhtt-navy);
background: #edf2f5;
}
#dhtt-about-page .dhtt-mobile-book {
background: var(--dhtt-yellow);
color: #171717;
}
}
/* =========================================================
SMALL PHONES
========================================================= */
@media (max-width: 380px) {
#dhtt-about-page .dhtt-hero-copy h1 {
font-size: 42px;
}
#dhtt-about-page .dhtt-hero-mini-trust {
flex-direction: column;
}
#dhtt-about-page .dhtt-human-content h2 {
font-size: 35px;
}
#dhtt-about-page .dhtt-final-content h2 {
font-size: 42px;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
#dhtt-about-page a:focus-visible {
outline: 3px solid var(--dhtt-yellow);
outline-offset: 4px;
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
#dhtt-about-page *,
#dhtt-about-page *::before,
#dhtt-about-page *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}/* End custom CSS */