
:root {
--mp-black: #0b0b0c;
--mp-brown: #1a0f0a;
--mp-gold: #d4af37;
--mp-gold-soft: #e6c76a;
--mp-surface: rgba(255, 255, 255, .06);
--mp-border: rgba(212, 175, 55, .25);
--mp-text: rgba(255, 255, 255, .88);
--mp-muted: rgba(255, 255, 255, .68);
--gold-primary: #D4AF37;
--gold-dark: #B8860B;
--dark-bg: #1a1a1a;
--gold-light: #F4E4C1;
--text-light: #f5f5f5;
}

.text-center {
text-align: center;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background:
	radial-gradient(1200px 600px at 15% 10%, rgba(212, 175, 55, .14), transparent 55%),
	radial-gradient(900px 500px at 90% 25%, rgba(230, 199, 106, .10), transparent 55%),
	linear-gradient(140deg, var(--mp-black), var(--mp-brown));
color: var(--mp-text);
font-family: 'Segoe UI', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
min-height: 100vh;
}



.cart-icon-wrapper {
position: relative;
}

.cart-icon-wrapper a {
position: relative;
}

.cart-badge {
position: absolute;
top: -5px;
right: -5px;
background: #ff4444;
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
border: 2px solid var(--mp-black);
}

/* Navigation Bar */
.navbar-custom {
background: linear-gradient(90deg, var(--mp-black) 0%, rgba(26, 15, 10, 0.9) 50%, var(--mp-black) 100%);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--mp-border);
padding: 1rem 1.5rem;
position: sticky;
top: 0;
z-index: 1050;
box-shadow: 0 8px 32px rgba(212, 175, 55, 0.08);
}

.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
}

.navbar-brand {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
background: linear-gradient(135deg, var(--mp-gold), var(--mp-gold-soft));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 2px;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s ease;
}

.navbar-brand:hover {
filter: brightness(1.1);
}

/* Nav Menu */
.nav-menu {
display: flex;
list-style: none;
gap: 0;
margin: 0;
padding: 0;
}

.nav-menu li a {
color: var(--mp-text);
text-decoration: none;
padding: 0.75rem 1.25rem;
display: block;
transition: all 0.3s ease;
position: relative;
font-weight: 500;
font-size: 0.95rem;
}

.nav-menu li a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--mp-gold), var(--mp-gold-soft));
transition: all 0.3s ease;
transform: translateX(-50%);
}

.nav-menu li a:hover::after {
width: calc(100% - 2.5rem);
}

.nav-menu li a:hover {
color: var(--mp-gold-soft);
}

/* Nav Icons */
.nav-icons {
display: flex;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
align-items: center;
}

.nav-icons a {
color: var(--mp-gold);
font-size: 1.2rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--mp-surface);
text-decoration: none;
}

.nav-icons a:hover {
color: var(--mp-gold-soft);
background: rgba(212, 175, 55, 0.15);
transform: scale(1.1);
}

.gapicon {
margin-left: 20px;
}

/* Toggle Button */
.toggle-menu {
display: none;
flex-direction: column;
cursor: pointer;
gap: 7px;
background: none;
border: none;
padding: 0.5rem;
margin-left: -5px;
}

.toggle-menu span {
width: 35px;
margin-left: 10px;
height: 4px;
background: var(--mp-gold);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-radius: 2px;
display: block;
}

.toggle-menu.active span:nth-child(1) {
transform: rotate(45deg) translate(12px, 12px);
}

.toggle-menu.active span:nth-child(2) {
opacity: 0;
}

.toggle-menu.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}

/* Side Menu */
.side-menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
max-width: 300px;
height: 100vh;
background: linear-gradient(180deg, var(--mp-black) 0%, var(--mp-brown) 100%);
border-right: 1px solid var(--mp-border);
transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1040;
padding-top: 80px;
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.side-menu.active {
left: 0;
}

.side-menu ul {
list-style: none;
padding: 1rem 0;
margin: 0;
}

.side-menu ul li {
border-bottom: 1px solid var(--mp-border);
}

.side-menu ul li a {
color: var(--mp-text);
text-decoration: none;
display: block;
padding: 1rem 1.5rem;
transition: all 0.3s ease;
font-weight: 500;
font-size: 1.5rem;
margin-top: 12px;
}

.side-menu ul li a:hover {
color: var(--mp-gold-soft);
background: var(--mp-surface);
padding-left: 2rem;
}

.side-menu-icons {
display: flex;
gap: 1rem;
padding: 1.5rem;
border-top: 1px solid var(--mp-border);
margin-top: 1rem;
flex-wrap: wrap;
}

.side-menu-icons a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--mp-gold);
background: var(--mp-surface);
border-radius: 50%;
transition: all 0.3s ease;
text-decoration: none;
}

.side-menu-icons a:hover {
color: var(--mp-gold-soft);
background: rgba(212, 175, 55, 0.15);
transform: scale(1.1);
}

/* Overlay */
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
z-index: 1030;
}

.menu-overlay.active {
opacity: 1;
visibility: visible;
}

/* Desktop Navigation */
.nav-desktop {
display: flex;
gap: 2rem;
align-items: center;
}

