/* Start custom CSS for html, class: .elementor-element-3de8ae3 *//* =========================================================
DAST E HUSN — OUR WORK PAGE
CUSTOM CSS
HEADER + FOOTER NOT INCLUDED
========================================================= */
/* ================= ROOT ================= */
.deh-work-page {
--brown: #54372b;
--brown-light: #765a4c;
--rose: #c58f7e;
--rose-light: #ead4cb;
--cream: #fffaf6;
--cream-dark: #f7ece6;
--text: #806d63;
--white: #ffffff;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--cream);
color: var(--brown);
font-family:
"DM Sans",
Arial,
sans-serif;
}
/* ================= RESET ================= */
.deh-work-page *,
.deh-work-page *::before,
.deh-work-page *::after {
box-sizing: border-box;
}
.deh-work-page img {
max-width: 100%;
display: block;
}
.deh-work-page a {
text-decoration: none;
}
/* ================= EYEBROW ================= */
.deh-eyebrow {
display: inline-block;
color: var(--rose);
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
}
/* =========================================================
HERO
========================================================= */
.deh-work-hero {
max-width: 1250px;
min-height: 650px;
margin: auto;
padding: 90px 45px;
display: grid;
grid-template-columns:
1fr
0.85fr;
align-items: center;
gap: 80px;
}
.deh-work-hero-content {
max-width: 610px;
}
.deh-work-hero h1 {
margin: 18px 0 25px;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
clamp(
48px,
6vw,
80px
);
line-height: 1.03;
font-weight: 400;
letter-spacing: -2px;
}
.deh-work-hero h1 em {
display: block;
color: var(--rose);
font-style: italic;
}
.deh-work-hero p {
max-width: 510px;
margin: 0 0 32px;
color: var(--text);
font-size: 14px;
line-height: 1.9;
}
/* ================= BUTTON ================= */
.deh-outline-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 13px 21px;
border: 1px solid #cba99b;
border-radius: 30px;
color: var(--brown);
font-size: 11px;
font-weight: 500;
transition:
0.3s ease;
}
.deh-outline-btn:hover {
background: var(--brown);
border-color: var(--brown);
color: white;
transform:
translateY(-3px);
}
/* ================= HERO ART ================= */
.deh-hero-art {
min-height: 470px;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(
circle,
#f0dcd3 0,
#f8eee9 44%,
transparent 45%
);
}
.deh-hero-circle {
width: 365px;
height: 365px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border:
1px solid
#caa99a;
border-radius: 50%;
outline:
1px solid
#e7cfc6;
outline-offset: 14px;
transform:
rotate(-4deg);
text-align: center;
}
.deh-hero-circle span {
color: var(--rose);
font-size: 10px;
letter-spacing: 5px;
}
.deh-hero-circle strong {
margin-top: 12px;
font-family:
"Playfair Display",
Georgia,
serif;
font-size: 43px;
font-weight: 400;
}
.deh-hero-circle em {
color: var(--rose);
font-family:
"Playfair Display",
Georgia,
serif;
font-size: 25px;
font-style: italic;
}
.deh-small-flower {
margin-top: 18px;
color: var(--rose);
font-size: 28px;
}
/* =========================================================
INTRO
========================================================= */
.deh-work-intro {
padding: 105px 25px;
background: var(--brown);
text-align: center;
}
.deh-work-intro .deh-eyebrow {
color: #dfb5a5;
}
.deh-work-intro h2 {
max-width: 800px;
margin: 15px auto 22px;
color: white;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
clamp(
38px,
5vw,
60px
);
font-weight: 400;
line-height: 1.08;
}
.deh-work-intro h2 em {
color: #d8a596;
font-style: italic;
}
.deh-work-intro p {
max-width: 600px;
margin: auto;
color: #ddcbc2;
font-size: 13px;
line-height: 1.9;
}
/* =========================================================
GALLERY
========================================================= */
.deh-gallery {
padding: 110px 35px;
background: var(--cream-dark);
}
.deh-section-title {
max-width: 1120px;
margin:
0 auto
60px;
display: flex;
align-items: end;
justify-content: space-between;
gap: 50px;
}
.deh-section-title h2 {
max-width: 650px;
margin: 14px 0 0;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
clamp(
38px,
4.5vw,
58px
);
font-weight: 400;
line-height: 1.07;
}
.deh-section-title h2 em {
color: var(--rose);
font-style: italic;
}
.deh-section-title > p {
max-width: 330px;
margin: 0;
color: var(--text);
font-size: 12px;
line-height: 1.8;
}
/* =========================================================
INSTAGRAM GRID
========================================================= */
.deh-instagram-grid {
max-width: 1120px;
margin: auto;
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 55px 35px;
}
.deh-instagram-card {
position: relative;
min-width: 0;
}
/* ================= NUMBER ================= */
.deh-card-number {
position: absolute;
top: -17px;
left: -10px;
z-index: 3;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: var(--brown);
color: white;
border-radius: 50%;
font-family:
"Playfair Display",
Georgia,
serif;
font-size: 13px;
}
/* ================= INSTAGRAM FRAME ================= */
.deh-instagram-frame {
min-height: 500px;
padding: 5px;
background: white;
border:
1px solid
#e5d4cc;
box-shadow:
0 15px 45px
rgba(
84,
55,
43,
0.07
);
overflow: hidden;
}
/*
Instagram's own embed keeps its native dimensions.
This wrapper prevents horizontal overflow.
*/
.deh-instagram-frame .instagram-media {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin:
0 auto !important;
}
/* ================= CARD CAPTION ================= */
.deh-card-caption {
padding:
18px
4px
0;
}
.deh-card-caption span {
color: var(--rose);
font-size: 8px;
font-weight: 600;
letter-spacing: 2px;
}
.deh-card-caption h3 {
margin: 6px 0 0;
font-family:
"Playfair Display",
Georgia,
serif;
font-size: 23px;
font-weight: 400;
}
/* =========================================================
BRAND STATEMENT
========================================================= */
.deh-brand-statement {
min-height: 500px;
padding: 90px 25px;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(
rgba(
67,
43,
34,
0.78
),
rgba(
67,
43,
34,
0.78
)
),
url(
"https://images.pexels.com/photos/5632400/pexels-photo-5632400.jpeg?auto=compress&cs=tinysrgb&w=1600"
)
center / cover no-repeat;
text-align: center;
}
.deh-brand-inner {
max-width: 760px;
}
.deh-brand-statement .deh-eyebrow {
color: #deb3a3;
}
.deh-brand-statement h2 {
margin: 17px 0 20px;
color: white;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
clamp(
42px,
5.5vw,
70px
);
font-weight: 400;
line-height: 1.05;
}
.deh-brand-statement h2 em {
color: #dba494;
font-style: italic;
}
.deh-brand-statement p {
max-width: 550px;
margin: auto;
color: #e4d2ca;
font-size: 13px;
line-height: 1.9;
}
/* =========================================================
PROCESS
========================================================= */
.deh-process {
padding: 110px 35px;
background: var(--cream);
}
.deh-process-grid {
max-width: 1120px;
margin: auto;
display: grid;
grid-template-columns:
repeat(4, 1fr);
}
.deh-process-item {
padding:
10px 28px
25px;
border-left:
1px solid
#dfcec5;
text-align: center;
}
.deh-process-item:first-child {
border-left: none;
}
.deh-process-icon {
width: 62px;
height: 62px;
margin:
15px auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--rose-light);
color: var(--brown);
font-size: 17px;
}
.deh-process-item > span {
color: var(--rose);
font-size: 9px;
letter-spacing: 2px;
}
.deh-process-item h3 {
margin:
10px 0;
font-family:
"Playfair Display",
Georgia,
serif;
font-size: 22px;
font-weight: 400;
}
.deh-process-item p {
margin: 0;
color: var(--text);
font-size: 10px;
line-height: 1.8;
}
/* =========================================================
INSTAGRAM CTA
========================================================= */
.deh-instagram-cta {
padding:
100px
25px;
background:
var(--cream-dark);
text-align: center;
}
.deh-instagram-cta h2 {
max-width: 760px;
margin:
15px auto;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
clamp(
38px,
5vw,
58px
);
font-weight: 400;
line-height: 1.08;
}
.deh-instagram-cta h2 em {
color: var(--rose);
font-style: italic;
}
.deh-instagram-cta p {
max-width: 520px;
margin:
0 auto
28px;
color: var(--text);
font-size: 12px;
line-height: 1.8;
}
/* ================= INSTAGRAM BUTTON ================= */
.deh-instagram-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding:
14px 24px;
border:
1px solid
#c9a99c;
border-radius: 30px;
color: var(--brown);
font-size: 11px;
font-weight: 600;
transition:
0.3s ease;
}
.deh-instagram-button:hover {
background: var(--brown);
border-color: var(--brown);
color: white;
transform:
translateY(-3px);
}
/* =========================================================
WHATSAPP CTA
========================================================= */
.deh-work-cta {
padding:
110px
25px;
background:
var(--brown);
text-align: center;
}
.deh-cta-inner {
max-width: 760px;
margin: auto;
}
.deh-work-cta .deh-eyebrow {
color: #dfb3a2;
}
.deh-work-cta h2 {
margin:
17px 0;
color: white;
font-family:
"Playfair Display",
Georgia,
serif;
font-size:
clamp(
40px,
5vw,
60px
);
font-weight: 400;
line-height: 1.08;
}
.deh-work-cta h2 em {
color: #d9a394;
font-style: italic;
}
.deh-work-cta p {
margin:
0 auto
30px;
color: #d8c2b8;
font-size: 13px;
}
/* ================= WHATSAPP BUTTON ================= */
.deh-whatsapp-button {
display: inline-flex;
align-items: center;
gap: 11px;
padding:
14px 25px;
background: white;
color: var(--brown);
border-radius: 30px;
font-size: 11px;
font-weight: 600;
transition:
0.3s ease;
}
.deh-whatsapp-button:hover {
background: var(--rose);
color: white;
transform:
translateY(-3px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.deh-work-hero {
grid-template-columns: 1fr;
text-align: center;
}
.deh-work-hero-content {
margin: auto;
}
.deh-work-hero p {
margin-left: auto;
margin-right: auto;
}
.deh-hero-art {
min-height: 400px;
}
.deh-section-title {
align-items: flex-start;
flex-direction: column;
gap: 20px;
}
.deh-process-grid {
grid-template-columns:
repeat(2, 1fr);
gap: 35px 0;
}
.deh-process-item:nth-child(3) {
border-left: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.deh-work-hero {
padding:
65px
22px;
gap: 50px;
}
.deh-work-hero h1 {
font-size: 48px;
letter-spacing: -1px;
}
.deh-hero-circle {
width: 285px;
height: 285px;
}
.deh-hero-circle strong {
font-size: 35px;
}
.deh-work-intro {
padding:
80px
22px;
}
.deh-work-intro h2 {
font-size: 39px;
}
.deh-gallery {
padding:
80px
20px;
}
.deh-instagram-grid {
grid-template-columns: 1fr;
gap: 45px;
}
.deh-instagram-frame {
min-height: 450px;
}
.deh-brand-statement {
min-height: 430px;
padding:
70px
22px;
}
.deh-process {
padding:
80px
22px;
}
.deh-process-grid {
grid-template-columns: 1fr;
}
.deh-process-item {
padding:
30px
20px;
border-left: none;
border-top:
1px solid
#dfcec5;
}
.deh-process-item:first-child {
border-top: none;
}
.deh-instagram-cta {
padding:
80px
22px;
}
.deh-work-cta {
padding:
80px
22px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.deh-work-hero h1 {
font-size: 42px;
}
.deh-hero-circle {
width: 255px;
height: 255px;
}
.deh-hero-circle strong {
font-size: 31px;
}
.deh-section-title h2 {
font-size: 39px;
}
.deh-instagram-frame {
min-height: 400px;
}
.deh-brand-statement h2 {
font-size: 41px;
}
}/* End custom CSS */