/* Start custom CSS for html, class: .elementor-element-8d5fee5 *//* =========================================================
MIRTH — EXPERIENCES PAGE
========================================================= */
.mirth-experiences-page {
--mirth-blue: #287fa5;
--mirth-blue-dark: #1d6684;
--mirth-gold: #a88745;
--mirth-gold-light: #d2b77b;
--mirth-cream: #faf8f4;
--mirth-sand: #f3efe7;
--mirth-text: #303030;
--mirth-muted: #727272;
width: 100%;
overflow: hidden;
color: var(--mirth-text);
font-family:
Georgia,
"Times New Roman",
serif;
}
/* =========================================================
RESET
========================================================= */
.mirth-experiences-page *,
.mirth-experiences-page *::before,
.mirth-experiences-page *::after {
box-sizing: border-box;
}
.mirth-experiences-page h1,
.mirth-experiences-page h2,
.mirth-experiences-page h3,
.mirth-experiences-page p {
margin-top: 0;
}
.mirth-experiences-page a {
text-decoration: none;
}
/* =========================================================
CONTAINER
========================================================= */
.mirth-exp-container {
width: min(1180px, 92%);
margin-left: auto;
margin-right: auto;
}
/* =========================================================
EYEBROW
========================================================= */
.mirth-exp-eyebrow {
margin-bottom: 14px;
color: var(--mirth-gold);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
line-height: 1.4;
text-transform: uppercase;
}
/* =========================================================
BUTTON
========================================================= */
.mirth-exp-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-exp-btn:hover {
background: var(--mirth-blue);
border-color: var(--mirth-blue);
color: #fff !important;
}
.mirth-exp-btn-outline {
background: transparent;
border-color: rgba(255,255,255,.7);
color: #fff !important;
}
.mirth-exp-btn-outline:hover {
background: #fff;
border-color: #fff;
color: var(--mirth-blue) !important;
}
/* =========================================================
HERO
========================================================= */
.mirth-exp-hero {
position: relative;
min-height: 690px;
display: flex;
align-items: flex-end;
background-image:
url("https://mirthresorts.com/wp-content/uploads/2026/08/5.webp");
background-position: center;
background-size: cover;
}
.mirth-exp-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0,0,0,.04) 20%,
rgba(0,0,0,.18) 50%,
rgba(0,0,0,.72) 100%
);
}
.mirth-exp-hero-content {
position: relative;
z-index: 2;
width: min(1180px, 92%);
margin: 0 auto;
padding-bottom: 80px;
}
.mirth-exp-hero .mirth-exp-eyebrow {
color: #e5ca85;
}
.mirth-exp-hero h1 {
max-width: 800px;
margin-bottom: 20px;
color: #fff;
font-size:
clamp(45px, 6vw, 78px);
font-weight: 400;
line-height: 1.02;
}
.mirth-exp-hero p {
max-width: 650px;
margin-bottom: 0;
color:
rgba(255,255,255,.92);
font-size: 16px;
line-height: 1.8;
}
/* =========================================================
INTRO
========================================================= */
.mirth-exp-intro {
padding: 105px 0;
background: var(--mirth-cream);
text-align: center;
}
.mirth-exp-intro-content {
max-width: 800px;
margin: 0 auto;
}
.mirth-exp-intro h2 {
margin-bottom: 25px;
color: var(--mirth-blue);
font-size:
clamp(35px, 4vw, 53px);
font-weight: 400;
line-height: 1.1;
}
.mirth-exp-intro p {
max-width: 720px;
margin:
0 auto 14px;
color: var(--mirth-muted);
font-size: 16px;
line-height: 1.9;
}
/* =========================================================
SECTION HEADING
========================================================= */
.mirth-exp-section-heading {
max-width: 800px;
margin:
0 auto 60px;
text-align: center;
}
.mirth-exp-section-heading h2 {
margin-bottom: 18px;
color: var(--mirth-blue);
font-size:
clamp(34px, 4vw, 51px);
font-weight: 400;
line-height: 1.1;
}
.mirth-exp-section-heading p {
margin: 0;
color: var(--mirth-muted);
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
INCLUDED
========================================================= */
.mirth-exp-included {
padding: 100px 0;
background: #fff;
}
.mirth-exp-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 24px;
}
.mirth-exp-card {
background: var(--mirth-cream);
overflow: hidden;
transition:
transform .35s ease,
box-shadow .35s ease;
}
.mirth-exp-card:hover {
transform: translateY(-6px);
box-shadow:
0 18px 45px
rgba(0,0,0,.09);
}
.mirth-exp-card-image {
min-height: 270px;
background-position: center;
background-size: cover;
transition:
transform .6s ease;
}
.mirth-exp-card:hover
.mirth-exp-card-image {
transform: scale(1.04);
}
.mirth-exp-card-content {
padding: 28px 28px 32px;
}
.mirth-exp-card-content > span {
display: block;
margin-bottom: 11px;
color: var(--mirth-gold);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.mirth-exp-card h3 {
margin-bottom: 10px;
color: var(--mirth-blue);
font-size: 25px;
font-weight: 400;
line-height: 1.2;
}
.mirth-exp-card p {
margin: 0;
color: var(--mirth-muted);
font-size: 13px;
line-height: 1.7;
}
/* =========================================================
CURATED EXPERIENCES
========================================================= */
.mirth-exp-curated {
padding: 100px 0;
background: var(--mirth-sand);
}
.mirth-exp-feature-grid {
display: grid;
grid-template-columns:
repeat(6, 1fr);
gap: 18px;
}
.mirth-exp-feature {
position: relative;
min-height: 430px;
display: flex;
align-items: flex-end;
padding: 30px 25px;
background-position: center;
background-size: cover;
overflow: hidden;
}
.mirth-exp-feature:nth-child(1),
.mirth-exp-feature:nth-child(2) {
grid-column:
span 3;
}
.mirth-exp-feature:nth-child(3),
.mirth-exp-feature:nth-child(4),
.mirth-exp-feature:nth-child(5) {
grid-column:
span 2;
}
.mirth-exp-feature-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(0,0,0,.03),
rgba(0,0,0,.78)
);
}
.mirth-exp-feature-content {
position: relative;
z-index: 2;
}
.mirth-exp-feature-content small {
display: block;
margin-bottom: 8px;
color: #e4ca88;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.mirth-exp-feature-content h3 {
margin-bottom: 9px;
color: #fff;
font-size: 28px;
font-weight: 400;
line-height: 1.15;
}
.mirth-exp-feature-content p {
margin: 0;
color:
rgba(255,255,255,.85);
font-size: 12px;
line-height: 1.6;
}
/* =========================================================
SPA
========================================================= */
.mirth-exp-spa {
position: relative;
padding: 120px 0;
background-image:
url("https://mirthresorts.com/wp-content/uploads/2025/10/Kanthalloor.webp");
background-position: center;
background-size: cover;
text-align: center;
}
.mirth-exp-spa-overlay {
position: absolute;
inset: 0;
background:
rgba(22,45,53,.68);
}
.mirth-exp-spa .mirth-exp-container {
position: relative;
z-index: 2;
}
.mirth-exp-spa-content {
max-width: 750px;
margin: 0 auto;
}
.mirth-exp-spa .mirth-exp-eyebrow {
color: #e4ca88;
}
.mirth-exp-spa h2 {
margin-bottom: 20px;
color: #fff;
font-size:
clamp(40px, 5vw, 62px);
font-weight: 400;
}
.mirth-exp-spa p {
max-width: 650px;
margin:
0 auto 30px;
color:
rgba(255,255,255,.9);
font-size: 15px;
line-height: 1.8;
}
.mirth-exp-spa-tags {
display: flex;
justify-content: center;
gap: 10px;
}
.mirth-exp-spa-tags span {
padding:
9px 17px;
border:
1px solid
rgba(255,255,255,.45);
color: #fff;
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
/* =========================================================
DISCOVER KANTHALLOOR
========================================================= */
.mirth-exp-discover {
padding: 100px 0;
background: var(--mirth-cream);
}
.mirth-exp-destination-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 18px;
}
.mirth-exp-destination {
min-height: 170px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 25px;
background: #fff;
border-bottom:
2px solid transparent;
transition:
transform .3s ease,
border-color .3s ease;
}
.mirth-exp-destination:hover {
transform: translateY(-4px);
border-bottom-color:
var(--mirth-gold);
}
.mirth-exp-destination span {
display: block;
margin-bottom: 10px;
color: var(--mirth-gold);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.mirth-exp-destination h3 {
margin: 0;
color: var(--mirth-blue);
font-size: 19px;
font-weight: 400;
line-height: 1.3;
}
.mirth-exp-destination-note {
margin-top: 28px;
color: var(--mirth-muted);
font-family:
Arial,
Helvetica,
sans-serif;
font-size: 11px;
text-align: center;
letter-spacing: .6px;
}
/* =========================================================
FINAL CTA
========================================================= */
.mirth-exp-final {
position: relative;
padding: 115px 0;
background-image:
url("https://mirthresorts.com/wp-content/uploads/2025/10/Villa.webp");
background-position: center;
background-size: cover;
text-align: center;
}
.mirth-exp-final-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(20,42,50,.72),
rgba(20,42,50,.52)
);
}
.mirth-exp-final .mirth-exp-container {
position: relative;
z-index: 2;
}
.mirth-exp-final-content {
max-width: 780px;
margin: 0 auto;
}
.mirth-exp-final .mirth-exp-eyebrow {
color: #e4ca88;
}
.mirth-exp-final h2 {
margin-bottom: 20px;
color: #fff;
font-size:
clamp(38px, 5vw, 62px);
font-weight: 400;
line-height: 1.08;
}
.mirth-exp-final p {
max-width: 650px;
margin:
0 auto 30px;
color:
rgba(255,255,255,.9);
font-size: 15px;
line-height: 1.8;
}
.mirth-exp-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1024px) {
.mirth-exp-grid {
grid-template-columns:
repeat(2, 1fr);
}
.mirth-exp-feature-grid {
grid-template-columns:
repeat(2, 1fr);
}
.mirth-exp-feature:nth-child(1),
.mirth-exp-feature:nth-child(2),
.mirth-exp-feature:nth-child(3),
.mirth-exp-feature:nth-child(4),
.mirth-exp-feature:nth-child(5) {
grid-column:
span 1;
}
.mirth-exp-destination-grid {
grid-template-columns:
repeat(2, 1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.mirth-exp-container {
width: 90%;
}
.mirth-exp-hero {
min-height: 650px;
}
.mirth-exp-hero-content {
padding-bottom: 55px;
}
.mirth-exp-hero h1 {
font-size: 44px;
}
.mirth-exp-hero p {
font-size: 14px;
}
.mirth-exp-intro,
.mirth-exp-included,
.mirth-exp-curated,
.mirth-exp-discover {
padding: 70px 0;
}
.mirth-exp-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.mirth-exp-card-image {
min-height: 300px;
}
.mirth-exp-feature-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.mirth-exp-feature:nth-child(1),
.mirth-exp-feature:nth-child(2),
.mirth-exp-feature:nth-child(3),
.mirth-exp-feature:nth-child(4),
.mirth-exp-feature:nth-child(5) {
grid-column: auto;
}
.mirth-exp-feature {
min-height: 330px;
}
.mirth-exp-spa {
padding: 80px 0;
}
.mirth-exp-destination-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mirth-exp-destination {
min-height: 150px;
padding: 20px 16px;
}
.mirth-exp-final {
padding: 80px 0;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.mirth-exp-destination-grid {
grid-template-columns: 1fr;
}
.mirth-exp-buttons {
flex-direction: column;
align-items: stretch;
}
.mirth-exp-btn {
width: 100%;
}
.mirth-exp-spa-tags {
flex-direction: column;
align-items: center;
}
}/* End custom CSS */