/* Start custom CSS for html, class: .elementor-element-aaceec8 *//* =========================================================
MIRTH — ACCOMMODATION LANDING PAGE
========================================================= */
.mirth-accommodation-page {
--mirth-blue: #287fa5;
--mirth-blue-dark: #1d6684;
--mirth-gold: #a88745;
--mirth-gold-light: #d2b77b;
--mirth-cream: #faf8f4;
--mirth-sand: #f4f0e9;
--mirth-text: #303030;
--mirth-muted: #727272;
width: 100%;
overflow: hidden;
color: var(--mirth-text);
font-family:
Georgia,
"Times New Roman",
serif;
}
/* =========================================================
GLOBAL
========================================================= */
.mirth-accommodation-page *,
.mirth-accommodation-page *::before,
.mirth-accommodation-page *::after {
box-sizing: border-box;
}
.mirth-accommodation-page h1,
.mirth-accommodation-page h2,
.mirth-accommodation-page h3,
.mirth-accommodation-page p {
margin-top: 0;
}
.mirth-accommodation-page a {
text-decoration: none;
}
/* =========================================================
CONTAINER
========================================================= */
.mirth-acc-container {
width: min(1180px, 92%);
margin-left: auto;
margin-right: auto;
}
/* =========================================================
EYEBROW
========================================================= */
.mirth-acc-eyebrow {
margin-bottom: 14px;
color: var(--mirth-gold);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
/* =========================================================
BUTTON
========================================================= */
.mirth-acc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 30px;
background: var(--mirth-gold);
border: 1px solid var(--mirth-gold);
color: #fff !important;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
transition:
all .3s ease;
}
.mirth-acc-btn:hover {
background: var(--mirth-blue);
border-color: var(--mirth-blue);
color: #fff !important;
}
.mirth-acc-btn-outline {
background: transparent;
color: var(--mirth-blue) !important;
}
.mirth-acc-btn-outline:hover {
background: var(--mirth-blue);
border-color: var(--mirth-blue);
color: #fff !important;
}
/* =========================================================
HERO
========================================================= */
.mirth-acc-hero {
position: relative;
min-height: 680px;
display: flex;
align-items: flex-end;
background-image:
url("https://mirthresorts.com/wp-content/uploads/2026/08/1.webp");
background-position: center;
background-size: cover;
}
.mirth-acc-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0,0,0,.03) 25%,
rgba(0,0,0,.18) 55%,
rgba(0,0,0,.72) 100%
);
}
.mirth-acc-hero-content {
position: relative;
z-index: 2;
width: min(1180px, 92%);
margin: 0 auto;
padding-bottom: 78px;
}
.mirth-acc-hero .mirth-acc-eyebrow {
color: #e5ca85;
}
.mirth-acc-hero h1 {
max-width: 760px;
margin-bottom: 20px;
color: #fff;
font-size:
clamp(45px, 6vw, 78px);
font-weight: 400;
line-height: 1.02;
}
.mirth-acc-hero p {
max-width: 620px;
margin-bottom: 30px;
color:
rgba(255,255,255,.92);
font-size: 16px;
line-height: 1.8;
}
/* =========================================================
INTRO
========================================================= */
.mirth-acc-intro {
padding: 105px 0;
background: var(--mirth-cream);
text-align: center;
}
.mirth-acc-intro-content {
max-width: 820px;
margin: 0 auto;
}
.mirth-acc-intro h2 {
margin-bottom: 25px;
color: var(--mirth-blue);
font-size:
clamp(35px, 4vw, 53px);
font-weight: 400;
line-height: 1.1;
}
.mirth-acc-intro p {
max-width: 720px;
margin:
0 auto 15px;
color: var(--mirth-muted);
font-size: 16px;
line-height: 1.9;
}
/* =========================================================
COLLECTION
========================================================= */
.mirth-acc-collection {
padding: 100px 0;
background: #fff;
}
.mirth-acc-section-heading {
max-width: 780px;
margin:
0 auto 60px;
text-align: center;
}
.mirth-acc-section-heading h2 {
margin-bottom: 20px;
color: var(--mirth-blue);
font-size:
clamp(34px, 4vw, 50px);
font-weight: 400;
line-height: 1.1;
}
.mirth-acc-section-heading p {
margin: 0;
color: var(--mirth-muted);
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
CATEGORY CARDS
========================================================= */
.mirth-acc-category-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 24px;
}
.mirth-acc-category-card {
background: var(--mirth-cream);
overflow: hidden;
}
.mirth-acc-category-image {
min-height: 410px;
background-position: center;
background-size: cover;
transition:
transform .6s ease;
}
.mirth-acc-category-card:hover
.mirth-acc-category-image {
transform: scale(1.04);
}
.mirth-acc-category-content {
position: relative;
padding: 35px 32px 38px;
}
.mirth-acc-category-number {
margin-bottom: 12px;
color: var(--mirth-gold);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.mirth-acc-category-content h3 {
margin-bottom: 12px;
color: var(--mirth-blue);
font-size: 30px;
font-weight: 400;
}
.mirth-acc-category-content p {
min-height: 65px;
margin-bottom: 22px;
color: var(--mirth-muted);
font-size: 14px;
line-height: 1.7;
}
.mirth-acc-category-content a {
color: var(--mirth-gold);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.mirth-acc-category-content a span {
margin-left: 8px;
font-size: 15px;
transition:
margin-left .3s ease;
}
.mirth-acc-category-content a:hover span {
margin-left: 14px;
}
/* =========================================================
STAY PHILOSOPHY
========================================================= */
.mirth-acc-stay-philosophy {
padding: 100px 0;
background: var(--mirth-sand);
}
.mirth-acc-philosophy-grid {
display: grid;
grid-template-columns:
1fr 1fr;
align-items: center;
gap: 75px;
}
.mirth-acc-philosophy-image {
min-height: 600px;
background-position: center;
background-size: cover;
}
.mirth-acc-philosophy-content h2 {
margin-bottom: 22px;
color: var(--mirth-blue);
font-size:
clamp(35px, 4vw, 52px);
font-weight: 400;
line-height: 1.1;
}
.mirth-acc-philosophy-content > p {
margin-bottom: 35px;
color: var(--mirth-muted);
font-size: 15px;
line-height: 1.9;
}
/* =========================================================
FEATURES
========================================================= */
.mirth-acc-feature {
display: grid;
grid-template-columns: 42px 1fr;
gap: 15px;
padding: 20px 0;
border-top:
1px solid #ddd7cc;
}
.mirth-acc-feature:last-child {
border-bottom:
1px solid #ddd7cc;
}
.mirth-acc-feature > span {
color: var(--mirth-gold);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
}
.mirth-acc-feature strong {
display: block;
margin-bottom: 6px;
color: var(--mirth-blue);
font-size: 17px;
font-weight: 400;
}
.mirth-acc-feature p {
margin: 0;
color: var(--mirth-muted);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
line-height: 1.6;
}
.mirth-acc-text-link {
display: inline-block;
margin-top: 30px;
color: var(--mirth-gold);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.mirth-acc-text-link span {
margin-left: 8px;
}
/* =========================================================
BOOKING CTA
========================================================= */
.mirth-acc-booking {
position: relative;
padding: 115px 0;
background-image:
url("https://mirthresorts.com/wp-content/uploads/2026/08/Out-door.webp");
background-position: center;
background-size: cover;
text-align: center;
}
.mirth-acc-booking-overlay {
position: absolute;
inset: 0;
background:
rgba(22,48,58,.68);
}
.mirth-acc-booking .mirth-acc-container {
position: relative;
z-index: 2;
}
.mirth-acc-booking-content {
max-width: 760px;
margin: 0 auto;
}
.mirth-acc-booking .mirth-acc-eyebrow {
color: #e3c982;
}
.mirth-acc-booking h2 {
margin-bottom: 20px;
color: #fff;
font-size:
clamp(36px, 4vw, 55px);
font-weight: 400;
line-height: 1.1;
}
.mirth-acc-booking p {
max-width: 650px;
margin:
0 auto 30px;
color:
rgba(255,255,255,.9);
font-size: 15px;
line-height: 1.8;
}
.mirth-acc-booking .mirth-acc-btn {
background: #fff;
border-color: #fff;
color: var(--mirth-blue) !important;
}
.mirth-acc-booking .mirth-acc-btn:hover {
background: var(--mirth-gold);
border-color: var(--mirth-gold);
color: #fff !important;
}
/* =========================================================
CLOSING
========================================================= */
.mirth-acc-closing {
padding: 100px 0;
background: var(--mirth-cream);
text-align: center;
}
.mirth-acc-closing-content {
max-width: 760px;
margin: 0 auto;
}
.mirth-acc-closing h2 {
margin-bottom: 20px;
color: var(--mirth-blue);
font-size:
clamp(35px, 4vw, 52px);
font-weight: 400;
line-height: 1.1;
}
.mirth-acc-closing p {
margin-bottom: 30px;
color: var(--mirth-muted);
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.mirth-acc-category-grid {
grid-template-columns:
repeat(2, 1fr);
}
.mirth-acc-category-card:last-child {
grid-column:
1 / -1;
max-width: 50%;
margin: 0 auto;
}
.mirth-acc-philosophy-grid {
gap: 45px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mirth-acc-container {
width: 90%;
}
.mirth-acc-hero {
min-height: 650px;
}
.mirth-acc-hero-content {
padding-bottom: 55px;
}
.mirth-acc-hero h1 {
font-size: 44px;
}
.mirth-acc-hero p {
font-size: 14px;
}
.mirth-acc-intro,
.mirth-acc-collection,
.mirth-acc-stay-philosophy {
padding: 70px 0;
}
.mirth-acc-category-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.mirth-acc-category-card:last-child {
grid-column: auto;
max-width: none;
}
.mirth-acc-category-image {
min-height: 330px;
}
.mirth-acc-philosophy-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.mirth-acc-philosophy-image {
min-height: 400px;
}
.mirth-acc-booking {
padding: 80px 0;
}
.mirth-acc-closing {
padding: 70px 0;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.mirth-acc-hero h1 {
font-size: 39px;
}
.mirth-acc-category-image {
min-height: 290px;
}
.mirth-acc-category-content {
padding:
28px 24px 32px;
}
.mirth-acc-category-content p {
min-height: auto;
}
}/* End custom CSS */