/* Hero Section */
.hero {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(61, 40, 23, 0.2) 100%);
padding: 4rem 0;
border-bottom: 1px solid var(--mp-border);
margin-bottom: 3rem;
text-align: center;
margin-top: 1rem;
}

.page-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 900;
background: linear-gradient(135deg, var(--mp-gold-soft), var(--mp-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}

.section-title {
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 900;
background: linear-gradient(135deg, var(--mp-gold-soft), var(--mp-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 2rem;
text-align: center;
}

.content-section {
padding: 3rem 0;
}

.section-content {
background: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 12px;
padding: 2rem;
margin-bottom: 3rem;
line-height: 1.8;
color: var(--mp-muted);
backdrop-filter: blur(10px);
}

.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin: 3rem 0;
}

.stat-card {
background: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 12px;
padding: 2rem;
text-align: center;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}

.stat-card:hover {
border-color: var(--mp-gold);
transform: translateY(-5px);
}

.stat-number {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 900;
color: var(--mp-gold);
}

.stat-label {
color: var(--mp-gold-soft);
font-weight: 700;
margin-top: 0.5rem;
}

.awards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 2rem 0;
}

.award-card {
background: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 12px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}

.award-card:hover {
transform: translateY(-10px);
border-color: var(--mp-gold);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.award-icon {
font-size: 3rem;
color: var(--mp-gold);
margin-bottom: 1rem;
}

.award-title {
color: var(--mp-gold-soft);
font-weight: 700;
margin-bottom: 0.5rem;
}

.award-description {
color: var(--mp-muted);
font-size: 0.95rem;
}

/* Testimonial Card Styles */
.testimonial-card {
background: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 12px;
padding: 5px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
}

.testimonial-card:hover {
transform: translateY(-10px);
border-color: var(--mp-gold);
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
}

.testimonial-header {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.5rem;
}

.testimonial-image {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--mp-gold);
}

.testimonial-info {
flex: 1;
}

.testimonial-name {
color: var(--mp-gold-soft);
font-weight: 700;
margin: 0 0 0.3rem 0;
font-size: 1rem;
}

.testimonial-location {
color: var(--mp-muted);
font-size: 0.85rem;
margin: 0 0 0.5rem 0;
}

.testimonial-rating {
color: var(--mp-gold);
font-size: 0.9rem;
letter-spacing: 2px;
}

.testimonial-text {
color: var(--mp-text);
line-height: 1.6;
font-style: italic;
margin: 0;
}

.team-section {
margin: 3rem 0;
}

.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}

.team-member {
background: var(--mp-surface);
border: 1px solid var(--mp-border);
border-radius: 12px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}

.team-member:hover {
border-color: var(--mp-gold);
transform: translateY(-5px);
}

.member-avatar {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--mp-gold), var(--mp-gold-soft));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 2.5rem;
}

.member-name {
color: var(--mp-gold-soft);
font-weight: 700;
margin-bottom: 0.3rem;
}

.member-role {
color: var(--mp-muted);
font-size: 0.9rem;
}

footer {
background: linear-gradient(180deg, rgba(11, 11, 12, 0.9) 0%, var(--mp-brown) 100%);
border-top: 1px solid var(--mp-border);
padding: 3rem 0 1rem;
margin-top: 5rem;
}

.footer-section h5 {
color: var(--mp-gold-soft);
font-weight: 700;
}

.footer-section ul {
list-style: none;
padding: 0;
}

.footer-section a {
color: var(--mp-muted);
text-decoration: none;
transition: all 0.3s ease;
}

.footer-section a:hover {
color: var(--mp-gold-soft);
}

.social-links {
display: flex;
gap: 1rem;
justify-content: center;
}

.footer-connect {
text-align: center;
padding-bottom: 2rem;
margin-bottom: 2rem;
}

.footer-connect h5 {
color: var(--mp-gold-soft);
font-weight: 600;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}

.social-links a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--mp-surface);
border-radius: 50%;
border: 1px solid var(--mp-border);
transition: all 0.3s ease;
color: var(--mp-gold);
text-decoration: none;
}

.social-links a:hover {
background: var(--mp-gold);
color: var(--mp-black);
transform: translateY(-3px);
}

.footer-bottom {
border-top: 1px solid var(--mp-border);
padding-top: 2rem;
margin-top: 2rem;
text-align: center;
color: var(--mp-muted);
font-size: 0.9rem;
}

.copyright {
color: var(--mp-gold-soft);
font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
.toggle-menu {
	display: flex;
}

.nav-desktop {
	display: none !important;
}

.navbar-custom {
	padding: 1rem;
}

.navbar-brand {
	font-size: 1.4rem;
}

.page-title {
	font-size: 1.8rem;
}

.section-title {
	font-size: 1.5rem;
}

.team-grid {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}

@media (max-width: 480px) {
.navbar-brand {
	font-size: 1.2rem;
}

.nav-icons a {
	width: 32px;
	height: 32px;
	font-size: 1rem;
}

.page-title {
	font-size: 1.5rem;
}

.section-title {
	font-size: 1.2rem;
}

.hero {
	padding: 2rem 0;
}
}

.testimonial-card {
    width: 100%;
    height: 260px; /* uniform height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2b1a12; /* match your theme */
    border-radius: 12px;
    overflow: hidden;
    padding: 10px;
}

.testimonial-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* keeps full image visible */
    display: block;
}