@font-face {
font-family: 'Poppins Fallback';
src: local('Arial');
size-adjust: 112.5%;
ascent-override: 93.3%;
descent-override: 31.1%;
line-gap-override: 8.9%;
}
@font-face {
font-family: 'Playfair Display Fallback';
src: local('Georgia');
size-adjust: 106%;
ascent-override: 102%;
descent-override: 27.4%;
line-gap-override: 0%;
}
:root {
--primary: #8B1538;
--primary-dark: #6d1029;
--primary-light: #a91d45;
--secondary: #C9A227;
--secondary-dark: #a8871f;
--accent: #D4AF37;
--gold: #D4AF37;
--cream: #FDF8F0;
--cream-dark: #F5EBD7;
--cream-light: #FFFDF9;
--white: #FFFFFF;
--black: #000000;
--text: #333333;
--text-light: #666666;
--text-muted: #999999;
--font-primary: 'Poppins', 'Poppins Fallback', system-ui, -apple-system, sans-serif;
--font-secondary: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
--space-3xl: 4rem;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-full: 50%;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
--transition-fast: 150ms ease;
--transition: 300ms ease;
--transition-slow: 500ms ease;
--container-max: 1200px;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
}
html,
body {
max-width: 100vw;
}
main,
#main-content {
overflow-x: hidden;
max-width: 100%;
}
section {
overflow-x: hidden;
}
body {
font-family: var(--font-primary);
font-weight: 400;
line-height: 1.6;
color: var(--text);
background-color: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast);
}
ul,
ol {
list-style: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-secondary);
font-weight: 700;
line-height: 1.2;
color: var(--text);
}
h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
}
h2 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
}
h3 {
font-size: clamp(1.25rem, 3vw, 1.75rem);
}
h4 {
font-size: clamp(1.1rem, 2.5vw, 1.25rem);
}
p {
margin-bottom: var(--space-md);
}
.text-primary {
color: var(--primary);
}
.text-secondary {
color: var(--secondary);
}
.text-center {
text-align: center;
}
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 20px;
}
.section {
padding: var(--space-2xl) 0;
}
@media (min-width: 768px) {
.section {
padding: var(--space-3xl) 0;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 0.75rem 1.5rem;
font-family: var(--font-primary);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: var(--radius-sm);
transition: all var(--transition);
cursor: pointer;
border: 2px solid transparent;
}
.btn-primary {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
.btn-primary:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: var(--secondary);
color: var(--white);
border-color: var(--secondary);
}
.btn-secondary:hover {
background: var(--accent);
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
background: transparent;
color: var(--primary);
border-color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: var(--white);
}
.btn-gold {
background: linear-gradient(135deg, var(--gold) 0%, var(--secondary) 100%);
color: var(--black);
font-weight: 600;
border: none;
padding: 16px 32px;
border-radius: var(--radius-md);
transition: all var(--transition);
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.btn-gold:hover {
background: linear-gradient(135deg, #f5d980 0%, var(--gold) 100%);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(212, 175, 55, 0.5);
color: var(--black);
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1rem;
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--white);
transition: all var(--transition);
overflow: visible;
}
.site-header.scrolled {
box-shadow: var(--shadow-md);
}
.navbar {
padding: var(--space-sm) 0;
overflow: visible;
}
.navbar-container {
display: flex;
align-items: center;
justify-content: space-between;
overflow: visible;
}
.navbar-brand {
display: flex;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.logo-icon {
width: 45px;
height: 45px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-secondary);
font-weight: 700;
font-size: 0.9rem;
border: 2px solid var(--secondary);
}
.logo-img {
height: 48px;
width: auto;
display: block;
}
@media (max-width: 768px) {
.logo-img {
height: 40px;
}
}
.logo-icon--img {
background: var(--white);
}
.logo-icon--img img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 2px;
display: block;
}
.logo-text {
font-family: var(--font-secondary);
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
display: none;
}
@media (min-width: 480px) {
.logo-text {
display: block;
}
}
.navbar-toggler {
display: flex;
flex-direction: column;
gap: 5px;
padding: var(--space-sm);
z-index: 1001;
}
.toggler-icon,
.toggler-icon::before,
.toggler-icon::after {
width: 24px;
height: 2px;
background: var(--text);
transition: var(--transition);
}
.toggler-icon {
position: relative;
}
.toggler-icon::before,
.toggler-icon::after {
content: '';
position: absolute;
left: 0;
}
.toggler-icon::before {
top: -7px;
}
.toggler-icon::after {
top: 7px;
}
.navbar-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 300px;
height: 100vh;
background: var(--white);
padding: 5rem var(--space-lg) var(--space-lg);
transition: right var(--transition);
box-shadow: var(--shadow-xl);
overflow-y: auto;
overflow-x: hidden;
z-index: 1000;
}
.navbar-menu.active {
right: 0;
}
.navbar-nav {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.nav-item {
position: relative;
}
.nav-link {
display: block;
padding: var(--space-sm) 0;
font-weight: 500;
color: var(--text);
transition: color var(--transition-fast);
}
.nav-link:hover,
.nav-link.active {
color: var(--primary);
}
.dropdown {
position: relative;
}
.dropdown-toggle {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.dropdown-toggle::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid currentColor;
transition: transform var(--transition);
}
.dropdown.active .dropdown-toggle::after {
transform: rotate(180deg);
}
.dropdown-menu {
display: none;
padding-left: var(--space-md);
margin-top: var(--space-xs);
list-style: none;
}
.dropdown.active .dropdown-menu {
display: block;
}
.dropdown-menu li {
list-style: none;
}
.dropdown-menu a {
display: block;
padding: var(--space-sm) 0;
font-size: 0.9rem;
color: var(--text-light);
text-decoration: none;
transition: color var(--transition);
}
.dropdown-menu a:hover {
color: var(--primary);
}
.navbar-cta {
margin-top: var(--space-lg);
width: 100%;
text-align: center;
}
@media (min-width: 992px) {
.navbar-toggler {
display: none;
}
.navbar-menu {
position: static;
width: auto;
max-width: none;
height: auto;
background: transparent;
padding: 0;
box-shadow: none;
display: flex;
align-items: center;
gap: var(--space-lg);
overflow: visible;
}
.navbar-nav {
flex-direction: row;
gap: var(--space-sm);
overflow: visible;
}
.nav-link {
padding: var(--space-sm) var(--space-md);
font-size: 0.9rem;
}
.dropdown {
position: relative;
}
.dropdown-toggle::after {
content: '';
display: inline-block;
width: 0;
height: 0;
margin-left: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid currentColor;
vertical-align: middle;
transition: transform var(--transition);
}
.dropdown:hover .dropdown-toggle::after {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: var(--white);
padding: var(--space-sm) 0;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all var(--transition);
z-index: 1001;
margin-top: 0;
display: block;
}
.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu a {
padding: var(--space-sm) var(--space-lg);
white-space: nowrap;
}
.dropdown-menu a:hover {
background: var(--cream);
color: var(--primary);
}
.navbar-cta {
margin-top: 0;
width: auto;
}
}
.hero {
position: relative;
min-height: 90vh;
padding-top: 80px;
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
overflow: hidden;
}
@media (max-width: 768px) {
.hero {
min-height: 60vh;
padding-bottom: 180px;
position: relative;
}
}
.experience-badge {
position: absolute;
transform: translateX(-50%);
width: 150px !important;
height: 150px !important;
filter: drop-shadow(0 0 15px gold);
transition: transform 0.3s ease-in-out;
border: 3px solid #FFD700;
border-radius: 50%;
background: white;
padding: 5px;
width: 150px;
height: 150px;
left: 90px;
}
.hero-bg {
position: absolute;
inset: 0;
background: url('../images/hero/sri-lakshmi-caterers-bangalore-banner.webp') center center / cover no-repeat;
transform: translateZ(0);
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 1;
}
.hero-container {
position: relative;
z-index: 1;
padding: var(--space-2xl) var(--space-md);
}
.hero-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--secondary), var(--accent));
border-radius: var(--radius-full);
margin: 0 auto var(--space-lg);
box-shadow: var(--shadow-lg);
}
.hero-badge-inner {
width: 80px;
height: 80px;
background: var(--white);
border-radius: var(--radius-full);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-badge-number {
font-family: var(--font-secondary);
font-size: 1.75rem;
font-weight: 700;
color: var(--primary);
line-height: 1;
}
.hero-badge-text {
font-size: 0.55rem;
text-transform: uppercase;
color: var(--text-light);
letter-spacing: 0.5px;
}
.hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.hero-title {
font-size: clamp(1.75rem, 5vw, 3rem);
color: var(--white);
margin-bottom: var(--space-md);
line-height: 1.2;
text-shadow: 4px 2px 4px var(--primary);
}
.hero-description {
font-size: clamp(0.95rem, 2vw, 1.1rem);
color: var(--white);
margin-bottom: var(--space-xl);
line-height: 1.8;
}
.hero-description strong {
color: var(--white);
}
.stats-card {
background: #ffffff;
border-radius: 18px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
padding: 22px 10px;
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
max-width: 650px;
margin: 0 auto;
}
@media (max-width: 768px) {
.stats-card {
position: absolute;
left: 50%;
bottom: -150px;
transform: translateX(-50%);
width: calc(100% - 32px);
max-width: 520px;
z-index: 999;
}
}
.stats-item {
padding: 10px 8px;
position: relative;
}
.stats-item:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 15%;
height: 70%;
width: 1px;
background: #e6e6e6;
}
.stats-icon {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 6px;
font-size: 16px;
color: #fff;
}
.experience {
background: #b0303b;
}
.quality {
background: #2ca24c;
}
.trust {
background: #f27c22;
}
.stats-label {
font-size: 11px;
letter-spacing: 1px;
color: #8b8b8b;
font-weight: 600;
}
.stats-value {
font-size: 18px;
font-weight: 700;
color: #2a2a2a;
margin-top: 2px;
}
.services-section {
padding: var(--space-2xl) 0;
background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
padding-top: 50px;
}
.section-title.text-left {
text-align: left;
font-family: var(--font-secondary);
font-size: 1.75rem;
color: var(--text);
margin-bottom: var(--space-xl);
}
.section-header {
text-align: center;
margin-bottom: var(--space-2xl);
}
.section-title {
color: var(--text);
margin-bottom: var(--space-sm);
}
.section-subtitle {
color: var(--text-light);
font-size: 1rem;
}
.services-intro {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-bottom: var(--space-xl);
}
@media (min-width: 992px) {
.services-intro {
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
.services-intro-text {
order: 1;
}
@media (min-width: 992px) {
.services-intro-text {
order: 0;
}
}
.services-description {
font-size: 1rem;
line-height: 1.8;
color: var(--text);
margin-bottom: var(--space-lg);
}
.services-description strong {
color: var(--text);
font-weight: 600;
}
.star-rating {
color: var(--secondary);
font-size: 1rem;
}
.services-intro-images {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.intro-img-large,
.intro-img-small {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--cream-dark);
position: relative;
}
.intro-img-large {
aspect-ratio: 4/3;
min-height: 200px;
}
.intro-img-small {
aspect-ratio: 2/1;
min-height: 120px;
}
.intro-img-large img,
.intro-img-small img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.services-cards-title {
font-family: var(--font-secondary);
font-size: 1.5rem;
color: var(--text);
margin-bottom: var(--space-lg);
}
.services-grid-new {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
@media (min-width: 768px) {
.services-grid-new {
grid-template-columns: repeat(4, 1fr);
}
}
.service-card-new {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition);
text-decoration: none;
}
.service-card-new:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.service-card-img-new {
aspect-ratio: 3/2;
overflow: hidden;
background: linear-gradient(135deg, var(--primary-light), var(--primary));
position: relative;
min-height: 120px;
}
.service-card-img-new img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition);
position: absolute;
top: 0;
left: 0;
}
.service-card-new:hover .service-card-img-new img {
transform: scale(1.05);
}
.service-card-label {
background: var(--primary);
color: var(--white);
text-align: center;
padding: var(--space-sm) var(--space-xs);
font-size: 0.85rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 767px) {
.service-card-label {
min-height: 3em;
}
}
.service-card-new.meal-box .service-card-label {
background: linear-gradient(135deg, var(--secondary), var(--accent));
}
.services-carousel-wrapper {
position: relative;
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.services-carousel {
overflow: hidden;
flex: 1;
border-radius: var(--radius-lg);
}
.services-carousel-track {
display: flex;
gap: 10px;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: var(--space-sm) 0;
padding-right: 2px;
}
.services-carousel-track .service-card-new {
flex: 0 0 calc(50% - var(--space-sm));
min-width: calc(50% - var(--space-sm));
}
@media (min-width: 767px) {
.services-carousel-track .service-card-new {
flex: 0 0 calc(25% - var(--space-md) * 3 / 4);
min-width: calc(25% - var(--space-md) * 3 / 4);
}
}
.carousel-btn {
width: 44px;
height: 44px;
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
flex-shrink: 0;
z-index: 2;
}
.carousel-btn:hover {
background: var(--primary);
color: var(--white);
transform: scale(1.1);
}
.carousel-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.carousel-btn svg {
width: 20px;
height: 20px;
}
.carousel-indicators {
display: flex;
justify-content: center;
gap: var(--space-sm);
margin-bottom: var(--space-xl);
}
.carousel-indicator {
width: 12px;
height: 12px;
border-radius: var(--radius-full);
background: var(--cream-dark);
border: none;
cursor: pointer;
transition: all var(--transition);
padding: 0;
}
.carousel-indicator:hover {
background: var(--secondary);
}
.carousel-indicator.active {
background: var(--primary);
width: 32px;
border-radius: 6px;
}
.features-with-images {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
align-items: start;
}
@media (min-width: 992px) {
.features-with-images {
grid-template-columns: 1fr 1.5fr;
}
}
.features-list-new {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.feature-item-new {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}
.feature-check {
color: var(--primary);
font-weight: 700;
font-size: 1rem;
flex-shrink: 0;
}
.feature-item-new p {
font-size: 0.95rem;
color: var(--text);
margin: 0;
line-height: 1.5;
}
.feature-item-new strong {
font-weight: 600;
}
.features-images-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
@media (min-width: 768px) {
.features-images-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.feature-img-new {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-md);
aspect-ratio: 4/3;
background: var(--cream-dark);
position: relative;
min-height: 100px;
}
.feature-img-new img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition);
position: absolute;
top: 0;
left: 0;
}
.feature-img-new:hover img {
transform: scale(1.05);
}
.features-cta {
background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-top: var(--space-lg);
border-left: 4px solid #4CAF50;
}
.features-cta-icon {
font-size: 1.25rem;
margin-right: var(--space-sm);
}
.features-cta h4 {
display: inline;
color: var(--text);
font-size: 1rem;
font-weight: 500;
}
.features-cta h4 em {
font-style: italic;
}
.features-cta p {
color: var(--text-light);
font-size: 0.9rem;
margin: var(--space-sm) 0 0 0;
}
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 576px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.service-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition);
aspect-ratio: 4/3;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.service-card-img {
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.service-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
}
.service-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: var(--space-lg);
}
.service-card-title {
color: var(--white);
font-size: 1.1rem;
margin: 0;
}
.features-section {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.features-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
align-items: center;
}
@media (min-width: 992px) {
.features-content {
grid-template-columns: 1fr 1fr;
}
}
.features-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.feature-item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
}
.feature-icon {
width: 24px;
height: 24px;
color: var(--secondary);
flex-shrink: 0;
margin-top: 2px;
}
.feature-text {
font-size: 0.95rem;
color: var(--text);
}
.feature-text strong {
font-weight: 600;
}
.features-cta {
background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-top: var(--space-xl);
}
.features-cta-icon {
font-size: 1.5rem;
margin-bottom: var(--space-sm);
}
.features-cta h4 {
color: var(--text);
font-size: 1.1rem;
margin-bottom: var(--space-sm);
}
.features-cta p {
color: var(--text-light);
font-size: 0.9rem;
margin: 0;
}
.features-images {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.feature-img {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
aspect-ratio: 4/3;
background: var(--cream-dark);
}
.feature-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feature-img.large {
grid-column: span 2;
aspect-ratio: 16/9;
}
.why-section {
padding: var(--space-3xl) 0;
background: var(--white);
}
.why-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
@media (min-width: 768px) {
.why-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.why-card {
text-align: center;
padding: var(--space-xl);
border: 2px solid var(--cream-dark);
border-radius: var(--radius-lg);
transition: all var(--transition);
}
.why-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.why-icon {
width: 60px;
height: 60px;
margin: 0 auto var(--space-md);
font-size: 2rem;
}
.why-title {
font-size: 1.25rem;
color: var(--primary);
margin-bottom: var(--space-sm);
}
.why-title span {
display: block;
font-family: var(--font-primary);
font-weight: 400;
font-size: 0.9rem;
color: var(--text-light);
}
.why-rating {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
margin-top: var(--space-sm);
}
.star {
color: var(--secondary);
}
.cta-section {
padding: var(--space-2xl) 0;
background: var(--cream);
text-align: center;
}
.cta-section h2 {
color: var(--primary);
font-family: var(--font-secondary);
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: var(--space-md);
}
.cta-section p {
color: var(--text);
font-size: 1.1rem;
}
.cta-section .btn {
margin: 0 0.5rem;
}
@media (max-width: 767px) {
.cta-section .btn {
display: block;
margin: 0 auto var(--space-sm) auto;
width: 100%;
max-width: 300px;
}
.cta-section .btn:first-of-type {
margin-top: var(--space-lg);
}
.cta-section .btn:last-of-type {
margin-bottom: 0;
}
}
.site-footer {
background: var(--primary-dark);
color: var(--white);
padding: var(--space-3xl) 0 var(--space-lg);
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
}
@media (min-width: 576px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.footer-grid {
grid-template-columns: 2fr 1fr 1fr 1.5fr;
}
}
.footer-col h4 {
color: var(--white);
font-size: 1rem;
margin-bottom: var(--space-md);
font-family: var(--font-primary);
font-weight: 600;
}
.footer-col p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
line-height: 1.7;
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.footer-col ul a {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
transition: color var(--transition-fast);
}
.footer-col ul a:hover {
color: var(--secondary);
}
.footer-logo {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.footer-logo .logo-icon {
width: 50px;
height: 50px;
background: var(--white);
color: var(--primary);
}
.footer-logo .logo-text {
display: block;
color: var(--white);
font-size: 1.1rem;
}
.social-links {
display: flex;
gap: var(--space-md);
margin-top: var(--space-md);
}
.social-links a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.1rem;
transition: all var(--transition);
}
.social-links a:hover {
background: var(--secondary);
transform: translateY(-3px);
}
.contact-info li {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}
.contact-info i {
margin-top: 3px;
color: var(--secondary);
}
.footer-areas {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: var(--space-lg);
margin-top: var(--space-lg);
}
.footer-areas h4 {
color: var(--white);
font-size: 0.95rem;
margin-bottom: var(--space-sm);
}
.footer-areas p {
margin: 0;
line-height: 2;
}
.footer-areas a {
color: rgba(255, 255, 255, 0.75);
font-size: 0.85rem;
text-decoration: none;
margin-right: 1rem;
white-space: nowrap;
}
.footer-areas a:hover {
color: var(--secondary);
}
.footer-bottom {
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
margin: 0;
}
.floating-social {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.float-btn {
width: 55px;
height: 55px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--white);
box-shadow: var(--shadow-lg);
transition: all var(--transition);
}
.float-btn:hover {
transform: scale(1.1);
}
.float-btn.whatsapp {
background: #25D366;
}
.float-btn.enquire {
background: var(--primary);
border: none;
padding: 0;
cursor: pointer;
}
.float-btn.back-to-top {
display: none;
background: var(--primary);
border: none;
padding: 0;
cursor: pointer;
}
.float-btn.back-to-top.is-visible {
display: flex;
animation: floatBtnIn var(--transition);
}
@keyframes floatBtnIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.float-btn.back-to-top.is-visible {
animation: none;
}
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.lazy-placeholder {
background: var(--cream-dark);
position: relative;
overflow: hidden;
}
.lazy-placeholder::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.lazy-placeholder img {
opacity: 0;
transition: opacity 0.3s ease;
}
.lazy-placeholder img[src] {
opacity: 1;
}
.page-hero {
padding: 120px 0 var(--space-2xl);
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
text-align: center;
}
.page-hero h1 {
color: var(--primary);
margin-bottom: var(--space-sm);
}
.page-hero .lead {
color: var(--text-light);
font-size: 1.1rem;
}
.service-page-hero {
padding: 140px 0 var(--space-3xl);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
color: var(--white);
position: relative;
}
.service-page-hero .container {
position: relative;
z-index: 1;
}
.breadcrumb-nav {
font-size: 0.9rem;
opacity: 0.9;
padding-top: 30px;
}
.breadcrumb-nav a {
color: var(--white);
text-decoration: none;
transition: opacity var(--transition);
}
.breadcrumb-nav a:hover {
opacity: 0.8;
text-decoration: underline;
}
.breadcrumb-nav span {
margin: 0 var(--space-xs);
}
.service-page-hero h1 {
color: var(--white);
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: var(--space-md);
}
.hero-subtitle {
font-size: 1.2rem;
opacity: 0.95;
margin-bottom: var(--space-xl);
}
.hero-stats {
display: flex;
justify-content: center;
gap: var(--space-xl);
flex-wrap: wrap;
}
.hero-stat {
text-align: center;
}
.hero-stat .stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
font-family: var(--font-secondary);
}
.hero-stat .stat-text {
font-size: 0.9rem;
opacity: 0.9;
}
.service-highlight {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.service-highlight-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
align-items: start;
}
.service-price-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-xs);
padding: var(--space-xl);
background: var(--white);
border: 1px solid var(--cream-dark);
border-top: 4px solid var(--accent);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.service-price-label {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.service-price-value {
font-family: var(--font-secondary);
font-size: 2.1rem;
line-height: 1.2;
font-weight: 700;
color: var(--primary);
}
.service-price-unit {
font-size: 0.95rem;
color: var(--text-light);
}
.service-price-note {
margin-top: var(--space-xs);
font-size: 0.8rem;
line-height: 1.5;
color: var(--text-muted);
}
.service-price-card .btn {
margin-top: var(--space-md);
}
.service-highlight-block + .service-highlight-block {
margin-top: var(--space-lg);
}
.service-highlight-block h2 {
font-family: var(--font-secondary);
font-size: 1.5rem;
color: var(--primary);
margin-bottom: var(--space-sm);
}
.service-highlight-block p {
font-size: 1.02rem;
line-height: 1.8;
color: var(--text);
}
.service-highlight-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-md);
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--cream-dark);
}
.service-highlight-phone {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-weight: 600;
color: var(--primary);
transition: color var(--transition);
}
.service-highlight-phone.secondary {
font-weight: 500;
color: var(--text-light);
}
.service-highlight-phone:hover {
color: var(--primary-light);
}
.service-highlight-menu {
margin-left: auto;
font-weight: 600;
color: var(--secondary-dark);
transition: color var(--transition);
}
.service-highlight-menu:hover {
color: var(--accent);
}
@media (min-width: 992px) {
.service-highlight-grid {
grid-template-columns: 300px 1fr;
gap: var(--space-2xl);
}
.service-highlight-grid.no-price {
grid-template-columns: 1fr;
}
}
.service-overview {
padding: var(--space-3xl) 0;
background: var(--white);
}
.overview-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2xl);
align-items: center;
}
@media (min-width: 992px) {
.overview-grid {
grid-template-columns: 1fr 1fr;
}
}
.overview-content h2 {
color: var(--primary);
margin-bottom: var(--space-lg);
}
.overview-content p {
color: var(--text-light);
line-height: 1.8;
}
.overview-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
margin-top: var(--space-xl);
}
.overview-feature {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md);
background: var(--cream);
border-radius: var(--radius-md);
font-weight: 500;
font-size: 0.9rem;
}
.feature-icon {
font-size: 1.5rem;
}
.overview-image {
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.overview-image img {
width: 100%;
height: auto;
object-fit: cover;
}
.services-offered {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.offered-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.offered-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.offered-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.offered-card {
background: var(--white);
padding: var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
transition: transform var(--transition), box-shadow var(--transition);
border: 2px solid transparent;
}
.offered-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--secondary);
}
.offered-icon {
font-size: 3rem;
margin-bottom: var(--space-md);
}
.offered-card h3 {
font-size: 1.1rem;
color: var(--primary);
margin-bottom: var(--space-sm);
}
.offered-card p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.price-tag {
display: inline-block;
margin-top: var(--space-md);
padding: var(--space-xs) var(--space-md);
background: var(--secondary);
color: var(--white);
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.85rem;
}
.menu-highlights {
padding: var(--space-3xl) 0;
background: var(--white);
}
.menu-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.menu-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.menu-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.menu-category {
background: var(--cream);
padding: var(--space-lg);
border-radius: var(--radius-lg);
}
.menu-category h3 {
font-size: 1rem;
color: var(--primary);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--secondary);
}
.menu-category ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu-category li {
padding: var(--space-xs) 0;
color: var(--text-light);
font-size: 0.9rem;
position: relative;
padding-left: var(--space-md);
}
.menu-category li::before {
content: "•";
position: absolute;
left: 0;
color: var(--secondary);
}
.why-choose-service {
padding: var(--space-3xl) 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
}
.why-choose-service .section-title {
color: var(--white);
}
.reasons-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.reasons-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.reasons-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.reason-card {
background: rgba(255, 255, 255, 0.1);
padding: var(--space-xl);
border-radius: var(--radius-lg);
backdrop-filter: blur(10px);
transition: background var(--transition);
}
.reason-card:hover {
background: rgba(255, 255, 255, 0.15);
}
.reason-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--secondary);
margin-bottom: var(--space-sm);
font-family: var(--font-secondary);
}
.reason-card h4 {
font-size: 1.1rem;
color: var(--white);
margin-bottom: var(--space-sm);
}
.reason-card p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.client-trust {
padding: var(--space-2xl) 0;
background: var(--cream);
}
.trust-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.trust-badge {
padding: var(--space-sm) var(--space-lg);
background: var(--white);
border: 2px solid var(--secondary);
border-radius: var(--radius-md);
font-weight: 500;
color: var(--text);
font-size: 0.9rem;
}
.packages-section {
padding: var(--space-3xl) 0;
background: var(--white);
}
.packages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-xl);
max-width: 1100px;
margin: var(--space-2xl) auto 0;
}
.package-card {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-xl);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
text-align: center;
}
.package-card:hover {
transform: translateY(-8px);
border: 2px solid var(--primary);
box-shadow: 0 12px 40px rgba(139, 35, 50, 0.12);
}
.package-card.featured {
border-color: transparent;
background: linear-gradient(135deg, rgba(139, 35, 50, 0.03) 0%, rgba(139, 35, 50, 0.06) 100%);
}
.package-card.featured:hover {
border-color: var(--primary);
}
.package-card .package-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--white);
padding: 6px 20px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.package-header {
margin-bottom: var(--space-lg);
padding-bottom: var(--space-lg);
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
.package-header .package-icon {
font-size: 2.5rem;
margin-bottom: var(--space-sm);
}
.package-header h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
color: var(--dark);
margin-bottom: var(--space-xs);
}
.package-guests {
color: var(--primary);
font-weight: 600;
font-size: 0.95rem;
}
.package-list {
list-style: none;
padding: 0;
margin: 0 0 var(--space-xl);
text-align: left;
}
.package-list li {
padding: 10px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
color: var(--text);
font-size: 0.95rem;
position: relative;
padding-left: 24px;
}
.package-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--success);
font-weight: bold;
}
.package-list li:last-child {
border-bottom: none;
}
.package-card .btn {
width: 100%;
padding: 14px 24px;
font-weight: 600;
}
@media (max-width: 768px) {
.packages-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
.package-card.featured {
order: -1;
}
}
.service-cta {
padding: var(--space-3xl) 0;
background: var(--cream);
text-align: center;
}
.service-cta .cta-content {
max-width: 700px;
margin: 0 auto;
}
.service-cta .cta-content h2 {
color: var(--primary);
font-family: var(--font-secondary);
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: var(--space-md);
}
.service-cta .cta-content p {
color: var(--text);
font-size: 1.1rem;
margin-bottom: var(--space-xl);
}
.service-cta .cta-buttons {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: var(--white);
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1rem;
}
.wedding-hero {
position: relative;
min-height: 90vh;
padding-top: 100px;
padding-bottom: var(--space-3xl);
display: flex;
align-items: center;
overflow: hidden;
}
.wedding-hero-bg {
position: absolute;
inset: 0;
background: url('../images/gallery/wedding-catering-setup-bangalore.jpeg') center/cover no-repeat;
z-index: 0;
}
.wedding-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(139, 21, 56, 0.45) 0%, rgba(74, 11, 30, 0.55) 100%);
z-index: 1;
}
.wedding-hero-content {
position: relative;
z-index: 2;
color: var(--white);
text-align: center;
}
.wedding-hero .breadcrumb-nav {
margin-bottom: var(--space-md);
}
.wedding-hero .trust-ribbon {
justify-content: center;
margin-bottom: var(--space-lg);
}
.wedding-hero-main {
max-width: 900px;
margin: 0 auto;
}
.wedding-hero .hero-badge {
display: inline-block;
background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
color: var(--primary-dark);
padding: var(--space-xs) var(--space-lg);
border-radius: var(--radius-full);
font-weight: 600;
font-size: 0.9rem;
margin-bottom: var(--space-md);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.wedding-hero-title {
font-family: var(--font-secondary);
font-size: clamp(2.2rem, 5vw, 3.5rem);
line-height: 1.2;
margin-bottom: var(--space-lg);
color: var(--white);
}
.wedding-hero-title .title-accent {
color: var(--secondary);
font-style: italic;
}
.wedding-hero-title .title-location {
font-weight: 400;
opacity: 0.95;
}
.wedding-hero-subtitle {
font-size: 1.15rem;
line-height: 1.7;
opacity: 0.95;
margin-bottom: var(--space-xl);
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.wedding-hero-cta {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--space-2xl);
}
.wedding-hero-cta .btn-outline-light {
background: transparent;
border: 2px solid var(--white);
color: var(--white);
padding: 14px 32px;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.wedding-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
max-width: 700px;
margin: 0 auto;
}
@media (min-width: 768px) {
.wedding-stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.wedding-stat-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: var(--space-lg);
border-radius: var(--radius-lg);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.wedding-stat-card .stat-number {
display: block;
font-size: 1.75rem;
font-weight: 700;
font-family: var(--font-secondary);
color: var(--secondary);
margin-bottom: var(--space-xs);
}
.wedding-stat-card .stat-label {
font-size: 0.85rem;
opacity: 0.9;
}
.wedding-overview {
padding: var(--space-3xl) 0;
background: var(--white);
}
.wedding-menu-section {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.wedding-menu-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.wedding-menu-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.wedding-menu-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.wedding-menu-card {
background: var(--white);
padding: var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
position: relative;
transition: transform var(--transition), box-shadow var(--transition);
border: 2px solid transparent;
}
.wedding-menu-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--secondary);
}
.wedding-menu-card .menu-card-icon {
font-size: 2.5rem;
margin-bottom: var(--space-md);
}
.wedding-menu-card h3 {
font-size: 1.15rem;
color: var(--primary);
margin-bottom: var(--space-md);
}
.menu-items-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.menu-items-list li {
padding: var(--space-xs) 0;
color: var(--text-light);
font-size: 0.9rem;
position: relative;
padding-left: var(--space-md);
}
.menu-items-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--secondary);
font-weight: 600;
}
.menu-tag {
position: absolute;
top: var(--space-md);
right: var(--space-md);
background: var(--primary);
color: var(--white);
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.menu-tag.popular {
background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
color: var(--primary-dark);
}
.menu-tag.trending {
background: linear-gradient(135deg, #10b981, #059669);
color: var(--white);
}
.wedding-packages {
padding: var(--space-3xl) 0;
background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}
.wedding-packages .pricing-cards-grid {
gap: var(--space-xl);
}
.wedding-packages .pricing-card {
background: var(--white);
border-radius: var(--radius-xl);
box-shadow: 0 10px 40px rgba(139, 21, 56, 0.08);
overflow: visible;
position: relative;
border: 2px solid transparent;
}
.wedding-packages .pricing-card:hover {
transform: translateY(-12px);
box-shadow: 0 20px 50px rgba(139, 21, 56, 0.15);
border-color: var(--primary);
}
.wedding-packages .pricing-card.featured {
border: 2px solid transparent;
transform: scale(1.02);
}
.wedding-packages .pricing-card.featured:hover {
transform: scale(1.02) translateY(-12px);
border-color: var(--primary);
}
.wedding-packages .pricing-card.featured::before {
display: none;
}
.wedding-packages .pricing-card-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
color: var(--primary-dark);
padding: 8px 24px;
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}
.wedding-packages .pricing-card-header {
padding: 40px 28px 24px;
background: linear-gradient(180deg, rgba(139, 21, 56, 0.03) 0%, transparent 100%);
border-bottom: none;
}
.wedding-packages .pricing-card-header h3 {
font-size: 1.6rem;
color: var(--primary);
margin-bottom: 10px;
}
.wedding-packages .pricing-subtitle {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
font-size: 1rem;
}
.wedding-packages .pricing-card-body {
padding: 0 28px 24px;
}
.wedding-packages .pricing-features li {
text-align: left;
padding: 14px 0;
padding-left: 32px;
position: relative;
border-bottom: 1px dashed rgba(139, 21, 56, 0.1);
}
.wedding-packages .pricing-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--secondary);
font-weight: 700;
font-size: 1.1rem;
}
.wedding-packages .pricing-features li:last-child {
border-bottom: none;
}
.wedding-packages .pricing-card-footer {
padding: 24px 28px 32px;
}
.wedding-packages .pricing-card-footer .btn {
padding: 16px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: var(--radius-md);
}
.wedding-events-section {
padding: var(--space-3xl) 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.wedding-events-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.wedding-events-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.wedding-events-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.wedding-event-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: background var(--transition), transform var(--transition);
}
.wedding-event-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
}
.wedding-event-card .event-icon {
font-size: 2.5rem;
margin-bottom: var(--space-md);
}
.wedding-event-card h3 {
color: var(--white);
font-size: 1.15rem;
margin-bottom: var(--space-sm);
}
.wedding-event-card p {
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
margin: 0;
line-height: 1.6;
}
.wedding-gallery-section {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.wedding-gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.wedding-gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.wedding-gallery-grid .gallery-item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
}
.wedding-gallery-grid .gallery-item.large {
grid-column: span 2;
grid-row: span 2;
}
@media (max-width: 767px) {
.wedding-gallery-grid .gallery-item.large {
grid-column: span 2;
grid-row: span 1;
}
}
.wedding-gallery-grid .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition);
}
.wedding-gallery-grid .gallery-item:hover img {
transform: scale(1.05);
}
.gallery-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(139, 21, 56, 0.8) 0%, transparent 60%);
display: flex;
align-items: flex-end;
padding: var(--space-lg);
opacity: 0;
transition: opacity var(--transition);
}
.wedding-gallery-grid .gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay span {
color: var(--white);
font-weight: 600;
font-size: 0.95rem;
}
.wedding-faq-section {
padding: var(--space-3xl) 0;
background: var(--white);
}
.faq-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-xl);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.faq-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.faq-item {
background: var(--cream);
padding: var(--space-xl);
border-radius: var(--radius-lg);
border-left: 4px solid var(--primary);
}
.faq-item h3 {
font-size: 1rem;
color: var(--primary);
margin-bottom: var(--space-sm);
line-height: 1.4;
}
.faq-item p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.7;
margin: 0;
}
.wedding-cta-section {
padding: var(--space-3xl) 0;
background: var(--cream);
text-align: center;
}
.wedding-cta-content {
max-width: 700px;
margin: 0 auto;
color: var(--white);
}
.wedding-cta-content h2 {
font-family: var(--font-secondary);
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: var(--space-md);
color: var(--primary);
}
.wedding-cta-content p {
font-size: 1.1rem;
opacity: 0.95;
margin-bottom: var(--space-xl);
line-height: 1.7;
color: var(--black);
}
.wedding-cta-buttons {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--space-xl);
}
.wedding-cta-trust {
display: flex;
gap: var(--space-lg);
justify-content: center;
flex-wrap: wrap;
font-size: 0.9rem;
opacity: 0.9;
color: var(--primary);
}
.wedding-cta-trust span {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.form-label {
display: block;
margin-bottom: var(--space-xs);
font-weight: 500;
color: var(--text);
}
.form-control,
.form-select {
width: 100%;
padding: 0.75rem 1rem;
font-family: var(--font-primary);
font-size: 1rem;
border: 2px solid var(--cream-dark);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast);
background: var(--white);
}
.form-control:focus,
.form-select:focus {
outline: none;
border-color: var(--primary);
}
.text-danger {
color: #dc3545;
font-size: 0.85rem;
margin-top: var(--space-xs);
}
.card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
}
.card.shadow-sm {
box-shadow: var(--shadow-md);
}
.card-body {
padding: var(--space-lg);
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 calc(var(--space-md) * -1);
}
.row>* {
padding: 0 var(--space-md);
}
.g-3 {
gap: var(--space-md);
}
.g-4 {
gap: var(--space-lg);
}
.g-5 {
gap: var(--space-xl);
}
.col-12 {
width: 100%;
}
@media (min-width: 768px) {
.col-md-6 {
width: 50%;
}
}
@media (min-width: 992px) {
.col-lg-4 {
width: 33.333%;
}
.col-lg-5 {
width: 41.666%;
}
.col-lg-7 {
width: 58.333%;
}
.col-lg-8 {
width: 66.666%;
}
}
.how-it-works-section {
padding: var(--space-2xl) 0;
background: var(--white);
}
.how-it-works-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.how-it-works-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.how-it-works-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.how-step {
text-align: center;
position: relative;
padding: var(--space-lg);
}
.how-step-number {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
font-weight: 700;
margin: 0 auto var(--space-md);
position: relative;
z-index: 2;
box-shadow: 0 4px 15px rgba(139, 21, 56, 0.3);
}
.how-step-icon {
width: 90px;
height: 90px;
background: var(--cream);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
font-size: 2.5rem;
border: 3px solid var(--secondary);
transition: transform var(--transition), box-shadow var(--transition);
}
.how-step:hover .how-step-icon {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(201, 162, 39, 0.3);
}
.how-step h3 {
font-size: 1.25rem;
color: var(--text);
margin-bottom: var(--space-sm);
font-family: var(--font-secondary);
}
.how-step p {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.6;
}
@media (min-width: 992px) {
.how-step::after {
content: '';
position: absolute;
top: 45px;
right: -20%;
width: 40%;
height: 2px;
background: linear-gradient(90deg, var(--secondary), var(--primary-light));
}
.how-step:last-child::after {
display: none;
}
}
.why-choose-section {
padding: var(--space-2xl) 0;
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.why-choose-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
align-items: center;
margin-top: var(--space-xl);
}
@media (min-width: 992px) {
.why-choose-content {
grid-template-columns: 1fr 1fr;
}
}
.why-choose-image {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.why-choose-image img {
width: 100%;
height: auto;
display: block;
}
.why-choose-list {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.why-choose-item {
display: flex;
gap: var(--space-md);
align-items: flex-start;
background: var(--white);
padding: var(--space-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: transform var(--transition), box-shadow var(--transition);
}
.why-choose-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.why-choose-icon {
width: 60px;
height: 60px;
min-width: 60px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--white);
}
.why-choose-text h4 {
font-size: 1.1rem;
color: var(--text);
margin-bottom: var(--space-xs);
font-family: var(--font-secondary);
}
.why-choose-text p {
color: var(--text-light);
font-size: 0.95rem;
margin: 0;
line-height: 1.6;
}
.awards-section {
padding: var(--space-2xl) 0;
background: var(--white);
}
.awards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.awards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 992px) {
.awards-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.award-card {
background: var(--cream);
padding: var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
transition: transform var(--transition), box-shadow var(--transition);
border: 2px solid transparent;
}
.award-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--secondary);
}
.award-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--secondary), var(--accent));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
font-size: 2rem;
}
.award-card img {
width: 100%;
max-width: 120px;
height: auto;
margin-bottom: var(--space-md);
border-radius: var(--radius-md);
}
.award-card h4 {
font-size: 1rem;
color: var(--text);
margin-bottom: var(--space-xs);
font-family: var(--font-secondary);
}
.award-card p {
color: var(--text-light);
font-size: 0.85rem;
margin: 0;
}
.faq-section {
padding: var(--space-2xl) 0;
background: var(--cream);
}
.faq-grid {
max-width: 900px;
margin: var(--space-lg) auto 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.faq-item {
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
border: 2px solid transparent;
transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item:hover {
border-color: var(--secondary);
box-shadow: var(--shadow-md);
}
.faq-item.active {
border-color: var(--primary);
}
.faq-question {
width: 100%;
padding: var(--space-md) var(--space-lg);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-sm);
background: transparent;
border: none;
cursor: pointer;
font-family: var(--font-secondary);
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
text-align: left;
transition: color var(--transition), background var(--transition);
}
.faq-question:hover {
background: var(--cream-light);
color: var(--primary);
}
.faq-item.active .faq-question {
background: var(--primary);
color: var(--white);
}
.faq-icon {
font-size: 1.5rem;
font-weight: 300;
color: var(--secondary);
transition: transform var(--transition), color var(--transition);
flex-shrink: 0;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
color: var(--white);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-slow), padding var(--transition);
}
.faq-item.active .faq-answer {
max-height: 500px;
padding: 0 var(--space-lg) var(--space-md);
}
.faq-answer p {
color: var(--text-light);
line-height: 1.7;
font-size: 0.9rem;
margin: 0;
padding-top: var(--space-md);
border-top: 1px solid var(--cream-dark);
}
@media (max-width: 767px) {
.faq-question {
padding: var(--space-sm) var(--space-md);
font-size: 0.9rem;
}
.faq-item.active .faq-answer {
padding: 0 var(--space-md) var(--space-sm);
}
}
.meal-box-card {
background: linear-gradient(135deg, var(--secondary), var(--accent));
position: relative;
overflow: hidden;
}
.meal-box-card .service-card-overlay {
background: linear-gradient(to top, rgba(139, 21, 56, 0.9), transparent);
}
.meal-box-card::before {
content: '';
position: absolute;
top: 10px;
right: 10px;
width: 50px;
height: 50px;
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
@media (max-width: 575px) {
.hero-badge {
width: 80px;
height: 80px;
}
.hero-badge-inner {
width: 64px;
height: 64px;
}
.hero-badge-number {
font-size: 1.5rem;
}
.stat-item {
flex-direction: column;
text-align: center;
}
}
@media print {
.site-header,
.site-footer,
.floating-social,
.navbar-toggler {
display: none !important;
}
body {
font-size: 12pt;
}
.hero {
padding: 20pt 0;
height: 360px;
}
}
.booking-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-md);
}
.booking-modal.active {
display: flex;
}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-container {
position: relative;
width: 100%;
max-width: 520px;
max-height: 90vh;
background: var(--white);
border-radius: var(--radius-xl);
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
overflow: hidden;
animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
height: 550px;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-close {
position: absolute;
top: var(--space-md);
right: var(--space-md);
width: 36px;
height: 36px;
border: none;
background: var(--cream);
border-radius: var(--radius-full);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
transition: all var(--transition);
z-index: 10;
}
.modal-close:hover {
background: var(--primary);
color: var(--white);
transform: rotate(90deg);
}
.modal-header {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
padding: var(--space-md) var(--space-md);
text-align: center;
position: relative;
overflow: hidden;
}
.modal-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0%,
100% {
transform: translateX(-50%) translateY(-50%);
}
50% {
transform: translateX(0%) translateY(0%);
}
}
.modal-logo {
display: inline-flex;
margin-bottom: var(--space-md);
}
.modal-logo .logo-icon {
width: 50px;
height: 50px;
background: var(--white);
color: var(--primary);
font-size: 1.25rem;
border-radius: var(--radius-md);
}
.modal-title {
color: var(--white);
font-family: var(--font-secondary);
font-size: 1.3rem;
margin: 0 0 var(--space-xs);
position: relative;
}
.modal-subtitle {
color: rgba(255, 255, 255, 0.85);
font-size: 0.8rem;
margin: 0;
position: relative;
}
.booking-steps {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-sm) var(--space-md);
background: var(--cream);
gap: var(--space-sm);
}
.step {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
opacity: 0.5;
transition: all var(--transition);
}
.step.active {
opacity: 1;
}
.step.completed {
opacity: 1;
}
.step-number {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--cream-dark);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
transition: all var(--transition);
}
.step.active .step-number {
background: var(--primary);
color: var(--white);
box-shadow: 0 4px 15px rgba(139, 21, 56, 0.3);
}
.step.completed .step-number {
background: #4CAF50;
color: var(--white);
}
.step-label {
font-size: 0.7rem;
color: var(--text-muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.step.active .step-label {
color: var(--primary);
}
.step-connector {
width: 40px;
height: 2px;
background: var(--cream-dark);
border-radius: 1px;
}
.booking-step-content {
padding: var(--space-md);
overflow-y: auto;
max-height: calc(90vh - 250px);
position: relative;
}
.scroll-indicator {
display: none;
}
@media (max-width: 575px) {
.scroll-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: var(--space-xs);
background: linear-gradient(180deg, transparent 0%, rgba(253, 248, 240, 0.95) 50%);
position: sticky;
bottom: 0;
margin-top: var(--space-sm);
font-size: 0.7rem;
color: var(--text-muted);
animation: bounceDown 1s ease-in-out infinite;
}
.scroll-indicator.hidden {
display: none;
}
.scroll-indicator i {
font-size: 0.8rem;
}
@keyframes bounceDown {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(3px);
}
}
}
.urgency-banner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
background: linear-gradient(90deg, #FFF3E0, #FFE0B2);
border: 1px solid #FFB74D;
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.4);
}
50% {
box-shadow: 0 0 0 8px rgba(255, 152, 0, 0);
}
}
.urgency-icon {
font-size: 1.25rem;
}
.urgency-text {
font-size: 0.85rem;
color: #E65100;
}
.calendar-container {
background: var(--white);
border: 2px solid var(--cream-dark);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-md);
}
.calendar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-md);
background: var(--cream);
border-bottom: 1px solid var(--cream-dark);
}
.calendar-nav {
width: 36px;
height: 36px;
border: none;
background: var(--white);
border-radius: var(--radius-full);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
transition: all var(--transition);
box-shadow: var(--shadow-sm);
}
.calendar-nav:hover {
background: var(--primary);
color: var(--white);
}
.calendar-month {
font-family: var(--font-secondary);
font-size: 1.1rem;
color: var(--text);
margin: 0;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--cream);
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--cream-dark);
}
.calendar-weekdays span {
text-align: center;
font-size: 0.75rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
padding: var(--space-sm) var(--space-md);
gap: 4px;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
position: relative;
transition: all var(--transition);
border: 2px solid transparent;
}
.calendar-day:not(.empty):not(.disabled):hover {
background: var(--cream);
border-color: var(--primary);
}
.calendar-day.today {
background: var(--cream);
font-weight: 700;
}
.calendar-day.selected {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
box-shadow: 0 4px 15px rgba(139, 21, 56, 0.3);
}
.calendar-day.disabled {
opacity: 0.3;
cursor: not-allowed;
text-decoration: line-through;
}
.calendar-day.booked {
background: #FFEBEE;
color: #C62828;
cursor: not-allowed;
}
.calendar-day.booked::after {
content: '✕';
position: absolute;
font-size: 0.6rem;
bottom: 2px;
}
.calendar-day.limited {
background: #FFF8E1;
color: #F57F17;
}
.calendar-day.limited::after {
content: '';
position: absolute;
bottom: 4px;
width: 6px;
height: 6px;
background: #FF9800;
border-radius: var(--radius-full);
}
.calendar-day.available {
background: #E8F5E9;
color: #2E7D32;
}
.calendar-day.offer {
background: linear-gradient(135deg, #E1F5FE, #B3E5FC);
color: #0277BD;
border-color: #03A9F4;
}
.calendar-day.offer::before {
content: '🎁';
position: absolute;
top: 2px;
right: 2px;
font-size: 0.6rem;
}
.calendar-day.empty {
cursor: default;
}
.calendar-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
margin-bottom: var(--space-md);
padding: var(--space-sm) var(--space-md);
background: var(--cream);
border-radius: var(--radius-md);
}
.legend-item {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.75rem;
color: var(--text-light);
}
.legend-dot {
width: 14px;
height: 14px;
border-radius: var(--radius-sm);
}
.legend-dot.available {
background: #E8F5E9;
border: 1px solid #4CAF50;
}
.legend-dot.limited {
background: #FFF8E1;
border: 1px solid #FF9800;
}
.legend-dot.booked {
background: #FFEBEE;
border: 1px solid #F44336;
}
.legend-dot.offer {
background: #E1F5FE;
border: 1px solid #03A9F4;
}
.selected-date-info {
background: linear-gradient(135deg, var(--cream), var(--cream-dark));
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
border: 1px solid var(--secondary);
border-left: 3px solid var(--primary);
}
.date-info-header {
display: flex;
align-items: center;
gap: var(--space-md);
}
.date-info-icon {
font-size: 1.5rem;
}
.date-info-text {
display: flex;
flex-direction: column;
}
.date-info-text strong {
font-size: 1rem;
color: var(--text);
}
.date-status {
font-size: 0.8rem;
color: var(--text-light);
}
.date-status.available {
color: #2E7D32;
}
.date-status.limited {
color: #F57F17;
}
.date-offer {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px dashed var(--secondary);
}
.offer-badge {
display: inline-block;
background: linear-gradient(135deg, var(--secondary), var(--accent));
color: var(--white);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
font-size: 0.7rem;
font-weight: 600;
margin-right: var(--space-sm);
}
.offer-text {
font-size: 0.85rem;
color: var(--primary);
font-weight: 500;
}
.btn-block {
width: 100%;
padding: var(--space-md) var(--space-lg);
font-size: 1rem;
}
.btn-block:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.booking-form {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.booking-form-error {
background: #FDECEA;
border: 1px solid #F5C2C0;
border-left: 4px solid #C0392B;
border-radius: 8px;
padding: .85rem 1rem;
color: #7B241C;
font-size: .95rem;
line-height: 1.5;
}
.booking-form-error a {
color: #7B241C;
font-weight: 600;
white-space: nowrap;
}
.form-section {
background: var(--cream);
border-radius: var(--radius-lg);
padding: var(--space-lg);
}
.form-section-title {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 1rem;
color: var(--primary);
margin: 0 0 var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--secondary);
}
.form-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 480px) {
.form-row {
grid-template-columns: 1fr 1fr;
}
}
.form-group {
margin-bottom: var(--space-md);
}
.form-group:last-child {
margin-bottom: 0;
}
.form-group label {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(--text);
margin-bottom: var(--space-xs);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: var(--space-sm) var(--space-md);
font-family: var(--font-primary);
font-size: 0.95rem;
border: 2px solid var(--cream-dark);
border-radius: var(--radius-md);
background: var(--white);
transition: all var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(139, 21, 56, 0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-muted);
}
.checkbox-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.checkbox-item {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: var(--white);
border: 2px solid var(--cream-dark);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition);
}
.checkbox-item:hover {
border-color: var(--primary);
}
.checkbox-item input {
width: auto;
margin: 0;
}
.checkbox-item input:checked+.checkbox-label {
color: var(--primary);
font-weight: 500;
}
.checkbox-item:has(input:checked) {
border-color: var(--primary);
background: rgba(139, 21, 56, 0.05);
}
.checkbox-label {
font-size: 0.85rem;
}
.form-actions {
display: flex;
gap: var(--space-md);
padding-top: var(--space-md);
}
.form-actions .btn {
flex: 1;
}
.confirmation-content {
text-align: center;
padding: var(--space-lg);
}
.success-animation {
margin-bottom: var(--space-xl);
}
.success-checkmark {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #4CAF50, #81C784);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.success-checkmark i {
font-size: 2.5rem;
color: var(--white);
}
.confirmation-title {
font-family: var(--font-secondary);
font-size: 1.5rem;
color: var(--text);
margin: 0 0 var(--space-md);
}
.confirmation-text {
color: var(--text-light);
font-size: 0.95rem;
margin-bottom: var(--space-xl);
}
.confirmation-summary {
background: var(--cream);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-bottom: var(--space-xl);
text-align: left;
}
.confirmation-summary h4 {
font-size: 1rem;
color: var(--primary);
margin: 0 0 var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--secondary);
}
.summary-item {
display: flex;
justify-content: space-between;
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--cream-dark);
}
.summary-item:last-child {
border-bottom: none;
}
.summary-label {
color: var(--text-light);
font-size: 0.9rem;
}
.summary-value {
color: var(--text);
font-weight: 500;
font-size: 0.9rem;
}
.confirmation-actions {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
@media (min-width: 480px) {
.confirmation-actions {
flex-direction: row;
justify-content: center;
}
}
.btn-whatsapp {
background: #25D366;
color: var(--white);
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-md);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
font-weight: 500;
transition: all var(--transition);
}
.btn-whatsapp:hover {
background: #128C7E;
transform: translateY(-2px);
}
@media (max-width: 575px) {
.booking-modal {
padding: 0;
align-items: flex-end;
}
.modal-container {
max-height: 100vh;
height: 100vh;
max-width: 100%;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
margin: 0;
animation: slideUpMobile 0.3s ease;
}
@keyframes slideUpMobile {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.modal-close {
top: var(--space-sm);
right: var(--space-sm);
width: 32px;
height: 32px;
}
.modal-header {
padding: var(--space-md);
}
.modal-logo {
display: none;
}
.modal-title {
font-size: 1.1rem;
}
.modal-subtitle {
font-size: 0.8rem;
}
.booking-steps {
padding: var(--space-sm) var(--space-md);
gap: var(--space-xs);
}
.step {
flex-direction: row;
gap: var(--space-xs);
}
.step-number {
width: 24px;
height: 24px;
font-size: 0.75rem;
}
.step-label {
font-size: 0.65rem;
display: none;
}
.step.active .step-label {
display: block;
}
.step-connector {
width: 15px;
}
.booking-step-content {
padding: var(--space-sm) var(--space-md);
max-height: calc(100vh - 140px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.urgency-banner {
padding: var(--space-xs) var(--space-sm);
margin-bottom: var(--space-sm);
}
.urgency-icon {
font-size: 1rem;
}
.urgency-text {
font-size: 0.75rem;
}
.calendar-container {
margin-bottom: var(--space-sm);
}
.calendar-header {
padding: var(--space-sm);
}
.calendar-nav {
width: 30px;
height: 30px;
}
.calendar-month {
font-size: 0.95rem;
}
.calendar-weekdays {
padding: var(--space-xs) 0;
}
.calendar-weekdays span {
font-size: 0.65rem;
}
.calendar-days {
padding: var(--space-xs);
gap: 2px;
}
.calendar-day {
font-size: 0.8rem;
border-radius: var(--radius-sm);
}
.calendar-day.offer::before {
font-size: 0.5rem;
top: 1px;
right: 1px;
}
.calendar-day.limited::after {
width: 4px;
height: 4px;
bottom: 2px;
}
.calendar-legend {
padding: var(--space-xs) var(--space-sm);
margin-bottom: var(--space-sm);
gap: var(--space-sm);
justify-content: space-between;
}
.legend-item {
font-size: 0.6rem;
}
.legend-dot {
width: 10px;
height: 10px;
}
.selected-date-info {
padding: var(--space-sm);
margin-bottom: var(--space-sm);
}
.date-info-icon {
font-size: 1.2rem;
}
.date-info-text strong {
font-size: 0.9rem;
}
.date-status {
font-size: 0.7rem;
}
.date-offer {
margin-top: var(--space-sm);
padding-top: var(--space-sm);
}
.offer-badge {
font-size: 0.6rem;
padding: 2px var(--space-xs);
}
.offer-text {
font-size: 0.75rem;
}
.btn-block {
padding: var(--space-sm) var(--space-md);
font-size: 0.9rem;
}
.form-section {
padding: var(--space-md);
margin-bottom: var(--space-sm);
}
.form-section-title {
font-size: 0.9rem;
margin-bottom: var(--space-sm);
}
.form-row {
gap: var(--space-sm);
}
.form-group {
margin-bottom: var(--space-sm);
}
.form-group label {
font-size: 0.8rem;
margin-bottom: 2px;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: var(--space-xs) var(--space-sm);
font-size: 0.9rem;
}
.form-group textarea {
rows: 2;
}
.checkbox-group {
gap: var(--space-xs);
}
.checkbox-item {
padding: var(--space-xs) var(--space-sm);
}
.checkbox-label {
font-size: 0.8rem;
}
.form-actions {
padding-top: var(--space-sm);
gap: var(--space-sm);
}
.form-actions .btn {
padding: var(--space-sm);
font-size: 0.85rem;
}
.confirmation-content {
padding: var(--space-md);
}
.success-animation {
margin-bottom: var(--space-md);
}
.success-checkmark {
width: 60px;
height: 60px;
}
.success-checkmark i {
font-size: 1.75rem;
}
.confirmation-title {
font-size: 1.2rem;
margin-bottom: var(--space-sm);
}
.confirmation-text {
font-size: 0.85rem;
margin-bottom: var(--space-md);
}
.confirmation-summary {
padding: var(--space-md);
margin-bottom: var(--space-md);
}
.confirmation-summary h4 {
font-size: 0.9rem;
margin-bottom: var(--space-sm);
}
.summary-item {
padding: var(--space-xs) 0;
}
.summary-label,
.summary-value {
font-size: 0.8rem;
}
.btn-whatsapp {
padding: var(--space-sm) var(--space-md);
font-size: 0.85rem;
}
}
@media (max-width: 380px) {
.calendar-day {
font-size: 0.7rem;
}
.legend-item span:last-child {
display: none;
}
.legend-dot {
width: 12px;
height: 12px;
border-radius: 2px;
}
.step-label {
display: none !important;
}
}
.menu-hero {
min-height: 50vh;
display: flex;
align-items: center;
}
.menu-categories-section {
padding: var(--space-3xl) 0;
background: var(--white);
}
.menu-filter-tabs {
display: flex;
justify-content: center;
gap: var(--space-sm);
flex-wrap: wrap;
margin-bottom: var(--space-2xl);
}
.menu-filter-btn {
padding: var(--space-sm) var(--space-lg);
border: 2px solid var(--cream-dark);
background: var(--white);
border-radius: var(--radius-xl);
font-family: var(--font-primary);
font-weight: 500;
font-size: 0.9rem;
color: var(--text);
cursor: pointer;
transition: all var(--transition);
}
.menu-filter-btn:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.menu-filter-btn.active {
background: var(--primary);
border-color: var(--primary);
color: var(--white);
}
.menu-cards-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--space-xl);
}
@media (min-width: 576px) {
.menu-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.menu-cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.menu-cards-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.menu-card {
perspective: 1000px;
height: 280px;
cursor: pointer;
}
.menu-card.hidden {
display: none;
}
.menu-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-card:hover .menu-card-inner {
transform: rotateY(180deg);
}
.menu-card-front,
.menu-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: var(--radius-xl);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-xl);
text-align: center;
}
.menu-card-front {
background: linear-gradient(145deg, var(--cream) 0%, var(--cream-dark) 100%);
border: 2px solid transparent;
box-shadow: var(--shadow-md);
}
.menu-card:hover .menu-card-front {
border-color: var(--secondary);
}
.menu-card-back {
background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dark) 100%);
transform: rotateY(180deg);
color: var(--white);
}
.menu-card-icon {
font-size: 3.5rem;
margin-bottom: var(--space-md);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.menu-card-front h3 {
font-size: 1.25rem;
color: var(--primary);
margin-bottom: var(--space-sm);
}
.menu-card-front p {
color: var(--text-light);
font-size: 0.9rem;
margin: 0;
line-height: 1.5;
}
.menu-card-badge {
position: absolute;
top: var(--space-md);
right: var(--space-md);
padding: var(--space-xs) var(--space-sm);
background: var(--primary);
color: var(--white);
font-size: 0.7rem;
font-weight: 600;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-card-badge.gold {
background: linear-gradient(135deg, var(--secondary), var(--accent));
}
.menu-preview-items {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
justify-content: center;
margin-bottom: var(--space-lg);
}
.menu-preview-items span {
padding: var(--space-xs) var(--space-sm);
background: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-sm);
font-size: 0.8rem;
}
.view-menu-btn {
margin-top: auto;
}
.featured-card .menu-card-front {
background: linear-gradient(145deg, #FFF8E7 0%, #F5E6C8 100%);
border: 2px solid var(--secondary);
}
.featured-card .menu-card-icon {
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.animate-card {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-card.visible {
opacity: 1;
transform: translateY(0);
}
.menu-cards-grid .animate-card:nth-child(1) {
transition-delay: 0.1s;
}
.menu-cards-grid .animate-card:nth-child(2) {
transition-delay: 0.2s;
}
.menu-cards-grid .animate-card:nth-child(3) {
transition-delay: 0.3s;
}
.menu-cards-grid .animate-card:nth-child(4) {
transition-delay: 0.4s;
}
.menu-cards-grid .animate-card:nth-child(5) {
transition-delay: 0.5s;
}
.menu-cards-grid .animate-card:nth-child(6) {
transition-delay: 0.6s;
}
.menu-cards-grid .animate-card:nth-child(7) {
transition-delay: 0.7s;
}
.menu-cards-grid .animate-card:nth-child(8) {
transition-delay: 0.8s;
}
.menu-cards-grid .animate-card:nth-child(9) {
transition-delay: 0.1s;
}
.menu-cards-grid .animate-card:nth-child(10) {
transition-delay: 0.2s;
}
.menu-cards-grid .animate-card:nth-child(11) {
transition-delay: 0.3s;
}
.menu-cards-grid .animate-card:nth-child(12) {
transition-delay: 0.4s;
}
.menu-features-section {
padding: var(--space-2xl) 0;
background: var(--cream);
}
.menu-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
@media (min-width: 768px) {
.menu-features-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.menu-feature-card {
text-align: center;
padding: var(--space-lg);
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition);
}
.menu-feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.feature-icon-wrap {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
font-size: 1.5rem;
}
.menu-feature-card h4 {
font-size: 1rem;
color: var(--text);
margin-bottom: var(--space-xs);
}
.menu-feature-card p {
color: var(--text-light);
font-size: 0.85rem;
margin: 0;
line-height: 1.5;
}
.menu-download-section {
padding: var(--space-2xl) 0;
background: var(--white);
}
.download-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
max-width: 800px;
margin: var(--space-xl) auto 0;
}
@media (min-width: 768px) {
.download-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.download-card {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
background: var(--cream);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text);
font-weight: 500;
font-size: 0.9rem;
transition: all var(--transition);
border: 2px solid transparent;
}
.download-card:hover {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.download-icon {
font-size: 1.25rem;
}
.pdf-viewer-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-md);
opacity: 0;
transition: opacity 0.3s ease;
}
.pdf-viewer-modal.active {
display: flex;
opacity: 1;
}
.pdf-viewer-container {
width: 100%;
max-width: 1000px;
max-height: 95vh;
background: var(--white);
border-radius: var(--radius-xl);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.pdf-viewer-modal.active .pdf-viewer-container {
transform: scale(1);
}
.pdf-viewer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md) var(--space-lg);
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--white);
flex-shrink: 0;
}
.pdf-viewer-header h3 {
font-size: 1.1rem;
margin: 0;
color: var(--white);
font-family: var(--font-secondary);
}
.pdf-viewer-controls {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.pdf-control-btn {
width: 36px;
height: 36px;
border: none;
background: rgba(255, 255, 255, 0.15);
color: var(--white);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--transition);
text-decoration: none;
}
.pdf-control-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.pdf-close-btn {
background: rgba(255, 0, 0, 0.3);
margin-left: var(--space-sm);
}
.pdf-close-btn:hover {
background: rgba(255, 0, 0, 0.5);
}
#pdfZoomLevel,
#pdfPageInfo {
font-size: 0.85rem;
min-width: 50px;
text-align: center;
}
.pdf-viewer-body {
flex: 1;
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
background: #525659;
padding: var(--space-lg);
position: relative;
}
#pdfCanvas {
max-width: 100%;
height: auto;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
background: var(--white);
}
.pdf-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--white);
display: none;
}
.pdf-loading.show {
display: block;
}
.pdf-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--secondary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto var(--space-md);
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 767px) {
.pdf-viewer-header {
flex-direction: column;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
}
.pdf-viewer-controls {
flex-wrap: wrap;
justify-content: center;
}
.pdf-control-btn {
width: 32px;
height: 32px;
}
#pdfZoomLevel,
#pdfPageInfo {
font-size: 0.75rem;
}
.pdf-viewer-body {
padding: var(--space-sm);
}
}
.view-menu-section {
margin-top: var(--space-2xl);
padding: var(--space-2xl);
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
border-radius: var(--radius-xl);
text-align: center;
}
.view-menu-section h3 {
font-family: var(--font-secondary);
font-size: 1.5rem;
color: var(--primary);
margin-bottom: var(--space-xl);
}
.menu-pdf-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
@media (min-width: 768px) {
.menu-pdf-cards {
grid-template-columns: repeat(4, 1fr);
}
}
.menu-pdf-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
padding: var(--space-lg);
background: var(--white);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition);
border: 2px solid transparent;
box-shadow: var(--shadow-sm);
}
.menu-pdf-card:hover {
transform: translateY(-5px);
border-color: var(--secondary);
box-shadow: var(--shadow-lg);
}
.menu-pdf-card .pdf-icon {
font-size: 2.5rem;
margin-bottom: var(--space-xs);
}
.menu-pdf-card .pdf-name {
font-weight: 600;
font-size: 0.9rem;
color: var(--text);
}
.menu-pdf-card .pdf-action {
font-size: 0.8rem;
color: var(--primary);
font-weight: 500;
opacity: 0;
transform: translateY(5px);
transition: all var(--transition);
}
.menu-pdf-card:hover .pdf-action {
opacity: 1;
transform: translateY(0);
}
.menu-page-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
padding: var(--space-2xl) 0;
color: var(--white);
}
.bread-crumb1 {
background: url(../images/hero/south-indian-dishes-gallery-hero.jpg) no-repeat center center;
position: relative;
min-height: 250px;
}
.bread-crumb1 .matter {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
margin: 0 auto;
width: 244px;
background: rgba(0, 0, 0, 0.35);
padding: 15px 0;
}
section.gallery-section.mt-5 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.bread-crumb1 .matter h1,
.bread-crumb1 .matter h2 {
font-family: 'Lato', sans-serif;
color: #fff;
font-size: 30px;
font-weight: 400;
margin: 0;
text-transform: capitalize;
}
.menu-page-hero h1 {
color: var(--white);
margin-bottom: var(--space-sm);
}
.menu-page-hero .hero-subtitle {
color: rgba(255, 255, 255, 0.85);
font-size: 1.1rem;
}
.menu-viewer-section {
padding: var(--space-2xl) 0;
background: var(--cream);
}
.menu-viewer-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
}
@media (min-width: 992px) {
.menu-viewer-layout {
grid-template-columns: 340px 1fr;
}
}
.menu-sidebar {
background: var(--white);
border-radius: var(--radius-xl);
padding: var(--space-lg);
box-shadow: var(--shadow-md);
height: fit-content;
position: sticky;
top: 100px;
}
.sidebar-title {
font-family: var(--font-secondary);
font-size: 1.25rem;
color: var(--primary);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--cream);
}
.menu-category-tabs {
display: flex;
gap: var(--space-xs);
margin-bottom: var(--space-lg);
flex-wrap: wrap;
}
.category-tab {
flex: 1 1 auto;
min-width: max-content;
white-space: nowrap;
padding: var(--space-sm) var(--space-md);
border: 2px solid var(--cream-dark);
background: var(--white);
border-radius: var(--radius-md);
font-size: 0.8rem;
font-weight: 500;
color: var(--text-light);
cursor: pointer;
transition: all var(--transition);
}
.category-tab:hover {
border-color: var(--secondary);
color: var(--secondary);
}
.category-tab.active {
background: var(--primary);
border-color: var(--primary);
color: var(--white);
}
.menu-list {
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-height: 500px;
overflow-y: auto;
padding-right: var(--space-xs);
}
.menu-list::-webkit-scrollbar {
width: 5px;
}
.menu-list::-webkit-scrollbar-track {
background: var(--cream);
border-radius: 10px;
}
.menu-list::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 10px;
}
.menu-list-item {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--cream);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition);
border: 2px solid transparent;
position: relative;
}
.menu-list-item:hover {
background: var(--cream-dark);
border-color: var(--secondary);
}
.menu-list-item.active {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
border-color: var(--primary);
}
.menu-list-item .menu-icon {
font-size: 1.5rem;
flex-shrink: 0;
}
.menu-list-item .menu-thumb {
width: 64px;
height: 54px;
flex-shrink: 0;
object-fit: cover;
border-radius: var(--radius-sm);
border: 1px solid rgba(0, 0, 0, 0.08);
background: var(--white);
}
.menu-list-item.active .menu-thumb {
border-color: rgba(255, 255, 255, 0.45);
}
.menu-list-item .menu-info {
flex: 1;
min-width: 0;
}
.menu-list-item .menu-name {
display: block;
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-list-item .menu-desc {
display: block;
font-size: 0.75rem;
opacity: 0.7;
}
.menu-list-item.active .menu-desc {
color: rgba(255, 255, 255, 0.8);
}
.menu-badge {
position: absolute;
top: -6px;
right: -4px;
padding: 2px 6px;
font-size: 0.6rem;
font-weight: 700;
border-radius: var(--radius-sm);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.menu-badge.popular {
background: var(--secondary);
color: var(--white);
}
.menu-badge.bestseller {
background: linear-gradient(135deg, #FF6B6B, #FF8E53);
color: var(--white);
}
.menu-badge.premium {
background: linear-gradient(135deg, var(--accent), var(--secondary));
color: var(--primary-dark);
}
.pdf-viewer-area {
background: var(--white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
}
.pdf-viewer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md) var(--space-lg);
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
}
.pdf-viewer-header h3 {
margin: 0;
font-family: var(--font-secondary);
font-size: 1.2rem;
color: var(--white);
}
.download-btn {
display: flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-sm) var(--space-md);
background: rgba(255, 255, 255, 0.2);
color: var(--white);
border-radius: var(--radius-md);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
transition: background var(--transition);
}
.download-btn:hover {
background: rgba(255, 255, 255, 0.3);
color: var(--white);
}
.pdf-viewer-actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.estimate-btn {
background: var(--secondary);
border: none;
cursor: pointer;
font-family: inherit;
}
.estimate-btn:hover {
background: var(--secondary-dark);
}
.pdf-display-container {
flex: 1;
min-height: 500px;
background: #4a4a4a;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
@media (min-width: 992px) {
.pdf-display-container {
min-height: 600px;
}
}
@media (max-width: 767px) {
.gallery-filters {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 0.5rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.gallery-filters .gallery-filter {
flex-shrink: 0;
white-space: nowrap;
font-size: 0.875rem;
padding: 0.5rem 0.5rem;
}
.gallery-filters::-webkit-scrollbar {
display: none;
}
.gallery-filters {
-ms-overflow-style: none;
scrollbar-width: none;
}
}
.pdf-display-container:fullscreen {
background: #2a2a2a;
}
.pdf-display-container:fullscreen .pdf-pages-wrapper {
max-height: 100vh;
}
.pdf-pages-wrapper {
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-lg);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xl);
scroll-behavior: smooth;
}
.pdf-pages-wrapper::-webkit-scrollbar {
width: 10px;
}
.pdf-pages-wrapper::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.pdf-pages-wrapper::-webkit-scrollbar-thumb {
background: var(--secondary);
border-radius: 10px;
}
.pdf-pages-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.pdf-page {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
flex-shrink: 0;
}
.pdf-page-canvas {
max-width: 100%;
height: auto;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
background: var(--white);
border-radius: var(--radius-sm);
}
.pdf-page-label {
padding: var(--space-xs) var(--space-md);
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.8);
border-radius: var(--radius-md);
font-size: 0.8rem;
font-weight: 500;
}
.pdf-loading-state {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--white);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
z-index: 10;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top-color: var(--secondary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.pdf-error-state {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--white);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
z-index: 10;
}
.pdf-error-state .error-icon {
font-size: 3rem;
}
.pdf-controls-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-md) var(--space-lg);
background: #f5f5f5;
border-top: 1px solid #e0e0e0;
flex-wrap: wrap;
gap: var(--space-sm);
}
.pdf-page-indicator {
font-size: 0.9rem;
font-weight: 500;
color: var(--text);
min-width: 60px;
}
.pdf-controls-center {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.pdf-nav-controls {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.pdf-ctrl-btn {
width: 40px;
height: 40px;
border: none;
background: var(--white);
color: var(--text);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
box-shadow: var(--shadow-sm);
}
.pdf-ctrl-btn:hover {
background: var(--primary);
color: var(--white);
transform: scale(1.05);
}
.pdf-ctrl-btn:active {
transform: scale(0.95);
}
.pdf-ctrl-btn svg {
width: 20px;
height: 20px;
}
.zoom-level {
font-size: 0.85rem;
font-weight: 600;
color: var(--primary);
background: rgba(139, 21, 56, 0.1);
padding: 4px 10px;
border-radius: var(--radius-sm);
min-width: 50px;
text-align: center;
}
.scroll-hint {
font-size: 0.8rem;
color: #888;
display: flex;
align-items: center;
gap: 5px;
animation: pulseHint 2s ease-in-out infinite;
}
@keyframes pulseHint {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
.thumbnail-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: var(--space-xl);
}
.thumbnail-modal.active {
display: flex;
}
.thumbnail-modal-content {
background: var(--white);
border-radius: var(--radius-xl);
max-width: 800px;
width: 100%;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.thumbnail-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md) var(--space-lg);
background: var(--primary);
color: var(--white);
}
.thumbnail-header h3 {
margin: 0;
color: var(--white);
}
.close-thumbnail-btn {
width: 36px;
height: 36px;
border: none;
background: rgba(255, 255, 255, 0.2);
color: var(--white);
border-radius: var(--radius-sm);
font-size: 1.25rem;
cursor: pointer;
transition: background var(--transition);
}
.close-thumbnail-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.thumbnail-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-md);
padding: var(--space-lg);
overflow-y: auto;
}
.thumbnail-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
padding: var(--space-sm);
border-radius: var(--radius-md);
transition: all var(--transition);
border: 2px solid transparent;
}
.thumbnail-item:hover {
background: var(--cream);
border-color: var(--secondary);
}
.thumb-canvas {
max-width: 100%;
height: auto;
box-shadow: var(--shadow-sm);
border-radius: var(--radius-sm);
}
.thumb-label {
font-size: 0.85rem;
font-weight: 500;
color: var(--text);
}
@media (max-width: 991px) {
.menu-sidebar {
position: static;
}
.menu-list {
max-height: 300px;
}
.pdf-display-container {
min-height: 400px;
}
.pdf-pages-wrapper {
max-height: 500px;
padding: var(--space-md);
gap: var(--space-lg);
}
.pdf-page-label {
font-size: 0.7rem;
padding: 3px 8px;
}
.pdf-controls-bar {
justify-content: center;
padding: var(--space-sm);
}
.scroll-hint {
display: none;
}
}
@media (max-width: 576px) {
.pdf-pages-wrapper {
max-height: 400px;
padding: var(--space-sm);
}
.pdf-ctrl-btn {
width: 36px;
height: 36px;
}
.zoom-level {
font-size: 0.75rem;
padding: 3px 6px;
}
}
@media (max-width: 575px) {
.pdf-controls-bar {
justify-content: center;
}
.pdf-page-indicator {
width: 100%;
text-align: center;
order: -1;
margin-bottom: var(--space-sm);
}
.pdf-ctrl-btn {
width: 36px;
height: 36px;
}
.pdf-ctrl-btn svg {
width: 18px;
height: 18px;
}
}
@media (min-width:480px) {
.logo-text {
display: block
}
.form-row {
grid-template-columns: 1fr 1fr
}
.confirmation-actions {
flex-direction: row;
justify-content: center
}
}
@media (min-width:576px) {
.services-grid {
grid-template-columns: repeat(2, 1fr)
}
.footer-grid {
grid-template-columns: repeat(2, 1fr)
}
.menu-cards-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width:575px) {
.hero-badge {
width: 80px;
height: 80px
}
.hero-badge-inner {
width: 64px;
height: 64px
}
.hero-badge-number {
font-size: 1.5rem
}
.booking-modal {
padding: 0;
align-items: flex-end
}
.modal-container {
height: 100vh;
max-width: 100%;
border-radius: 20px 20px 0 0;
}
}
@media (max-width:767px) {
.stats-item::after {
display: none
}
.hero-description {
display: none
}
.experience-badge {
position: relative;
top: auto;
left: auto;
transform: none;
display: block;
margin: 0 auto 10px;
width: 95px !important;
height: 95px !important;
}
}
@media (min-width:768px) {
.section {
padding: var(--space-3xl) 0
}
.services-grid-new {
grid-template-columns: repeat(4, 1fr)
}
.features-images-grid {
grid-template-columns: repeat(4, 1fr)
}
.offered-grid {
grid-template-columns: repeat(2, 1fr)
}
.menu-grid {
grid-template-columns: repeat(2, 1fr)
}
.reasons-grid {
grid-template-columns: repeat(2, 1fr)
}
.awards-grid {
grid-template-columns: repeat(3, 1fr)
}
}
@media (min-width:992px) {
.navbar-toggler {
display: none
}
.navbar-menu {
position: static;
display: flex;
align-items: center;
background: transparent;
height: auto;
box-shadow: none;
padding: 0;
}
.footer-grid {
grid-template-columns: 2fr 1fr 1fr 1.5fr
}
}
@media (min-width:1200px) {
.menu-cards-grid {
grid-template-columns: repeat(4, 1fr)
}
}
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
backface-visibility: hidden;
transition: transform 0.6s ease-in-out;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
transform: translateX(-100%);
}
.carousel-control-prev,
.carousel-control-next {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 15%;
padding: 0;
color: #fff;
text-align: center;
background: none;
border: 0;
opacity: 0.5;
transition: opacity 0.15s ease;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
opacity: 0.9;
}
.carousel-control-prev {
left: 0;
}
.carousel-control-next {
right: 0;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: inline-block;
width: 2rem;
height: 2rem;
background-repeat: no-repeat;
background-position: 50%;
background-size: 100% 100%;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-indicators {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: center;
padding: 0;
margin-right: 15%;
margin-bottom: 1rem;
margin-left: 15%;
list-style: none;
}
.carousel-indicators [data-bs-target] {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 3px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.5;
transition: opacity 0.6s ease;
}
.carousel-indicators .active {
opacity: 1;
}
.about-team-carousel {
margin-bottom: var(--space-2xl);
position: relative;
overflow: hidden;
}
.about-team-carousel .carousel {
position: relative;
}
.carousel-slide {
display: flex;
height: 450px;
}
.carousel-content-side {
flex: 0 0 50%;
background-color: var(--primary);
padding: var(--space-2xl) var(--space-xl);
display: flex;
flex-direction: column;
justify-content: center;
}
.carousel-image-side {
flex: 0 0 50%;
position: relative;
overflow: hidden;
height: 450px;
}
.carousel-image-side img {
width: 100%;
height: 450px;
object-fit: cover;
object-position: top center;
display: block;
}
.carousel-emoji {
font-size: 2.5rem;
margin-bottom: var(--space-sm);
}
.carousel-title {
font-family: var(--font-secondary);
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 700;
color: var(--secondary);
margin-bottom: var(--space-md);
line-height: 1.3;
}
.carousel-description {
font-size: clamp(0.95rem, 2vw, 1.125rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0;
}
@media (max-width: 991px) {
.carousel-slide {
flex-direction: column;
height: auto;
}
.carousel-content-side {
flex: none;
padding: var(--space-xl) var(--space-lg);
text-align: center;
}
.carousel-image-side {
flex: none;
height: 350px;
}
.carousel-image-side img {
height: 350px;
object-fit: contain;
object-position: center;
background-color: #f5f5f5;
}
}
@media (max-width: 767px) {
.about-team-carousel {
margin-bottom: var(--space-xl);
}
.carousel-content-side {
padding: var(--space-lg) var(--space-md);
}
.carousel-emoji {
font-size: 2rem;
}
.carousel-image-side {
height: 280px;
}
.carousel-image-side img {
height: 280px;
object-fit: contain;
object-position: center;
background-color: #f5f5f5;
}
}
.event-slider {
background-color: #861e33;
width: 100%;
margin-bottom: 60px;
padding: 40px 20px;
position: relative;
}
.event-slider .carousel-inner {
background-color: #861e33;
}
.event-slider .carousel-item {
display: flex !important;
align-items: center !important;
}
.event-slider .row {
display: flex;
flex-wrap: nowrap;
width: 100%;
margin: 0;
}
.slider-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
width: 100%;
flex-wrap: nowrap;
}
.event-slider .col-lg-4,
.event-slider .col-md-5,
.event-slider .col-sm-12 {
flex-basis: auto;
}
.event-slider .text-box {
flex: 1;
min-width: 300px;
}
.event-slider .col-lg-8,
.event-slider .col-md-7 {
flex-basis: auto;
}
.event-slider [class*="col-"]+[class*="col-"] {
flex: 1.5;
min-width: 400px;
}
.text-box {
color: white;
padding: 30px;
display: flex;
align-items: center;
}
.text-box>div {
width: 100%;
}
.slider-title {
color: #ffc107;
margin-bottom: 15px;
font-weight: 600;
font-size: 28px;
}
.slider-description {
font-size: 18px;
color: #ddd;
line-height: 1.6;
}
.slider-image {
width: 100%;
max-width: 550px;
height: 400px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.event-slider:hover .slider-image {
transform: scale(1.02);
}
.event-slider .carousel-control-prev,
.event-slider .carousel-control-next {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 45px;
height: 45px;
top: 50%;
transform: translateY(-50%);
opacity: 0.7;
transition: opacity 0.3s ease;
}
.event-slider .carousel-control-prev:hover,
.event-slider .carousel-control-next:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 1199px) {
.event-slider {
padding: 30px 15px;
}
.slider-content {
gap: 20px;
}
.text-box {
padding: 20px;
}
.slider-image {
height: 350px;
}
.slider-title {
font-size: 24px;
margin-bottom: 10px;
}
.slider-description {
font-size: 16px;
}
}
@media (max-width: 991px) {
.event-slider {
padding: 25px 15px;
}
.event-slider .row {
flex-wrap: wrap;
}
.slider-content {
gap: 15px;
flex-wrap: wrap;
}
.text-box {
flex: 0 0 100%;
color: white;
padding: 20px;
text-align: center;
order: 1;
}
.event-slider .text-center {
flex: 0 0 100%;
order: 2;
}
.slider-image {
height: 300px;
max-width: 100%;
}
.slider-title {
font-size: 22px;
margin-bottom: 10px;
}
.slider-description {
font-size: 16px;
}
.event-slider .carousel-control-prev,
.event-slider .carousel-control-next {
width: 40px;
height: 40px;
}
}
@media (max-width: 767px) {
.event-slider {
padding: 20px 10px;
margin-bottom: 40px;
}
.slider-content {
gap: 10px;
}
.text-box {
padding: 15px;
}
.slider-image {
height: 250px;
}
.slider-title {
font-size: 20px;
margin-bottom: 10px;
}
.slider-description {
font-size: 14px;
}
.event-slider .carousel-control-prev,
.event-slider .carousel-control-next {
width: 35px;
height: 35px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.text-box {
padding-left: 30px;
}
.slider-title {
font-size: 24px;
margin-top: 15px;
}
.slider-description {
font-size: 17px;
}
.slider-image {
max-width: 100%;
height: 500px;
}
}
.about-stats {
background: var(--cream);
padding: 60px 0;
margin-top: 30px;
margin-bottom: 30px;
}
.about-stats .row {
justify-content: center;
align-items: center;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 20px;
background: #fff;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
min-height: 150px;
text-align: center;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #861e33, #fb191e);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 25px rgba(134, 30, 51, 0.3);
}
.stat-card:hover::before {
transform: scaleX(1);
}
.stat-number {
display: block;
font-size: 48px;
font-weight: 700;
color: #861e33;
margin-bottom: 10px;
font-family: 'Lato', sans-serif;
line-height: 1;
text-align: center;
}
.stat-label {
display: block;
font-size: 16px;
font-weight: 500;
color: #3a3a3a;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: 'Lato', sans-serif;
text-align: center;
}
@media (max-width: 767px) {
.about-stats {
padding: 40px 0;
}
.about-stats .container {
padding-left: 15px;
padding-right: 15px;
}
.stat-card {
padding: 25px 15px;
min-height: 120px;
margin-bottom: 15px;
margin-left: auto;
margin-right: auto;
max-width: 280px;
}
.stat-number {
font-size: 36px;
margin-bottom: 8px;
}
.stat-label {
font-size: 13px;
letter-spacing: 0.3px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.stat-card {
padding: 25px 15px;
min-height: 140px;
}
.stat-number {
font-size: 42px;
}
.stat-label {
font-size: 15px;
}
.btn-primary {
margin-top: 10px;
}
}
@media (min-width: 1200px) {
.stat-card {
padding: 35px 25px;
min-height: 160px;
}
.stat-number {
font-size: 52px;
}
.stat-label {
font-size: 17px;
}
}
.backgroundimage {
background: url(../images/about/multi-cuisine-dishes-table.jpg);
}
.commontop h4 {
font-family: 'Lato', sans-serif;
font-size: 36px;
font-weight: 400;
color: #861e33;
text-transform: capitalize;
margin: 50px 0 10px;
text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.9);
}
.commontop h2 {
font-family: 'Lato', sans-serif;
font-size: 36px;
font-weight: 400;
color: #861e33;
text-transform: capitalize;
margin: 25px 0 10px;
text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.9);
}
.commontop ul li {
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 400;
color: #3a3a3a;
line-height: 26px;
padding-left: 30px;
position: relative;
margin-bottom: 10px;
}
.goal-list {
padding-left: 0;
list-style: none;
}
.goal-list li {
color: white;
font-size: 18px;
padding-left: 30px;
position: relative;
margin-bottom: 15px;
line-height: 1.6;
}
.goal-list li::before {
content: '★';
color: #FFD700;
position: absolute;
left: 0;
top: 0;
font-size: 18px;
}
.customTop h4 {
font-family: 'Lato', sans-serif;
font-size: 36px;
font-weight: 400;
color: #861e33;
text-transform: capitalize;
margin: 10px;
text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.9);
}
.video {
margin-top: 30px;
margin-bottom: 30px;
}
.whatnew h4 {
text-align: center;
font-size: 36px;
font-weight: 400;
color: var(--primary);
text-transform: capitalize;
text-shadow: 1px 1px 1px rgb(150 150 150 / 90%);
margin-top: 33px;
}
.event-slider {
background-color: #861e33;
width: 100%;
margin-bottom: 60px;
padding: 40px 20px;
position: relative;
overflow: hidden;
}
.event-slider .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.event-slider .carousel-inner {
background-color: transparent;
border-radius: 8px;
}
.event-slider .carousel-item {
display: none;
align-items: center;
justify-content: space-between;
padding: 20px 0;
min-height: 400px;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.event-slider .carousel-item.active {
display: flex !important;
opacity: 1;
}
.event-slider .carousel-item-next,
.event-slider .carousel-item-prev {
display: flex !important;
}
.slider-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
.event-slider .text-box {
flex: 0 0 400px;
min-width: 300px;
max-width: 450px;
padding: 30px;
color: white;
display: flex;
align-items: center;
}
.text-box>div {
width: 100%;
}
.event-slider .col-lg-8,
.event-slider .col-md-7,
.event-slider .text-center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.slider-title {
color: #ffc107;
margin-bottom: 15px;
font-weight: 600;
font-size: 28px;
line-height: 1.3;
}
.slider-description {
font-size: 18px;
color: #ddd;
line-height: 1.6;
}
.slider-image {
width: 100%;
max-width: 600px;
height: 400px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-slider .carousel-item:hover .slider-image {
transform: scale(1.02);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.event-slider .carousel-control-prev,
.event-slider .carousel-control-next {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 50px;
height: 50px;
top: 50%;
transform: translateY(-50%);
opacity: 0.8;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.event-slider .carousel-control-prev {
left: 10px;
}
.event-slider .carousel-control-next {
right: 10px;
}
.event-slider .carousel-control-prev:hover,
.event-slider .carousel-control-next:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.1);
}
.event-slider .carousel-control-prev-icon,
.event-slider .carousel-control-next-icon {
width: 24px;
height: 24px;
}
@media (min-width: 1200px) {
.event-slider {
padding: 50px 30px;
}
.slider-content {
gap: 60px;
}
.event-slider .text-box {
flex: 0 0 450px;
padding: 40px;
}
.slider-image {
max-width: 650px;
height: 450px;
}
.slider-title {
font-size: 32px;
}
.slider-description {
font-size: 19px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.event-slider {
padding: 40px 20px;
}
.slider-content {
gap: 30px;
}
.event-slider .text-box {
flex: 0 0 380px;
padding: 30px;
}
.slider-image {
max-width: 550px;
height: 400px;
}
.slider-title {
font-size: 26px;
}
.slider-description {
font-size: 17px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.event-slider {
padding: 35px 20px;
}
.slider-content {
flex-direction: column;
gap: 25px;
}
.event-slider .text-box {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
text-align: center;
padding: 25px;
order: 1;
}
.event-slider .col-lg-8,
.event-slider .col-md-7,
.event-slider .text-center {
flex: 0 0 auto;
width: 100%;
order: 2;
}
.slider-image {
max-width: 100%;
height: 350px;
}
.slider-title {
font-size: 24px;
margin-bottom: 12px;
}
.slider-description {
font-size: 16px;
}
}
@media (max-width: 767px) {
.event-slider {
padding: 25px 15px;
margin-bottom: 40px;
}
.event-slider .carousel-item {
min-height: auto;
padding: 15px 0;
}
.slider-content {
flex-direction: column;
gap: 20px;
}
.event-slider .text-box {
flex: 0 0 auto;
width: 100%;
padding: 20px 15px;
text-align: center;
order: 1;
}
.event-slider .col-lg-8,
.event-slider .col-md-7,
.event-slider .text-center {
flex: 0 0 auto;
width: 100%;
order: 2;
}
.slider-image {
max-width: 100%;
height: 280px;
}
.slider-title {
font-size: 22px;
margin-bottom: 10px;
}
.slider-description {
font-size: 15px;
line-height: 1.5;
}
.event-slider .carousel-control-prev,
.event-slider .carousel-control-next {
width: 40px;
height: 40px;
}
.event-slider .carousel-control-prev {
left: 5px;
}
.event-slider .carousel-control-next {
right: 5px;
}
}
@media (max-width: 480px) {
.event-slider {
padding: 20px 10px;
}
.event-slider .text-box {
padding: 15px 10px;
}
.slider-image {
height: 220px;
}
.slider-title {
font-size: 20px;
}
.slider-description {
font-size: 14px;
}
.event-slider .carousel-control-prev,
.event-slider .carousel-control-next {
width: 35px;
height: 35px;
}
}
@keyframes fadeSlide {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.event-slider .carousel-item.active {
animation: fadeSlide 0.6s ease-out;
}
:root {
--luxury-black: #0a0a0a;
--luxury-charcoal: #1a1a1a;
--luxury-gold: #d4a84b;
--luxury-gold-light: #e8c77b;
--luxury-gold-dark: #b8922f;
--luxury-cream: #faf8f5;
--luxury-ivory: #f5f0e8;
--luxury-maroon: #6b0f2d;
--luxury-maroon-deep: #4a0a1f;
--luxury-shadow: rgba(0, 0, 0, 0.25);
}
.home-premium {
position: relative;
overflow-x: hidden;
}
.home-premium * {
box-sizing: border-box;
}
.hero.home-premium {
min-height: 100vh;
background: linear-gradient(135deg, var(--luxury-charcoal) 0%, var(--luxury-black) 50%, var(--luxury-maroon-deep) 100%);
display: flex;
align-items: center;
padding-top: 100px;
position: relative;
}
.hero.home-premium::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 20% 40%, rgba(212, 168, 75, 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(107, 15, 45, 0.2), transparent);
pointer-events: none;
z-index: 1;
}
.hero.home-premium .hero-bg {
opacity: 0.35;
filter: grayscale(20%);
}
.hero.home-premium .hero-overlay {
background: linear-gradient(180deg, rgba(10, 10, 10, 0.7) 0%, rgba(26, 26, 26, 0.5) 50%, rgba(74, 10, 31, 0.6) 100%);
}
.hero.home-premium .hero-container {
position: relative;
z-index: 5;
}
.hero.home-premium .experience-badge {
filter: drop-shadow(0 0 30px rgba(212, 168, 75, 0.6));
border-color: var(--luxury-gold);
animation: luxuryGlow 3s ease-in-out infinite;
}
@keyframes luxuryGlow {
0%,
100% {
filter: drop-shadow(0 0 20px rgba(212, 168, 75, 0.5));
}
50% {
filter: drop-shadow(0 0 40px rgba(212, 168, 75, 0.8));
}
}
.hero.home-premium .hero-content {
max-width: 900px;
margin: 0 auto;
padding: 3rem;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(212, 168, 75, 0.3);
border-radius: 30px;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hero.home-premium .hero-title {
font-size: clamp(2.2rem, 5.5vw, 4rem);
font-weight: 700;
color: #fff;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
letter-spacing: 1px;
line-height: 1.15;
margin-bottom: 1.5rem;
}
.hero.home-premium .hero-title::after {
content: '';
display: block;
width: 120px;
height: 4px;
margin: 1.2rem auto 0;
background: linear-gradient(90deg, transparent, var(--luxury-gold), transparent);
border-radius: 4px;
}
.hero.home-premium .hero-description {
font-size: clamp(1rem, 1.8vw, 1.2rem);
color: rgba(255, 255, 255, 0.9);
line-height: 1.9;
max-width: 800px;
margin: 0 auto;
}
.hero.home-premium .hero-description strong {
color: var(--luxury-gold-light);
font-weight: 600;
}
.hero.home-premium .stats-card {
margin-top: 2.5rem;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(250, 248, 245, 0.98));
border: 2px solid var(--luxury-gold);
border-radius: 24px;
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(212, 168, 75, 0.2);
overflow: hidden;
}
.hero.home-premium .stats-item {
padding: 1.5rem 1rem;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero.home-premium .stats-item:hover {
background: rgba(212, 168, 75, 0.08);
transform: scale(1.02);
}
.hero.home-premium .stats-item:not(:last-child)::after {
background: linear-gradient(180deg, transparent, var(--luxury-gold), transparent);
width: 2px;
}
.hero.home-premium .stats-icon {
width: 50px;
height: 50px;
font-size: 1.4rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.hero.home-premium .stats-label {
font-size: 0.7rem;
letter-spacing: 2px;
color: var(--luxury-gold-dark);
font-weight: 700;
}
.hero.home-premium .stats-value {
font-size: 1.3rem;
font-weight: 800;
color: var(--luxury-charcoal);
}
.services-section.home-premium,
.how-it-works-section.home-premium,
.why-choose-section.home-premium,
.awards-section.home-premium,
.faq-section.home-premium,
.cta-section.home-premium {
padding: clamp(4rem, 8vw, 7rem) 0;
position: relative;
}
.services-section.home-premium {
background: linear-gradient(180deg, var(--luxury-cream) 0%, #fff 40%, var(--luxury-ivory) 100%);
}
.how-it-works-section.home-premium {
background: linear-gradient(180deg, var(--luxury-ivory) 0%, #fff 100%);
}
.why-choose-section.home-premium {
background: linear-gradient(135deg, var(--luxury-cream) 0%, #fff 50%, var(--luxury-ivory) 100%);
}
.testimonials-section.home-premium {
background: linear-gradient(135deg, var(--luxury-maroon-deep) 0%, var(--luxury-maroon) 50%, #7a1235 100%);
padding: clamp(4rem, 8vw, 7rem) 0;
}
.awards-section.home-premium {
background: linear-gradient(180deg, #fff 0%, var(--luxury-ivory) 100%);
}
.faq-section.home-premium {
background: linear-gradient(180deg, var(--luxury-cream) 0%, #fff 100%);
}
.cta-section.home-premium {
background: linear-gradient(135deg, var(--luxury-ivory) 0%, var(--luxury-cream) 100%);
}
.home-premium .section-header {
text-align: center;
margin-bottom: 3.5rem;
}
.home-premium .section-header::before {
content: '★';
display: block;
font-size: 1.5rem;
color: var(--luxury-gold);
margin-bottom: 0.8rem;
text-shadow: 0 2px 15px rgba(212, 168, 75, 0.5);
}
.home-premium .section-title {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 700;
color: var(--luxury-charcoal);
letter-spacing: 0.5px;
margin-bottom: 0.8rem;
position: relative;
display: inline-block;
}
.home-premium .section-title::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--luxury-gold), transparent);
border-radius: 3px;
}
.home-premium .section-subtitle {
font-size: clamp(1rem, 1.6vw, 1.15rem);
color: #666;
max-width: 700px;
margin: 1.5rem auto 0;
line-height: 1.7;
}
.testimonials-section.home-premium .section-header::before {
color: var(--luxury-gold-light);
}
.testimonials-section.home-premium .section-title {
color: #fff;
}
.testimonials-section.home-premium .section-title::after {
background: linear-gradient(90deg, transparent, var(--luxury-gold-light), transparent);
}
.testimonials-section.home-premium .section-subtitle {
color: rgba(255, 255, 255, 0.8);
}
.home-premium .services-intro {
gap: 3rem;
}
.home-premium .services-intro-text {
padding: 2.5rem;
background: #fff;
border: 1px solid rgba(212, 168, 75, 0.2);
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.home-premium .services-intro-text::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--luxury-gold), var(--luxury-maroon), var(--luxury-gold));
}
.home-premium .services-description {
font-size: 1.1rem;
line-height: 2;
color: #444;
}
.home-premium .features-cta {
background: linear-gradient(135deg, #f0f9f0, #e8f5e9);
border: 1px solid rgba(76, 175, 80, 0.2);
border-radius: 16px;
padding: 1.5rem;
margin-top: 1.5rem;
}
.home-premium .services-carousel-wrapper {
padding: 1.5rem;
background: #fff;
border: 1px solid rgba(212, 168, 75, 0.15);
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}
.home-premium .service-card-new {
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(212, 168, 75, 0.15);
background: #fff;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.home-premium .service-card-new:hover {
transform: translateY(-12px) scale(1.02);
border-color: var(--luxury-gold);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.15),
0 0 0 2px rgba(212, 168, 75, 0.3);
}
.home-premium .service-card-img-new {
min-height: 160px;
position: relative;
}
.home-premium .service-card-img-new::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.4) 100%);
opacity: 0;
transition: opacity 0.4s ease;
}
.home-premium .service-card-new:hover .service-card-img-new::after {
opacity: 1;
}
.home-premium .service-card-label {
background: linear-gradient(135deg, var(--luxury-maroon), var(--luxury-maroon-deep));
color: #fff;
font-size: 0.95rem;
font-weight: 600;
padding: 1rem;
min-height: 56px;
letter-spacing: 0.3px;
}
.home-premium .carousel-btn {
width: 54px;
height: 54px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--luxury-gold);
color: var(--luxury-gold-dark);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-premium .carousel-btn:hover {
background: var(--luxury-gold);
color: #fff;
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(212, 168, 75, 0.4);
}
.home-premium .features-list-new {
padding: 2rem;
background: #fff;
border: 1px solid rgba(212, 168, 75, 0.15);
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}
.home-premium .feature-item-new {
padding: 1rem 1.2rem;
background: linear-gradient(135deg, var(--luxury-cream), #fff);
border: 1px solid rgba(212, 168, 75, 0.1);
border-radius: 14px;
margin-bottom: 0.8rem;
transition: all 0.4s ease;
}
.home-premium .feature-item-new:hover {
border-color: var(--luxury-gold);
transform: translateX(8px);
box-shadow: 0 8px 25px rgba(212, 168, 75, 0.15);
}
.home-premium .feature-item-new:last-child {
margin-bottom: 0;
}
.home-premium .feature-check {
width: 28px;
height: 28px;
background: linear-gradient(135deg, var(--luxury-maroon), var(--luxury-maroon-deep));
color: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
box-shadow: 0 4px 15px rgba(107, 15, 45, 0.3);
}
.home-premium .how-it-works-grid {
gap: 2rem;
}
.home-premium .how-step {
background: #fff;
border: 1px solid rgba(212, 168, 75, 0.15);
border-radius: 24px;
padding: 2.5rem 2rem;
text-align: center;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.home-premium .how-step::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--luxury-gold), var(--luxury-maroon));
transform: scaleX(0);
transition: transform 0.5s ease;
}
.home-premium .how-step:hover {
transform: translateY(-15px);
border-color: var(--luxury-gold);
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.12),
0 0 0 2px rgba(212, 168, 75, 0.2);
}
.home-premium .how-step:hover::before {
transform: scaleX(1);
}
.home-premium .how-step-icon {
font-size: 3rem;
margin-bottom: 1.2rem;
background: linear-gradient(135deg, var(--luxury-cream), var(--luxury-ivory));
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
border: 3px solid var(--luxury-gold);
box-shadow:
0 10px 30px rgba(212, 168, 75, 0.2),
inset 0 -5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.4s ease;
}
.home-premium .how-step:hover .how-step-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 15px 40px rgba(212, 168, 75, 0.35);
}
.home-premium .how-step h3 {
font-size: 1.3rem;
color: var(--luxury-charcoal);
margin-bottom: 0.8rem;
}
.home-premium .how-step p {
color: #666;
line-height: 1.7;
}
.home-premium .why-choose-content {
gap: 3rem;
}
.home-premium .why-choose-image {
border-radius: 24px;
overflow: hidden;
border: 3px solid var(--luxury-gold);
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.15),
0 0 0 8px rgba(212, 168, 75, 0.1);
}
.home-premium .why-choose-list {
padding: 2rem;
background: #fff;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}
.home-premium .why-choose-item {
padding: 1.5rem;
background: linear-gradient(135deg, var(--luxury-cream), #fff);
border: 1px solid rgba(212, 168, 75, 0.15);
border-radius: 18px;
margin-bottom: 1rem;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}
.home-premium .why-choose-item:last-child {
margin-bottom: 0;
}
.home-premium .why-choose-item:hover {
transform: translateX(10px);
border-color: var(--luxury-gold);
box-shadow: 0 15px 40px rgba(212, 168, 75, 0.15);
}
.home-premium .why-choose-icon {
width: 65px;
height: 65px;
background: linear-gradient(135deg, var(--luxury-maroon), var(--luxury-maroon-deep));
border-radius: 50%;
font-size: 1.6rem;
box-shadow: 0 10px 30px rgba(107, 15, 45, 0.35);
transition: all 0.4s ease;
}
.home-premium .why-choose-item:hover .why-choose-icon {
transform: scale(1.1);
box-shadow: 0 15px 40px rgba(107, 15, 45, 0.45);
}
.home-premium .why-choose-text h4 {
font-size: 1.15rem;
color: var(--luxury-charcoal);
margin-bottom: 0.5rem;
}
.home-premium .why-choose-text p {
color: #666;
line-height: 1.6;
}
.home-premium .testimonials-grid {
gap: 2rem;
}
.home-premium .testimonial-card {
background: #fff;
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(212, 168, 75, 0.2);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
position: relative;
overflow: hidden;
}
.home-premium .testimonial-card::before {
content: '"';
position: absolute;
top: 20px;
right: 25px;
font-size: 5rem;
font-family: Georgia, serif;
color: rgba(212, 168, 75, 0.15);
line-height: 1;
}
.home-premium .testimonial-card:hover {
transform: translateY(-12px);
box-shadow:
0 35px 80px rgba(0, 0, 0, 0.25),
0 0 0 2px var(--luxury-gold);
}
.home-premium .testimonial-rating {
font-size: 1.4rem;
color: var(--luxury-gold);
margin-bottom: 1.2rem;
letter-spacing: 3px;
}
.home-premium .testimonial-text {
font-size: 1.05rem;
line-height: 1.8;
color: #444;
font-style: italic;
margin-bottom: 1.5rem;
}
.home-premium .testimonial-avatar {
width: 55px;
height: 55px;
background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-light));
color: var(--luxury-maroon-deep);
font-weight: 700;
font-size: 1.1rem;
border-radius: 50%;
box-shadow: 0 8px 20px rgba(212, 168, 75, 0.3);
}
.home-premium .testimonial-info h5 {
color: var(--luxury-charcoal);
font-weight: 700;
}
.home-premium .testimonial-info p {
color: #888;
font-size: 0.9rem;
}
.home-premium .awards-grid {
gap: 1.5rem;
}
.home-premium .award-card {
background: #fff;
border: 1px solid rgba(212, 168, 75, 0.15);
border-radius: 20px;
padding: 2rem 1.5rem;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-premium .award-card:hover {
transform: translateY(-12px);
border-color: var(--luxury-gold);
box-shadow:
0 25px 60px rgba(0, 0, 0, 0.1),
0 0 0 2px rgba(212, 168, 75, 0.3);
}
.home-premium .award-icon {
width: 85px;
height: 85px;
font-size: 2.2rem;
background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-light));
border-radius: 50%;
box-shadow: 0 12px 35px rgba(212, 168, 75, 0.4);
transition: all 0.5s ease;
}
.home-premium .award-card:hover .award-icon {
transform: scale(1.15) rotate(-5deg);
box-shadow: 0 18px 45px rgba(212, 168, 75, 0.5);
}
.home-premium .award-card h4 {
font-size: 1.1rem;
color: var(--luxury-charcoal);
margin: 1rem 0 0.4rem;
}
.home-premium .award-card p {
color: #888;
font-size: 0.9rem;
}
.home-premium .faq-grid {
max-width: 950px;
margin: 0 auto;
}
.home-premium .faq-item {
background: #fff;
border: 1px solid rgba(212, 168, 75, 0.15);
border-radius: 18px;
margin-bottom: 1rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
transition: all 0.4s ease;
overflow: hidden;
}
.home-premium .faq-item:hover {
border-color: var(--luxury-gold);
box-shadow: 0 15px 40px rgba(212, 168, 75, 0.1);
}
.home-premium .faq-item.active {
border-color: var(--luxury-maroon);
box-shadow: 0 20px 50px rgba(107, 15, 45, 0.12);
}
.home-premium .faq-question {
font-size: 1.05rem;
font-weight: 600;
padding: 1.4rem 1.8rem;
color: var(--luxury-charcoal);
transition: all 0.3s ease;
}
.home-premium .faq-question:hover {
background: var(--luxury-cream);
}
.home-premium .faq-item.active .faq-question {
background: linear-gradient(135deg, var(--luxury-maroon), var(--luxury-maroon-deep));
color: #fff;
}
.home-premium .faq-icon {
width: 32px;
height: 32px;
background: rgba(107, 15, 45, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.home-premium .faq-item.active .faq-icon {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.home-premium .faq-answer p {
color: #555;
line-height: 1.8;
padding: 0 1.8rem 1.4rem;
}
.cta-section.home-premium .container {
max-width: 900px;
padding: 3.5rem;
background: #fff;
border: 2px solid var(--luxury-gold);
border-radius: 30px;
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.1),
0 0 0 8px rgba(212, 168, 75, 0.08);
position: relative;
overflow: hidden;
}
.cta-section.home-premium .container::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(212, 168, 75, 0.15), transparent 70%);
pointer-events: none;
}
.cta-section.home-premium .section-header::before {
content: '✦';
color: var(--luxury-gold);
}
.home-premium .btn {
min-height: 54px;
padding: 1rem 2.5rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 1px;
text-transform: uppercase;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.home-premium .btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
opacity: 0;
transition: opacity 0.4s ease;
}
.home-premium .btn:hover::before {
opacity: 1;
}
.home-premium .btn-primary {
background: linear-gradient(135deg, var(--luxury-maroon), var(--luxury-maroon-deep));
border: 2px solid var(--luxury-maroon);
color: #fff;
box-shadow: 0 10px 30px rgba(107, 15, 45, 0.35);
}
.home-premium .btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 18px 45px rgba(107, 15, 45, 0.45);
}
.home-premium .btn-secondary {
background: linear-gradient(135deg, var(--luxury-gold), var(--luxury-gold-dark));
border: 2px solid var(--luxury-gold);
color: #fff;
box-shadow: 0 10px 30px rgba(212, 168, 75, 0.35);
}
.home-premium .btn-secondary:hover {
transform: translateY(-4px);
box-shadow: 0 18px 45px rgba(212, 168, 75, 0.45);
}
.animate-on-scroll {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
@keyframes luxuryFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes luxuryPulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(212, 168, 75, 0.4);
}
50% {
box-shadow: 0 0 0 15px rgba(212, 168, 75, 0);
}
}
@media (max-width: 991px) {
.hero.home-premium .hero-content {
padding: 2rem;
}
.home-premium .how-step,
.home-premium .why-choose-item,
.home-premium .testimonial-card,
.home-premium .award-card {
padding: 1.8rem;
}
.cta-section.home-premium .container {
padding: 2.5rem;
}
}
@media (max-width: 767px) {
.hero.home-premium {
min-height: auto;
padding: 120px 0 80px;
}
.hero.home-premium .hero-content {
padding: 1.5rem;
border-radius: 20px;
}
.hero.home-premium .hero-title::after {
width: 80px;
}
.home-premium .section-header {
margin-bottom: 2.5rem;
}
.home-premium .services-intro-text,
.home-premium .features-list-new,
.home-premium .why-choose-list {
padding: 1.5rem;
}
.home-premium .services-carousel-wrapper {
padding: 1rem;
}
.home-premium .how-step,
.home-premium .testimonial-card,
.home-premium .award-card {
padding: 1.5rem;
border-radius: 18px;
}
.home-premium .why-choose-item {
padding: 1.2rem;
}
.home-premium .faq-question {
padding: 1.2rem;
font-size: 0.95rem;
}
.cta-section.home-premium .container {
padding: 1.8rem;
border-radius: 20px;
}
.home-premium .btn {
width: 100%;
max-width: 320px;
margin: 0 auto;
display: block;
}
.home-premium .btn+.btn {
margin-top: 1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
.home-premium .service-card-new,
.home-premium .how-step,
.home-premium .why-choose-item,
.home-premium .testimonial-card,
.home-premium .award-card,
.home-premium .faq-item,
.home-premium .btn,
.home-premium .carousel-btn,
.hero.home-premium .experience-badge {
transition: none;
animation: none;
}
}
.home-premium .container {
position: relative;
z-index: 2;
}
.hero.home-premium {
padding-top: 95px;
}
.hero.home-premium .hero-overlay {
background: linear-gradient(120deg, rgba(0, 0, 0, 0.58), rgba(139, 21, 56, 0.3));
}
.hero.home-premium .hero-content {
max-width: 880px;
padding: var(--space-lg) var(--space-xl);
border-radius: var(--radius-xl);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
border: 1px solid rgba(255, 255, 255, 0.25);
backdrop-filter: blur(4px);
box-shadow: var(--shadow-lg);
}
.home-premium .stats-card {
border: 1px solid var(--cream-dark);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}
.home-premium .stats-item {
transition: transform var(--transition), color var(--transition);
}
.home-premium .stats-item:hover {
transform: translateY(-3px);
}
.home-premium .services-intro,
.home-premium .features-with-images,
.home-premium .why-choose-content {
gap: var(--space-2xl);
}
.home-premium .services-intro-text,
.home-premium .features-list-new,
.home-premium .why-choose-list {
padding: var(--space-lg);
border-radius: var(--radius-lg);
background: var(--white);
box-shadow: var(--shadow-sm);
}
.home-premium .service-card-new,
.home-premium .how-step,
.home-premium .why-choose-item,
.home-premium .testimonial-card,
.home-premium .award-card,
.home-premium .faq-item {
border: 1px solid var(--cream-dark);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.home-premium .service-card-new:hover,
.home-premium .how-step:hover,
.home-premium .why-choose-item:hover,
.home-premium .testimonial-card:hover,
.home-premium .award-card:hover,
.home-premium .faq-item:hover {
transform: translateY(-6px);
border-color: var(--secondary);
box-shadow: var(--shadow-lg);
}
.home-premium .how-step {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.home-premium .carousel-btn {
width: 46px;
height: 46px;
border-radius: var(--radius-full);
background: var(--white);
border: 1px solid var(--cream-dark);
box-shadow: var(--shadow-sm);
}
.home-premium .carousel-btn:hover {
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.home-premium .features-cta {
border-left: none;
border: 1px solid rgba(76, 175, 80, 0.25);
box-shadow: var(--shadow-sm);
}
.home-premium .cta-section .section-header {
max-width: 700px;
margin: 0 auto;
}
.home-premium .btn {
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.home-premium .btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-color: var(--primary-dark);
}
.home-premium .btn-secondary {
background: linear-gradient(135deg, var(--secondary), var(--accent));
border-color: var(--secondary-dark);
}
.home-premium .btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.home-premium .faq-question:focus-visible,
.home-premium .btn:focus-visible,
.home-premium .carousel-btn:focus-visible,
.home-premium a:focus-visible {
outline: 2px solid var(--secondary);
outline-offset: 2px;
}
.home-premium .section-title {
margin-bottom: var(--space-md);
}
.home-premium .section-subtitle {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.home-premium .testimonial-card,
.home-premium .award-card,
.home-premium .why-choose-item,
.home-premium .faq-item {
border-radius: var(--radius-lg);
}
.animate-on-scroll {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.65s ease, transform 0.65s ease;
will-change: transform, opacity;
}
.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 991px) {
.home-premium .services-intro,
.home-premium .features-with-images,
.home-premium .why-choose-content {
gap: var(--space-lg);
}
.hero.home-premium .hero-content {
padding: var(--space-md);
}
}
@media (max-width: 767px) {
.home-premium .services-intro-text,
.home-premium .features-list-new,
.home-premium .why-choose-list {
padding: var(--space-md);
}
.home-premium .how-step,
.home-premium .testimonial-card,
.home-premium .award-card {
padding: var(--space-md);
}
}
@media (prefers-reduced-motion: reduce) {
.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
.home-premium .service-card-new,
.home-premium .how-step,
.home-premium .why-choose-item,
.home-premium .testimonial-card,
.home-premium .award-card,
.home-premium .faq-item,
.home-premium .btn,
.home-premium .carousel-btn {
transition: none;
}
}
.home-premium {
scroll-margin-top: 90px;
}
.home-premium .section-header {
margin-bottom: var(--space-xl);
}
.home-premium .section-title {
position: relative;
display: inline-block;
padding-bottom: var(--space-xs);
}
.home-premium .section-title::after {
content: '';
display: block;
width: 68px;
height: 3px;
margin: 8px auto 0;
border-radius: 10px;
background: linear-gradient(90deg, var(--secondary), var(--accent));
}
.hero.home-premium {
overflow: hidden;
}
.hero.home-premium::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 25% 20%, rgba(201, 162, 39, 0.16), transparent 55%);
pointer-events: none;
z-index: 1;
}
.hero.home-premium .hero-title {
letter-spacing: 0.25px;
}
.hero.home-premium .hero-description {
color: rgba(255, 255, 255, 0.96);
}
.hero.home-premium .experience-badge {
animation: badgeFloat 4.8s ease-in-out infinite;
}
@keyframes badgeFloat {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-5px);
}
}
.home-premium .services-carousel-wrapper {
padding: var(--space-sm);
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--cream-dark);
box-shadow: var(--shadow-sm);
}
.home-premium .service-card-label {
font-weight: 600;
}
.home-premium .feature-item-new,
.home-premium .why-choose-item,
.home-premium .faq-question,
.home-premium .testimonial-author {
align-items: center;
}
.home-premium .testimonials-section {
position: relative;
}
.home-premium .testimonials-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 18%, rgba(212, 175, 55, 0.18), transparent 40%);
pointer-events: none;
}
.home-premium .testimonial-card {
height: 100%;
}
.home-premium .faq-item {
overflow: hidden;
}
.home-premium .faq-question {
line-height: 1.4;
}
.home-premium .cta-section {
position: relative;
overflow: hidden;
}
.home-premium .cta-section::before {
content: '';
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
right: -120px;
top: -140px;
background: radial-gradient(circle, rgba(201, 162, 39, 0.22), transparent 70%);
pointer-events: none;
}
.home-premium .btn-primary,
.home-premium .btn-secondary {
position: relative;
overflow: hidden;
}
.home-premium .btn-primary::before,
.home-premium .btn-secondary::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 70%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.55s ease;
}
.home-premium .btn-primary:hover::before,
.home-premium .btn-secondary:hover::before {
left: 140%;
}
.animate-on-scroll.animated .service-card-new,
.animate-on-scroll.animated .how-step,
.animate-on-scroll.animated .why-choose-item,
.animate-on-scroll.animated .testimonial-card,
.animate-on-scroll.animated .award-card,
.animate-on-scroll.animated .faq-item {
opacity: 0;
transform: translateY(22px);
animation: royalFadeUp 0.55s ease forwards;
}
.animate-on-scroll.animated .service-card-new:nth-child(1),
.animate-on-scroll.animated .how-step:nth-child(1),
.animate-on-scroll.animated .why-choose-item:nth-child(1),
.animate-on-scroll.animated .testimonial-card:nth-child(1),
.animate-on-scroll.animated .award-card:nth-child(1),
.animate-on-scroll.animated .faq-item:nth-child(1) {
animation-delay: 0.05s;
}
.animate-on-scroll.animated .service-card-new:nth-child(2),
.animate-on-scroll.animated .how-step:nth-child(2),
.animate-on-scroll.animated .why-choose-item:nth-child(2),
.animate-on-scroll.animated .testimonial-card:nth-child(2),
.animate-on-scroll.animated .award-card:nth-child(2),
.animate-on-scroll.animated .faq-item:nth-child(2) {
animation-delay: 0.11s;
}
.animate-on-scroll.animated .service-card-new:nth-child(3),
.animate-on-scroll.animated .how-step:nth-child(3),
.animate-on-scroll.animated .why-choose-item:nth-child(3),
.animate-on-scroll.animated .testimonial-card:nth-child(3),
.animate-on-scroll.animated .award-card:nth-child(3),
.animate-on-scroll.animated .faq-item:nth-child(3) {
animation-delay: 0.17s;
}
.animate-on-scroll.animated .service-card-new:nth-child(4),
.animate-on-scroll.animated .how-step:nth-child(4),
.animate-on-scroll.animated .why-choose-item:nth-child(4),
.animate-on-scroll.animated .award-card:nth-child(4),
.animate-on-scroll.animated .faq-item:nth-child(4) {
animation-delay: 0.23s;
}
.animate-on-scroll.animated .service-card-new:nth-child(5),
.animate-on-scroll.animated .faq-item:nth-child(5) {
animation-delay: 0.29s;
}
.animate-on-scroll.animated .service-card-new:nth-child(6),
.animate-on-scroll.animated .faq-item:nth-child(6) {
animation-delay: 0.35s;
}
.animate-on-scroll.animated .service-card-new:nth-child(7),
.animate-on-scroll.animated .faq-item:nth-child(7) {
animation-delay: 0.41s;
}
.animate-on-scroll.animated .service-card-new:nth-child(8),
.animate-on-scroll.animated .faq-item:nth-child(8) {
animation-delay: 0.47s;
}
@keyframes royalFadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 767px) {
.hero.home-premium .experience-badge {
animation: none;
}
.home-premium .services-carousel-wrapper {
padding: var(--space-xs);
}
.home-premium .btn {
width: 100%;
max-width: 320px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero.home-premium .experience-badge,
.animate-on-scroll.animated .service-card-new,
.animate-on-scroll.animated .how-step,
.animate-on-scroll.animated .why-choose-item,
.animate-on-scroll.animated .testimonial-card,
.animate-on-scroll.animated .award-card,
.animate-on-scroll.animated .faq-item {
animation: none;
opacity: 1;
transform: none;
}
.home-premium .btn-primary::before,
.home-premium .btn-secondary::before {
display: none;
}
}
.hero.home-premium,
.services-section.home-premium,
.how-it-works-section.home-premium,
.why-choose-section.home-premium,
.testimonials-section.home-premium,
.awards-section.home-premium,
.faq-section.home-premium,
.cta-section.home-premium {
padding-top: clamp(2.5rem, 5vw, 4.5rem);
padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.hero.home-premium {
min-height: 100vh;
display: flex;
align-items: center;
}
.hero.home-premium .hero-container {
width: 100%;
}
.hero.home-premium .hero-content {
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.34);
background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
padding: clamp(1.2rem, 3vw, 2rem);
}
.hero.home-premium .hero-title {
font-size: clamp(2rem, 5.2vw, 3.8rem);
line-height: 1.15;
text-shadow: 0 6px 26px rgba(0, 0, 0, 0.55);
}
.hero.home-premium .hero-description {
max-width: 760px;
margin-left: auto;
margin-right: auto;
font-size: clamp(1rem, 1.6vw, 1.15rem);
}
.hero.home-premium .stats-card {
margin-top: var(--space-xl);
border-radius: 22px;
border: 1px solid #f0e3c7;
box-shadow: 0 16px 42px rgba(44, 28, 16, 0.18);
overflow: hidden;
}
.hero.home-premium .stats-item {
padding: 14px 10px;
}
.hero.home-premium .stats-label {
letter-spacing: 1.5px;
font-size: 0.67rem;
}
.hero.home-premium .stats-value {
font-size: 1.05rem;
}
.services-section.home-premium {
background: linear-gradient(180deg, #fffaf2 0%, #ffffff 35%, #fff9ef 100%);
}
.home-premium .section-header {
margin-bottom: clamp(1.4rem, 3vw, 2.1rem);
}
.home-premium .section-title {
font-size: clamp(1.7rem, 2.9vw, 2.5rem);
letter-spacing: 0.2px;
}
.home-premium .section-subtitle {
font-size: clamp(0.95rem, 1.6vw, 1.07rem);
color: #6b6060;
}
.home-premium .services-intro-text,
.home-premium .features-list-new,
.home-premium .why-choose-list {
background: linear-gradient(180deg, #ffffff, #fffcf7);
border: 1px solid #f2e8d7;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(35, 24, 18, 0.08);
}
.home-premium .services-description {
font-size: 1.03rem;
line-height: 1.9;
}
.home-premium .features-cta {
border: 1px solid #cfe7d4;
border-radius: 14px;
background: linear-gradient(135deg, #eef9f0, #dff1e1);
}
.home-premium .services-carousel-wrapper {
border-radius: 18px;
border: 1px solid #efe1c9;
background: linear-gradient(180deg, #ffffff, #fffaf3);
box-shadow: 0 12px 28px rgba(56, 36, 22, 0.08);
}
.home-premium .service-card-new {
border-radius: 14px;
border: 1px solid #f2e4cb;
background: #fff;
}
.home-premium .service-card-img-new {
min-height: 145px;
}
.home-premium .service-card-label {
background: linear-gradient(135deg, #7f1434, #a31e49);
font-size: 0.88rem;
padding: 0.72rem 0.4rem;
}
.home-premium .service-card-new.meal-box .service-card-label {
background: linear-gradient(135deg, #b78a16, #d8ad3a);
}
.home-premium .feature-item-new {
background: #fff;
border: 1px solid #efe5d4;
border-radius: 12px;
padding: 0.7rem 0.8rem;
}
.home-premium .feature-check {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(139, 21, 56, 0.1);
}
.how-it-works-section.home-premium {
background: linear-gradient(180deg, #fff 0%, #fff7ec 100%);
}
.home-premium .how-step {
border-radius: 18px;
border: 1px solid #efdfc5;
background: linear-gradient(180deg, #ffffff, #fff8ee);
box-shadow: 0 10px 25px rgba(44, 24, 14, 0.07);
}
.home-premium .how-step-icon {
box-shadow: 0 8px 24px rgba(139, 21, 56, 0.2);
}
.why-choose-section.home-premium {
background: linear-gradient(135deg, #fffaf1 0%, #fff 40%, #fff8ef 100%);
}
.home-premium .why-choose-image {
border-radius: 22px;
border: 1px solid #f0e2c9;
box-shadow: 0 20px 46px rgba(38, 24, 14, 0.13);
}
.home-premium .why-choose-item {
border: 1px solid #efe0c7;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff, #fff8f0);
box-shadow: 0 10px 28px rgba(45, 26, 16, 0.08);
}
.home-premium .why-choose-icon {
box-shadow: 0 8px 22px rgba(139, 21, 56, 0.32);
}
.testimonials-section.home-premium {
background: linear-gradient(135deg, #6f0f2d 0%, #861e33 45%, #5f1128 100%);
}
.home-premium .testimonial-card {
border-radius: 18px;
border: 1px solid rgba(139, 21, 56, 0.1);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.home-premium .testimonial-text {
min-height: 122px;
}
.awards-section.home-premium {
background: linear-gradient(180deg, #fff7ea 0%, #ffffff 100%);
}
.home-premium .award-card {
border: 1px solid #efdfc7;
border-radius: 16px;
background: linear-gradient(180deg, #fffdf9, #fff6e8);
box-shadow: 0 11px 26px rgba(48, 28, 14, 0.08);
}
.home-premium .award-icon {
box-shadow: 0 10px 22px rgba(201, 162, 39, 0.4);
}
.faq-section.home-premium {
background: linear-gradient(180deg, #fff8ee 0%, #fff 100%);
}
.home-premium .faq-item {
border: 1px solid #efdfc7;
border-radius: 14px;
background: linear-gradient(180deg, #fff, #fff9f2);
box-shadow: 0 8px 22px rgba(40, 25, 15, 0.07);
}
.home-premium .faq-question {
font-size: 1rem;
font-weight: 600;
}
.home-premium .faq-item.active {
border-color: #9a1d46;
box-shadow: 0 12px 30px rgba(139, 21, 56, 0.15);
}
.cta-section.home-premium {
background: linear-gradient(125deg, #fff9f0 0%, #fff 35%, #fff6e8 100%);
}
.cta-section.home-premium .container {
padding-top: clamp(1.2rem, 2.6vw, 2.1rem);
padding-bottom: clamp(1.2rem, 2.6vw, 2.1rem);
border: 1px solid #efdfc6;
border-radius: 20px;
background: linear-gradient(180deg, #fff, #fffaf2);
box-shadow: 0 14px 36px rgba(46, 28, 16, 0.1);
}
.home-premium .btn {
min-height: 48px;
border-radius: 999px;
font-size: 0.88rem;
letter-spacing: 0.8px;
padding-left: 1.8rem;
padding-right: 1.8rem;
}
.home-premium .btn-primary {
background: linear-gradient(135deg, #7e1434, #9e1d47);
border-color: #7b1232;
}
.home-premium .btn-secondary {
background: linear-gradient(135deg, #bb921e, #dcb148);
border-color: #b08417;
color: #fff;
}
.home-premium .btn:hover {
transform: translateY(-3px) scale(1.01);
}
.home-premium .carousel-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #ebdcc2;
background: #fff;
}
.home-premium .carousel-btn:hover {
background: #8b1538;
color: #fff;
}
.home-premium .section-header.animate-on-scroll.animated {
animation: premiumHead 0.6s ease both;
}
@keyframes premiumHead {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 991px) {
.hero.home-premium {
min-height: 84vh;
}
.home-premium .testimonial-text {
min-height: 0;
}
}
@media (max-width: 767px) {
.hero.home-premium {
min-height: 66vh;
padding-top: 88px;
}
.hero.home-premium .hero-content {
border-radius: 16px;
padding: 1rem;
}
.home-premium .section-title {
line-height: 1.2;
}
.home-premium .stats-card {
border-radius: 16px;
}
.home-premium .how-step,
.home-premium .why-choose-item,
.home-premium .testimonial-card,
.home-premium .award-card,
.home-premium .faq-item {
border-radius: 14px;
}
.cta-section.home-premium .container {
border-radius: 14px;
padding-left: 12px;
padding-right: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.home-premium .section-header.animate-on-scroll.animated {
animation: none;
}
}
:root {
--royal-maroon: #6f0f2d;
--royal-maroon-deep: #4f0a1f;
--royal-gold: #d6a93f;
--royal-ivory: #fff7eb;
}
.hero.home-premium {
background: linear-gradient(130deg, rgba(79, 10, 31, 0.88), rgba(111, 15, 45, 0.78));
}
.hero.home-premium .hero-overlay {
background: linear-gradient(120deg, rgba(79, 10, 31, 0.62), rgba(111, 15, 45, 0.35));
}
.hero.home-premium .hero-content {
background: linear-gradient(155deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
border: 1px solid rgba(255, 255, 255, 0.38);
}
.hero.home-premium .hero-title {
color: #fff;
}
.hero.home-premium .hero-title::after {
content: '';
display: block;
width: 92px;
height: 4px;
border-radius: 8px;
margin: 14px auto 0;
background: linear-gradient(90deg, var(--royal-gold), #f0cc73);
}
.hero.home-premium .stats-card {
border: 1px solid #ecd7af;
background: linear-gradient(180deg, #fffdf9, #fff6e9);
}
.hero.home-premium .stats-item:not(:last-child)::after {
background: #e7d3a9;
}
.hero.home-premium .stats-icon {
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.services-section.home-premium,
.awards-section.home-premium,
.cta-section.home-premium {
background: linear-gradient(180deg, #fff9f0 0%, #ffffff 100%);
}
.how-it-works-section.home-premium,
.faq-section.home-premium {
background: linear-gradient(180deg, #fff3df 0%, #fff9f0 100%);
}
.why-choose-section.home-premium {
background: linear-gradient(140deg, #fff7eb 0%, #fff 45%, #fff3df 100%);
}
.testimonials-section.home-premium {
background: linear-gradient(135deg, var(--royal-maroon-deep), var(--royal-maroon) 42%, #7f1738 100%);
}
.home-premium .section-header {
position: relative;
}
.home-premium .section-subtitle {
max-width: 720px;
}
.home-premium .services-section .section-header::before,
.home-premium .how-it-works-section .section-header::before,
.home-premium .why-choose-section .section-header::before,
.home-premium .awards-section .section-header::before,
.home-premium .faq-section .section-header::before,
.home-premium .cta-section .section-header::before {
content: '✦ Premium Catering';
display: block;
color: #9c6e11;
font-size: 0.75rem;
letter-spacing: 1.6px;
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 600;
}
.home-premium .services-intro-text,
.home-premium .features-list-new,
.home-premium .services-carousel-wrapper,
.home-premium .how-step,
.home-premium .why-choose-item,
.home-premium .testimonial-card,
.home-premium .award-card,
.home-premium .faq-item,
.cta-section.home-premium .container {
border: 1px solid #ecd7af;
box-shadow: 0 15px 34px rgba(56, 34, 18, 0.1);
}
.home-premium .service-card-new {
border: 1px solid #ecd8b3;
background: #fff;
}
.home-premium .service-card-new:hover {
border-color: #cea250;
box-shadow: 0 18px 34px rgba(43, 26, 13, 0.18);
}
.home-premium .service-card-label {
background: linear-gradient(135deg, var(--royal-maroon), #8d1b42);
color: #fff;
min-height: 52px;
}
.home-premium .feature-item-new {
border: 1px solid #f1dfbf;
background: linear-gradient(180deg, #fff, #fffaf2);
}
.home-premium .feature-item-new:hover {
border-color: #c99a46;
}
.home-premium .feature-check {
background: linear-gradient(135deg, var(--royal-maroon), #a7224f);
color: #fff;
}
.home-premium .how-step {
position: relative;
overflow: hidden;
}
.home-premium .how-step::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(155deg, rgba(214, 169, 63, 0.12), transparent 65%);
pointer-events: none;
}
.home-premium .how-step h3,
.home-premium .why-choose-text h4,
.home-premium .award-card h4 {
color: #5d0e25;
}
.home-premium .why-choose-icon {
background: linear-gradient(135deg, #7b1434, #5e0f28);
}
.home-premium .testimonial-card {
background: linear-gradient(180deg, #fff, #fff8ee);
}
.home-premium .testimonial-rating {
color: #be901f;
}
.home-premium .testimonial-avatar {
background: linear-gradient(135deg, #f3e5c5, #f6d89d);
color: #6a102b;
}
.home-premium .award-card {
background: linear-gradient(180deg, #fff, #fff7ec);
}
.home-premium .award-icon {
background: linear-gradient(135deg, #bf9428, #e4ba56);
}
.home-premium .faq-question {
font-family: var(--font-primary);
font-weight: 600;
}
.home-premium .faq-item.active .faq-question {
background: linear-gradient(135deg, #7a1434, #9a1e47);
color: #fff;
}
.home-premium .faq-item.active .faq-answer p {
color: #4f4444;
}
.home-premium .btn {
border-radius: 999px;
min-height: 50px;
font-weight: 700;
}
.home-premium .btn-primary {
background: linear-gradient(135deg, #7a1433, #9f1f48);
border-color: #6b0f2d;
}
.home-premium .btn-secondary {
background: linear-gradient(135deg, #bc9326, #dfb754);
border-color: #ac8120;
}
.home-premium .btn-primary:hover {
background: linear-gradient(135deg, #6a0f2b, #8d1b41);
}
.home-premium .btn-secondary:hover {
background: linear-gradient(135deg, #ae871f, #cfa94a);
}
.home-premium .carousel-btn {
border: 1px solid #e6cfaa;
color: #6f0f2d;
}
.home-premium .carousel-btn:hover {
border-color: #6f0f2d;
}
.home-premium .animate-on-scroll {
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.65, 0.25, 1);
}
@media (max-width: 991px) {
.home-premium .services-section .section-header::before,
.home-premium .how-it-works-section .section-header::before,
.home-premium .why-choose-section .section-header::before,
.home-premium .awards-section .section-header::before,
.home-premium .faq-section .section-header::before,
.home-premium .cta-section .section-header::before {
font-size: 0.68rem;
letter-spacing: 1.2px;
}
}
@media (max-width: 767px) {
.hero.home-premium .hero-title::after {
width: 72px;
margin-top: 10px;
}
.home-premium .service-card-label {
min-height: 48px;
}
.home-premium .btn {
width: 100%;
max-width: 320px;
}
.cta-section.home-premium .container {
padding-top: 1rem;
padding-bottom: 1rem;
}
}
.premium-hero {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0 56px;
overflow: hidden;
}
.premium-hero-bg {
position: absolute;
inset: 0;
background: url('../images/hero/sri-lakshmi-caterers-bangalore-banner.webp') center center / cover no-repeat;
z-index: -2;
}
@media (max-width: 768px) {
.premium-hero-bg {
background-image: url('../images/hero/sri-lakshmi-caterers-bangalore-banner-768.webp');
}
}
@media (min-width: 769px) and (max-width: 1200px) {
.premium-hero-bg {
background-image: url('../images/hero/sri-lakshmi-caterers-bangalore-banner-1200.webp');
}
}
.premium-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(139, 21, 56, 0.45) 0%, rgba(109, 16, 41, 0.50) 50%, rgba(80, 12, 30, 0.55) 100%);
z-index: -1;
}
.premium-hero-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--white);
}
.trust-ribbon {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50px;
margin-bottom: 32px;
border: 1px solid rgba(212, 175, 55, 0.3);
}
.trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 500;
color: var(--white);
}
.trust-item svg {
color: var(--accent);
}
.trust-divider {
color: rgba(255, 255, 255, 0.3);
}
.premium-hero .trust-ribbon {
margin-bottom: 24px;
}
.premium-hero-main {
max-width: 800px;
margin-bottom: 32px;
}
.premium-hero-title {
font-family: var(--font-secondary);
font-size: clamp(2.2rem, 6vw, 3.6rem);
font-weight: 700;
line-height: 1.1;
margin-bottom: 18px;
color: var(--white);
}
.premium-hero-title .title-accent {
color: var(--accent);
font-style: italic;
}
.premium-hero-title .title-location {
font-size: 0.85em;
opacity: 0.95;
}
.premium-hero-subtitle {
font-size: clamp(1rem, 2.5vw, 1.15rem);
line-height: 1.65;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 26px;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
.premium-hero-cta {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.premium-hero-cta .btn-outline-light {
background: transparent;
border: 2px solid var(--white);
color: var(--white);
padding: 14px 32px;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-outline-light {
background: transparent;
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.5);
padding: 14px 30px;
border-radius: var(--radius-md);
transition: all var(--transition);
}
.btn-outline-light:hover {
background: var(--white);
border-color: var(--white);
color: var(--primary);
}
.btn-xl {
padding: 18px 36px;
font-size: 1.1rem;
}
.premium-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
width: 100%;
max-width: 700px;
margin-bottom: 0;
}
@media (min-width: 768px) {
.premium-stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.premium-stat-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 18px 14px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all var(--transition);
}
.premium-stat-card:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-5px);
}
@media (max-width: 767px) {
.premium-hero {
min-height: 0;
padding: 84px 0 40px;
}
.premium-hero .trust-ribbon {
gap: 8px;
padding: 10px 18px;
margin-bottom: 20px;
}
.premium-hero .trust-divider {
display: none;
}
.premium-hero-main {
margin-bottom: 24px;
}
.premium-hero-title {
margin-bottom: 14px;
}
.premium-hero-subtitle {
margin-bottom: 20px;
}
.premium-stats-grid {
gap: 12px;
}
.premium-stat-card {
padding: 14px 10px;
}
}
.stat-icon-wrap {
color: var(--accent);
margin-bottom: 12px;
}
.stat-content {
text-align: center;
}
.stat-number {
display: block;
font-family: var(--font-secondary);
font-size: 1.75rem;
font-weight: 700;
color: var(--white);
line-height: 1;
}
.stat-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.7);
margin-top: 6px;
}
.scroll-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
animation: bounce 2s infinite;
}
.scroll-arrow {
animation: scrollBounce 2s infinite;
}
@keyframes scrollBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(8px);
}
}
.premium-section-header {
text-align: center;
margin-bottom: 48px;
}
.section-badge {
display: inline-block;
padding: 8px 20px;
background: linear-gradient(135deg, rgba(139, 21, 56, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
border: 1px solid rgba(139, 21, 56, 0.2);
border-radius: 50px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--primary);
margin-bottom: 16px;
}
.section-badge.dark {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: var(--accent);
}
.pure-veg-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
margin-top: 16px;
background: linear-gradient(135deg, #1e5631 0%, #2d7a41 100%);
color: var(--white);
font-size: 0.9rem;
font-weight: 600;
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 1px;
}
.pure-veg-badge svg {
color: #90EE90;
}
.premium-section-title {
font-family: var(--font-secondary);
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
color: var(--text);
margin-bottom: 16px;
line-height: 1.2;
}
.premium-section-title.light {
color: var(--white);
}
.premium-section-title.text-left {
text-align: left;
}
.text-gold {
color: var(--accent);
}
.premium-section-desc {
font-size: 1.1rem;
color: var(--text-light);
max-width: 700px;
margin: 0 auto;
line-height: 1.7;
}
.premium-section-desc.light {
color: rgba(255, 255, 255, 0.8);
}
.premium-services {
padding: 80px 0;
background: var(--cream);
}
.services-showcase {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 40px;
}
@media (min-width: 768px) {
.services-showcase {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.services-showcase {
grid-template-columns: repeat(3, 1fr);
}
}
.service-showcase-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--white);
box-shadow: var(--shadow-md);
transition: all var(--transition);
text-decoration: none;
}
.service-showcase-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
}
.service-showcase-card.featured {
grid-column: span 1;
}
@media (min-width: 1024px) {
.service-showcase-card.featured {
grid-column: span 2;
}
}
.showcase-img {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
}
.showcase-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.service-showcase-card:hover .showcase-img img {
transform: scale(1.08);
}
.showcase-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
}
.showcase-content {
padding: 24px;
}
.showcase-tag {
display: inline-block;
padding: 6px 12px;
background: var(--primary);
color: var(--white);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: var(--radius-sm);
margin-bottom: 12px;
}
.showcase-tag.veg {
background: #2e7d32;
}
.showcase-content h3 {
font-family: var(--font-secondary);
font-size: 1.25rem;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
}
.showcase-price {
display: block;
margin: -2px 0 8px;
font-size: 1rem;
font-weight: 600;
color: var(--primary);
}
.showcase-price small {
font-size: 0.78rem;
font-weight: 400;
color: var(--text-muted);
}
.showcase-content p {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 16px;
line-height: 1.5;
}
.showcase-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--primary);
transition: gap var(--transition);
}
.service-showcase-card:hover .showcase-link {
gap: 12px;
}
.services-more {
text-align: center;
margin-bottom: 48px;
}
.usp-features-bar {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 32px;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
.usp-features-bar {
grid-template-columns: repeat(4, 1fr);
}
}
.usp-feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
.usp-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(139, 21, 56, 0.1) 0%, rgba(212, 175, 55, 0.1) 100%);
border-radius: var(--radius-full);
color: var(--primary);
}
.usp-feature span {
font-size: 0.85rem;
font-weight: 500;
color: var(--text);
}
.premium-process {
padding: 80px 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.process-timeline {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
margin-bottom: 48px;
}
@media (min-width: 992px) {
.process-timeline {
flex-direction: row;
justify-content: center;
gap: 16px;
}
}
.process-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 24px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
flex: 1;
max-width: 280px;
transition: all var(--transition);
}
.process-step:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
}
.process-step::before {
content: attr(data-step);
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
padding: 4px 12px;
background: var(--accent);
color: var(--black);
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--radius-sm);
}
.process-icon {
color: var(--accent);
margin-bottom: 16px;
}
.process-step h3 {
font-size: 1.1rem;
color: var(--white);
margin-bottom: 8px;
}
.process-step p {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.5;
}
.process-connector {
width: 2px;
height: 40px;
background: linear-gradient(to bottom, var(--accent), transparent);
}
@media (min-width: 992px) {
.process-connector {
width: 60px;
height: 2px;
background: linear-gradient(to right, var(--accent), transparent);
}
}
.process-cta {
text-align: center;
}
.premium-pricing {
padding: 80px 0;
background: var(--cream);
}
.pricing-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-top: 48px;
}
@media (min-width: 768px) {
.pricing-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.pricing-cards-grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
.pricing-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: all var(--transition);
border: 2px solid transparent;
}
.pricing-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary);
}
.pricing-card.featured {
position: relative;
}
.pricing-card.featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}
.pricing-card-header {
padding: 32px 24px 24px;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.pricing-card-header h3 {
font-family: var(--font-secondary);
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
.pricing-subtitle {
font-size: 1rem;
font-weight: 500;
color: var(--primary);
margin: 0;
}
.pricing-card-body {
padding: 24px;
flex: 1;
}
.pricing-features {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-features li {
position: relative;
padding: 12px 0;
padding-left: 0;
font-size: 0.95rem;
color: var(--text);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
text-align: center;
}
.pricing-features li:last-child {
border-bottom: none;
}
.pricing-card-footer {
padding: 24px;
padding-top: 0;
}
.btn-block {
display: block;
width: 100%;
text-align: center;
}
.veg-badge-highlight {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: linear-gradient(135deg, #2d6a4f 0%, #40916c 100%);
color: var(--white);
font-size: 0.85rem;
font-weight: 600;
border-radius: 50px;
margin-top: 24px;
}
.veg-badge-highlight svg {
width: 16px;
height: 16px;
}
.premium-why-choose {
padding: 80px 0;
background: var(--white);
overflow: hidden;
}
.why-choose-wrapper {
display: flex;
flex-direction: column;
gap: 48px;
}
@media (min-width: 992px) {
.why-choose-wrapper {
flex-direction: row;
gap: 60px;
align-items: stretch;
}
}
.why-choose-visual {
position: relative;
flex: 0 0 45%;
max-width: 500px;
margin: 0 auto;
}
@media (min-width: 992px) {
.why-choose-visual {
margin: 0;
}
}
.why-choose-visual .main-image {
position: relative;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
}
.why-choose-visual .main-image img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 400px;
border-radius: var(--radius-lg);
}
.floating-card {
position: absolute;
padding: 12px 16px;
background: var(--white);
border-radius: var(--radius-md);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
animation: float 3s ease-in-out infinite;
z-index: 10;
}
.rating-card {
top: 15px;
right: -20px;
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 767px) {
.rating-card {
right: 10px;
top: 10px;
}
}
.rating-stars {
display: flex;
gap: 1px;
}
.rating-stars svg {
width: 14px;
height: 14px;
}
.rating-value {
font-family: var(--font-secondary);
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.rating-text {
font-size: 0.7rem;
color: var(--text-light);
white-space: nowrap;
}
.events-card {
bottom: 15px;
left: -20px;
text-align: center;
animation-delay: 1.5s;
padding: 14px 20px;
}
@media (max-width: 767px) {
.events-card {
left: 10px;
bottom: 10px;
}
}
.events-number {
display: block;
font-family: var(--font-secondary);
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
line-height: 1.2;
}
.events-text {
font-size: 0.7rem;
color: var(--text-light);
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.why-choose-content {
flex: 1;
display: flex;
flex-direction: column;
}
.why-choose-content .section-badge {
margin-bottom: 16px;
display: inline-block;
align-self: flex-start;
}
.why-choose-content .premium-section-title {
margin-bottom: 20px;
text-align: left;
}
.why-choose-intro {
font-size: 1rem;
color: var(--text-light);
margin-bottom: 28px;
line-height: 1.7;
}
.why-features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 28px;
}
@media (min-width: 576px) {
.why-features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px 24px;
}
}
.why-feature {
display: flex;
gap: 12px;
align-items: flex-start;
}
.why-feature-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(139, 21, 56, 0.08) 0%, rgba(212, 175, 55, 0.08) 100%);
border-radius: var(--radius-full);
color: var(--primary);
border: 1px solid rgba(139, 21, 56, 0.1);
}
.why-feature-icon svg {
width: 22px;
height: 22px;
}
.why-feature-text {
flex: 1;
}
.why-feature-text h4 {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
font-family: var(--font-primary);
}
.why-feature-text p {
font-size: 0.8rem;
color: var(--text-light);
line-height: 1.45;
margin: 0;
}
.why-choose-content .btn-primary {
align-self: flex-start;
white-space: nowrap;
padding: 14px 28px;
font-size: 0.95rem;
}
.testimonials-slider {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 48px;
}
@media (min-width: 768px) {
.testimonials-slider {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.testimonials-slider {
grid-template-columns: repeat(3, 1fr);
}
}
.testimonial-card-premium {
position: relative;
padding: 32px;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition);
}
.testimonial-card-premium:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.testimonial-quote {
position: absolute;
top: 20px;
right: 20px;
color: var(--primary);
}
.testimonial-rating {
display: flex;
gap: 4px;
margin-bottom: 16px;
}
.testimonial-text-premium {
font-size: 1rem;
color: var(--text);
line-height: 1.7;
margin-bottom: 24px;
font-style: italic;
}
.testimonial-author-premium {
display: flex;
align-items: center;
gap: 12px;
}
.author-avatar {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
font-weight: 600;
border-radius: var(--radius-full);
}
.author-info {
flex: 1;
}
.author-info h5 {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.author-info p {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
}
.google-badge {
flex-shrink: 0;
}
.trust-indicators-bar {
display: flex;
justify-content: center;
gap: 48px;
flex-wrap: wrap;
padding: 32px;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.trust-indicator {
text-align: center;
}
.trust-number {
display: block;
font-family: var(--font-secondary);
font-size: 2rem;
font-weight: 700;
color: var(--primary);
}
.trust-label {
font-size: 0.85rem;
color: var(--text-light);
}
.premium-awards {
padding: 80px 0;
background: var(--white);
}
.awards-showcase {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (min-width: 768px) {
.awards-showcase {
grid-template-columns: repeat(4, 1fr);
}
}
.award-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 20px;
background: var(--cream);
border-radius: var(--radius-lg);
border: 1px solid rgba(139, 21, 56, 0.1);
transition: all var(--transition);
}
.award-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.award-icon-wrap {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--accent);
border-radius: var(--radius-full);
margin-bottom: 16px;
}
.award-item h4 {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.award-item p {
font-size: 0.85rem;
color: var(--text-muted);
margin: 0;
}
.premium-faq {
padding: 80px 0;
background: var(--cream);
}
.faq-accordion {
max-width: 800px;
margin: 0 auto 40px;
}
.faq-item-premium {
background: var(--white);
border-radius: var(--radius-md);
margin-bottom: 12px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.faq-trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: none;
border: none;
font-size: 1rem;
font-weight: 500;
color: var(--text);
text-align: left;
cursor: pointer;
transition: all var(--transition);
}
.faq-trigger:hover {
background: rgba(139, 21, 56, 0.03);
}
.faq-trigger[aria-expanded="true"] {
color: var(--primary);
}
.faq-chevron {
flex-shrink: 0;
transition: transform var(--transition);
color: var(--text-muted);
}
.faq-trigger[aria-expanded="true"] .faq-chevron {
transform: rotate(180deg);
color: var(--primary);
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition);
}
.faq-content>div {
padding: 0 24px 24px;
}
.faq-content p {
font-size: 0.95rem;
color: var(--text-light);
line-height: 1.7;
}
.faq-cta {
text-align: center;
}
.faq-cta p {
margin-bottom: 16px;
color: var(--text-light);
}
.premium-dishes {
padding: 80px 0;
background: var(--white);
}
.dishes-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-bottom: 40px;
}
@media (min-width: 768px) {
.dishes-gallery {
grid-template-columns: repeat(4, 1fr);
}
}
.dish-card {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--cream);
box-shadow: var(--shadow-md);
transition: all var(--transition);
}
.dish-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.dish-image {
aspect-ratio: 4/3;
overflow: hidden;
}
.dish-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.dish-card:hover .dish-image img {
transform: scale(1.1);
}
.dish-info {
padding: 20px;
}
.dish-info h4 {
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.dish-info p {
font-size: 0.85rem;
color: var(--text-light);
line-height: 1.5;
margin: 0;
}
.dishes-cta {
text-align: center;
}
.premium-areas {
padding: 60px 0;
background: var(--cream);
}
.areas-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.area-tag {
padding: 10px 20px;
background: var(--white);
border: 1px solid rgba(139, 21, 56, 0.15);
border-radius: 50px;
font-size: 0.9rem;
color: var(--text);
transition: all var(--transition);
}
.area-tag:hover {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
.area-tag.highlight {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
font-weight: 600;
}
.premium-cta {
padding: 80px 0;
background: var(--cream);
}
.cta-wrapper {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.premium-cta .cta-content h2 {
font-family: var(--font-secondary);
font-size: clamp(1.75rem, 4vw, 2.5rem);
color: var(--primary);
margin-bottom: 16px;
}
.premium-cta .cta-content>p {
font-size: 1.1rem;
color: var(--text);
margin-bottom: 32px;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.cta-guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--text-light);
font-size: 0.9rem;
flex-wrap: wrap;
text-align: center;
padding: 0 15px;
}
.cta-guarantee svg {
color: var(--accent);
flex-shrink: 0;
}
.btn-outline-primary {
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
padding: 14px 28px;
border-radius: var(--radius-md);
font-weight: 600;
transition: all var(--transition);
}
.btn-outline-primary:hover {
background: var(--primary);
color: var(--white);
}
[data-animate] {
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate].animated {
opacity: 1;
transform: none !important;
}
[data-animate="fade-up"] {
transform: translateY(40px);
}
[data-animate="fade-down"] {
transform: translateY(-40px);
}
[data-animate="fade-left"] {
transform: translateX(30px);
}
[data-animate="fade-right"] {
transform: translateX(-30px);
}
@media (max-width: 767px) {
[data-animate="fade-left"],
[data-animate="fade-right"] {
transform: translateY(30px);
}
}
[data-animate="scale-up"] {
transform: scale(0.9);
}
[data-animate="zoom-in"] {
transform: scale(0.85);
}
[data-delay="100"] {
transition-delay: 100ms;
}
[data-delay="200"] {
transition-delay: 200ms;
}
[data-delay="300"] {
transition-delay: 300ms;
}
[data-delay="400"] {
transition-delay: 400ms;
}
[data-delay="500"] {
transition-delay: 500ms;
}
[data-delay="600"] {
transition-delay: 600ms;
}
[data-delay="700"] {
transition-delay: 700ms;
}
[data-delay="800"] {
transition-delay: 800ms;
}
.service-showcase-card {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-showcase-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 25px 50px rgba(139, 21, 56, 0.2);
}
.service-showcase-card:hover .showcase-img img {
transform: scale(1.1);
}
.service-showcase-card:hover .showcase-overlay {
opacity: 0.4;
}
.service-showcase-card:hover .showcase-link {
transform: translateX(8px);
}
.showcase-link {
transition: transform 0.3s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.premium-stat-card {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s ease;
}
.premium-stat-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.premium-stat-card:hover .stat-icon-wrap {
transform: scale(1.1) rotate(5deg);
}
.stat-icon-wrap {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.process-step {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease;
}
.process-step:hover {
transform: translateY(-8px);
}
.process-step:hover .process-icon {
transform: scale(1.15);
background: var(--primary);
}
.process-step:hover .process-icon svg {
stroke: var(--white);
}
.process-icon {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
background 0.3s ease;
}
.why-feature {
transition: transform 0.3s ease, background 0.3s ease;
padding: 12px;
border-radius: var(--radius-md);
}
.why-feature:hover {
transform: translateX(8px);
background: rgba(139, 21, 56, 0.05);
}
.why-feature:hover .why-feature-icon {
transform: scale(1.1);
}
.why-feature-icon {
transition: transform 0.3s ease;
}
.testimonial-card-premium {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease;
}
.testimonial-card-premium:hover {
transform: translateY(-8px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}
.award-item {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease;
}
.award-item:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(139, 21, 56, 0.15);
}
.award-item:hover .award-icon-wrap {
transform: scale(1.1) rotate(10deg);
}
.award-icon-wrap {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dish-card {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease;
}
.dish-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.dish-card:hover .dish-image img {
transform: scale(1.1);
}
.dish-image {
overflow: hidden;
}
.dish-image img {
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-tag {
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.area-tag:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(139, 21, 56, 0.2);
}
.faq-item-premium {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.faq-item-premium:hover {
transform: translateX(5px);
}
.usp-feature {
transition: transform 0.3s ease, background 0.3s ease;
padding: 8px 12px;
border-radius: var(--radius-md);
}
.usp-feature:hover {
transform: translateY(-5px);
background: rgba(139, 21, 56, 0.05);
}
.usp-feature:hover .usp-icon {
transform: scale(1.15);
}
.usp-icon {
transition: transform 0.3s ease;
}
.floating-card {
animation: float 3s ease-in-out infinite;
}
.rating-card {
animation-delay: 0s;
}
.events-card {
animation-delay: 1.5s;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.trust-indicator {
transition: transform 0.3s ease;
}
.trust-indicator:hover {
transform: scale(1.05);
}
.premium-section-header {
transition: opacity 0.3s ease;
}
.btn-gold,
.btn-primary {
position: relative;
overflow: hidden;
}
.btn-gold::after,
.btn-primary::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.btn-gold:hover::after,
.btn-primary:hover::after {
width: 300px;
height: 300px;
}
@media (prefers-reduced-motion: reduce) {
[data-animate] {
opacity: 1;
transform: none !important;
transition: none !important;
}
.service-showcase-card,
.premium-stat-card,
.process-step,
.why-feature,
.testimonial-card-premium,
.award-item,
.dish-card,
.area-tag,
.faq-item-premium,
.usp-feature,
.floating-card,
.trust-indicator {
transition: none !important;
animation: none !important;
}
}
.brahmin-hero {
min-height: auto;
background: linear-gradient(135deg, #fdf8f4 0%, #fff9f5 50%, #f8f0ea 100%);
position: relative;
overflow: hidden;
padding: 100px 0 50px;
}
.brahmin-hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 100%;
background: linear-gradient(135deg, var(--primary) 0%, #6b1a28 100%);
clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
z-index: 0;
}
.brahmin-hero-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--space-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
position: relative;
z-index: 1;
}
.brahmin-hero-content {
padding-right: var(--space-xl);
}
.brahmin-hero .breadcrumb-nav {
margin-bottom: var(--space-lg);
font-size: 0.9rem;
}
.brahmin-hero .breadcrumb-nav a {
color: var(--text-light);
text-decoration: none;
}
.brahmin-hero .breadcrumb-nav a:hover {
color: var(--primary);
}
.brahmin-hero .breadcrumb-nav span {
color: var(--text-muted);
margin: 0 6px;
}
.brahmin-hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, var(--primary) 0%, #9b2d3a 100%);
color: var(--white);
padding: 10px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: var(--space-lg);
animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(139, 35, 50, 0.4);
}
50% {
box-shadow: 0 0 0 10px rgba(139, 35, 50, 0);
}
}
.brahmin-hero-title {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
color: var(--dark);
line-height: 1.15;
margin-bottom: var(--space-lg);
}
.brahmin-hero-title .highlight {
color: var(--primary);
position: relative;
}
.brahmin-hero-title .highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 12px;
background: rgba(139, 35, 50, 0.15);
z-index: -1;
transform: skewX(-5deg);
}
.brahmin-hero-desc {
font-size: 1.15rem;
color: var(--text);
line-height: 1.8;
margin-bottom: var(--space-xl);
}
.brahmin-usp-pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: var(--space-xl);
}
.usp-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--white);
border: 2px solid #e8ddd5;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
color: var(--text);
transition: all 0.3s ease;
}
.usp-pill svg {
color: var(--success);
flex-shrink: 0;
}
.usp-pill:hover {
border-color: var(--primary);
background: #fdf5f5;
}
.brahmin-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: var(--space-xl);
}
.brahmin-hero-cta .btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
font-weight: 600;
border-radius: 10px;
}
.btn-glow {
box-shadow: 0 8px 30px rgba(139, 35, 50, 0.35);
animation: btnGlow 2s ease-in-out infinite;
}
@keyframes btnGlow {
0%,
100% {
box-shadow: 0 8px 30px rgba(139, 35, 50, 0.35);
}
50% {
box-shadow: 0 8px 45px rgba(139, 35, 50, 0.5);
}
}
.btn-outline-dark {
background: transparent;
border: 2px solid var(--dark);
color: var(--dark);
}
.btn-outline-dark:hover {
background: var(--dark);
color: var(--white);
}
.brahmin-trust-metrics {
display: flex;
align-items: center;
gap: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid #e8ddd5;
}
.trust-metric {
text-align: center;
}
.metric-value {
display: block;
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 800;
color: var(--primary);
}
.metric-label {
font-size: 0.85rem;
color: var(--text-light);
}
.trust-divider {
width: 1px;
height: 40px;
background: #e8ddd5;
}
.brahmin-hero-visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-xl);
}
.visual-main-image {
position: relative;
width: 100%;
max-width: 480px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
transform: rotate(2deg);
animation: heroImageFloat 6s ease-in-out infinite;
}
@keyframes heroImageFloat {
0%,
100% {
transform: rotate(2deg) translateY(0);
}
50% {
transform: rotate(2deg) translateY(-15px);
}
}
.visual-main-image img {
width: 100%;
height: 320px;
object-fit: cover;
}
.visual-float-card {
position: absolute;
background: var(--white);
padding: 16px 20px;
border-radius: 14px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
animation: floatCard 4s ease-in-out infinite;
}
.visual-float-card.card-top {
top: 10%;
left: -30px;
animation-delay: 0s;
}
.visual-float-card.card-bottom {
bottom: 15%;
right: -40px;
animation-delay: 2s;
}
@keyframes floatCard {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.float-icon {
font-size: 2rem;
}
.float-content {
display: flex;
flex-direction: column;
}
.float-number {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 700;
color: var(--primary);
}
.float-label {
font-size: 0.8rem;
color: var(--text-light);
}
.visual-accent-circle {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
border: 3px dashed rgba(255, 255, 255, 0.3);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: rotateCircle 30s linear infinite;
pointer-events: none;
}
@keyframes rotateCircle {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.brahmin-cooking-style {
padding: var(--space-3xl) 0;
background: var(--white);
}
.cooking-style-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.cooking-style-visual {
position: relative;
}
.style-image-stack {
position: relative;
height: 500px;
}
.style-image-stack img {
position: absolute;
border-radius: 16px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
object-fit: cover;
}
.stack-img-1 {
width: 70%;
height: 360px;
top: 0;
left: 0;
z-index: 1;
}
.stack-img-2 {
width: 60%;
height: 280px;
bottom: 0;
right: 0;
z-index: 2;
border: 5px solid var(--white);
}
.style-experience-badge {
position: absolute;
bottom: 80px;
left: 55%;
background: linear-gradient(135deg, var(--gold) 0%, #d4a544 100%);
color: var(--white);
padding: 20px;
border-radius: 16px;
text-align: center;
z-index: 3;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.exp-years {
display: block;
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 800;
}
.exp-text {
font-size: 0.85rem;
font-weight: 500;
line-height: 1.4;
}
.cooking-style-content .section-label {
display: inline-block;
background: linear-gradient(90deg, var(--primary), #9b2d3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--space-md);
}
.cooking-style-content h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 700;
color: var(--dark);
margin-bottom: var(--space-lg);
line-height: 1.3;
}
.cooking-style-content .text-accent {
color: var(--primary);
}
.cooking-style-content .lead-text {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text);
margin-bottom: var(--space-xl);
}
.cooking-principles {
display: flex;
flex-direction: column;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.principle-item {
display: flex;
gap: var(--space-md);
align-items: flex-start;
}
.principle-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #fdf5f5 0%, #f8e8ea 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.principle-icon svg {
color: var(--primary);
}
.principle-text h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--dark);
margin-bottom: 4px;
}
.principle-text p {
font-size: 0.95rem;
color: var(--text-light);
margin: 0;
}
.brahmin-ceremonies {
padding: var(--space-3xl) 0;
background: linear-gradient(135deg, var(--primary) 0%, #5a1520 100%);
position: relative;
}
.brahmin-ceremonies::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
.ceremonies-header {
text-align: center;
margin-bottom: var(--space-2xl);
position: relative;
z-index: 1;
}
.ceremonies-header .section-label.light {
color: rgba(255, 255, 255, 0.8);
}
.ceremonies-header h2 {
color: var(--white);
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: var(--space-md);
}
.ceremonies-header p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.ceremonies-showcase {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
position: relative;
z-index: 1;
}
.ceremony-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: var(--space-xl);
backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
position: relative;
overflow: hidden;
}
.ceremony-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--gold), #e8c868);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.ceremony-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-8px);
border-color: rgba(255, 255, 255, 0.3);
}
.ceremony-card:hover::before {
transform: scaleX(1);
}
.ceremony-icon {
font-size: 2.5rem;
margin-bottom: var(--space-md);
}
.ceremony-content h3 {
color: var(--white);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: var(--space-sm);
}
.ceremony-content p {
color: rgba(255, 255, 255, 0.75);
font-size: 0.95rem;
margin-bottom: var(--space-md);
line-height: 1.6;
}
.ceremony-features {
list-style: none;
padding: 0;
margin: 0 0 var(--space-md);
}
.ceremony-features li {
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
padding: 6px 0;
padding-left: 20px;
position: relative;
}
.ceremony-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--gold);
font-weight: bold;
}
.ceremony-cta {
color: var(--gold);
font-weight: 600;
font-size: 0.95rem;
transition: color 0.3s ease;
}
.ceremony-card:hover .ceremony-cta {
color: #f5d980;
}
.brahmin-regional-cuisine {
padding: var(--space-3xl) 0;
background: linear-gradient(to bottom, var(--cream), var(--white));
}
.regional-header {
text-align: center;
margin-bottom: var(--space-2xl);
}
.regional-header .section-label {
display: inline-block;
background: linear-gradient(90deg, var(--primary), #9b2d3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--space-md);
}
.regional-header h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--dark);
margin-bottom: var(--space-md);
}
.regional-header p {
color: var(--text-light);
font-size: 1.1rem;
}
.regional-tabs {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: var(--space-2xl);
flex-wrap: wrap;
}
.regional-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--white);
border: 2px solid #e8ddd5;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
color: var(--text);
cursor: pointer;
transition: all 0.3s ease;
}
.regional-tab:hover {
border-color: var(--primary);
}
.regional-tab.active {
background: var(--primary);
border-color: var(--primary);
color: var(--white);
}
.regional-tab .tab-icon {
font-size: 1.3rem;
}
.regional-content {
position: relative;
}
.regional-panel {
display: none;
animation: fadeIn 0.4s ease;
}
.regional-panel.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.regional-panel-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-2xl);
align-items: center;
background: var(--white);
border-radius: 24px;
padding: var(--space-2xl);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
.regional-info h3 {
font-family: var(--font-heading);
font-size: 1.8rem;
color: var(--dark);
margin-bottom: var(--space-md);
}
.regional-info>p {
color: var(--text-light);
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: var(--space-xl);
}
.regional-menu-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.menu-column h4 {
font-size: 1rem;
color: var(--primary);
margin-bottom: var(--space-sm);
}
.menu-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu-column li {
padding: 8px 0;
color: var(--text);
font-size: 0.95rem;
border-bottom: 1px dashed #e8ddd5;
}
.menu-column li:last-child {
border-bottom: none;
}
.regional-image {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.regional-image img {
width: 100%;
height: 350px;
object-fit: cover;
transition: transform 0.5s ease;
}
.regional-image:hover img {
transform: scale(1.05);
}
.brahmin-gallery {
padding: var(--space-3xl) 0;
background: linear-gradient(135deg, var(--dark) 0%, #1a1a2e 100%);
}
.gallery-header {
text-align: center;
margin-bottom: var(--space-2xl);
}
.gallery-header .section-label.light {
color: var(--gold);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--space-md);
display: block;
}
.gallery-header h2 {
color: var(--white);
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
}
.gallery-carousel {
position: relative;
overflow: hidden;
padding: 0 60px;
}
.gallery-track {
display: flex;
gap: 24px;
transition: transform 0.5s ease;
}
.gallery-slide {
flex: 0 0 calc(33.333% - 16px);
position: relative;
border-radius: 16px;
overflow: hidden;
}
.gallery-slide img {
width: 100%;
height: 280px;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-slide:hover img {
transform: scale(1.1);
}
.slide-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: var(--white);
font-weight: 500;
}
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: var(--white);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 2;
}
.gallery-nav:hover {
background: var(--primary);
color: var(--white);
}
.gallery-nav.prev {
left: 0;
}
.gallery-nav.next {
right: 0;
}
.gallery-cta {
text-align: center;
margin-top: var(--space-2xl);
}
.btn-outline-light {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
padding: 14px 32px;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-outline-light:hover {
background: var(--primary);
color: var(--white);
}
.brahmin-pricing {
padding: var(--space-3xl) 0;
background: var(--white);
}
.pricing-header {
text-align: center;
margin-bottom: var(--space-2xl);
}
.pricing-header .section-label {
display: inline-block;
background: linear-gradient(90deg, var(--primary), #9b2d3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--space-md);
}
.pricing-header h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--dark);
margin-bottom: var(--space-md);
}
.pricing-header p {
color: var(--text-light);
font-size: 1.1rem;
}
.brahmin-pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
max-width: 1200px;
margin: 0 auto;
}
.brahmin-price-card {
background: var(--white);
border-radius: 20px;
padding: var(--space-xl);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.brahmin-price-card:hover {
transform: translateY(-10px);
border-color: var(--primary);
box-shadow: 0 20px 60px rgba(139, 35, 50, 0.15);
}
.brahmin-price-card.featured {
background: linear-gradient(135deg, var(--primary) 0%, #6b1a28 100%);
color: var(--white);
transform: scale(1.05);
}
.brahmin-price-card.featured:hover {
transform: scale(1.05) translateY(-10px);
border-color: var(--gold);
}
.price-card-top {
text-align: center;
padding-bottom: var(--space-lg);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: var(--space-lg);
}
.brahmin-price-card.featured .price-card-top {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
.package-type {
display: inline-block;
background: rgba(139, 35, 50, 0.1);
color: var(--primary);
padding: 6px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: var(--space-md);
}
.brahmin-price-card.featured .package-type {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
}
.price-card-top h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
margin-bottom: var(--space-sm);
}
.guest-count {
font-size: 1.1rem;
color: var(--text-light);
margin: 0;
}
.brahmin-price-card.featured .guest-count {
color: rgba(255, 255, 255, 0.85);
}
.price-card-body {
padding: var(--space-md) 0;
}
.package-features {
list-style: none;
padding: 0;
margin: 0;
}
.package-features li {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
font-size: 0.95rem;
}
.brahmin-price-card.featured .package-features li {
border-bottom-color: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.95);
}
.package-features li:last-child {
border-bottom: none;
}
.package-features .check {
color: var(--success);
font-weight: 700;
}
.brahmin-price-card.featured .package-features .check {
color: var(--gold);
}
.price-card-footer {
padding-top: var(--space-lg);
}
.btn-block {
width: 100%;
padding: 14px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 10px;
}
.brahmin-testimonials {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.testimonials-header {
text-align: center;
margin-bottom: var(--space-2xl);
}
.testimonials-header .section-label {
display: inline-block;
background: linear-gradient(90deg, var(--primary), #9b2d3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--space-md);
}
.testimonials-header h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--dark);
margin-bottom: var(--space-md);
}
.testimonials-header p {
color: var(--text-light);
font-size: 1.05rem;
max-width: 700px;
margin: 0 auto;
line-height: 1.7;
}
.brahmin-pricing-new {
padding: var(--space-3xl) 0;
background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}
.pricing-header-new {
text-align: center;
margin-bottom: var(--space-2xl);
}
.pricing-header-new .section-label {
display: inline-block;
background: linear-gradient(90deg, var(--primary), #9b2d3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--space-md);
}
.pricing-header-new h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 2.8rem);
color: var(--dark);
margin-bottom: var(--space-md);
}
.pricing-header-new p {
color: var(--text-light);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
}
.brahmin-packages-wrapper {
display: flex;
flex-direction: column;
gap: var(--space-lg);
max-width: 1000px;
margin: 0 auto;
}
.package-row {
display: grid;
grid-template-columns: 250px 1fr 150px;
align-items: center;
gap: var(--space-xl);
background: var(--white);
padding: var(--space-xl) var(--space-2xl);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 2px solid transparent;
transition: all 0.3s ease;
position: relative;
}
.package-row:hover {
border-color: var(--primary);
box-shadow: 0 8px 35px rgba(139, 35, 50, 0.12);
transform: translateX(5px);
}
.package-row.featured {
background: linear-gradient(135deg, var(--primary) 0%, #7d2233 100%);
border-color: transparent;
}
.package-row.featured:hover {
border-color: var(--gold);
transform: translateX(5px);
}
.popular-tag {
position: absolute;
top: -12px;
left: 30px;
background: linear-gradient(135deg, var(--gold) 0%, #e8c868 100%);
color: var(--dark);
padding: 6px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.package-left {
display: flex;
align-items: center;
gap: var(--space-md);
}
.package-icon {
font-size: 2.5rem;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(139, 35, 50, 0.08);
border-radius: 12px;
}
.package-row.featured .package-icon {
background: rgba(255, 255, 255, 0.15);
}
.package-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.package-badge {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--primary);
}
.package-row.featured .package-badge {
color: var(--gold);
}
.package-info h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--dark);
margin: 0;
}
.package-row.featured .package-info h3 {
color: var(--white);
}
.guest-range {
font-size: 0.9rem;
color: var(--text-light);
}
.package-row.featured .guest-range {
color: rgba(255, 255, 255, 0.8);
}
.package-middle {
flex: 1;
}
.package-features-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.feature-tag {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: rgba(139, 35, 50, 0.06);
border-radius: 20px;
font-size: 0.85rem;
color: var(--text);
font-weight: 500;
}
.package-row.featured .feature-tag {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.95);
}
.package-right {
display: flex;
justify-content: flex-end;
}
.package-right .btn {
padding: 12px 24px;
font-weight: 600;
border-radius: 8px;
white-space: nowrap;
}
.pricing-note {
text-align: center;
margin-top: var(--space-xl);
padding: var(--space-lg);
background: rgba(139, 35, 50, 0.04);
border-radius: 12px;
border: 1px dashed rgba(139, 35, 50, 0.2);
}
.pricing-note p {
margin: 0;
color: var(--text);
font-size: 0.95rem;
}
@media (max-width: 900px) {
.package-row {
grid-template-columns: 1fr;
gap: var(--space-md);
padding: var(--space-lg);
}
.package-left {
justify-content: flex-start;
}
.package-right {
justify-content: stretch;
}
.package-right .btn {
width: 100%;
text-align: center;
justify-content: center;
}
}
@media (max-width: 480px) {
.package-features-grid {
gap: 6px;
}
.feature-tag {
padding: 5px 10px;
font-size: 0.8rem;
}
.package-icon {
width: 50px;
height: 50px;
font-size: 2rem;
}
}
.brahmin-final-cta {
padding: var(--space-3xl) 0;
background: linear-gradient(135deg, #1a0a0c 0%, var(--primary) 50%, #1a0a0c 100%);
position: relative;
overflow: hidden;
}
.brahmin-final-cta::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0L100 50L50 100L0 50z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
}
.final-cta-content {
text-align: center;
position: relative;
z-index: 1;
}
.cta-icon {
font-size: 4rem;
margin-bottom: var(--space-lg);
animation: prayerBounce 2s ease-in-out infinite;
}
@keyframes prayerBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.final-cta-content h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--white);
margin-bottom: var(--space-md);
}
.final-cta-content>p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.15rem;
max-width: 650px;
margin: 0 auto var(--space-xl);
line-height: 1.8;
}
.final-cta-buttons {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: var(--space-xl);
}
.final-cta-buttons .btn {
display: inline-flex;
align-items: center;
gap: 10px;
}
.cta-trust-line {
display: flex;
justify-content: center;
gap: var(--space-xl);
flex-wrap: wrap;
}
.cta-trust-line span {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
}
@media (max-width: 1200px) {
.brahmin-hero::before {
width: 50%;
clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}
.brahmin-pricing-grid {
gap: var(--space-lg);
}
.brahmin-price-card.featured {
transform: scale(1.02);
}
}
@media (max-width: 992px) {
.brahmin-hero {
min-height: auto;
padding: 90px 0 50px;
}
.brahmin-hero::before {
display: none;
}
.brahmin-hero-container {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.brahmin-hero-content {
padding-right: 0;
text-align: center;
}
.brahmin-usp-pills {
justify-content: center;
}
.brahmin-hero-cta {
justify-content: center;
}
.brahmin-trust-metrics {
justify-content: center;
}
.brahmin-hero-visual {
order: -1;
padding: var(--space-md);
}
.visual-main-image {
max-width: 400px;
margin: 0 auto;
}
.visual-main-image img {
height: 260px;
}
.visual-float-card.card-top {
left: 10%;
}
.visual-float-card.card-bottom {
right: 10%;
}
.cooking-style-grid {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.cooking-style-visual {
order: -1;
}
.style-image-stack {
height: 400px;
}
.ceremonies-showcase {
grid-template-columns: repeat(2, 1fr);
}
.regional-panel-grid {
grid-template-columns: 1fr;
}
.regional-image {
order: -1;
}
.gallery-slide {
flex: 0 0 calc(50% - 12px);
}
.brahmin-pricing-grid {
grid-template-columns: 1fr;
max-width: 450px;
}
.brahmin-price-card.featured {
transform: none;
order: -1;
}
.brahmin-price-card.featured:hover {
transform: translateY(-10px);
}
}
@media (max-width: 768px) {
.brahmin-hero {
padding: 85px 0 40px;
}
.brahmin-hero-title {
font-size: 2rem;
}
.brahmin-hero-badge {
font-size: 0.8rem;
padding: 8px 16px;
}
.brahmin-trust-metrics {
flex-direction: column;
gap: var(--space-md);
}
.trust-divider {
width: 50px;
height: 1px;
}
.visual-main-image img {
height: 220px;
}
.visual-float-card {
display: none;
}
.style-image-stack {
height: 350px;
}
.stack-img-1 {
width: 80%;
height: 280px;
}
.stack-img-2 {
width: 65%;
height: 220px;
}
.style-experience-badge {
left: 50%;
transform: translateX(-50%);
}
.ceremonies-showcase {
grid-template-columns: 1fr;
}
.regional-tabs {
gap: 8px;
}
.regional-tab {
padding: 10px 18px;
font-size: 0.9rem;
}
.regional-menu-preview {
grid-template-columns: 1fr;
}
.gallery-carousel {
padding: 0 40px;
}
.gallery-slide {
flex: 0 0 100%;
}
.gallery-slide img {
height: 220px;
}
.gallery-nav {
width: 40px;
height: 40px;
}
.final-cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-trust-line {
flex-direction: column;
gap: var(--space-sm);
}
}
@media (max-width: 480px) {
.brahmin-hero-title {
font-size: 1.9rem;
}
.brahmin-hero-desc {
font-size: 1rem;
}
.brahmin-hero-cta .btn {
width: 100%;
justify-content: center;
}
.cooking-style-content h2 {
font-size: 1.7rem;
}
.style-image-stack {
height: 300px;
}
.stack-img-1 {
width: 85%;
height: 240px;
}
.stack-img-2 {
width: 70%;
height: 180px;
}
.ceremony-card {
padding: var(--space-lg);
}
.regional-panel-grid {
padding: var(--space-lg);
}
.regional-info h3 {
font-size: 1.4rem;
}
}
.party-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
padding: 120px 0 var(--space-2xl);
min-height: auto;
}
.party-hero h1 {
color: var(--white);
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: var(--space-md);
}
.party-hero .hero-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto var(--space-xl);
}
.events-section {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.event-types-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
margin-top: var(--space-xl);
}
@media (min-width: 576px) {
.event-types-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.event-types-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.event-type-card {
background: var(--white);
padding: var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
transition: all var(--transition);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: var(--shadow-sm);
}
.event-type-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--secondary);
}
.event-type-card .event-icon {
font-size: 3rem;
margin-bottom: var(--space-md);
display: block;
}
.event-type-card h3 {
font-size: 1.1rem;
color: var(--primary);
margin-bottom: var(--space-sm);
font-family: var(--font-secondary);
}
.event-type-card p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: var(--space-sm);
}
.event-type-card .event-link {
display: inline-block;
color: var(--primary);
font-weight: 600;
font-size: 0.85rem;
transition: color var(--transition);
}
.event-type-card .event-link:hover {
color: var(--secondary);
}
.menu-pdf-section {
padding: var(--space-2xl) 0;
background: var(--white);
}
.packages-note {
text-align: center;
margin-top: var(--space-xl);
padding: var(--space-md) var(--space-lg);
background: rgba(139, 35, 50, 0.05);
border-radius: var(--radius-md);
color: var(--text-light);
font-size: 0.9rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.packages-note strong {
color: var(--primary);
}
.party-gallery-section {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.party-gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
margin-top: var(--space-xl);
}
@media (min-width: 768px) {
.party-gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.party-gallery-grid .gallery-item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4/3;
cursor: pointer;
}
.party-gallery-grid .gallery-item.large {
grid-column: span 2;
grid-row: span 2;
}
@media (max-width: 767px) {
.party-gallery-grid .gallery-item.large {
grid-column: span 2;
grid-row: span 1;
}
}
.party-gallery-grid .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition);
}
.party-gallery-grid .gallery-item:hover img {
transform: scale(1.05);
}
.party-gallery-grid .gallery-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(139, 21, 56, 0.8) 0%, transparent 60%);
display: flex;
align-items: flex-end;
padding: var(--space-lg);
opacity: 0;
transition: opacity var(--transition);
}
.party-gallery-grid .gallery-item:hover .gallery-overlay {
opacity: 1;
}
.party-gallery-grid .gallery-overlay span {
color: var(--white);
font-weight: 600;
font-size: 0.95rem;
}
.gallery-cta {
text-align: center;
margin-top: var(--space-xl);
}
.party-cta-section {
padding: var(--space-3xl) 0;
background: var(--cream);
text-align: center;
}
.party-cta-section .cta-content {
max-width: 700px;
margin: 0 auto;
}
.party-cta-section .cta-content h2 {
color: var(--primary);
font-family: var(--font-secondary);
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: var(--space-md);
}
.party-cta-section .cta-content p {
color: var(--text);
font-size: 1.1rem;
margin-bottom: var(--space-xl);
}
.party-cta-section .cta-buttons {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--space-lg);
}
@media (max-width: 767px) {
.party-hero {
padding: 100px 0 var(--space-xl);
}
.party-hero h1 {
font-size: 1.6rem;
}
.party-hero .hero-subtitle {
font-size: 1rem;
}
.event-type-card {
padding: var(--space-lg);
}
.event-type-card .event-icon {
font-size: 2.5rem;
}
.event-type-card h3 {
font-size: 1rem;
}
.packages-note {
padding: var(--space-md);
font-size: 0.85rem;
}
.party-cta-section {
padding: var(--space-2xl) 0;
}
.party-cta-section h2 {
font-size: 1.5rem;
}
.party-cta-section p {
font-size: 1rem;
}
.party-cta-section .cta-buttons {
flex-direction: column;
align-items: center;
}
.party-cta-section .cta-buttons .btn {
width: 100%;
max-width: 280px;
justify-content: center;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.event-types-grid {
grid-template-columns: repeat(2, 1fr);
}
.party-gallery-grid .gallery-item.large {
grid-column: span 2;
grid-row: span 1;
}
}
.catering-heritage {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.heritage-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
}
.heritage-grid.reverse {
direction: rtl;
}
.heritage-grid.reverse>* {
direction: ltr;
}
.heritage-image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.heritage-image img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.5s ease;
}
.heritage-image:hover img {
transform: scale(1.05);
}
.heritage-image::after {
content: '';
position: absolute;
bottom: -15px;
right: -15px;
width: 120px;
height: 120px;
background: var(--secondary);
border-radius: var(--radius-md);
z-index: -1;
}
.heritage-content h2 {
font-family: var(--font-secondary);
font-size: clamp(1.8rem, 3vw, 2.5rem);
color: var(--primary);
margin-bottom: var(--space-lg);
line-height: 1.3;
}
.heritage-content p {
color: var(--text-light);
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: var(--space-md);
}
.heritage-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.heritage-feature {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm);
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.heritage-feature-icon {
width: 40px;
height: 40px;
background: var(--primary);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.2rem;
flex-shrink: 0;
}
.heritage-feature span {
font-size: 0.9rem;
color: var(--text);
font-weight: 500;
}
.catering-gallery-showcase {
padding: var(--space-3xl) 0;
background: var(--white);
}
.gallery-showcase-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
}
.gallery-showcase-item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
aspect-ratio: 4/3;
}
.gallery-showcase-item.featured {
grid-column: span 2;
grid-row: span 2;
aspect-ratio: auto;
}
.gallery-showcase-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-showcase-item:hover img {
transform: scale(1.1);
}
.gallery-showcase-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-lg);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: var(--white);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.gallery-showcase-item:hover .gallery-showcase-overlay {
transform: translateY(0);
}
.gallery-showcase-overlay h4 {
font-size: 1.1rem;
margin-bottom: var(--space-xs);
color: var(--white);
}
.gallery-showcase-overlay p {
font-size: 0.85rem;
opacity: 0.9;
}
.service-image-cards {
padding: var(--space-3xl) 0;
background: linear-gradient(180deg, var(--cream) 0%, var(--white) 100%);
}
.image-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.image-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
}
.image-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.image-card-img {
position: relative;
overflow: hidden;
height: 220px;
}
.image-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.image-card:hover .image-card-img img {
transform: scale(1.1);
}
.image-card-badge {
position: absolute;
top: var(--space-md);
left: var(--space-md);
background: var(--primary);
color: var(--white);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-md);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.image-card-content {
padding: var(--space-lg);
}
.image-card-content h3 {
font-family: var(--font-secondary);
font-size: 1.25rem;
color: var(--primary);
margin-bottom: var(--space-sm);
}
.image-card-content p {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: var(--space-md);
}
.image-card-link {
color: var(--primary);
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
text-decoration: none;
transition: gap 0.3s ease;
}
.image-card-link:hover {
gap: var(--space-sm);
color: var(--primary-dark);
}
@media (max-width: 991px) {
.heritage-grid {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.heritage-grid.reverse {
direction: ltr;
}
.heritage-image img {
height: 300px;
}
.gallery-showcase-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-showcase-item.featured {
grid-column: span 2;
grid-row: span 1;
}
.image-cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.heritage-features {
grid-template-columns: 1fr;
}
.heritage-image::after {
display: none;
}
.gallery-showcase-grid {
grid-template-columns: 1fr;
}
.gallery-showcase-item.featured {
grid-column: span 1;
}
.image-cards-grid {
grid-template-columns: 1fr;
}
}
.full-width-image-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.banner-image-container {
position: relative;
width: 100%;
height: 400px;
}
.banner-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(139, 21, 56, 0.55) 0%, rgba(109, 16, 41, 0.65) 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.banner-overlay h2 {
font-family: var(--font-secondary);
font-size: clamp(1.8rem, 4vw, 2.8rem);
color: var(--white);
margin-bottom: var(--space-md);
}
.banner-overlay p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--space-xl);
}
.food-showcase-section {
padding: var(--space-3xl) 0;
background: var(--cream);
}
.food-showcase-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-md);
}
.food-showcase-item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 1;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease;
}
.food-showcase-item:hover {
transform: scale(1.05);
}
.food-showcase-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.food-showcase-item:hover img {
transform: scale(1.1);
}
.food-showcase-item span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-sm) var(--space-md);
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: var(--white);
font-size: 0.85rem;
font-weight: 500;
text-align: center;
}
@media (max-width: 991px) {
.food-showcase-grid {
grid-template-columns: repeat(3, 1fr);
}
.banner-image-container {
height: 350px;
}
}
@media (max-width: 576px) {
.food-showcase-grid {
grid-template-columns: repeat(2, 1fr);
}
.banner-image-container {
height: 300px;
}
}
.wedding-menu-showcase {
padding: var(--space-3xl) 0;
background: linear-gradient(135deg, #faf9f7 0%, #fff 50%, #fdf8f3 100%);
}
.menu-showcase-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-top: var(--space-2xl);
}
.menu-category-card {
background: var(--white);
border-radius: 16px;
padding: var(--space-xl);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(139, 69, 19, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.menu-category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--accent));
opacity: 0;
transition: opacity 0.3s ease;
}
.menu-category-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(139, 69, 19, 0.12);
border-color: var(--primary);
background: linear-gradient(135deg, #fff 0%, #fdf5eb 100%);
}
.menu-category-card:hover::before {
opacity: 1;
}
.menu-category-badge {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--white);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-category-header {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px dashed rgba(139, 69, 19, 0.15);
}
.menu-category-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--primary-light) 0%, rgba(139, 69, 19, 0.1) 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
flex-shrink: 0;
}
.menu-category-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark);
margin: 0;
}
.menu-items-showcase {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.menu-items-showcase li {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-xs) 0;
border-bottom: 1px dotted rgba(139, 69, 19, 0.1);
}
.menu-items-showcase li:last-child {
border-bottom: none;
}
.menu-items-showcase li::before {
content: '';
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
flex-shrink: 0;
}
.menu-item-name {
font-size: 0.95rem;
color: var(--text-secondary);
font-weight: 500;
}
.menu-showcase-cta {
text-align: center;
margin-top: var(--space-2xl);
padding-top: var(--space-xl);
border-top: 1px solid rgba(139, 69, 19, 0.1);
}
.menu-showcase-cta p {
font-size: 1rem;
color: var(--text-secondary);
margin-bottom: var(--space-lg);
}
.menu-cta-buttons {
display: flex;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
.menu-cta-buttons .btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
@media (max-width: 991px) {
.menu-showcase-wrapper {
grid-template-columns: repeat(2, 1fr);
}
.menu-category-card {
padding: var(--space-lg);
}
.menu-category-icon {
width: 48px;
height: 48px;
}
.menu-category-icon svg {
width: 24px;
height: 24px;
}
.menu-category-title {
font-size: 1.1rem;
}
}
@media (max-width: 576px) {
.wedding-menu-showcase {
padding: var(--space-2xl) 0;
}
.menu-showcase-wrapper {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.menu-category-card {
padding: var(--space-md);
}
.menu-category-header {
gap: var(--space-sm);
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
}
.menu-category-icon {
width: 44px;
height: 44px;
}
.menu-category-icon svg {
width: 22px;
height: 22px;
}
.menu-category-title {
font-size: 1rem;
}
.menu-items-showcase li {
padding: 6px 0;
}
.menu-item-name {
font-size: 0.9rem;
}
.menu-showcase-cta p {
font-size: 0.9rem;
}
.menu-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.menu-cta-buttons .btn {
justify-content: center;
}
}
.blog-hero {
position: relative;
padding: 160px 0 80px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
text-align: center;
overflow: hidden;
}
.blog-hero-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.blog-hero-content {
position: relative;
z-index: 1;
}
.blog-hero-badge {
display: inline-block;
background: var(--gold);
color: var(--primary-dark);
padding: 10px 24px;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--space-lg);
}
.blog-hero h1 {
color: var(--white);
font-size: clamp(2rem, 5vw, 3.5rem);
margin-bottom: var(--space-md);
font-family: var(--font-secondary);
}
.blog-hero-subtitle {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto var(--space-xl);
line-height: 1.7;
}
.blog-search-wrapper {
max-width: 600px;
margin: 0 auto;
}
.blog-search-form {
width: 100%;
}
.search-input-group {
display: flex;
align-items: center;
background: var(--white);
border-radius: var(--radius-md);
padding: 8px 8px 8px 24px;
box-shadow: var(--shadow-lg);
}
.search-icon {
color: var(--text-muted);
margin-right: var(--space-md);
}
.search-input-group input {
flex: 1;
border: none;
outline: none;
font-size: 1rem;
color: var(--text);
background: transparent;
padding: 12px 0;
}
.search-input-group input::placeholder {
color: var(--text-muted);
}
.search-btn {
background: var(--primary);
color: var(--white);
border: none;
padding: 14px 28px;
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
}
.search-btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.blog-categories-section {
background: var(--white);
padding: var(--space-lg) 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
position: sticky;
top: 70px;
z-index: 100;
}
.category-tabs-wrapper {
display: flex;
justify-content: center;
gap: var(--space-sm);
overflow-x: auto;
padding-bottom: var(--space-xs);
scrollbar-width: none;
-ms-overflow-style: none;
}
.category-tabs-wrapper::-webkit-scrollbar {
display: none;
}
.category-tab {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--radius-md);
font-size: 0.9rem;
font-weight: 500;
color: var(--text-light);
white-space: nowrap;
cursor: pointer;
transition: all var(--transition);
}
.category-tab i {
font-size: 0.9rem;
color: var(--text-muted);
}
.category-tab:hover {
background: var(--cream-light);
border-color: var(--primary-light);
color: var(--primary);
}
.category-tab:hover i {
color: var(--primary);
}
.category-tab.active {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
box-shadow: 0 4px 16px rgba(139, 21, 56, 0.25);
}
.category-tab.active i {
color: var(--gold);
}
.blog-featured-section {
padding: var(--space-3xl) 0;
background: var(--white);
}
.featured-post {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-2xl);
background: var(--white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 8px 40px rgba(139, 21, 56, 0.08);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.featured-post-image {
position: relative;
min-height: 420px;
overflow: hidden;
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.featured-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.featured-post:hover .featured-post-image img {
transform: scale(1.03);
}
.featured-post .featured-badge {
position: absolute;
top: var(--space-lg);
left: var(--space-lg);
background: var(--white);
color: var(--primary);
padding: 8px 16px;
border-radius: var(--radius-sm);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.featured-post .featured-badge i {
font-size: 0.7rem;
color: var(--gold);
}
.featured-post-content {
padding: var(--space-2xl);
display: flex;
flex-direction: column;
justify-content: center;
}
.post-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-bottom: var(--space-lg);
font-size: 0.85rem;
}
.post-category {
display: inline-block;
padding: 6px 14px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.post-category.wedding {
background: var(--white);
color: var(--primary);
border: 1px solid rgba(139, 21, 56, 0.2);
}
.post-category.traditional {
background: var(--white);
color: #8B6914;
border: 1px solid rgba(212, 175, 55, 0.3);
}
.post-category.corporate {
background: var(--white);
color: #1565C0;
border: 1px solid rgba(33, 150, 243, 0.2);
}
.post-category.planning {
background: var(--white);
color: #2E7D32;
border: 1px solid rgba(76, 175, 80, 0.2);
}
.post-date,
.post-read-time {
color: var(--text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.featured-title {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: var(--space-lg);
line-height: 1.3;
}
.featured-title a {
color: var(--text);
transition: color var(--transition);
}
.featured-title a:hover {
color: var(--primary);
}
.featured-excerpt {
color: var(--text-light);
line-height: 1.8;
margin-bottom: var(--space-xl);
}
.featured-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-md);
}
.read-more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--primary);
color: var(--white);
padding: 14px 28px;
border-radius: var(--radius-md);
font-weight: 600;
transition: all var(--transition);
}
.read-more-btn:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(139, 21, 56, 0.25);
}
.read-more-btn i {
transition: transform var(--transition);
}
.read-more-btn:hover i {
transform: translateX(5px);
}
.social-share {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.social-share span {
color: var(--text-muted);
font-size: 0.85rem;
}
.share-btn {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--white);
color: var(--text-light);
font-size: 0.95rem;
transition: all var(--transition);
border: 1px solid rgba(0, 0, 0, 0.08);
}
.share-btn:hover {
transform: translateY(-3px);
border-color: transparent;
}
.share-btn.whatsapp:hover {
background: #25D366;
color: var(--white);
}
.share-btn.facebook:hover {
background: #1877F2;
color: var(--white);
}
.share-btn.twitter:hover {
background: #1DA1F2;
color: var(--white);
}
.share-btn.linkedin:hover {
background: #0A66C2;
color: var(--white);
}
.blog-grid-section {
padding: var(--space-3xl) 0;
background: linear-gradient(180deg, var(--white) 0%, var(--cream-light) 100%);
}
.section-header {
text-align: center;
margin-bottom: var(--space-3xl);
}
.section-header h2 {
color: var(--primary);
margin-bottom: var(--space-sm);
font-size: clamp(1.8rem, 4vw, 2.5rem);
}
.section-header p {
color: var(--text-light);
font-size: 1.1rem;
max-width: 500px;
margin: 0 auto;
}
.blog-magazine-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-2xl);
}
.blog-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transition: all var(--transition);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(139, 21, 56, 0.12);
}
.blog-card-image {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.blog-card-large .blog-card-image {
height: 320px;
}
.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-card:hover .blog-card-image img {
transform: scale(1.05);
}
.card-overlay {
position: absolute;
top: var(--space-md);
left: var(--space-md);
padding: 0;
background: none;
}
.card-overlay .post-category {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.blog-card-content {
padding: var(--space-xl);
}
.blog-card-large .blog-card-content {
padding: var(--space-xl) var(--space-2xl);
}
.blog-card h3 {
font-size: 1.35rem;
margin-bottom: var(--space-md);
line-height: 1.45;
font-family: var(--font-secondary);
}
.blog-card h3 a,
.blog-card h4 a {
color: var(--text);
transition: color var(--transition);
}
.blog-card h3 a:hover,
.blog-card h4 a:hover {
color: var(--primary);
}
.blog-card p {
color: var(--text-light);
line-height: 1.7;
margin-bottom: var(--space-lg);
}
.post-meta-mini {
display: flex;
gap: var(--space-lg);
font-size: 0.8rem;
color: var(--text-muted);
padding-top: var(--space-sm);
border-top: 1px solid rgba(0, 0, 0, 0.06);
margin-top: auto;
}
.post-meta-mini span {
display: flex;
align-items: center;
gap: 5px;
}
.card-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary);
font-weight: 600;
font-size: 0.9rem;
transition: all var(--transition);
padding: 10px 0;
}
.card-link:hover {
color: var(--primary-dark);
gap: 14px;
}
.blog-cards-stack {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.blog-card-horizontal {
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--space-lg);
padding: var(--space-lg);
background: var(--white);
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.blog-card-horizontal:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(139, 21, 56, 0.1);
}
.blog-card-horizontal .blog-card-image {
height: 110px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.blog-card-horizontal .blog-card-content {
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-card-horizontal .post-category {
font-size: 0.65rem;
padding: 4px 10px;
margin-bottom: var(--space-xs);
align-self: flex-start;
}
.blog-card-horizontal h4 {
font-size: 0.95rem;
margin-bottom: var(--space-xs);
line-height: 1.4;
}
.blog-newsletter-section {
padding: var(--space-3xl) 0;
background: var(--white);
}
.newsletter-card {
display: grid;
grid-template-columns: auto 1fr 1.2fr;
gap: var(--space-2xl);
align-items: center;
background: linear-gradient(135deg, var(--cream-light) 0%, var(--cream) 100%);
padding: var(--space-2xl) var(--space-3xl);
border-radius: var(--radius-xl);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.newsletter-icon {
width: 72px;
height: 72px;
background: var(--white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(139, 21, 56, 0.1);
}
.newsletter-icon i {
font-size: 1.8rem;
color: var(--primary);
}
.newsletter-content h3 {
font-size: 1.4rem;
color: var(--primary);
margin-bottom: var(--space-xs);
}
.newsletter-content p {
color: var(--text-light);
font-size: 0.95rem;
margin: 0;
}
.newsletter-input-group {
display: flex;
gap: var(--space-sm);
}
.newsletter-input-group input {
flex: 1;
padding: 16px 24px;
border: 2px solid var(--cream-dark);
border-radius: var(--radius-md);
font-size: 1rem;
transition: border-color var(--transition);
}
.newsletter-input-group input:focus {
outline: none;
border-color: var(--primary);
}
.newsletter-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
background: var(--gold);
color: var(--primary-dark);
border: none;
border-radius: var(--radius-md);
font-weight: 700;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.newsletter-btn:hover {
background: var(--secondary);
transform: translateY(-2px);
}
.newsletter-disclaimer {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: var(--space-xs);
text-align: right;
}
.blog-more-section {
padding: var(--space-3xl) 0;
background: var(--cream-light);
}
.blog-grid-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.blog-card-standard .blog-card-image {
height: 220px;
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.blog-card-standard h4 {
font-size: 1.1rem;
margin-bottom: var(--space-sm);
line-height: 1.5;
}
.blog-card-standard p {
font-size: 0.9rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--text-light);
}
.load-more-wrapper {
text-align: center;
margin-top: var(--space-2xl);
}
.load-more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 48px;
background: var(--white);
color: var(--primary);
border: 2px solid var(--primary);
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
}
.load-more-btn:hover {
background: var(--primary);
color: var(--white);
box-shadow: 0 8px 24px rgba(139, 21, 56, 0.2);
}
.load-more-btn i {
transition: transform var(--transition);
}
.load-more-btn:hover i {
transform: translateY(3px);
}
.blog-topics-section {
padding: var(--space-3xl) 0;
background: var(--white);
}
.topics-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-lg);
}
.topic-card {
background: var(--cream-light);
padding: var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
box-shadow: none;
transition: all var(--transition);
border: 2px solid transparent;
}
.topic-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 24px rgba(139, 21, 56, 0.1);
border-color: var(--primary);
background: var(--white);
}
.topic-icon {
width: 56px;
height: 56px;
background: var(--white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
box-shadow: 0 2px 12px rgba(139, 21, 56, 0.08);
}
.topic-icon i {
font-size: 1.3rem;
color: var(--primary);
}
.topic-card h4 {
font-size: 1rem;
color: var(--text);
margin-bottom: var(--space-xs);
}
.topic-card p {
font-size: 0.85rem;
color: var(--text-muted);
margin: 0;
}
.blog-cta-section {
padding: var(--space-3xl) 0;
background: linear-gradient(135deg, var(--cream) 0%, var(--cream-light) 100%);
}
.cta-card {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--space-2xl);
align-items: center;
background: var(--primary);
padding: var(--space-3xl);
border-radius: var(--radius-xl);
box-shadow: 0 12px 40px rgba(139, 21, 56, 0.2);
}
.cta-card .cta-content h2 {
color: var(--white);
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: var(--space-md);
}
.cta-card .cta-content p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.1rem;
margin-bottom: var(--space-xl);
}
.cta-buttons {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}
.btn-primary-gold {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: var(--gold);
color: var(--primary-dark);
border-radius: var(--radius-md);
font-weight: 700;
transition: all var(--transition);
}
.btn-primary-gold:hover {
background: var(--white);
transform: translateY(-3px);
}
.btn-outline-white {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: transparent;
color: var(--white);
border: 2px solid var(--white);
border-radius: var(--radius-md);
font-weight: 600;
transition: all var(--transition);
}
.btn-outline-white:hover {
background: var(--white);
color: var(--primary);
}
.cta-stats {
display: flex;
justify-content: center;
gap: var(--space-2xl);
}
.cta-stat {
text-align: center;
}
.cta-stat .stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--gold);
font-family: var(--font-secondary);
}
.cta-stat .stat-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.highlight-search {
animation: highlightPulse 0.5s ease;
}
@keyframes highlightPulse {
0%,
100% {
box-shadow: var(--shadow-md);
}
50% {
box-shadow: 0 0 0 4px var(--gold);
}
}
@media (max-width: 1200px) {
.topics-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 992px) {
.featured-post {
grid-template-columns: 1fr;
}
.featured-post-image {
min-height: 300px;
}
.blog-magazine-grid {
grid-template-columns: 1fr;
}
.newsletter-card {
grid-template-columns: 1fr;
text-align: center;
}
.newsletter-icon {
margin: 0 auto;
}
.newsletter-disclaimer {
text-align: center;
}
.blog-grid-3col {
grid-template-columns: repeat(2, 1fr);
}
.cta-card {
grid-template-columns: 1fr;
text-align: center;
}
.cta-buttons {
justify-content: center;
}
.cta-stats {
margin-top: var(--space-xl);
}
}
@media (max-width: 768px) {
.blog-hero {
padding: 140px 0 60px;
}
.search-input-group {
flex-direction: column;
padding: var(--space-md);
border-radius: var(--radius-lg);
gap: var(--space-sm);
}
.search-icon {
display: none;
}
.search-btn {
width: 100%;
}
.category-tabs-wrapper {
gap: var(--space-xs);
}
.category-tab {
padding: 10px 16px;
font-size: 0.8rem;
}
.category-tab i {
display: none;
}
.featured-post-content {
padding: var(--space-lg);
}
.featured-footer {
flex-direction: column;
align-items: flex-start;
}
.social-share {
width: 100%;
justify-content: flex-start;
padding-top: var(--space-md);
border-top: 1px solid var(--cream-dark);
}
.blog-card-horizontal {
grid-template-columns: 100px 1fr;
}
.blog-card-horizontal .blog-card-image {
height: 80px;
}
.blog-grid-3col {
grid-template-columns: 1fr;
}
.topics-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.topic-card {
padding: var(--space-lg);
}
.topic-icon {
width: 50px;
height: 50px;
}
.topic-icon i {
font-size: 1.2rem;
}
.cta-stats {
flex-direction: column;
gap: var(--space-lg);
}
.newsletter-input-group {
flex-direction: column;
}
.newsletter-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.blog-hero-badge {
font-size: 0.75rem;
padding: 6px 18px;
}
.featured-title {
font-size: 1.3rem;
}
.blog-card-horizontal {
grid-template-columns: 1fr;
}
.blog-card-horizontal .blog-card-image {
height: 150px;
}
.topics-grid {
grid-template-columns: 1fr;
}
.cta-stat .stat-number {
font-size: 2rem;
}
}
.blog-post-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
padding: var(--space-3xl) 0 var(--space-2xl);
color: #fff;
}
.blog-post-hero-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.breadcrumb-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: var(--space-lg);
font-size: 0.875rem;
opacity: 0.9;
}
.breadcrumb-nav a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: var(--transition-base);
}
.breadcrumb-nav a:hover {
color: #fff;
text-decoration: underline;
}
.breadcrumb-nav span {
color: rgba(255, 255, 255, 0.6);
}
.post-category-badge {
display: inline-block;
padding: 6px 16px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-md);
}
.post-category-badge.wedding {
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--primary-dark);
}
.post-category-badge.traditional {
background: linear-gradient(135deg, #059669, #047857);
}
.post-category-badge.planning {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.blog-post-hero h1 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--space-lg);
color: #fff;
}
.post-meta-info {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
opacity: 0.9;
}
.meta-item i {
font-size: 1rem;
color: var(--gold);
}
.blog-post-content {
padding: var(--space-2xl) 0;
background: var(--white);
}
.blog-post-layout {
display: grid;
grid-template-columns: 1fr 350px;
gap: var(--space-2xl);
align-items: start;
}
.blog-post-main {
min-width: 0;
}
.blog-post-featured-image {
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-xl);
box-shadow: var(--shadow-lg);
}
.blog-post-featured-image img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16/9;
object-fit: cover;
}
.blog-post-body {
color: var(--text-secondary);
line-height: 1.8;
font-size: 1.0625rem;
}
.blog-post-body .lead {
font-size: 1.1875rem;
color: var(--text-primary);
font-weight: 400;
line-height: 1.7;
margin-bottom: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--cream-dark);
}
.blog-post-body h2 {
font-family: var(--font-heading);
font-size: 1.625rem;
font-weight: 700;
color: var(--primary);
margin: var(--space-xl) 0 var(--space-md);
line-height: 1.3;
}
.blog-post-body h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--text-primary);
margin: var(--space-lg) 0 var(--space-sm);
line-height: 1.4;
}
.blog-post-body h4 {
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
margin: var(--space-md) 0 var(--space-xs);
}
.blog-post-body p {
margin-bottom: var(--space-md);
}
.blog-post-body ul,
.blog-post-body ol {
margin-bottom: var(--space-md);
padding-left: var(--space-lg);
}
.blog-post-body li {
margin-bottom: var(--space-xs);
}
.blog-post-body a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
transition: var(--transition-base);
}
.blog-post-body a:hover {
color: var(--primary-dark);
text-decoration: underline;
}
.blog-post-body strong {
color: var(--text-primary);
font-weight: 600;
}
.blog-callout {
display: flex;
gap: var(--space-md);
padding: var(--space-lg);
background: var(--cream);
border-radius: var(--radius-md);
border-left: 4px solid var(--gold);
margin: var(--space-lg) 0;
}
.blog-callout.success {
background: #ecfdf5;
border-left-color: #059669;
}
.blog-callout.warning {
background: #fffbeb;
border-left-color: #d97706;
}
.callout-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.callout-icon i {
font-size: 1.25rem;
color: var(--gold-dark);
}
.blog-callout.success .callout-icon i {
color: #059669;
}
.blog-callout.warning .callout-icon i {
color: #d97706;
}
.callout-content {
flex: 1;
font-size: 0.9375rem;
line-height: 1.6;
}
.callout-content strong {
display: block;
margin-bottom: 4px;
color: var(--text-primary);
}
.blog-image-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
margin: var(--space-lg) 0;
}
.blog-image-grid figure {
margin: 0;
border-radius: var(--radius-md);
overflow: hidden;
}
.blog-image-grid img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.blog-image-grid figcaption {
padding: var(--space-sm) var(--space-md);
background: var(--cream);
font-size: 0.8125rem;
color: var(--text-muted);
text-align: center;
}
.blog-feature-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin: var(--space-lg) 0;
}
.feature-item {
display: flex;
gap: var(--space-md);
padding: var(--space-md);
background: var(--cream);
border-radius: var(--radius-md);
}
.feature-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
}
.feature-icon i {
font-size: 0.875rem;
color: #fff;
}
.feature-content h4 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 4px;
color: var(--text-primary);
}
.feature-content p {
font-size: 0.875rem;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
.blog-menu-box {
background: var(--cream);
border-radius: var(--radius-lg);
padding: var(--space-xl);
margin: var(--space-lg) 0;
border: 1px solid var(--cream-dark);
}
.blog-menu-box h4 {
display: flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
margin: 0 0 var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 2px solid var(--gold);
}
.blog-menu-box h4 i {
color: var(--gold);
}
.menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-lg);
}
.menu-grid.two-col {
grid-template-columns: repeat(2, 1fr);
}
.menu-section h5 {
font-size: 0.9375rem;
font-weight: 600;
color: var(--primary);
margin: 0 0 var(--space-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.menu-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu-section li {
position: relative;
padding-left: var(--space-md);
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 6px;
}
.menu-section li::before {
content: "•";
position: absolute;
left: 0;
color: var(--gold);
font-weight: bold;
}
.blog-checklist {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: var(--radius-lg);
padding: var(--space-xl);
margin: var(--space-lg) 0;
color: #fff;
}
.blog-checklist h4 {
display: flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 600;
color: #fff;
margin: 0 0 var(--space-md);
}
.blog-checklist h4 i {
color: var(--gold);
}
.blog-checklist ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.blog-checklist li {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.9375rem;
}
.blog-checklist li i {
color: var(--gold);
font-size: 1rem;
}
.blog-author-box {
display: flex;
gap: var(--space-lg);
padding: var(--space-xl);
background: var(--cream);
border-radius: var(--radius-lg);
margin: var(--space-2xl) 0 var(--space-xl);
border: 1px solid var(--cream-dark);
}
.author-avatar {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: var(--radius-md);
overflow: hidden;
background: #fff;
padding: 8px;
box-shadow: var(--shadow-sm);
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: contain;
}
.author-info h4 {
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--primary);
margin: 0 0 var(--space-xs);
}
.author-info p {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0 0 var(--space-sm);
}
.author-social {
display: flex;
gap: var(--space-sm);
}
.author-social a {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 1rem;
transition: var(--transition-base);
box-shadow: var(--shadow-sm);
}
.author-social a:hover {
background: var(--primary);
color: #fff;
transform: translateY(-2px);
}
.blog-share-section {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-lg) 0;
border-top: 1px solid var(--cream-dark);
}
.blog-share-section>span {
font-weight: 500;
color: var(--text-primary);
font-size: 0.9375rem;
}
.share-buttons {
display: flex;
gap: var(--space-sm);
}
.share-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
color: #fff;
font-size: 1.125rem;
transition: var(--transition-base);
text-decoration: none;
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.share-btn.whatsapp {
background: #25d366;
}
.share-btn.facebook {
background: #1877f2;
}
.share-btn.twitter {
background: #1da1f2;
}
.share-btn.linkedin {
background: #0077b5;
}
.blog-post-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-lg);
position: sticky;
top: 100px;
}
.sidebar-card {
background: #fff;
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-sm);
border: 1px solid var(--cream-dark);
}
.sidebar-card h3 {
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--gold);
}
.sidebar-card.cta-card {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
text-align: center;
color: #fff;
}
.sidebar-card.cta-card h3 {
color: #fff;
border-bottom-color: var(--gold);
}
.cta-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-md);
}
.cta-icon i {
font-size: 1.75rem;
color: var(--gold);
}
.sidebar-card.cta-card p {
font-size: 0.9375rem;
opacity: 0.9;
margin-bottom: var(--space-md);
}
.btn-sidebar-cta {
display: block;
width: 100%;
padding: 12px 20px;
background: var(--gold);
color: var(--primary-dark);
border-radius: var(--radius-sm);
font-weight: 600;
text-decoration: none;
text-align: center;
margin-bottom: var(--space-sm);
transition: var(--transition-base);
}
.btn-sidebar-cta:hover {
background: var(--gold-dark);
transform: translateY(-2px);
}
.btn-sidebar-secondary {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: var(--radius-sm);
font-weight: 500;
text-decoration: none;
text-align: center;
font-size: 0.9375rem;
transition: var(--transition-base);
}
.btn-sidebar-secondary:hover {
background: rgba(255, 255, 255, 0.25);
}
.related-posts-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.related-post-item {
display: flex;
gap: var(--space-sm);
text-decoration: none;
padding: var(--space-sm);
border-radius: var(--radius-md);
transition: var(--transition-base);
}
.related-post-item:hover {
background: var(--cream);
}
.related-post-item img {
width: 70px;
height: 50px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.related-post-info h4 {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 4px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-post-info span {
font-size: 0.75rem;
color: var(--text-muted);
}
.sidebar-links {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-links li {
border-bottom: 1px solid var(--cream);
}
.sidebar-links li:last-child {
border-bottom: none;
}
.sidebar-links a {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) 0;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9375rem;
transition: var(--transition-base);
}
.sidebar-links a:hover {
color: var(--primary);
padding-left: var(--space-sm);
}
.sidebar-links a i {
font-size: 0.75rem;
color: var(--gold);
}
.sidebar-card.contact-card {
background: var(--cream);
}
.contact-item {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.contact-item:last-child {
margin-bottom: 0;
}
.contact-item i {
width: 20px;
flex-shrink: 0;
color: var(--primary);
font-size: 0.875rem;
margin-top: 3px;
}
.contact-item div {
display: flex;
flex-direction: column;
gap: 2px;
}
.contact-item a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
transition: var(--transition-base);
}
.contact-item a:hover {
color: var(--primary);
}
.contact-item span {
font-size: 0.875rem;
color: var(--text-secondary);
line-height: 1.5;
}
.blog-more-articles {
padding: var(--space-2xl) 0;
background: var(--cream);
}
.blog-more-articles h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
text-align: center;
margin-bottom: var(--space-xl);
}
.more-articles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
}
.more-article-card {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
}
.more-article-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.more-article-card .article-image {
aspect-ratio: 16/9;
overflow: hidden;
}
.more-article-card .article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-base);
}
.more-article-card:hover .article-image img {
transform: scale(1.05);
}
.more-article-card .article-content {
padding: var(--space-lg);
}
.more-article-card .post-category-badge {
font-size: 0.6875rem;
padding: 4px 10px;
margin-bottom: var(--space-sm);
}
.more-article-card h3 {
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-xs);
line-height: 1.3;
}
.more-article-card p {
font-size: 0.875rem;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
.blog-post-cta {
padding: var(--space-2xl) 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.blog-post-cta .cta-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.blog-post-cta h2 {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: #fff;
margin-bottom: var(--space-sm);
}
.blog-post-cta p {
font-size: 1.0625rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--space-lg);
}
.cta-buttons {
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
.btn-cta-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--gold);
color: var(--primary-dark);
border-radius: var(--radius-sm);
font-weight: 600;
text-decoration: none;
transition: var(--transition-base);
}
.btn-cta-primary:hover {
background: var(--gold-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-cta-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
border-radius: var(--radius-sm);
font-weight: 600;
text-decoration: none;
transition: var(--transition-base);
}
.btn-cta-secondary:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
@media (max-width: 1024px) {
.blog-post-layout {
grid-template-columns: 1fr 300px;
gap: var(--space-xl);
}
}
@media (max-width: 900px) {
.blog-post-layout {
grid-template-columns: 1fr;
}
.blog-post-sidebar {
position: static;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.sidebar-card.cta-card {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
.blog-post-hero {
padding: var(--space-2xl) 0 var(--space-xl);
}
.breadcrumb-nav {
font-size: 0.8125rem;
}
.post-meta-info {
gap: var(--space-md);
}
.blog-post-sidebar {
grid-template-columns: 1fr;
}
.menu-grid {
grid-template-columns: 1fr;
}
.more-articles-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.blog-author-box {
flex-direction: column;
text-align: center;
}
.author-avatar {
margin: 0 auto;
}
.author-social {
justify-content: center;
}
.blog-image-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
}
.btn-cta-primary,
.btn-cta-secondary {
width: 100%;
justify-content: center;
}
}
@media (max-width: 480px) {
.blog-post-body {
font-size: 1rem;
}
.blog-post-body h2 {
font-size: 1.375rem;
}
.blog-post-body h3 {
font-size: 1.125rem;
}
.blog-callout {
flex-direction: column;
gap: var(--space-sm);
}
.feature-item {
flex-direction: column;
text-align: center;
}
.feature-icon {
margin: 0 auto;
}
.blog-share-section {
flex-direction: column;
text-align: center;
}
.share-buttons {
justify-content: center;
}
}