/* =========================================
ROOT
========================================= */
:root {
--gold: #c9a45c;
--gold-light: #e3c887;
--dark: #11100e;
--dark-soft: #1a1814;
--cream: #f7f3eb;
--white: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
font-family: "Cormorant Garamond", serif !important;
font-size: clamp(45px, 5vw, 65px) !important;
}
h2 {
font-family: "Cormorant Garamond", serif !important;
font-size: 2.75rem !important;
}
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
font-family: "Inter", sans-serif;
background-image: url("../img/bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
span {
font-size: 14px !important;
}
p {
font-size: 15px !important;
}
/* =========================================
TOPBAR
========================================= */
:root {
--dark-brown: #251D14;
--gold-accent: #C59B3F;
--gold-gradient-start: #C59B3F;
--gold-gradient-end: #A57D2C;
--topbar-text: #555555;
--nav-text-hover: #C59B3F;
}
/* Top Bar Styling */
.top-bar {
background-color: #ffffff;
padding: 10px 0;
font-size: 0.88rem;
color: var(--topbar-text);
border-bottom: 1px solid #f0f0f0;
}
.top-bar a {
color: var(--topbar-text);
text-decoration: none;
transition: color 0.3s ease;
}
.top-bar a:hover {
color: var(--gold-accent);
}
.top-bar .contact-info i {
color: #2b2317;
font-size: 0.95rem;
}
.top-bar .social-links a {
color: var(--gold-accent);
font-size: 1rem;
margin-left: 14px;
transition: transform 0.2s ease, color 0.2s ease;
display: inline-block;
}
.top-bar .social-links a:hover {
color: #8c6820;
transform: translateY(-2px);
}
/* Main Navbar Styling */
.main-navbar {
background-color: var(--dark-brown);
padding: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
border-top: 15px solid #fcb045;
}
/* Logo Custom Styling */
.navbar-brand {
padding: 12px 25px 12px 20px;
display: flex;
align-items: center;
}
.logo-text-wrapper img{
width: 170px !important;
}
/* Nav Links */
.navbar-nav {
align-items: center;
}
.navbar-nav .nav-link {
color: #ffffff;
font-size: 16px;
/* font-weight: 500 !important; */
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 24px 12px !important;
transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: var(--gold-accent);
}
.navbar-nav .dropdown-toggle::after {
margin-left: 4px;
vertical-align: middle;
border-top-color: currentColor;
}
.dropdown-menu {
background-color: var(--dark-brown);
border: 1px solid rgba(197, 155, 63, 0.3);
border-radius: 0;
margin-top: 0;
}
.dropdown-item {
color: #ffffff;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
padding: 8px 20px;
}
.dropdown-item:hover {
background-color: var(--gold-accent);
color: #ffffff;
}
/* Contact Button Styling */
.contact-btn-container {
height: 100%;
display: flex;
align-items: stretch;
}
.btn-contact {
background: #db8c1f;
color: #ffffff;
/* font-weight: 700; */
font-size: 16px;
letter-spacing: 0.8px;
text-transform: uppercase;
border: none;
border-radius: 40px;
border: 1px solid rgba(243, 221, 125, 0.247);
padding: 15px 38px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
/* height: 100%;
min-height: 62px; */
transition: opacity 0.3s ease, filter 0.3s ease;
}
.btn-contact:hover {
color: #ffffff;
filter: brightness(1.1);
}
/* Responsive Customizations */
@media (max-width: 1199.98px) {
.navbar-nav .nav-link {
padding: 15px 8px !important;
font-size: 0.78rem;
}
}
@media (max-width: 991.98px) {
.navbar-collapse {
background-color: var(--dark-brown);
padding: 15px 20px;
}
.navbar-nav .nav-link {
padding: 10px 0 !important;
}
.contact-btn-container {
margin-top: 15px;
width: 100%;
}
.btn-contact {
width: 100%;
padding: 12px;
}
}
/* =========================================
DEMO HERO
सिर्फ header देखने के लिए
========================================= */
/* =========================
HOTEL HERO SLIDER
========================= */
/* =========================
HOTEL HERO
========================= */
.hotel-hero {
width: 100%;
position: relative;
overflow: hidden;
}
/*
HEADER की height को छोड़कर
बाकी पूरी screen banner लेगा
*/
.hotel-hero,
.hotel-hero .carousel,
.hotel-hero .carousel-inner,
.hotel-hero .carousel-item {
height: calc(100vh - 145px);
min-height: 520px;
}
/* =========================
IMAGE
========================= */
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* =========================
DARK OVERLAY
========================= */
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.12),
rgba(0, 0, 0, 0)
);
z-index: 1;
}
/* =========================
HERO CONTENT
========================= */
.hero-content {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 1050px;
text-align: center;
color: #ffffff;
}
/* =========================
SUBTITLE
========================= */
.hero-subtitle {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
color: #ffffff;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 18px;
}
.hero-subtitle span {
width: 55px;
height: 2px;
background: #f3dd7d;
display: block;
}
/* =========================
MAIN HEADING
========================= */
.hero-content h1 {
margin: 0;
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: clamp(48px, 6vw, 82px);
line-height: 0.98;
font-weight: 500;
letter-spacing: -1px;
text-shadow:
2px 3px 3px rgba(0, 0, 0, 0.65);
}
/* GOLD SECOND LINE */
.hero-content h1 strong {
display: block;
color: #f3dd7d;
font-weight: 600;
margin-top: 5px;
}
/* =========================
DESCRIPTION
========================= */
.hero-content p {
max-width: 600px;
margin: 24px auto 30px;
color: rgba(255, 255, 255, 0.92);
font-family: "Inter", sans-serif;
font-size: 15px;
line-height: 1.7;
}
/* =========================
BUTTONS
========================= */
.hero-buttons {
display: flex;
justify-content: center;
gap: 25px;
}
.hero-btn {
min-width: 245px;
padding: 19px 28px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-family: "Inter", sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
transition: 0.3s ease;
}
/* GOLD BUTTON */
.gold-btn {
background: #c99a3a;
color: #ffffff;
}
.gold-btn:hover {
background: #f3dd7d;
color: #11100e;
}
/* WHITE BUTTON */
.white-btn {
background: #ffffff;
color: #11100e;
}
.white-btn:hover {
background: #f3dd7d;
color: #11100e;
}
/* =========================
ARROWS
========================= */
.hotel-hero .carousel-control-prev,
.hotel-hero .carousel-control-next {
width: 8%;
opacity: 1;
z-index: 4;
}
.hero-arrow {
width: 48px;
height: 48px;
border: 1px solid rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s ease;
}
.hero-arrow i {
color: #ffffff;
font-size: 22px;
}
.hero-arrow:hover {
background: #f3dd7d;
border-color: #f3dd7d;
}
.hero-arrow:hover i {
color: #11100e;
}
/* =========================
INDICATORS
========================= */
.hero-indicators {
bottom: 25px;
z-index: 5;
margin-bottom: 0;
}
.hero-indicators button {
width: 35px;
height: 3px;
margin: 0 5px;
border: 0;
opacity: 0.6;
background: #ffffff;
transition: 0.3s ease;
}
.hero-indicators button.active {
width: 65px;
background: #f3dd7d;
opacity: 1;
}
/* =========================
TABLET
========================= */
@media (max-width: 991px) {
.hotel-hero,
.hotel-hero .carousel,
.hotel-hero .carousel-inner,
.hotel-hero .carousel-item {
height: calc(100vh - 140px);
min-height: 500px;
}
.hero-content {
width: 88%;
}
.hero-content h1 {
font-size: clamp(42px, 7vw, 65px);
}
.hero-btn {
min-width: 210px;
padding: 16px 22px;
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 767px) {
.hotel-hero,
.hotel-hero .carousel,
.hotel-hero .carousel-inner,
.hotel-hero .carousel-item {
height: calc(100vh - 68px);
min-height: 560px;
}
.hero-image {
object-position: center;
}
.hero-overlay {
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.65)
);
}
.hero-content {
width: 88%;
}
.hero-subtitle {
font-size: 10px;
letter-spacing: 1.5px;
gap: 8px;
margin-bottom: 15px;
}
.hero-subtitle span {
width: 30px;
}
.hero-content h1 {
font-size: clamp(36px, 11vw, 50px);
line-height: 1.05;
letter-spacing: 0;
}
.hero-content p {
font-size: 12px;
line-height: 1.6;
margin: 18px auto 24px;
max-width: 390px;
}
.hero-buttons {
flex-direction: column;
align-items: center;
gap: 10px;
}
.hero-btn {
width: 210px;
min-width: auto;
padding: 13px 18px;
font-size: 11px;
}
.hotel-hero .carousel-control-prev,
.hotel-hero .carousel-control-next {
width: 12%;
}
.hero-arrow {
width: 35px;
height: 35px;
}
.hero-arrow i {
font-size: 16px;
}
.hero-indicators {
bottom: 15px;
}
.hero-indicators button {
width: 22px;
height: 2px;
}
.hero-indicators button.active {
width: 40px;
}
}
/* =========================
SMALL MOBILE
========================= */
@media (max-width: 400px) {
.hotel-hero,
.hotel-hero .carousel,
.hotel-hero .carousel-inner,
.hotel-hero .carousel-item {
min-height: 520px;
}
.hero-content h1 {
font-size: 34px;
}
.hero-content p {
font-size: 11px;
}
.hero-btn {
width: 190px;
}
}
/* =========================================
GRAND SIGNATURE SECTION
========================================= */
/* =====================================================
GRAND SIGNATURE
===================================================== */
/* ================================
ABOUT CONTENT STATS
================================ */
/* =========================================
/* Base Section Styling */
.hotel-features-section {
background-color: #fdfaf6;
color: #333333;
font-family: 'Poppins', sans-serif;
}
/* Headings */
.sub-heading {
color: #C39233; /* Gold Accent */
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
display: block;
margin-bottom: 6px;
}
.main-heading {
font-family: 'Cinzel', serif;
color: #251D14; /* Dark Luxury */
font-size: 32px;
font-weight: 700;
margin-bottom: 16px;
}
.section-desc, .section-note {
font-size: 15px;
line-height: 1.7;
color: #555555;
}
.text-gold {
color: #C39233;
}
/* Feature Badges Grid */
.feature-badge {
display: flex;
align-items: center;
gap: 10px;
background: #ffffff;
padding: 10px 14px;
border-radius: 6px;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.feature-badge i {
color: #C39233;
font-size: 18px;
}
.feature-badge span {
font-size: 14px;
font-weight: 500;
color: #251D14;
}
/* Info Box (Cafe) */
.info-card-box {
background: #ffffff;
border-left: 4px solid #C39233;
padding: 18px;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.icon-box {
width: 44px;
height: 44px;
background-color: #fdf6ea;
color: #C39233;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 20px;
flex-shrink: 0;
}
/* Cards at the Bottom */
.highlight-card {
background: #ffffff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.highlight-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.gold-card {
border-color: #C39233 !important;
background: #fffdf9;
}
.card-icon {
font-size: 28px;
color: #C39233;
}
.card-title {
font-family: 'Cinzel', serif;
font-size: 20px;
font-weight: 700;
color: #251D14;
margin-bottom: 12px;
}
.stay-tagline {
font-weight: 600;
color: #C39233;
font-size: 15px;
}
/* Image Wrappers */
.feature-img-wrapper img {
width: 100%;
/* max-height: 380px; */
object-fit: cover;
}
About Us Section Styling
========================================= */
.about-section {
background-color: #fcf9f2;
/* Damask pattern created via SVG data URL for crisp appearance */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
padding: 80px 0;
position: relative;
overflow: hidden;
}
/* Subtitle with gold line */
.subtitle-wrapper {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.section-subtitle {
color: #C39233;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.subtitle-line {
width: 40px;
height: 2px;
background-color: #C39233;
display: inline-block;
}
/* Main Heading */
.about-title {
font-size: 2.75rem !important;
font-weight: 800;
color: #0b1523;
margin-bottom: 24px;
line-height: 1.2;
}
.about-title span.highlight-gold {
color: #C39233;
font-size: 2.75rem !important;
}
/* Body Description */
.about-description {
color: #666666;
font-size: 1.05rem;
line-height: 1.7;
max-width: 580px;
margin-bottom: 35px;
text-align: justify;
}
/* Stats Cards Layout */
.stats-container {
display: flex;
gap: 20px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.stat-card {
background-color: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(195, 146, 51, 0.2);
border-radius: 6px;
padding: 20px 25px;
text-align: center;
min-width: 120px;
flex: 1;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.stat-card:hover {
transform: translateY(-4px);
border-color: rgba(195, 146, 51, 0.6);
background-color: rgba(255, 255, 255, 0.7);
}
.stat-icon {
font-size: 1.8rem;
color: #C39233;
margin-bottom: 10px;
display: inline-block;
}
.stat-number {
font-size: 2.1rem;
font-weight: 800;
color: #0b1523;
line-height: 1;
margin-bottom: 5px;
font-family: 'Montserrat', sans-serif;
}
.stat-label {
font-size: 0.9rem;
color: #777777;
font-weight: 500;
}
/* Explore Button */
.btn-explore {
background: linear-gradient(135deg, #C39233 0%, #A87627 100%);
color: #ffffff;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 1px;
padding: 14px 38px;
border-radius: 4px;
border: none;
display: inline-block;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 4px 15px rgba(195, 146, 51, 0.3);
transition: all 0.3s ease;
}
.btn-explore:hover {
color: #ffffff;
box-shadow: 0 6px 20px rgba(195, 146, 51, 0.45);
transform: translateY(-2px);
}
/* Image Grid Collage */
.image-collage-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
}
.collage-img-wrapper {
overflow: hidden;
border-radius: 4px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
position: relative;
}
.collage-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.collage-img-wrapper:hover img {
transform: scale(1.04);
}
/* Aspect ratio tweaking for replica matching */
.img-top-left {
aspect-ratio: 3 / 3;
}
.img-top-right {
aspect-ratio: 4 / 4.2;
}
.img-bottom-left {
aspect-ratio: 3 / 2.8;
}
.img-bottom-right {
aspect-ratio: 5 / 4.5;
}
/* Responsive Customizations */
@media (max-width: 1199.98px) {
.about-title {
font-size: 2.2rem;
}
}
@media (max-width: 991.98px) {
.about-section {
padding: 50px 0;
}
.about-content-col {
margin-bottom: 50px;
}
.stats-container {
gap: 12px;
}
.stat-card {
padding: 15px 10px;
}
}
@media (max-width: 575.98px) {
.stats-container {
flex-direction: column;
}
.about-title {
font-size: 1.8rem;
}
}
/* =========================================
OUR HAPPY CLIENTS
========================================= */
/* =========================================
TESTIMONIAL SLIDER Section Styling
========================================= */
.testimonial-section {
position: relative;
height: 80vh;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
/* Restaurant interior warm background image */
background: linear-gradient(rgba(18, 12, 8, 0.68), rgba(18, 12, 8, 0.68)),
url('../img/showroom.jpeg') center center / cover no-repeat;
padding: 0;
overflow: hidden;
}
.testimonial-container {
width: 100%;
max-width: 1240px;
padding: 0 70px;
margin: 0 auto;
}
/* Testimonial Card Styling */
.testimonial-card {
background-color: #ffffff;
border-radius: 4px;
padding: 36px 36px 30px 36px;
position: relative;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 260px;
}
.testimonial-quote {
color: #555555;
font-size: 1.05rem;
line-height: 1.65;
margin-bottom: 25px;
font-weight: 400;
text-align: justify;
}
.testimonial-author-wrapper {
display: flex;
align-items: center;
gap: 15px;
}
.testimonial-avatar {
width: 54px;
height: 54px;
border-radius: 4px;
object-fit: cover;
background-color: #e9ecef;
flex-shrink: 0;
}
.author-info {
display: flex;
flex-direction: column;
}
.author-name {
font-size: 1.15rem;
font-weight: 800;
color: #0b1523;
margin-bottom: 3px;
}
.author-designation {
font-size: 0.88rem;
color: #888888;
font-weight: 500;
}
/* Decorative Large Quotes Icon at bottom right */
.quote-icon-decor {
position: absolute;
bottom: 12px;
right: 25px;
color: #C39233;
font-size: 3.2rem;
line-height: 1;
opacity: 0.9;
pointer-events: none;
font-family: serif;
}
/* Square Gold Nav Arrows on far left/right edges */
.testimonial-carousel .carousel-control-prev,
.testimonial-carousel .carousel-control-next {
width: 48px;
height: 48px;
background-color: #C39233;
opacity: 1;
border-radius: 3px;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.testimonial-carousel .carousel-control-prev {
left: -55px;
}
.testimonial-carousel .carousel-control-next {
right: -55px;
}
.testimonial-carousel .carousel-control-prev:hover,
.testimonial-carousel .carousel-control-next:hover {
background-color: #a87627;
opacity: 1;
}
.testimonial-carousel .carousel-control-prev-icon,
.testimonial-carousel .carousel-control-next-icon {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
}
/* Responsive Customizations */
@media (max-width: 991.98px) {
.about-section, .services-section {
padding: 50px 0;
}
.about-content-col {
margin-bottom: 50px;
}
.stats-container {
gap: 12px;
}
.stat-card {
padding: 15px 10px;
}
.services-title {
font-size: 2.1rem;
}
.service-card {
padding: 30px 20px;
margin-bottom: 25px;
}
.testimonial-container {
padding: 0 40px;
}
.testimonial-carousel .carousel-control-prev { left: -10px; }
.testimonial-carousel .carousel-control-next { right: -10px; }
}
@media (max-width: 767.98px) {
.testimonial-section {
height: auto;
padding: 80px 0;
}
.testimonial-card {
padding: 25px 25px 25px 25px;
}
.quote-icon-decor {
font-size: 2.5rem;
right: 15px;
bottom: 10px;
}
}
@media (max-width: 575.98px) {
.stats-container {
flex-direction: column;
}
.about-title {
font-size: 1.8rem;
}
}
/* =========================================
HOTEL SAI GRAND
FINAL FOOTER CSS
========================================= */
/* =========================
HOTEL FOOTER
========================= */
.hotel-footer {
position: relative;
background:
linear-gradient(
180deg,
#171106 0%,
#090806 55%,
#050505 100%
);
color: #ffffff;
/* padding: 70px 0 55px; */
padding: 30px 0;
overflow: hidden;
}
/* TOP GOLD GLOW */
.hotel-footer::before {
content: "";
position: absolute;
top: -180px;
left: 50%;
width: 500px;
height: 300px;
transform: translateX(-50%);
background: rgba(243, 221, 125, 0.04);
filter: blur(70px);
pointer-events: none;
}
/* FOOTER ROW */
.hotel-footer-row {
position: relative;
}
/* =========================
FOOTER BRAND
========================= */
.footer-brand {
display: flex;
flex-direction: column;
align-items: center;
padding-right: 35px;
}
/* LOGO */
.footer-logo {
width: 158px;
height: 158px;
border: 2px solid #f3dd7d;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
box-shadow:
0 0 20px rgba(243, 221, 125, 0.08);
margin-bottom: 24px;
}
.footer-logo img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
}
/* =========================
SOCIAL ICONS
========================= */
.footer-social {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.social-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #ffffff;
text-decoration: none;
font-size: 21px;
transition: 0.3s ease;
}
.social-icon:hover {
color: #ffffff;
transform: translateY(-5px);
}
.facebook {
background: #1877f2;
}
.whatsapp {
background: #25d366;
}
.instagram {
background:
linear-gradient(
135deg,
#833ab4,
#fd1d1d,
#fcb045
);
}
.youtube {
background: #ff0000;
}
/* =========================
FOOTER COLUMNS
========================= */
.footer-column {
min-height: 345px;
/* padding-left: 62px;
padding-right: 25px; */
border-left: 1px solid rgba(243, 221, 125, 0.12);
}
.footer-column h3 {
color: #ffffff;
font-family: "Playfair Display", serif;
font-size: 27px;
font-weight: 600;
margin: 0;
line-height: 1.2;
}
/* GOLD UNDERLINE */
.footer-line {
width: 67px;
height: 3px;
background: #f3dd7d;
margin-top: 12px;
margin-bottom: 28px;
position: relative;
}
.footer-line::after {
content: "";
position: absolute;
right: -10px;
top: 0;
width: 7px;
height: 3px;
background: #f3dd7d;
}
/* =========================
CONTACT
========================= */
.footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 18px;
color: #eeeeee;
font-family: "Inter", sans-serif;
font-size: 15px;
line-height: 1.8;
}
.footer-contact li i {
color: #f3dd7d;
font-size: 18px;
min-width: 20px;
margin-top: 3px;
}
.footer-contact a {
color: #eeeeee;
text-decoration: none;
transition: 0.3s ease;
}
.footer-contact a:hover {
color: #f3dd7d;
}
/* =========================
FOOTER LINKS
========================= */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 19px;
}
.footer-links a {
color: #eeeeee;
text-decoration: none;
font-family: "Inter", sans-serif;
font-size: 15px;
transition: 0.3s ease;
}
.footer-links li i{
font-size: 16px;
color: #f3dd7d;
}
.footer-links a::before {
content: "›";
color: #f3dd7d;
margin-right: 9px;
opacity: 0;
transform: translateX(-5px);
display: inline-block;
transition: 0.3s ease;
}
/* .footer-links a:hover {
color: #f3dd7d;
} */
/* .footer-links a:hover::before {
opacity: 1;
transform: translateX(0);
} */
/* =========================
RESPONSIVE
========================= */
@media (max-width: 991px) {
.hotel-footer {
padding: 55px 0 40px;
}
.footer-brand {
padding-right: 25px;
margin-bottom: 45px;
}
.footer-column {
min-height: auto;
padding-left: 30px;
margin-bottom: 40px;
}
.footer-column h3 {
font-size: 24px;
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 767px) {
.hotel-footer {
padding: 50px 0 30px;
}
.footer-brand {
padding: 0 15px;
margin-bottom: 45px;
}
.footer-logo {
width: 135px;
height: 135px;
}
.social-icon {
width: 48px;
height: 48px;
font-size: 18px;
}
.footer-column {
border-left: 0;
border-top: 1px solid rgba(243, 221, 125, 0.12);
padding: 30px 15px 0;
margin-bottom: 10px;
}
.footer-column h3 {
font-size: 23px;
}
.footer-contact li,
.footer-links a {
font-size: 14px;
}
}
/* SMALL MOBILE */
@media (max-width: 400px) {
.footer-social {
gap: 8px;
}
.social-icon {
width: 44px;
height: 44px;
font-size: 17px;
}
.footer-column {
padding-left: 10px;
padding-right: 10px;
}
}
/* =========================
COPYRIGHT
========================= */
.hotel-copyright {
background: #050505;
border-top: 1px solid rgba(243, 221, 125, 0.15);
padding: 18px 0;
}
.copyright-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.copyright-content p {
margin: 0;
color: #a9a9a9;
font-family: "Inter", sans-serif;
font-size: 12px;
line-height: 1.6;
}
.copyright-content strong {
color: #f3dd7d;
font-weight: 500;
}
.copyright-content a {
color: #f3dd7d;
text-decoration: none;
transition: 0.3s ease;
}
.copyright-content a:hover {
color: #ffffff;
}
/* =========================
MOBILE
========================= */
@media (max-width: 767px) {
.hotel-copyright {
padding: 15px 0;
}
.copyright-content {
flex-direction: column;
text-align: center;
gap: 5px;
}
.copyright-content p {
font-size: 11px;
}
}
/* =========================
VARANASI EXPERIENCES
========================= */
/* ==========================================
ATTRACTIONS SECTION
========================================== */
.attractions-section {
width: 100%;
min-height: 100vh;
padding: 45px 0;
background: #fff;
overflow: hidden;
}
/* Bootstrap container ko control */
.attractions-section .container {
max-width: 1250px;
}
/* ==========================================
HEADING
========================================== */
.attractions-heading {
text-align: center;
margin-bottom: 35px;
}
.attractions-label {
display: inline-flex;
align-items: center;
gap: 15px;
font-family: "Inter", sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
color: #b88a32;
}
.attractions-heading h2 {
font-family: "Cormorant Garamond", serif !important;
font-size: clamp(48px, 5vw, 70px) !important;
font-weight: 500;
line-height: .85;
}
.attractions-heading h2 span {
color: #b88a32;
font-size: clamp(48px, 5vw, 70px) !important;
font-weight: 500;
}
.attractions-heading p {
margin: 8px 0 0;
font-family: "Inter", sans-serif;
font-size: 14px;
color: #666;
}
/* ==========================================
ATTRACTION ROW
========================================== */
.attraction-row {
margin-bottom: 25px;
}
/* ==========================================
IMAGE
========================================== */
/* .attraction-image {
width: 100%;
overflow: hidden;
border-radius: 15px;
} */
.attraction-image img {
width: 100%;
/* height: 100%;
display: block;
object-fit: cover; */
border-radius: 15px;
transition: transform .6s ease;
}
.attraction-image:hover img {
transform: scale(1.05);
}
/* ==========================================
CONTENT
========================================== */
.attraction-content {
padding: 0 55px;
}
.attraction-small {
display: block;
margin-bottom: 8px;
font-family: "Inter", sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 3px;
color: #b88a32;
}
.attraction-content h3 {
margin: 0 0 8px;
color: #11100e;
font-family: "Cormorant Garamond", serif;
font-size: 36px;
font-weight: 500;
line-height: 1.05;
}
.attraction-content p {
max-width: 500px;
margin: 0 0 14px;
font-family: "Inter", sans-serif;
font-size: 13px;
line-height: 1.55;
color: #706d68;
}
/* ==========================================
BUTTON
========================================== */
.attraction-btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 9px 18px;
border-radius: 30px;
background: #b99042;
color: #fff;
font-family: "Inter", sans-serif;
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: .3s ease;
}
.attraction-btn span {
font-size: 17px;
line-height: 1;
transition: transform .3s ease;
}
.attraction-btn:hover {
background: #b88a32;
color: #fff;
}
.attraction-btn:hover span {
transform: translateX(5px);
}
/* ==========================================
LAPTOP - ONE SCREEN
========================================== */
@media (min-width: 992px) {
.attractions-section {
display: flex;
align-items: center;
}
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.attractions-section {
padding: 45px 0;
}
.attraction-content {
padding: 0 25px;
}
.attraction-content h3 {
font-size: 32px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.attractions-section {
min-height: auto;
padding: 40px 0;
}
.attractions-heading {
margin-bottom: 30px;
}
.attractions-label {
gap: 9px;
font-size: 9px;
letter-spacing: 2.5px;
}
.attractions-label::before,
.attractions-label::after {
width: 28px;
}
.attractions-heading h2 {
font-size: 40px;
}
.attractions-heading p {
font-size: 13px;
}
/* Bootstrap columns full width */
.attraction-row {
margin-bottom: 35px;
}
.attraction-image {
height: 220px;
margin-bottom: 20px;
}
.attraction-content {
padding: 0 5px;
}
.attraction-content h3 {
font-size: 32px;
}
.attraction-content p {
font-size: 13px;
line-height: 1.6;
}
}
/* =========================
SCROLL UP BUTTON
========================= */
.scroll-top-btn {
position: fixed;
right: 25px;
bottom: 25px;
width: 48px;
height: 48px;
border: none;
border-radius: 50%;
background: #c99a3d;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: all 0.3s ease;
}
.scroll-top-btn.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top-btn:hover {
background: #191815;
transform: translateY(-4px);
}
/* Mobile */
@media (max-width: 576px) {
.scroll-top-btn {
width: 42px;
height: 42px;
right: 15px;
bottom: 15px;
font-size: 17px;
}
}
/* start about page */
.breadcrumb-section {
position: relative;
background: linear-gradient(rgba(20, 15, 10, 0.75), rgba(20, 15, 10, 0.75)),
url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?q=80&w=1920&auto=format&fit=crop') center center / cover no-repeat;
padding: 90px 0 80px 0;
text-align: center;
color: #ffffff;
border-bottom: 3px solid var(--gold-accent);
}
.breadcrumb-title {
font-family: 'Cinzel', serif;
font-size: 3rem;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 12px;
text-transform: uppercase;
}
.breadcrumb-nav {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
.breadcrumb-nav a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-nav a:hover {
color: var(--gold-accent);
}
.breadcrumb-nav .separator {
color: var(--gold-accent);
font-size: 1rem;
}
.breadcrumb-nav .active-page {
color: var(--gold-accent);
}
/* ================================
AMENITIES SECTION
================================ */
.amenities-section {
background: #ffffff;
padding: 70px 0;
overflow: hidden;
}
/* Heading */
.amenities-heading {
text-align: center;
margin-bottom: 45px;
}
.amenities-heading span {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 4px;
color: #c79a3b;
margin-bottom: 8px;
}
.amenities-heading h2 {
margin: 10px 0;
font-family: "Cormorant Garamond", serif !important;
font-size: clamp(45px, 5vw, 65px) !important;
line-height: .85;
font-weight: 500;
}
.amenities-heading p {
margin: 10px auto 0;
max-width: 550px;
font-size: 15px;
color: #666;
}
/* Grid */
.amenities-row {
border-top: 1px solid #e8e8e8;
border-left: 1px solid #e8e8e8;
}
/* Item */
.amenity-item {
min-height: 205px;
padding: 35px 25px;
text-align: center;
border-right: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
transition: all 0.3s ease;
background: #fff;
}
.amenity-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
}
/* Icon */
.amenity-icon {
width: 55px;
height: 55px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #faf7ef;
color: #c79a3b;
font-size: 27px;
transition: all 0.3s ease;
}
.amenity-item:hover .amenity-icon {
background: #c79a3b;
color: #fff;
}
/* Title */
.amenity-item h3 {
margin: 0 0 8px;
font-family: "Cormorant Garamond", serif;
font-size: 23px;
font-weight: 600;
color: #222;
}
/* Description */
.amenity-item p {
margin: 0 auto;
max-width: 280px;
font-size: 14px;
line-height: 1.6;
color: #777;
}
/* ================================
TABLET
================================ */
@media (max-width: 991px) {
.amenities-section {
padding: 55px 0;
}
.amenities-heading h2 {
font-size: 42px;
}
.amenity-item {
min-height: 190px;
padding: 30px 20px;
}
}
/* ================================
MOBILE
================================ */
@media (max-width: 575px) {
.amenities-section {
padding: 40px 0;
}
.amenities-heading {
margin-bottom: 30px;
}
.amenities-heading span {
font-size: 10px;
letter-spacing: 3px;
}
.amenities-heading h2 {
font-size: 36px;
}
.amenities-heading p {
font-size: 13px;
padding: 0 15px;
}
.amenity-item {
min-height: 175px;
padding: 25px 10px;
}
.amenity-icon {
width: 45px;
height: 45px;
font-size: 21px;
margin-bottom: 10px;
}
.amenity-item h3 {
font-size: 18px;
}
.amenity-item p {
font-size: 11px;
line-height: 1.45;
}
}
/* ================================
OUR HOSPITALITY
================================ */
.hospitality-section {
background: #f8f7f3;
padding: 80px 0;
overflow: hidden;
}
/* Heading */
.hospitality-heading {
max-width: 700px;
margin: 0 auto 50px;
}
.hospitality-heading span {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
color: #c99a3d;
margin-bottom: 12px;
}
.hospitality-heading h2 {
margin: 10px 0;
font-family: "Cormorant Garamond", serif !important;
font-size: clamp(45px, 5vw, 65px) !important;
line-height: .85;
font-weight: 500;
}
.hospitality-heading p {
font-size: 16px;
line-height: 1.7;
color: #555;
margin: 0;
}
/* Left Content */
.hospitality-intro {
height: 100%;
min-height: 390px;
background: #11100e;
padding: 45px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.hospitality-intro::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50%;
right: -70px;
bottom: -70px;
}
.hospitality-number {
font-size: 13px;
letter-spacing: 3px;
color: #d7aa4c;
margin-bottom: 20px;
}
.hospitality-intro h3 {
font-family: "Cormorant Garamond", serif;
font-size: 44px;
line-height: 1.05;
font-weight: 500;
color: #fff;
margin-bottom: 20px;
}
.hospitality-intro p {
max-width: 440px;
color: rgba(255,255,255,0.75);
font-size: 15px;
line-height: 1.8;
margin-bottom: 28px;
}
/* Button */
.hospitality-btn {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border: 1px solid #d7aa4c;
color: #fff;
text-decoration: none;
font-size: 14px;
transition: 0.3s ease;
}
.hospitality-btn i {
transition: 0.3s ease;
}
.hospitality-btn:hover {
background: #d7aa4c;
color: #fff;
}
.hospitality-btn:hover i {
transform: translateX(5px);
}
/* =========================================
OUR SERVICES Section Styling
========================================= */
.services-section {
background-color: #fff !important;
/* background-image: url('data:image/svg+xml;utf8,'); */
background-repeat: repeat;
padding: 70px 0;
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
}
.services-header {
text-align: center;
margin-bottom: 45px;
}
.services-subtitle-wrapper {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 8px;
}
.services-subtitle {
color: #C39233;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 2px;
text-transform: uppercase;
}
.services-title {
font-size: 2.6rem !important;
font-weight: 800;
color: #0b1523;
line-height: 1.2;
margin: 0;
}
.services-title span.highlight-gold {
color: #C39233;
font-size: 2.6rem !important;
}
/* Service Cards Grid */
.service-card {
background: #ffffff;
border-radius: 4px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
height: 100%;
transition: transform 0.35 ease, box-shadow 0.35s ease;
border: 1px solid rgba(0, 0, 0, 0.02);
display: flex;
flex-direction: column;
align-items: center;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(195, 146, 51, 0.15);
}
/* Framed Icon Box with Double Border */
.service-icon-box {
width: 70px;
height: 70px;
border: 1px solid #e5e5e5;
padding: 4px;
margin-bottom: 25px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ffffff;
}
.service-icon-inner {
width: 100%;
height: 100%;
border: 1px solid #C39233;
display: flex;
align-items: center;
justify-content: center;
color: #C39233;
font-size: 1.8rem;
background-color: #ffffff;
}
.service-card-title {
font-size: 1.35rem;
font-weight: 700;
color: #0b1523;
margin-bottom: 18px;
}
.service-card-text {
color: #777777;
font-size: 0.92rem;
line-height: 1.7;
margin: 0;
text-align: center;
font-weight: 400;
}
@media (max-width: 991.98px) {
.services-section {
padding: 60px 0;
min-height: auto;
}
.services-title {
font-size: 2.1rem;
}
.service-card {
padding: 30px 20px;
margin-bottom: 25px;
}
}
/* Service Cards */
.hospitality-card {
height: 100%;
min-height: 185px;
background: #fff;
border: 1px solid #e8e5df;
padding: 28px;
position: relative;
transition: 0.3s ease;
}
.hospitality-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0,0,0,0.08);
}
.hospitality-icon {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: #f7f0df;
color: #c99a3d;
font-size: 21px;
margin-bottom: 18px;
}
.hospitality-card > span {
position: absolute;
top: 25px;
right: 25px;
font-size: 11px;
letter-spacing: 2px;
color: #aaa;
}
.hospitality-card h4 {
font-family: "Cormorant Garamond", serif;
font-size: 25px;
font-weight: 600;
color: #11100e;
margin-bottom: 8px;
}
.hospitality-card p {
font-size: 14px;
line-height: 1.6;
color: #666;
margin: 0;
}
/* ================================
TABLET
================================ */
@media (max-width: 991px) {
.hospitality-section {
padding: 60px 0;
}
.hospitality-heading h2 {
font-size: 40px;
}
.hospitality-intro {
min-height: 330px;
}
.hospitality-intro h3 {
font-size: 38px;
}
}
/* ================================
MOBILE
================================ */
@media (max-width: 767px) {
.hospitality-section {
padding: 45px 0;
}
.hospitality-heading {
margin-bottom: 30px;
}
.hospitality-heading span {
font-size: 10px;
letter-spacing: 3px;
}
.hospitality-heading h2 {
font-size: 34px;
}
.hospitality-heading p {
font-size: 14px;
}
.hospitality-intro {
min-height: 300px;
padding: 30px;
}
.hospitality-intro h3 {
font-size: 34px;
}
.hospitality-intro p {
font-size: 14px;
}
.hospitality-card {
min-height: 170px;
padding: 22px;
}
.hospitality-card h4 {
font-size: 23px;
}
}
/* =====================================
HOTEL CTA SECTION
===================================== */
.hotel-cta {
position: relative;
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient( rgba(17, 16, 14, 0.78), rgba(17, 16, 14, 0.78) ), url("images/cta-hotel.jpg");
background-size: cover;
background-position: center;
overflow: hidden;
}
/* Decorative Circle */
.hotel-cta::before {
content: "";
position: absolute;
width: 320px;
height: 320px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 50%;
left: -150px;
top: -120px;
}
.hotel-cta::after {
content: "";
position: absolute;
width: 220px;
height: 220px;
border: 1px solid rgba(215,170,76,0.25);
border-radius: 50%;
right: -100px;
bottom: -100px;
}
/* Content */
.cta-content {
position: relative;
z-index: 2;
}
.cta-label {
display: inline-block;
color: #d7aa4c;
font-size: 12px;
font-weight: 700;
letter-spacing: 4px;
margin-bottom: 15px;
}
.cta-content h2 {
margin: 10px 0;
font-family: "Cormorant Garamond", serif !important;
font-size: clamp(45px, 5vw, 65px) !important;
line-height: .85;
font-weight: 500;
color: white;
}
.cta-content h2 span {
color: #d7aa4c;
font-size: clamp(45px, 5vw, 65px) !important;
line-height: .85;
font-weight: 500;
}
.cta-content p {
max-width: 600px;
margin: 0 auto 28px;
color: rgba(255,255,255,0.78);
font-size: 15px;
line-height: 1.7;
}
/* Buttons */
.cta-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
}
.cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 13px 24px;
background: #d7aa4c;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: 0.3s ease;
}
.cta-btn i {
transition: 0.3s ease;
}
.cta-btn:hover {
background: #fff;
color: #102b50;
}
.cta-btn:hover i {
transform: translateX(5px);
}
.cta-link {
color: #fff;
text-decoration: none;
font-size: 14px;
border-bottom: 1px solid rgba(255,255,255,0.6);
padding-bottom: 4px;
transition: 0.3s ease;
}
.cta-link:hover {
color: #d7aa4c;
border-color: #d7aa4c;
}
/* =====================================
TABLET
===================================== */
@media (max-width: 991px) {
.hotel-cta {
min-height: 400px;
}
.cta-content h2 {
font-size: 48px;
}
}
/* =====================================
MOBILE
===================================== */
@media (max-width: 767px) {
.hotel-cta {
min-height: 430px;
padding: 50px 15px;
background-position: center;
}
.cta-label {
font-size: 9px;
letter-spacing: 2.5px;
}
.cta-content h2 {
font-size: 38px;
line-height: 1.1;
}
.cta-content p {
font-size: 14px;
line-height: 1.6;
padding: 0 10px;
}
.cta-buttons {
flex-direction: column;
gap: 18px;
}
.cta-btn {
padding: 12px 22px;
}
}
/* start room page */
/* Rooms Section Base */
.rooms-section {
padding: 60px 0;
background-color: #fdfaf6; /* Light damask/cream background */
}
/* Room Card Styling */
.room-card {
background: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #eee;
height: 100%;
display: flex;
flex-direction: column;
}
/* Image Wrapper & Price Tag */
.room-image {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.room-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.room-price {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(18, 18, 18, 0.88);
color: #ffffff;
padding: 6px 14px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
}
.room-price span {
font-size: 16px;
font-weight: 700;
color: #ffffff;
}
/* Room Content */
.room-content {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.room-content h3 {
font-size: 22px;
font-weight: 700;
color: #0f172a;
/* margin-bottom: 12px; */
}
/* Info Badges (Bed, Person, Area) */
.room-info {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
/* margin-bottom: 16px; */
color: #64748b;
font-size: 14px;
}
.room-info span {
display: flex;
align-items: center;
gap: 6px;
}
.room-info i {
color: #c39233; /* Gold Accent Icon Color */
font-size: 16px;
}
/* Separator Line */
/* .room-line {
width: 100%;
height: 1px;
background-color: #e2e8f0;
margin-bottom: 16px;
} */
/* Description Text */
.room-content p {
color: #64748b;
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
/* Action Buttons */
/* ===============================
ROOM BUTTONS
================================ */
.room-buttons {
display: flex;
align-items: center;
gap: 13px;
margin-top: auto;
padding-top: 15px;
}
/* ===============================
AMENITIES WRAPPER
================================ */
.amenities-wrapper {
flex: 1;
position: relative;
}
/* AMENITIES BUTTON */
.amenities-btn {
width: 100%;
height: 52px;
border: none;
border-radius: 5px;
background: #211b15;
color: #fff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
cursor: pointer;
transition: .3s ease;
}
.amenities-btn i {
color: #c49532;
font-size: 17px;
}
.amenities-btn:hover {
background: #11100e;
}
/* ===============================
AMENITIES BOX
================================ */
.amenities-box {
position: absolute;
left: 0;
right: 0;
bottom: calc(100% + 10px);
z-index: 100;
background: #fff;
border-radius: 5px;
padding: 16px 20px 15px;
box-shadow: 0 10px 30px rgba(0,0,0,.16);
border: 1px solid #eee6d8;
}
/* ===============================
HEADER
================================ */
.amenities-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 11px;
margin-bottom: 5px;
border-bottom: 1px solid #ddd;
}
.amenities-header h4 {
margin: 0;
color: #11100e;
font-size: 19px;
font-weight: 600;
letter-spacing: .5px;
}
/* CLOSE BUTTON */
.amenities-close {
border: none;
background: transparent;
color: #c49532;
font-size: 25px;
line-height: 1;
padding: 0;
cursor: pointer;
transition: .3s ease;
}
.amenities-close:hover {
transform: rotate(90deg);
color: #11100e;
}
/* ===============================
AMENITIES GRID
================================ */
.amenities-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 45px;
}
/* ITEM */
.amenity {
min-height: 40px;
display: flex;
align-items: center;
gap: 10px;
color: #6d6a67;
font-size: 16px;
transition: .3s ease;
}
.amenity i {
width: 20px;
color: #c49532;
font-size: 17px;
transition: .3s ease;
}
.amenity:hover {
color: #11100e;
transform: translateX(4px);
}
.amenity:hover i {
transform: scale(1.15);
}
/* ===============================
BOOK NOW
================================ */
.room-buttons .btn-book {
width: 140px;
min-width: 140px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: #c49532;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
font-weight: 700;
transition: .3s ease;
}
.room-buttons .btn-book:hover {
background: #aa7d27;
color: #fff;
transform: translateY(-2px);
}
/* ===============================
MOBILE
================================ */
@media (max-width: 767px) {
.room-buttons {
flex-direction: column;
}
.amenities-wrapper {
width: 100%;
}
.room-buttons .btn-book {
width: 100%;
min-width: 100%;
}
.amenities-box {
position: absolute;
bottom: calc(100% + 8px);
padding: 15px;
}
.amenities-grid {
column-gap: 15px;
}
.amenity {
font-size: 13px;
}
.amenity i {
font-size: 15px;
}
}
/* SMALL MOBILE */
@media (max-width: 450px) {
.amenities-grid {
grid-template-columns: 1fr;
}
}
/* start delux room page */
.deluxe-room-section {
width: 100%;
/* height: 100svh; */
min-height: 600px;
display: flex;
align-items: center;
padding: 35px 0;
background: #ffffff;
overflow: hidden;
font-family: "Inter", sans-serif;
}
/* IMAGE */
.deluxe-room-image {
position: relative;
width: 100%;
height: calc(100svh - 70px);
max-height: 650px;
overflow: hidden;
}
.deluxe-room-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1s ease;
}
.deluxe-room-image:hover img {
transform: scale(1.04);
}
/* IMAGE LABEL */
.image-label {
position: absolute;
left: 22px;
bottom: 20px;
display: none ;
align-items: center;
gap: 15px;
color: #ffffff;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
}
.image-label span:first-child {
font-size: 12px;
font-weight: 600;
border: 1px solid rgba(255,255,255,.7);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
/* CONTENT */
.deluxe-room-content {
padding: 25px 0 25px 50px;
}
/* EYEBROW */
.room-eyebrow {
display: block;
margin-bottom: 15px;
color: #b08b48;
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
}
/* HEADING */
.deluxe-room-content h2 {
margin: 0;
color: #11100e;
font-family: "Cormorant Garamond", serif;
font-size: 46px !important;
font-weight: 500;
line-height: .78;
}
.deluxe-room-content h2 span {
display: block;
/* font-style: italic; */
font-size: clamp(55px, 5vw, 76px) !important;
font-weight: 400;
}
/* LINE */
.room-line {
width: 55px;
height: 1px;
background: #b08b48;
margin: 22px 0;
}
/* DESCRIPTION */
.room-description {
max-width: 430px;
margin: 0 0 22px;
color: #666;
font-size: 13px;
line-height: 1.7;
}
/* DETAILS */
.room-details {
display: flex;
align-items: center;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
padding: 14px 0;
margin-bottom: 18px;
}
.room-details > div {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
color: #333;
font-size: 11px;
}
.room-details > div + div {
border-left: 1px solid #ddd;
padding-left: 15px;
}
.room-details i {
color: #b08b48;
font-size: 15px;
}
/* AMENITIES */
.deluxe-amenities {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 22px;
}
.deluxe-amenities-btn {
width: 100%;
border: 0;
background: transparent;
padding: 10px 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
color: #11100e;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
}
.deluxe-amenities-btn i {
color: #b08b48;
font-size: 13px;
transition: .3s ease;
}
.deluxe-amenities-btn.active i {
transform: rotate(45deg);
}
/* AMENITIES LIST */
.deluxe-amenities-list {
display: none;
grid-template-columns: repeat(2, 1fr);
gap: 8px 20px;
padding: 0 0 15px;
}
.deluxe-amenities-list.show {
display: grid;
}
.deluxe-amenities-list span {
display: flex;
align-items: center;
gap: 7px;
color: #777;
font-size: 10px;
}
.deluxe-amenities-list i {
color: #b08b48;
}
/* BOOK BUTTON */
.deluxe-book-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 30px;
min-width: 175px;
padding: 13px 17px;
background: #11100e;
color: #ffffff;
text-decoration: none;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: .3s ease;
}
.deluxe-book-btn i {
transition: .3s ease;
}
.deluxe-book-btn:hover {
background: #b08b48;
color: #ffffff;
}
.deluxe-book-btn:hover i {
transform: translate(3px,-3px);
}
/* ================= TABLET ================= */
@media (max-width: 991px) {
.deluxe-room-section {
height: auto;
min-height: 100svh;
padding: 30px 0;
}
.deluxe-room-image {
height: 65vh;
min-height: 450px;
}
.deluxe-room-content {
padding: 30px 0 20px 30px;
}
.deluxe-room-content h2 {
font-size: 58px;
}
}
/* ================= MOBILE ================= */
@media (max-width: 767px) {
.deluxe-room-section {
height: auto;
min-height: auto;
padding: 20px 0 35px;
}
.deluxe-room-image {
height: 48vh;
min-height: 330px;
max-height: 450px;
}
.deluxe-room-content {
padding: 28px 5px 0;
}
.room-eyebrow {
margin-bottom: 12px;
}
.deluxe-room-content h2 {
font-size: 55px;
}
.room-line {
margin: 18px 0;
}
.room-description {
font-size: 12px;
line-height: 1.6;
margin-bottom: 18px;
}
.room-details {
padding: 12px 0;
}
.room-details > div {
font-size: 9px;
}
.room-details > div + div {
padding-left: 8px;
}
.room-details i {
font-size: 13px;
}
.deluxe-amenities-list {
grid-template-columns: 1fr 1fr;
}
.deluxe-book-btn {
width: 100%;
justify-content: space-between;
}
}
/* start banquet hall page */
.sg-banquet-section {
width: 100%;
min-height: 100vh;
padding: 110px 0 80px;
background: #ffffff;
color: #102b50;
overflow: hidden;
font-family: "Inter", sans-serif;
}
/* INTRO */
.banquet-intro {
margin-bottom: 45px;
}
.banquet-eyebrow {
display: block;
margin-bottom: 20px;
color: #b08b48;
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
}
.banquet-intro h1 {
margin: 0;
font-weight: 500;
line-height: .9;
color: #11100e;
}
.banquet-intro h1 span {
font-weight: 500;
font-family: "Cormorant Garamond", serif !important;
font-size: clamp(45px, 5vw, 65px) !important;
color: #d0a95d;
}
.banquet-intro-text {
max-width: 430px;
margin: 0 0 25px;
color: #777;
font-size: 13px;
line-height: 1.8;
}
.banquet-outline-btn {
display: inline-flex;
align-items: center;
gap: 25px;
color: #11100e;
border-bottom: 1px solid #b08b48;
padding-bottom: 9px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: .3s ease;
}
.banquet-outline-btn i {
color: #b08b48;
transition: .3s ease;
}
.banquet-outline-btn:hover {
color: #b08b48;
}
.banquet-outline-btn:hover i {
transform: translate(4px,-4px);
}
/* HERO IMAGE */
.banquet-hero-row {
align-items: stretch;
margin-bottom: 45px;
}
.banquet-main-image {
position: relative;
width: 100%;
height: 440px;
overflow: hidden;
}
.banquet-main-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient( to top, rgba(10, 22, 35, .75), transparent 55% );
}
.banquet-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s ease;
}
.banquet-main-image:hover img {
transform: scale(1.05);
}
.banquet-image-overlay {
position: absolute;
z-index: 2;
left: 35px;
bottom: 30px;
color: #ffffff;
}
.banquet-image-overlay span {
display: block;
margin-bottom: 10px;
font-size: 9px;
letter-spacing: 3px;
}
.banquet-image-overlay strong {
font-family: "Cormorant Garamond", serif;
font-size: 42px;
font-weight: 400;
line-height: .9;
}
/* SIDE CONTENT */
.banquet-side-content {
height: 100%;
min-height: 440px;
padding: 38px 30px;
border: 1px solid #e4e0d8;
display: flex;
flex-direction: column;
justify-content: center;
}
.banquet-number {
color: #b08b48;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 30px;
}
.banquet-side-content h3 {
margin: 0 0 20px;
font-family: "Cormorant Garamond", serif;
font-size: 42px;
line-height: .9;
font-weight: 500;
color: #11100e !important;
}
.banquet-side-content h3 em {
display: block;
font-style: italic;
font-weight: 400;
}
.banquet-side-content p {
margin: 0;
color: #777;
font-size: 12px;
line-height: 1.8;
}
.banquet-mini-line {
width: 45px;
height: 1px;
background: #b08b48;
margin: 28px 0;
}
.banquet-feature-list {
display: flex;
flex-direction: column;
gap: 13px;
}
.banquet-feature-list div {
display: flex;
align-items: center;
gap: 12px;
color: #444;
font-size: 11px;
}
.banquet-feature-list i {
color: #b08b48;
font-size: 16px;
}
/* EVENT TYPES */
.banquet-events-row {
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
margin-bottom: 55px;
}
.event-type {
position: relative;
min-height: 175px;
padding: 28px 30px 25px 0;
transition: .3s ease;
}
.banquet-events-row .col-lg-4 + .col-lg-4 .event-type {
border-left: 1px solid #dedede;
padding-left: 30px;
}
.event-type span {
display: block;
color: #b08b48;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 18px;
}
.event-type h4 {
margin: 0 0 8px;
font-family: "Cormorant Garamond", serif;
color: #11100e;
font-size: 27px;
font-weight: 500;
}
.event-type p {
max-width: 270px;
margin: 0;
color: #777;
font-size: 11px;
line-height: 1.7;
}
.event-type > i {
position: absolute;
top: 30px;
right: 0;
color: #b08b48;
font-size: 18px;
transition: .3s ease;
}
.event-type:hover > i {
transform: translate(5px,-5px);
}
/* BOTTOM CTA */
.banquet-bottom-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 35px 40px;
background: #11100e;
color: #ffffff;
}
.banquet-bottom-cta span {
display: block;
margin-bottom: 10px;
color: #c9a45c;
font-size: 9px;
font-weight: 600;
letter-spacing: 2.5px;
}
.banquet-bottom-cta h2 {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: 38px;
font-weight: 400;
line-height: .95;
}
.banquet-bottom-cta h2 em {
font-style: italic;
}
/* BANQUET SLIDER */
.banquet-main-image {
position: relative;
width: 100%;
height: 440px;
overflow: hidden;
}
.banquet-main-image .carousel,
.banquet-main-image .carousel-inner,
.banquet-main-image .carousel-item {
width: 100%;
height: 100%;
}
.banquet-main-image .carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* DARK OVERLAY */
.banquet-main-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient( to top, rgba(10, 22, 35, .78), rgba(10, 22, 35, .05) 65% );
z-index: 1;
pointer-events: none;
}
/* TEXT */
.banquet-image-overlay {
position: absolute;
z-index: 3;
left: 35px;
bottom: 30px;
color: #ffffff;
}
.banquet-image-overlay span {
display: block;
margin-bottom: 10px;
font-size: 9px;
letter-spacing: 3px;
}
.banquet-image-overlay strong {
font-family: "Cormorant Garamond", serif;
font-size: 42px;
font-weight: 400;
line-height: .9;
}
/* ARROWS */
.banquet-main-image .carousel-control-prev,
.banquet-main-image .carousel-control-next {
width: 45px;
height: 45px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
z-index: 4;
background: rgba(255,255,255,.15);
transition: .3s ease;
}
.banquet-main-image:hover .carousel-control-prev,
.banquet-main-image:hover .carousel-control-next {
opacity: 1;
}
.banquet-main-image .carousel-control-prev {
left: 18px;
}
.banquet-main-image .carousel-control-next {
right: 18px;
}
.banquet-main-image .carousel-control-prev:hover,
.banquet-main-image .carousel-control-next:hover {
background: #b08b48;
}
.banquet-main-image .carousel-control-prev i,
.banquet-main-image .carousel-control-next i {
font-size: 18px;
}
/* DOTS */
.banquet-main-image .carousel-indicators {
z-index: 4;
margin-bottom: 20px;
gap: 7px;
}
.banquet-main-image .carousel-indicators button {
width: 7px;
height: 7px;
border-radius: 50%;
border: 1px solid #ffffff;
background: transparent;
opacity: .7;
}
.banquet-main-image .carousel-indicators button.active {
background: #c9a45c;
border-color: #c9a45c;
opacity: 1;
}
/* MOBILE */
@media (max-width: 767px) {
.banquet-main-image {
height: 300px;
}
.banquet-image-overlay {
left: 22px;
bottom: 22px;
}
.banquet-image-overlay strong {
font-size: 34px;
}
.banquet-main-image .carousel-control-prev,
.banquet-main-image .carousel-control-next {
opacity: 1;
width: 35px;
height: 35px;
}
}
.banquet-gold-btn {
display: inline-flex;
align-items: center;
gap: 22px;
padding: 14px 22px;
background: #c9a45c;
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
white-space: nowrap;
transition: .3s ease;
}
.banquet-gold-btn:hover {
background: #ffffff;
color: #102b50;
}
.banquet-gold-btn i {
transition: .3s ease;
}
.banquet-gold-btn:hover i {
transform: translateX(5px);
}
/* ================= TABLET ================= */
@media (max-width: 991px) {
.sg-banquet-section {
padding: 80px 0 60px;
}
.banquet-intro {
margin-bottom: 35px;
}
.banquet-intro-text {
margin-top: 25px;
}
.banquet-main-image {
height: 400px;
}
.banquet-side-content {
min-height: 400px;
padding: 30px 25px;
}
.banquet-side-content h3 {
font-size: 36px;
}
.event-type {
padding-right: 20px;
}
.banquet-events-row .col-lg-4 + .col-lg-4 .event-type {
padding-left: 20px;
}
}
/* ================= MOBILE ================= */
@media (max-width: 767px) {
.sg-banquet-section {
padding: 70px 0 40px;
}
.banquet-intro h1 {
font-size: 55px;
}
.banquet-intro-text {
font-size: 12px;
line-height: 1.7;
}
.banquet-main-image {
height: 300px;
}
.banquet-image-overlay {
left: 22px;
bottom: 22px;
}
.banquet-image-overlay strong {
font-size: 34px;
}
.banquet-side-content {
min-height: auto;
margin-top: 15px;
padding: 30px 22px;
}
.banquet-side-content h3 {
font-size: 38px;
}
.banquet-events-row {
margin-top: 15px;
margin-bottom: 35px;
}
.event-type {
min-height: auto;
padding: 25px 0;
}
.banquet-events-row .col-lg-4 + .col-lg-4 .event-type {
border-left: 0;
border-top: 1px solid #dedede;
padding-left: 0;
}
.event-type > i {
right: 5px;
top: 28px;
}
.banquet-bottom-cta {
align-items: flex-start;
flex-direction: column;
padding: 28px 22px;
}
.banquet-bottom-cta h2 {
font-size: 32px;
}
.banquet-gold-btn {
width: 100%;
justify-content: space-between;
}
}
.sg-faq-section {
width: 100%;
padding: 90px 0;
background: #ffffff;
font-family: "Inter", sans-serif;
color: #102b50;
}
/* LEFT CONTENT */
.faq-intro {
position: sticky;
top: 100px;
}
.faq-eyebrow {
display: block;
margin-bottom: 22px;
color: #b08b48;
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
}
.faq-intro h2 {
margin: 0 0 25px;
font-family: "Cormorant Garamond", serif;
font-size: clamp(45px, 4vw, 62px) !important;
font-weight: 500;
line-height: .9;
color: #11100e !important;
}
.faq-intro h2 span {
display: block;
font-size: clamp(45px, 4vw, 62px) !important;
font-style: italic;
/* color: #d0a95d; */
font-weight: 400;
}
.faq-intro p {
max-width: 340px;
margin: 0 0 28px;
color: #777;
font-size: 12px;
line-height: 1.8;
}
/* CONTACT BUTTON */
.faq-contact-btn {
display: inline-flex;
align-items: center;
gap: 20px;
padding-bottom: 9px;
border-bottom: 1px solid #b08b48;
color: #11100e;
text-decoration: none;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: .3s ease;
}
.faq-contact-btn i {
color: #b08b48;
transition: .3s ease;
}
.faq-contact-btn:hover {
color: #b08b48;
}
.faq-contact-btn:hover i {
transform: translate(4px,-4px);
}
/* FAQ LIST */
.faq-list {
border-top: 1px solid #dedede;
}
.faq-item {
border-bottom: 1px solid #dedede;
}
.faq-question {
width: 100%;
padding: 24px 5px;
border: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
color: #11100e;
text-align: left;
cursor: pointer;
font-family: "Cormorant Garamond", serif;
font-size: 24px !important;
font-weight: 500;
transition: .3s ease;
}
.faq-question span {
font-size: 24px !important;
}
.faq-question:hover {
color: #b08b48;
}
.faq-question i {
flex-shrink: 0;
color: #b08b48;
font-size: 15px;
transition: transform .3s ease;
}
.faq-question.active i {
transform: rotate(45deg);
}
/* ANSWER */
.faq-answer {
display: none;
padding: 0 45px 22px 5px;
}
.faq-answer.show {
display: block;
}
.faq-answer p {
margin: 0;
max-width: 650px;
color: #777;
font-family: "Inter", sans-serif;
font-size: 12px;
line-height: 1.8;
}
/* ================= TABLET ================= */
@media (max-width: 991px) {
.sg-faq-section {
padding: 70px 0;
}
.faq-intro {
position: static;
}
.faq-intro p {
max-width: 500px;
}
}
/* ================= MOBILE ================= */
@media (max-width: 767px) {
.sg-faq-section {
padding: 55px 0;
}
.faq-intro h2 {
font-size: 48px;
}
.faq-question {
padding: 20px 0;
font-size: 21px;
}
.faq-answer {
padding: 0 20px 20px 0;
}
.faq-answer p {
font-size: 11px;
}
}
/* start Restaurant page */
/* ================================
RESTAURANT PAGE
================================ */
.sg-restaurant-page {
font-family: "Inter", sans-serif;
color: #102b50;
background: #ffffff;
overflow: hidden;
}
.sg-restaurant-page h1,
.sg-restaurant-page h2,
.sg-restaurant-page h3,
.sg-restaurant-page h5 {
font-family: "Cormorant Garamond", serif;
}
/* HERO */
.restaurant-hero {
min-height: 88vh;
position: relative;
display: flex;
align-items: flex-end;
padding: 120px 0 80px;
background: linear-gradient(rgba(17, 16, 14, 0.78), rgba(17, 16, 14, 0.78)), url("../img/Resturant.jpeg") center/cover no-repeat;
color: #fff;
}
.restaurant-hero-content {
max-width: 650px;
}
.restaurant-tag,
.section-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
}
.restaurant-tag {
margin-bottom: 25px;
color: #d0ad6a;
}
.restaurant-hero h1 {
font-size: clamp(55px, 7vw, 100px);
line-height: .82;
font-weight: 400;
margin-bottom: 35px;
}
.restaurant-hero h1 em,
.restaurant-intro h2 em,
.restaurant-heading h2 em,
.restaurant-quote h2 em,
.restaurant-cta h2 em {
font-style: italic;
font-weight: 400;
}
.restaurant-hero p {
max-width: 460px;
font-size: 13px;
line-height: 1.9;
color: rgba(255,255,255,.78);
margin-bottom: 35px;
}
.restaurant-btn {
display: inline-flex;
align-items: center;
gap: 22px;
padding: 14px 0;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #d0ad6a;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: .35s ease;
}
.restaurant-btn i {
color: #d0ad6a;
transition: .35s ease;
}
.restaurant-btn:hover {
color: #d0ad6a;
}
.restaurant-btn:hover i {
transform: translate(5px, -5px);
}
.restaurant-hero-note {
border-left: 1px solid rgba(255,255,255,.45);
padding-left: 28px;
max-width: 260px;
margin-left: auto;
}
.restaurant-hero-note span {
display: block;
color: #d0ad6a;
font-family: "Cormorant Garamond", serif;
font-size: 40px;
line-height: 1;
margin-bottom: 12px;
}
.restaurant-hero-note p {
font-size: 11px;
line-height: 1.8;
color: rgba(255,255,255,.7);
margin: 0;
}
/* INTRO */
.restaurant-intro {
padding: 110px 0;
background: #fff;
}
.restaurant-intro-image {
position: relative;
height: 560px;
overflow: hidden;
}
.restaurant-intro-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1s ease;
}
.restaurant-intro-image:hover img {
transform: scale(1.06);
}
.restaurant-image-label {
position: absolute;
left: 25px;
bottom: 25px;
padding: 22px;
background: rgba(0, 0, 0, 0.584);
color: #fff;
}
.restaurant-image-label span {
display: block;
font-size: 9px;
letter-spacing: 2px;
color: #d0ad6a;
margin-bottom: 8px;
}
.restaurant-image-label strong {
font-family: "Cormorant Garamond", serif;
font-size: 24px;
font-weight: 400;
line-height: .95;
}
.restaurant-intro-content {
padding-left: 35px;
}
.section-label {
color: #b08b48;
margin-bottom: 22px;
}
.restaurant-intro h2,
.restaurant-heading h2 {
font-size: clamp(48px, 5vw, 70px);
line-height: .88;
font-weight: 500;
margin-bottom: 30px;
color: #11100e;
}
.restaurant-intro-content > p {
max-width: 520px;
color: #777;
font-size: 12px;
line-height: 1.9;
margin-bottom: 18px;
}
.restaurant-features {
display: flex;
gap: 25px;
border-top: 1px solid #dedede;
margin-top: 35px;
padding-top: 25px;
}
.restaurant-features > div {
flex: 1;
}
.restaurant-features span {
color: #b08b48;
font-size: 10px;
letter-spacing: 1px;
}
.restaurant-features h5 {
font-size: 20px;
font-weight: 500;
margin: 12px 0 7px;
color: #11100e;
}
.restaurant-features p {
font-size: 10px;
line-height: 1.6;
color: #888;
margin: 0;
}
/* DINING CARDS */
.restaurant-dining {
padding: 100px 0;
background: #f8f7f4;
}
.restaurant-heading {
max-width: 600px;
margin: 0 auto 55px;
}
.restaurant-heading p {
color: #777;
font-size: 12px;
line-height: 1.8;
}
.dining-card {
position: relative;
height: 430px;
overflow: hidden;
background: #102b50;
}
.dining-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .8s ease;
}
.dining-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient( to top, rgba(5, 15, 25, .2), rgba(5, 15, 25, .05) 65% );
}
.dining-card:hover img {
transform: scale(1.08);
}
.dining-card-overlay {
position: absolute;
z-index: 2;
left: 28px;
right: 28px;
bottom: 28px;
color: #fff;
}
.dining-card-overlay span {
font-size: 9px;
letter-spacing: 2px;
color: #d0ad6a;
}
.dining-card-overlay h3 {
font-size: 38px;
font-weight: 400;
margin: 8px 0;
}
.dining-card-overlay p {
max-width: 250px;
color: rgba(255,255,255,.75);
font-size: 11px;
line-height: 1.7;
margin-bottom: 15px;
}
.dining-card-overlay a {
color: #fff;
text-decoration: none;
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.dining-card-overlay a i {
color: #d0ad6a;
margin-left: 8px;
transition: .3s ease;
}
.dining-card-overlay a:hover i {
transform: translate(4px, -4px);
}
/* QUOTE */
.restaurant-quote {
padding: 120px 0;
background: #102b50;
color: #fff;
text-align: center;
}
.quote-inner {
max-width: 850px;
margin: auto;
}
.restaurant-quote .section-label {
color: #d0ad6a;
}
.restaurant-quote h2 {
font-size: clamp(42px, 5vw, 70px);
line-height: .95;
font-weight: 400;
margin: 25px 0;
}
.restaurant-quote p {
font-size: 11px;
letter-spacing: 2px;
color: rgba(255,255,255,.65);
}
/* CTA */
.restaurant-cta {
padding: 90px 0;
background: #fff;
}
.restaurant-cta h2 {
font-size: clamp(45px, 5vw, 68px);
line-height: .9;
font-weight: 500;
margin: 0;
}
.dark-btn {
color: #102b50;
}
.dark-btn:hover {
color: #b08b48;
}
/* RESPONSIVE */
@media (max-width: 991px) {
.restaurant-hero {
min-height: 75vh;
padding: 110px 0 60px;
}
.restaurant-hero-note {
margin: 50px 0 0;
}
.restaurant-intro {
padding: 75px 0;
}
.restaurant-intro-image {
height: 450px;
}
.restaurant-intro-content {
padding-left: 0;
}
.restaurant-features {
flex-wrap: wrap;
}
.restaurant-features > div {
flex: 0 0 calc(33.333% - 18px);
}
.restaurant-dining {
padding: 75px 0;
}
.restaurant-quote {
padding: 85px 0;
}
.restaurant-cta {
padding: 70px 0;
}
.restaurant-cta .restaurant-btn {
margin-top: 30px;
}
}
@media (max-width: 767px) {
.restaurant-hero {
min-height: 90svh;
padding: 100px 0 45px;
}
.restaurant-hero h1 {
font-size: 58px;
}
.restaurant-hero p {
font-size: 11px;
}
.restaurant-hero-note {
margin-top: 55px;
padding-left: 18px;
}
.restaurant-intro {
padding: 55px 0;
}
.restaurant-intro-image {
height: 350px;
}
.restaurant-intro h2,
.restaurant-heading h2 {
font-size: 48px;
}
.restaurant-features {
gap: 20px;
flex-direction: column;
}
.restaurant-features > div {
flex: 100%;
}
.restaurant-dining {
padding: 60px 0;
}
.restaurant-heading {
margin-bottom: 35px;
}
.dining-card {
height: 360px;
}
.restaurant-quote {
padding: 70px 20px;
}
.restaurant-quote h2 {
font-size: 42px;
}
.restaurant-cta {
padding: 55px 0;
}
.restaurant-cta h2 {
font-size: 48px;
}
}
/* ===================================
HOTEL SAI GRAND CONTACT PAGE
ONE SCREEN DESIGN
=================================== */
.sg-contact-page {
width: 100%;
min-height: 90vh;
overflow: hidden;
background: #ffffff;
color: #11100e;
font-family: "Inter", sans-serif;
}
.sg-contact-page h1,
.sg-contact-page h2,
.sg-contact-page h3,
.sg-contact-page h4,
.sg-contact-page h5,
.sg-contact-page h6 {
font-family: "Cormorant Garamond", serif;
color: #11100e;
}
/* ================================
CONTACT INTRO / HERO
================================ */
.contact-intro {
min-height: 27vh;
display: flex;
align-items: flex-end;
padding: 65px 0 28px;
background: linear-gradient( 90deg, rgba(10, 22, 35, .90), rgba(10, 22, 35, .65) ), url("../img/contact-banner.jpg") center/cover no-repeat;
color: #fff;
}
.contact-eyebrow {
display: block;
margin-bottom: 12px;
color: #d0ad6a;
font-size: 9px;
font-weight: 600;
letter-spacing: 2.5px;
}
.contact-intro h1 {
margin: 0;
color: #fff;
font-size: clamp(42px, 5vw, 72px);
line-height: .80;
font-weight: 400;
}
.contact-intro h1 em {
font-style: italic;
color: #fff;
}
.contact-intro-text {
max-width: 300px;
margin: 0 0 3px auto;
color: rgba(255,255,255,.75);
font-size: 10px;
line-height: 1.7;
}
/* ================================
MAIN CONTACT AREA
================================ */
.contact-main {
padding: 38px 0 35px;
background: #fff;
}
/* ================================
CONTACT INFORMATION
================================ */
.contact-info {
padding-right: 25px;
}
.contact-label {
display: block;
margin-bottom: 10px;
color: #b08b48;
font-size: 8px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
.contact-info h2,
.form-heading h2 {
margin-bottom: 14px;
color: #11100e;
font-size: 40px !important;
line-height: .85;
font-weight: 500;
}
.contact-info h2 span,
.form-heading h2 span {
color: #d0a95d;
font-size: 40px !important;
line-height: .85;
font-weight: 500;
}
.contact-description {
max-width: 290px;
margin-bottom: 22px;
color: #777;
font-size: 10px;
line-height: 1.7;
}
/* ================================
CONTACT ITEMS
================================ */
.contact-info-item {
display: flex;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #e5e5e5;
}
.contact-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d7bd8b;
border-radius: 50%;
color: #b08b48;
font-size: 13px;
}
.contact-info-item span {
display: block;
margin-bottom: 4px;
color: #11100e;
font-size: 7px;
font-weight: 600;
letter-spacing: 1.5px;
}
.contact-info-item p,
.contact-info-item a {
margin: 0;
color: #777;
font-size: 14px !important;
line-height: 1.5;
text-decoration: none;
}
.contact-info-item a:hover {
color: #b08b48;
}
/* ================================
SOCIAL MEDIA
================================ */
.contact-social {
margin-top: 18px;
}
.contact-social > span {
display: block;
margin-bottom: 9px;
color: #999;
font-size: 8px;
font-weight: 600;
letter-spacing: 1.5px;
}
.social-links {
display: flex;
gap: 8px;
}
.social-links a {
width: 29px;
height: 29px;
display: flex;
align-items: center;
justify-content: center;
color: #b08b48;;
color: #11100e;
font-size: 10px;
text-decoration: none;
transition: .3s ease;
}
.social-links a:hover {
border-color: #b08b48;
background: #b08b48;
color: #fff;
transform: translateY(-3px);
}
/* ================================
CONTACT FORM
================================ */
.contact-form-wrapper {
padding-left: 30px;
border-left: 1px solid #e2e2e2;
}
.form-heading {
margin-bottom: 20px;
}
.form-heading p {
margin: 0;
color: #777;
font-size: 10px;
line-height: 1.6;
}
/* FORM GROUP */
.form-group label {
display: block;
margin-bottom: 5px;
color: #11100e;
font-size: 14px;
font-weight: 500;
}
.form-group label sup {
color: #b08b48;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
border: 1px solid #d5d9dd;
border-radius: 0;
outline: none;
padding: 9px 12px;
background: #fff;
color: #11100e;
font-family: "Inter", sans-serif;
font-size: 14px;
transition: .3s ease;
}
.form-group input,
.form-group select {
height: 37px;
}
.form-group textarea {
height: 72px;
min-height: 72px;
resize: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #aaa;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: #b08b48;
box-shadow: 0 0 0 2px rgba(176,139,72,.08);
}
/* VALIDATION */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
border-color: #dc3545;
}
.form-group.success input,
.form-group.success select,
.form-group.success textarea {
border-color: #198754;
}
.error-message {
display: block;
min-height: 12px;
margin-top: 3px;
color: #dc3545;
font-size: 8px;
}
/* FORM BOTTOM */
.form-bottom {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
margin-top: 3px;
text-align: center;
}
.form-bottom p {
margin: 0;
color: #999;
font-size: 8px;
}
.form-bottom p i {
color: #b08b48;
margin-right: 3px;
}
.recaptcha-wrapper {
display: flex;
justify-content: center;
}
.contact-submit {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 11px 18px;
border: 1px solid #11100e;
background: #11100e;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
transition: .3s ease;
}
.contact-submit i {
color: #d0ad6a;
}
.contact-submit:hover {
background: #b08b48;
border-color: #b08b48;
}
/* SUCCESS MESSAGE */
.form-success {
display: none;
margin-top: 8px;
padding: 8px 12px;
border-left: 3px solid #198754;
background: #f1faf5;
color: #198754;
font-size: 9px;
}
.form-success.show {
display: block;
}
/* ================================
BOTTOM CONTACT STRIP
================================ */
.contact-bottom-strip {
padding: 22px 0;
background: #f7f6f2;
}
.contact-bottom-strip span {
display: block;
margin-bottom: 4px;
color: #b08b48;
font-size: 7px;
font-weight: 600;
letter-spacing: 1.5px;
}
.contact-bottom-strip h3 {
margin: 0;
color: #11100e;
font-size: 25px;
font-weight: 400;
}
.contact-bottom-strip a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #11100e;
font-size: 9px;
font-weight: 600;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}
.contact-bottom-strip a i {
color: #b08b48;
}
/* ================================
LAPTOP ONE-SCREEN ADJUSTMENT
================================ */
@media (min-width: 992px) and (max-height: 800px) {
.contact-intro {
min-height: 23vh;
padding: 48px 0 22px;
}
.contact-main {
padding: 25px 0;
}
.contact-info h2,
.form-heading h2 {
font-size: 38px;
}
.contact-description {
margin-bottom: 15px;
}
.contact-info-item {
margin-bottom: 9px;
padding-bottom: 8px;
}
.form-heading {
margin-bottom: 12px;
}
.form-group input,
.form-group select {
height: 32px;
padding: 6px 10px;
}
.form-group textarea {
height: 55px;
min-height: 55px;
}
.form-group label {
margin-bottom: 3px;
}
.contact-bottom-strip {
padding: 15px 0;
}
.contact-bottom-strip h3 {
font-size: 22px;
}
}
/* ================================
TABLET RESPONSIVE
================================ */
@media (max-width: 991px) {
.sg-contact-page {
overflow: visible;
}
.contact-intro {
min-height: 48vh;
padding: 90px 0 45px;
}
.contact-intro-text {
margin: 25px 0 0;
}
.contact-main {
padding: 55px 0;
}
.contact-info {
padding-right: 0;
}
.contact-form-wrapper {
padding-left: 0;
padding-top: 45px;
border-left: none;
border-top: 1px solid #e2e2e2;
}
.contact-bottom-strip {
padding: 35px 0;
}
.contact-bottom-strip a {
margin-top: 20px;
}
}
/* ================================
MOBILE RESPONSIVE
================================ */
@media (max-width: 767px) {
.contact-intro {
min-height: 65svh;
padding: 90px 0 40px;
}
.contact-intro h1 {
font-size: 52px;
}
.contact-main {
padding: 45px 0;
}
.contact-info h2,
.form-heading h2 {
font-size: 44px;
}
.form-bottom {
flex-direction: column;
align-items: center;
text-align: center;
}
.contact-submit {
width: 100%;
justify-content: center;
}
.contact-bottom-strip h3 {
font-size: 30px;
}
}
/* ===================================
HOTEL SAI GRAND GALLERY PAGE
=================================== */
.sg-gallery-page {
width: 100%;
overflow: hidden;
background: #ffffff;
color: #11100e;
font-family: "Inter", sans-serif;
}
.sg-gallery-page h1,
.sg-gallery-page h2,
.sg-gallery-page h3 {
font-family: "Cormorant Garamond", serif;
}
/* ===================================
GALLERY INTRO
=================================== */
.gallery-intro {
min-height: 48vh;
display: flex;
align-items: flex-end;
padding: 100px 0 60px;
background: linear-gradient( 90deg, rgba(10, 22, 35, .88), rgba(10, 22, 35, .55) ), url("../img/gallery-banner.jpg") center/cover no-repeat;
color: #fff;
}
.gallery-eyebrow {
display: block;
margin-bottom: 22px;
color: #d0ad6a;
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
}
.gallery-intro h1 {
margin: 0;
color: #fff;
font-size: clamp(58px, 7vw, 100px);
font-weight: 400;
line-height: .82;
}
.gallery-intro h1 em {
color: #fff;
font-style: italic;
font-weight: 400;
}
.gallery-intro-text {
max-width: 320px;
margin: 0 0 5px auto;
color: rgba(255,255,255,.75);
font-size: 12px;
line-height: 1.9;
}
/* ===================================
GALLERY MAIN
=================================== */
.gallery-main {
padding: 75px 0 100px;
background: #fff;
}
/* ===================================
FILTER BUTTONS
=================================== */
.gallery-filters {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 45px;
}
.gallery-filter {
padding: 10px 22px;
border: 1px solid #dedede;
background: transparent;
color: #777;
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
transition: .3s ease;
}
.gallery-filter:hover,
.gallery-filter.active {
border-color: #11100e;
background: #11100e;
color: #fff;
}
/* ===================================
GALLERY GRID
=================================== */
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 210px;
gap: 18px;
}
.gallery-item {
position: relative;
overflow: hidden;
}
.gallery-large {
grid-column: span 2;
grid-row: span 2;
}
.gallery-wide {
grid-column: span 2;
}
.gallery-tall {
grid-row: span 2;
}
.gallery-image {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
background: #eee;
}
.gallery-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .8s ease;
}
.gallery-image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient( to top, rgba(10,22,35,.72), rgba(10,22,35,.05) 65% );
opacity: 0;
transition: .4s ease;
}
.gallery-image:hover img {
transform: scale(1.08);
}
.gallery-image:hover::after {
opacity: 1;
}
/* ===================================
IMAGE OVERLAY
=================================== */
.gallery-overlay {
position: absolute;
z-index: 2;
left: 22px;
right: 22px;
bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
opacity: 0;
transform: translateY(12px);
transition: .4s ease;
}
.gallery-image:hover .gallery-overlay {
opacity: 1;
transform: translateY(0);
}
.gallery-overlay span {
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
}
.gallery-overlay i {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.7);
border-radius: 50%;
color: #fff;
font-size: 13px;
}
/* ===================================
FILTER ANIMATION
=================================== */
.gallery-item.hide {
display: none;
}
.gallery-item.show {
animation: galleryReveal .5s ease;
}
@keyframes galleryReveal {
from {
opacity: 0;
transform: scale(.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ===================================
LIGHTBOX
=================================== */
.gallery-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 40px;
background: rgba(10, 15, 20, .96);
backdrop-filter: blur(8px);
}
.gallery-lightbox.active {
display: flex;
animation: lightboxFade .3s ease;
}
@keyframes lightboxFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* LIGHTBOX IMAGE */
.lightbox-content {
position: relative;
max-width: 90vw;
max-height: 88vh;
text-align: center;
}
.lightbox-content img {
max-width: 90vw;
max-height: 80vh;
width: auto;
height: auto;
display: block;
object-fit: contain;
box-shadow: 0 20px 70px rgba(0,0,0,.35);
}
.lightbox-caption {
margin-top: 18px;
color: #d0ad6a;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
}
/* CLOSE BUTTON */
.lightbox-close {
position: absolute;
top: 25px;
right: 30px;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.35);
border-radius: 50%;
background: transparent;
color: #fff;
font-size: 17px;
cursor: pointer;
transition: .3s ease;
}
.lightbox-close:hover {
background: #b08b48;
border-color: #b08b48;
}
/* PREVIOUS / NEXT */
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.35);
border-radius: 50%;
background: rgba(255,255,255,.04);
color: #fff;
font-size: 18px;
cursor: pointer;
transition: .3s ease;
}
.lightbox-prev {
left: 35px;
}
.lightbox-next {
right: 35px;
}
.lightbox-prev:hover,
.lightbox-next:hover {
border-color: #b08b48;
background: #b08b48;
}
/* ===================================
RESPONSIVE
=================================== */
@media (max-width: 991px) {
.gallery-intro {
min-height: 48vh;
padding: 90px 0 50px;
}
.gallery-intro-text {
margin: 30px 0 0;
}
.gallery-main {
padding: 60px 0 80px;
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 220px;
}
.gallery-large {
grid-column: span 2;
grid-row: span 2;
}
.gallery-wide {
grid-column: span 2;
}
.gallery-tall {
grid-row: span 2;
}
.lightbox-prev {
left: 15px;
}
.lightbox-next {
right: 15px;
}
}
@media (max-width: 767px) {
.gallery-intro {
min-height: 65svh;
padding: 90px 0 40px;
}
.gallery-intro h1 {
font-size: 55px;
}
.gallery-intro-text {
font-size: 11px;
}
.gallery-main {
padding: 45px 0 60px;
}
.gallery-filters {
justify-content: flex-start;
gap: 8px;
margin-bottom: 30px;
}
.gallery-filter {
padding: 8px 13px;
font-size: 8px;
}
.gallery-grid {
grid-template-columns: 1fr;
grid-auto-rows: 280px;
gap: 12px;
}
.gallery-large,
.gallery-wide,
.gallery-tall {
grid-column: span 1;
grid-row: span 1;
}
.gallery-overlay {
opacity: 1;
transform: translateY(0);
}
.gallery-image::after {
opacity: 1;
}
.gallery-lightbox {
padding: 20px;
}
.lightbox-content img {
max-width: 85vw;
max-height: 75vh;
}
.lightbox-close {
top: 15px;
right: 15px;
width: 38px;
height: 38px;
font-size: 14px;
}
.lightbox-prev,
.lightbox-next {
width: 38px;
height: 38px;
font-size: 14px;
}
.lightbox-prev {
left: 10px;
}
.lightbox-next {
right: 10px;
}
}
/* Section Background */
.sightseeing-section {
background-color: #fdfaf6; /* Light cream damask-inspired color */
}
/* Heading Styling */
.sightseeing-title {
font-size: 2.75rem !important;
font-weight: 800;
color: #0b1523;
margin-bottom: 24px;
line-height: 1.2;
}
.title-divider {
width: 70px;
height: 3px;
background-color: #C39233;
margin: 0 auto;
}
/* Sightseeing Card Styling */
.sightseeing-card {
position: relative;
border-radius: 8px;
overflow: hidden;
height: 320px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 2px solid transparent;
transition: all 0.4s ease;
}
.sightseeing-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
/* Dark Gradient Overlay for Name Visibility */
.sightseeing-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
display: flex;
align-items: flex-end;
padding: 20px;
justify-content: center;
}
/* Place Name */
.place-name {
color: #ffffff;
font-size: 20px;
font-weight: 600;
margin: 0;
letter-spacing: 1px;
font-family: 'Poppins', sans-serif;
transition: color 0.3s ease;
}
/* Hover Effects */
.sightseeing-card:hover {
border-color: #C39233; /* Gold Border on Hover */
transform: translateY(-5px);
}
.sightseeing-card:hover img {
transform: scale(1.08); /* Zoom effect */
}
.sightseeing-card:hover .place-name {
color: #C39233; /* Gold text color on hover */
}
/* start blog page */
.blog {
height: 60vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
/* ===================================
CONTACT GOOGLE MAP
=================================== */
.sg-contact-map {
width: 100%;
background: #fff;
}
.contact-map-wrapper {
width: 100%;
height: 450px;
overflow: hidden;
}
.contact-map-wrapper iframe {
width: 100%;
height: 100%;
display: block;
border: 0;
filter: grayscale(20%);
}
/* Mobile */
@media (max-width: 767px) {
.contact-map-wrapper {
height: 300px;
}
}
.room-price-list {
margin: 22px 0;
border-top: 1px solid #ddd;
}
.room-price-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #ddd;
}
.room-price-item span {
color: #b08b48;
font-size: 10px;
font-weight: 600;
}
.room-price-item strong {
flex: 1;
color: #11100e;
font-family: "Cormorant Garamond", serif !important;
font-size: 25px !important;
font-weight:900 !important;
}
.room-price-item b {
color: #b08b48;
font-family: "Cormorant Garamond", serif !important;
font-size: 25px !important;
font-weight: 900 !important;
white-space: nowrap;
}
/* Mobile */
@media (max-width: 575px) {
.room-price-item {
gap: 8px;
}
.room-price-item strong {
font-size: 16px;
}
.room-price-item b {
font-size: 17px;
}
}