/* ===== CSS VARIABLES ===== */
:root {
--primary: #c9920a;
--primary-dark: #a07608;
--primary-light: #f0b429;
--dark: #1a1a1a;
--dark-2: #2d2d2d;
--text: #333333;
--text-light: #666666;
--text-muted: #999999;
--bg: #ffffff;
--bg-light: #f8f6f2;
--bg-gray: #f2f2f2;
--border: #e0e0e0;
--shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14);
--radius: 6px;
--radius-lg: 12px;
--transition: all 0.3s ease;
--font-heading: 'Playfair Display', serif;
--font-body: 'Jost', sans-serif;
}
/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
color: var(--text);
background: var(--bg);
line-height: 1.6;
font-size: 15px;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img {
max-width: 100%;
display: block;
}
ul {
list-style: none;
}
button {
cursor: pointer;
border: none;
background: none;
font-family: inherit;
}
input,
textarea,
select {
font-family: inherit;
outline: none;
}
/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3,
h4,
h5 {
font-family: var(--font-heading);
line-height: 1.2;
}
/* ===== UTILITY ===== */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
text-align: center;
margin-bottom: 40px;
}
.section-title h2 {
font-size: 2rem;
color: var(--dark);
/* color: var(--bg); */
margin-bottom: 10px;
position: relative;
display: inline-block;
}
.section-title h2::after {
content: '';
display: block;
width: 50px;
height: 3px;
background: var(--primary);
margin: 10px auto 0;
}
.btn {
display: inline-block;
padding: 12px 28px;
border-radius: var(--radius);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.5px;
transition: var(--transition);
text-transform: uppercase;
}
.btn-primary {
background: var(--primary);
color: #fff;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(201, 146, 10, 0.35);
}
.btn-outline {
display: inline-block;
/* important */
border: 2px solid var(--primary);
color: var(--primary);
background: transparent;
padding: 10px 12px;
/* add padding since has none */
border-radius: 6px;
text-align: center;
text-decoration: none;
/* remove underline */
cursor: pointer;
}
.btn-outline:hover {
background: var(--primary);
color: #fff;
}
.badge {
display: inline-block;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-sale {
background: var(--primary);
color: #fff;
}
.badge-new {
background: #e74c3c;
color: #fff;
}
/* ===== HEADER ===== */
.header {
position: unset !important;
top: 0;
z-index: 1000;
background: #fff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid #eee;
}
.header-nav {
position: sticky;
top: 0;
background: #fff;
z-index: 999;
}
.header-inner {
/* display: flex; */
display: flex;
grid-template-columns: 1fr auto 1fr;
align-items: center;
/* justify-content: space-between; */
padding: 16px 10px;
/* max-width: 1200px; */
margin: 0 auto;
gap: 20px;
}
.logo {
grid-column: 2;
display: flex;
/* display: flex; */
align-items: center;
/* gap: 10px; */
justify-content: center;
text-decoration: none;
}
.logo-icon {
width: 48px;
height: 48px;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-da {
font-size: 1.6rem;
font-family: var(--font-heading);
font-weight: 900;
color: var(--dark);
line-height: 1;
}
.logo-da span {
color: var(--primary);
}
.logo-subtitle {
font-size: 0.65rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-light);
font-weight: 600;
}
.logo-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.logo-tagline {
font-family: 'Dancing Script', 'Great Vibes', 'Pacifico', cursive;
font-style: italic;
font-weight: 700;
font-size: 1.4rem;
color: #c9920a;
/* matches your gold brand color */
letter-spacing: 0.03em;
line-height: 1;
text-shadow: 0.4px 0.4px 0 #c9920a;
}
.header-icons {
grid-column: 3;
display: flex;
align-items: center;
justify-content: flex-end;
/* gap: 20px; */
gap: 8px;
}
.header-icon-btn {
position: relative;
color: var(--dark);
font-size: 20px;
transition: var(--transition);
}
.header-icon-btn:hover {
color: var(--primary);
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--primary);
color: #fff;
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* ===== NAVIGATION ===== */
.navbar {
background: var(--dark);
position: sticky;
top: 0;
z-index: 999;
}
.nav-list {
display: flex;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: 5px;
padding: 14px 16px;
color: rgba(255, 255, 255, 0.88);
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.3px;
transition: var(--transition);
white-space: nowrap;
}
.nav-link:hover,
.nav-item:hover .nav-link {
color: var(--primary);
}
.nav-link svg {
width: 10px;
height: 10px;
transition: var(--transition);
}
.nav-item:hover .nav-link svg {
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: 100%;
left: -60px;
background: #fff;
min-width: 200px;
box-shadow: var(--shadow-lg);
border-radius: var(--radius);
border-top: 3px solid var(--primary);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition);
z-index: 999;
}
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown a {
display: block;
padding: 10px 18px;
font-size: 13.5px;
color: var(--text);
border-bottom: 1px solid var(--bg-gray);
}
.dropdown a:hover {
color: var(--primary);
background: var(--bg-light);
padding-left: 22px;
}
.dropdown a:last-child {
border-bottom: none;
}
/* ============================= */
/* MOBILE HEADER + NAVBAR FIX */
/* ============================= */
@media (max-width: 768px) {
/* HEADER */
.header-inner {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
padding: 15px;
text-align: center;
}
.header-left-info {
/* width: 100%; */
display: flex;
/* flex-direction: column; */
align-items: center;
gap: 8px;
/* order: 2; */
justify-content: flex-start;
}
.info-item {
display: flex;
align-items: center;
/* justify-content: center; */
gap: 8px;
font-size: 13px;
line-height: 1.5;
flex-wrap: wrap;
white-space: nowrap;
}
.info-item span {
text-align: center;
}
.divider {
display: none;
/* hide | divider on mobile */
}
.logo {
order: 1;
grid-column: unset;
width: 100%;
justify-content: center;
}
.logo-wrapper img {
height: 45px !important;
}
.logo-tagline {
font-size: 1.2rem;
text-align: center;
line-height: 1.2;
}
.header-right-section {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
order: 3;
}
.phone-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.header-icons {
justify-content: center;
gap: 15px;
grid-column: unset;
}
/* NAVBAR */
.navbar {
position: relative;
top: auto;
}
.nav-list {
flex-direction: column;
align-items: stretch;
padding: 0;
}
.nav-item {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-link {
justify-content: space-between;
padding: 14px 18px;
font-size: 14px;
width: 100%;
}
.dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
display: none;
width: 100%;
min-width: 100%;
border-radius: 0;
box-shadow: none;
border-top: none;
background: #111;
}
.dropdown a {
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 12px 20px;
background: transparent;
}
.dropdown a:hover {
background: rgba(255, 255, 255, 0.05);
padding-left: 20px;
color: var(--primary);
}
/* show dropdown on tap/hover fallback */
.nav-item:hover .dropdown {
display: block;
}
}
/* =============================== */
/* ELEGANT MOBILE HEADER DESIGN */
/* =============================== */
@media (max-width: 768px) {
.header {
box-shadow: none;
border-bottom: 1px solid #ececec;
background: #fff;
}
.header-inner {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 18px 16px;
gap: 18px;
text-align: center;
}
/* LOGO */
.logo {
order: 1;
width: 100%;
justify-content: center;
text-decoration: none;
}
.logo-wrapper {
gap: 6px;
}
.logo-wrapper img {
height: 58px !important;
width: auto;
object-fit: contain;
}
.logo-tagline {
font-size: 1.15rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
letter-spacing: 0.2px;
text-shadow: none;
}
/* ADDRESS + TIME */
.header-left-info {
order: 2;
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 6px;
border-top: 1px solid #f1f1f1;
}
.divider {
display: none;
}
.info-item {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 10px;
font-size: 14px;
color: #333;
line-height: 1.6;
flex-wrap: nowrap;
}
.info-item svg {
width: 16px;
height: 16px;
min-width: 16px;
margin-top: 2px;
stroke: #666;
}
.info-item span {
text-align: left;
max-width: 280px;
}
/* PHONE + ICONS */
/* .header-right-section {
order: 3;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding-top: 6px;
} */
.header-right-section {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 28px;
}
/* .phone-item {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 15px;
font-weight: 500;
color: #444;
} */
.phone-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: #333;
white-space: nowrap;
}
/* .phone-item svg {
width: 16px;
height: 16px;
stroke: #666;
} */
.phone-item svg {
width: 17px;
height: 17px;
stroke: #111;
fill: none;
stroke-width: 2;
}
/* ACCOUNT + CART */
.header-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.header-icon-btn {
font-size: 20px;
color: #222;
}
.header-icon-btn svg {
width: 21px;
height: 21px;
}
.cart-count {
width: 18px;
height: 18px;
font-size: 10px;
top: -6px;
right: -8px;
}
/* NAVBAR CLEAN LOOK */
.navbar {
background: #111;
position: relative;
top: auto;
}
.nav-list {
flex-direction: column;
padding: 0;
}
.nav-item {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-link {
padding: 14px 18px;
font-size: 14px;
justify-content: space-between;
width: 100%;
}
.dropdown {
position: static;
display: none;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
border-radius: 0;
background: #181818;
min-width: 100%;
}
.nav-item:hover .dropdown {
display: block;
}
.dropdown a {
color: rgba(255, 255, 255, 0.82);
padding: 12px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 13px;
}
.dropdown a:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--primary);
padding-left: 20px;
}
}
/* ===================================== */
/* PREMIUM CLEAN MOBILE HEADER DESIGN */
/* Small • Elegant • Professional */
/* ===================================== */
@media (max-width: 768px) {
.header {
background: #fff;
border-bottom: 1px solid #ededed;
box-shadow: none;
}
.header-inner {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 12px 14px;
text-align: center;
}
/* LOGO */
/* .logo {
width: 100%;
justify-content: center;
text-decoration: none;
margin: 0;
} */
.logo {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
}
.logo-wrapper {
gap: 2px;
display: flex;
flex-direction: column;
align-items: center;
}
.logo-wrapper img {
height: 42px !important;
width: auto;
object-fit: contain;
}
.logo-tagline {
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
text-shadow: none;
margin-top: 2px;
}
/* ADDRESS + TIME */
.header-left-info {
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 0px !important;
}
.divider {
display: none;
}
.info-item {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 12.5px;
color: #444;
line-height: 1.4;
flex-wrap: wrap;
}
.info-item svg {
width: 14px;
height: 14px;
min-width: 14px;
stroke: #666;
}
.info-item span {
text-align: center;
max-width: 100%;
}
/* PHONE + ICONS */
.header-right-section {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
padding-top: 2px;
}
.phone-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: #333;
}
.phone-item svg {
width: 14px;
height: 14px;
stroke: #666;
}
/* ICONS */
.header-icons {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
}
.header-icon-btn {
font-size: 18px;
color: #222;
}
.header-icon-btn svg {
width: 18px;
height: 18px;
}
.cart-count {
width: 16px;
height: 16px;
font-size: 9px;
top: -5px;
right: -6px;
}
/* NAVBAR */
.navbar {
position: relative;
top: auto;
background: #111;
}
.nav-list {
flex-direction: column;
padding: 0;
}
.nav-item {
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-link {
width: 100%;
padding: 12px 16px;
font-size: 13px;
justify-content: space-between;
}
.dropdown {
position: static;
display: none;
opacity: 1;
visibility: visible;
transform: none;
background: #181818;
border: 0;
box-shadow: none;
min-width: 100%;
border-radius: 0;
}
.nav-item:hover .dropdown {
display: block;
}
.dropdown a {
padding: 10px 18px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.82);
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.dropdown a:hover {
background: rgba(255, 255, 255, 0.03);
color: var(--primary);
padding-left: 18px;
}
.hero-content {
max-width: 100% !important;
z-index: 99;
padding: 0 30px 0 0;
}
.hero-content {
left: 20px;
bottom: auto;
top: 50%;
transform: translate(0px, -50%);
}
.section-title {
margin-bottom: 20px;
}
}
/* =========================
MOBILE HEADER EXACT STYLE
========================= */
@media (max-width: 991px) {
.header-inner {
display: grid !important;
grid-template-columns: auto 1fr auto;
align-items: flex-start;
gap: 12px;
padding: 16px;
text-align: left;
}
/* LOGO LEFT */
.logo {
grid-column: 1;
justify-content: flex-start;
align-items: flex-start;
}
.logo-wrapper {
align-items: flex-start;
}
.logo-wrapper img {
height: 42px !important;
width: auto;
max-width: 180px;
object-fit: contain;
}
.logo-tagline {
font-size: 0.95rem;
text-align: left;
line-height: 1.2;
}
/* HIDE CENTER EMPTY SPACE */
.header-left-info {
grid-column: 1 / 3;
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 12px;
width: 100%;
align-items: flex-start;
}
.divider {
display: none;
}
.info-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 10px;
font-size: 14px;
line-height: 1.5;
text-align: left;
width: 100%;
}
.info-item svg {
width: 20px;
height: 20px;
min-width: 20px;
margin-top: 2px;
}
/* RIGHT SIDE ICONS */
.header-right-section {
grid-column: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
gap: 12px;
}
/* hide phone text on top right */
.phone-item {
display: none;
}
.header-icons {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
}
.header-icon-btn {
font-size: 20px;
position: relative;
}
.cart-count {
width: 18px;
height: 18px;
font-size: 10px;
top: -8px;
right: -8px;
}
/* NAVBAR */
.navbar {
position: relative;
top: 0;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.navbar::-webkit-scrollbar {
display: none;
}
.nav-list {
display: flex;
justify-content: flex-start;
align-items: center;
min-width: max-content;
padding: 0 10px;
}
.nav-item {
flex: 0 0 auto;
}
.nav-link {
padding: 14px 12px;
font-size: 13px;
white-space: nowrap;
}
.dropdown {
display: none !important;
}
.nav-link svg {
display: none;
}
}
/* SMALL MOBILE */
@media (max-width: 576px) {
.logo-wrapper img {
height: 36px !important;
max-width: 150px;
}
.logo-tagline {
font-size: 0.85rem;
}
.info-item {
font-size: 13px;
}
.header-icon-btn {
font-size: 18px;
}
.nav-link {
font-size: 12px;
padding: 12px 10px;
}
}
/* ===== HERO SLIDER ===== */
.hero {
position: relative;
height: 500px;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
}
.hero-slide.active {
opacity: 1;
}
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
}
.hero-content {
position: absolute;
bottom: 60px;
left: 80px;
color: #fff;
max-width: 500px;
animation: slideUp 0.8s ease;
}
.hero-content h1 {
font-size: 2.8rem;
margin-bottom: 12px;
line-height: 1.15;
}
.hero-content p {
font-size: 1rem;
opacity: 0.9;
margin-bottom: 24px;
}
.hero-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}
.hero-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: var(--transition);
border: none;
}
.hero-dot.active {
background: var(--primary);
transform: scale(1.3);
}
@keyframes slideUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ===== THUMBNAIL GALLERY ===== */
.thumb-gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
height: 220px;
}
.thumb-gallery img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.thumb-gallery img:hover {
filter: brightness(1.1);
}
/* ===== SECTIONS ===== */
.section {
padding: 60px 0;
}
.section-light {
background: var(--bg-light);
}
/* ===== PRODUCT GRID ===== */
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.product-card {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.product-card-img {
width: 100%;
height: 200px;
position: relative;
aspect-ratio: 1;
overflow: hidden;
}
.product-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.product-card:hover .product-card-img img {
transform: scale(1.07);
}
.product-card-badge {
position: absolute;
top: 12px;
left: 12px;
}
.product-card-actions {
position: absolute;
bottom: -50px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
padding: 10px;
transition: var(--transition);
}
.product-card:hover .product-card-actions {
opacity: 1;
bottom: 20px;
}
/* Button Style */
.add-to-cart-btn {
background: #f5a623;
color: #000;
font-weight: 600;
}
.add-to-cart-btn:hover {
background: #ffcc33;
}
.product-card-actions button {
background: #fff;
border: none;
width: 140px;
height: 36px;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
font-size: 15px;
transition: var(--transition);
}
.product-card-actions button:hover {
background: var(--primary);
color: #fff;
}
.product-card-info {
padding: 16px;
}
.product-card-info h3 {
font-family: var(--font-body);
font-size: 14.5px;
font-weight: 600;
color: var(--dark);
margin-bottom: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-price {
display: flex;
align-items: center;
gap: 8px;
}
.price-old {
font-size: 13px;
color: var(--text-muted);
text-decoration: line-through;
}
.price-new {
font-size: 16px;
font-weight: 700;
color: var(--primary);
}
/* ===== CATEGORY BLOCKS ===== */
.categories-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.category-block {
position: relative;
overflow: hidden;
height: 280px;
cursor: pointer;
}
.category-block img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.category-block:hover img {
transform: scale(1.05);
}
.category-block-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px;
}
.category-block-overlay h3 {
color: #fff;
font-size: 1.4rem;
margin-bottom: 6px;
}
.category-block-overlay ul {}
.category-block-overlay ul li {
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
padding: 2px 0;
}
.category-block-overlay ul li::before {
content: '→ ';
color: var(--primary-light);
}
.categories-right {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 4px;
}
.category-block-sm {
height: 138px;
}
/* ===== ABOUT STRIP ===== */
.about-strip {
display: flex;
gap: 40px;
align-items: center;
}
.about-strip-text {
flex: 1;
}
.about-strip-text p {
color: var(--text-light);
margin-bottom: 12px;
font-size: 14.5px;
}
.about-strip-img {
flex: 1;
border-radius: var(--radius-lg);
overflow: hidden;
height: 280px;
}
.about-strip-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ===== FEATURES STRIP ===== */
.features-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.feature-item {
display: flex;
align-items: center;
gap: 16px;
padding: 28px 24px;
border-right: 1px solid var(--border);
}
.feature-item:last-child {
border-right: none;
}
.feature-icon {
font-size: 28px;
color: var(--primary);
flex-shrink: 0;
}
.feature-text h4 {
font-size: 14px;
font-weight: 700;
color: var(--dark);
}
.feature-text p {
font-size: 12.5px;
color: var(--text-light);
}
/* ===== FOOTER ===== */
.footer {
background: var(--dark);
color: rgba(255, 255, 255, 0.8);
}
.footer-main {
padding: 60px 0 40px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
gap: 40px;
}
.footer-brand .logo-da {
color: #fff;
margin-bottom: 12px;
font-size: 1.4rem;
}
.footer-brand .logo-da span {
color: var(--primary);
}
.footer-brand p {
font-size: 13px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.65);
}
.footer-col h4 {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #fff;
margin-bottom: 18px;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.65);
transition: var(--transition);
}
.footer-col ul li a:hover {
color: var(--primary);
padding-left: 4px;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
font-size: 13.5px;
color: rgba(255, 255, 255, 0.65);
}
.footer-contact-item span:first-child {
color: var(--primary);
margin-top: 2px;
flex-shrink: 0;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 18px 0;
text-align: center;
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
}
/* Footer Social Icons */
.footer-social {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.footer-social a {
width: 42px;
height: 42px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 17px;
text-decoration: none;
transition: 0.3s ease;
}
.footer-social a:hover {
background: var(--primary);
color: #fff;
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(201, 146, 10, 0.25);
}
/* ===== SHOP PAGE ===== */
.shop-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 32px;
align-items: start;
}
.sidebar {
background: #fff;
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow);
}
.sidebar-section {
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--border);
}
.sidebar-section:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.sidebar-title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--dark);
margin-bottom: 16px;
}
.price-range {
display: flex;
flex-direction: column;
gap: 10px;
}
.price-range input[type="range"] {
width: 100%;
accent-color: var(--primary);
}
.price-values {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--text-light);
}
.search-box {
display: flex;
border: 1.5px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.search-box input {
flex: 1;
padding: 9px 12px;
font-size: 13.5px;
border: none;
background: transparent;
}
.search-box button {
padding: 9px 14px;
background: var(--primary);
color: #fff;
font-size: 13px;
font-weight: 600;
}
.categories-list li {
margin-bottom: 8px;
}
.categories-list li a {
font-size: 13.5px;
color: var(--text-light);
display: flex;
justify-content: space-between;
transition: var(--transition);
}
.categories-list li a:hover {
color: var(--primary);
}
.categories-list li a span {
color: var(--text-muted);
font-size: 12px;
}
.filter-attr label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--text-light);
margin-bottom: 8px;
cursor: pointer;
}
.filter-attr input[type="checkbox"] {
accent-color: var(--primary);
}
.shop-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.shop-header p {
font-size: 14px;
color: var(--text-light);
}
.shop-header select {
padding: 8px 14px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-size: 13.5px;
font-family: inherit;
background: #fff;
cursor: pointer;
}
.shop-header select:focus {
border-color: var(--primary);
}
.products-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 40px;
}
.page-btn {
width: 38px;
height: 38px;
border-radius: var(--radius);
border: 1.5px solid var(--border);
background: #fff;
font-size: 14px;
font-weight: 600;
color: var(--text);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.page-btn.active,
.page-btn:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
/* ===== ABOUT PAGE ===== */
.page-hero {
height: 320px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.page-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.page-hero-content {
position: relative;
z-index: 1;
text-align: center;
color: #fff;
}
.page-hero-content h1 {
font-size: 3rem;
letter-spacing: 4px;
text-transform: uppercase;
}
.about-content {
max-width: 1000px;
margin: 0 auto;
text-align: justify;
}
.about-content p {
font-size: 15px;
color: var(--text-light);
line-height: 1.8;
margin-bottom: 20px;
}
.about-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-split img {
border-radius: var(--radius-lg);
width: 100%;
height: 320px;
object-fit: cover;
}
.about-split-text p {
font-size: 14.5px;
color: var(--text-light);
line-height: 1.8;
}
.diff-section {
background: var(--bg-light);
}
.diff-section .section-title h2 {
font-size: 1.8rem;
}
/* MOBILE RESPONSIVE FIX */
@media (max-width: 768px) {
.about-content {
max-width: 100%;
padding: 0 15px;
text-align: left;
/* justify looks bad on mobile */
}
.about-content p {
font-size: 14px;
line-height: 1.8;
margin-bottom: 16px;
}
.about-split {
grid-template-columns: 1fr;
/* stack instead of 2 columns */
gap: 30px;
}
.about-split img {
height: auto;
max-height: 280px;
object-fit: cover;
}
.about-split-text p {
font-size: 14px;
line-height: 1.7;
}
.diff-section .section-title h2 {
font-size: 1.5rem;
text-align: center;
}
.diff-section p {
font-size: 14px !important;
padding: 0 15px;
text-align: center;
}
.vision-section {
display: grid;
grid-template-columns: 1fr;
/* single column cards */
gap: 20px;
}
.vision-card {
padding: 25px 20px;
text-align: center;
}
.vision-card h3 {
font-size: 18px;
}
.vision-card p {
font-size: 14px;
line-height: 1.7;
}
.breadcrumb-inner {
flex-wrap: wrap;
gap: 6px;
font-size: 13px;
}
.page-hero {
height: 220px;
}
.page-hero-content h1 {
font-size: 2rem;
text-align: center;
}
}
/* ===== CONTACT PAGE ===== */
.contact-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 60px;
}
.contact-card {
border: 2px solid var(--border);
border-radius: var(--radius-lg);
padding: 32px 24px;
text-align: center;
transition: var(--transition);
}
.contact-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow);
}
.contact-card-icon {
font-size: 36px;
color: var(--primary);
margin-bottom: 16px;
}
.contact-card h3 {
font-family: var(--font-heading);
font-size: 1.2rem;
margin-bottom: 10px;
}
.contact-card p {
font-size: 14px;
color: var(--text-light);
}
.contact-main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.contact-form {
background: #fff;
border-radius: var(--radius-lg);
padding: 36px;
box-shadow: var(--shadow);
}
.contact-form h2 {
font-size: 1.6rem;
margin-bottom: 24px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.form-group {
margin-bottom: 16px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-size: 14px;
transition: var(--transition);
background: var(--bg-light);
}
.form-group input:focus,
.form-group textarea:focus {
border-color: var(--primary);
background: #fff;
}
.form-group textarea {
height: 120px;
resize: vertical;
}
.contact-map {
border-radius: var(--radius-lg);
overflow: hidden;
height: 100%;
min-height: 400px;
background: var(--bg-gray);
}
.contact-map iframe {
width: 100%;
height: 100%;
border: none;
}
/* ===== LOGIN PAGE ===== */
.auth-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 900px;
margin: 60px auto;
}
.auth-card {
background: #fff;
border-radius: var(--radius-lg);
padding: 40px;
box-shadow: var(--shadow);
}
.auth-card h2 {
font-size: 1.5rem;
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 2px solid var(--bg-gray);
}
.auth-card label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.auth-card input {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
font-size: 14px;
margin-bottom: 16px;
transition: var(--transition);
}
.auth-card input:focus {
border-color: var(--primary);
}
.remember-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
font-size: 13.5px;
}
.auth-card .btn {
width: 100%;
text-align: center;
padding: 13px;
font-size: 14px;
}
.forgot-link {
text-align: center;
margin-top: 14px;
font-size: 13px;
color: var(--text-light);
}
.forgot-link a {
color: var(--primary);
}
.auth-card .note {
font-size: 13px;
color: var(--text-light);
line-height: 1.7;
margin-bottom: 20px;
}
.auth-card .note a {
color: var(--primary);
text-decoration: underline;
}
/* ===== CART FLYOUT ===== */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1100;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.cart-overlay.open {
opacity: 1;
visibility: visible;
}
.cart-flyout {
position: fixed;
top: 0;
right: -420px;
width: 380px;
height: 100vh;
background: #fff;
z-index: 1101;
box-shadow: var(--shadow-lg);
transition: right 0.4s ease;
display: flex;
flex-direction: column;
}
.cart-flyout.open {
right: 0;
}
.cart-flyout-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.cart-flyout-header h3 {
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.cart-close {
font-size: 22px;
cursor: pointer;
color: var(--text-light);
transition: var(--transition);
}
.cart-close:hover {
color: var(--dark);
}
.cart-items {
flex: 1;
overflow-y: auto;
padding: 20px 24px;
}
.cart-item {
display: flex;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--bg-gray);
}
.cart-item img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: var(--radius);
}
.cart-item-info {
flex: 1;
}
.cart-item-info h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
}
.cart-qty {
display: flex;
align-items: center;
gap: 10px;
}
.cart-qty button {
width: 26px;
height: 26px;
border: 1.5px solid var(--border);
border-radius: 4px;
font-size: 14px;
background: none;
cursor: pointer;
}
.cart-qty span {
font-size: 14px;
font-weight: 600;
}
.cart-item-price {
font-size: 15px;
font-weight: 700;
color: var(--primary);
}
.cart-footer {
padding: 20px 24px;
border-top: 1px solid var(--border);
}
.cart-subtotal {
display: flex;
justify-content: space-between;
font-size: 15px;
font-weight: 700;
margin-bottom: 16px;
}
.cart-footer .btn {
display: block;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
/* ===== SEARCH MODAL ===== */
.search-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1200;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 120px;
opacity: 0;
visibility: hidden;
transition: var(--transition);
}
.search-overlay.open {
opacity: 1;
visibility: visible;
}
.search-modal {
background: #fff;
border-radius: var(--radius-lg);
width: 600px;
padding: 32px;
box-shadow: var(--shadow-lg);
animation: slideDown 0.3s ease;
}
.search-modal h3 {
font-size: 1rem;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 16px;
color: var(--text-light);
}
.search-modal-inner {
display: flex;
border: 2px solid var(--primary);
border-radius: var(--radius);
overflow: hidden;
}
.search-modal-inner input {
flex: 1;
padding: 14px 16px;
font-size: 15px;
border: none;
}
.search-modal-inner button {
padding: 14px 20px;
background: var(--primary);
color: #fff;
font-size: 18px;
}
.search-close {
display: block;
text-align: right;
margin-top: 14px;
font-size: 13px;
color: var(--text-light);
cursor: pointer;
}
@keyframes slideDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ===== MOBILE NAV TOGGLE ===== */
.nav-toggle {
display: none;
font-size: 22px;
cursor: pointer;
color: var(--dark);
}
/* ===== ACTIVE NAV ===== */
.page-active {
color: var(--primary) !important;
}
/* ===== BREADCRUMB ===== */
.breadcrumb {
padding: 12px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 0;
}
.breadcrumb-inner {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-light);
}
.breadcrumb-inner a {
color: var(--text-light);
}
.breadcrumb-inner a:hover {
color: var(--primary);
}
.breadcrumb-inner span {
color: var(--text-muted);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.products-grid {
grid-template-columns: repeat(3, 1fr);
}
.footer-main {
grid-template-columns: 1fr 1fr;
}
.features-strip {
grid-template-columns: 1fr 1fr;
}
.feature-item:nth-child(2) {
border-right: none;
}
}
@media (max-width: 768px) {
.nav-list {
display: none;
}
.nav-toggle {
display: block;
}
.hero {
height: 360px;
}
.hero-content {
left: 30px;
bottom: 40px;
}
.hero-content h1 {
font-size: 1.8rem;
}
.products-grid,
.products-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.shop-layout {
grid-template-columns: 1fr;
}
.sidebar {
display: none;
}
.contact-cards {
grid-template-columns: 1fr;
}
.contact-main {
grid-template-columns: 1fr;
}
.about-split {
grid-template-columns: 1fr;
}
.auth-layout {
grid-template-columns: 1fr;
}
.footer-main {
grid-template-columns: 1fr;
}
.features-strip {
grid-template-columns: 1fr;
}
.feature-item {
border-right: none;
border-bottom: 1px solid var(--border);
}
.categories-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.products-grid,
.products-grid-3 {
grid-template-columns: 1fr;
}
}
/* ===== IDEAL FOR HOME CAROUSEL ===== */
.carousel-wrapper {
position: relative;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.carousel-track .product-card {
min-width: calc(33.333% - 16px);
margin-right: 24px;
flex-shrink: 0;
}
.carousel-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: var(--transition);
border: none;
}
.carousel-dot.active {
background: var(--primary);
}
.gallery-carousel-wrapper {
position: relative;
overflow: hidden;
}
.gallery-carousel {
display: flex;
transition: transform 0.4s ease;
gap: 15px;
}
.gallery-slide {
min-width: 300px;
height: 200px;
flex-shrink: 0;
border-radius: 10px;
overflow: hidden;
}
.gallery-slide img,
.gallery-slide video,
.gallery-slide iframe {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Arrows */
.gallery-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--primary);
color: #fff;
border: none;
padding: 10px 14px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
}
.gallery-btn.prev {
left: -10px;
}
.gallery-btn.next {
right: -10px;
}
.luxury-section {
padding: 60px 20px;
background: #f9f9f9;
}
.luxury-container {
display: grid;
grid-template-columns: 250px 1fr;
gap: 40px;
max-width: 1200px;
margin: auto;
}
/* LEFT MENU */
.luxury-menu {
display: flex;
flex-direction: column;
gap: 10px;
}
.luxury-item {
padding: 14px 18px;
cursor: pointer;
border-left: 3px solid transparent;
font-weight: 500;
color: #555;
transition: 0.3s;
}
.luxury-item.active {
border-color: #c89b3c;
color: #000;
font-weight: 600;
}
.luxury-item:hover {
background: #eee;
}
/* RIGHT CONTENT */
.luxury-panel {
display: none;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: center;
}
.luxury-panel.active {
display: grid;
}
.luxury-image img {
width: 100%;
border-radius: 12px;
}
.luxury-text h2 {
margin-bottom: 10px;
}
.luxury-text p {
color: #555;
margin-bottom: 15px;
}
.luxury-text ul,
.luxury-text ol {
padding-left: 18px;
}
.luxury-text li {
margin-bottom: 8px;
}
/* MOBILE */
@media (max-width: 768px) {
.luxury-container {
grid-template-columns: 1fr;
}
.luxury-panel {
grid-template-columns: 1fr;
}
.luxury-menu {
flex-direction: row;
overflow-x: auto;
}
}
.luxury-accordion {
max-width: 1200px;
margin: auto;
padding: 40px 20px;
}
/* HEADER */
.lux-header {
font-size: 22px;
font-weight: 600;
padding: 20px;
background: #fff;
cursor: pointer;
border-bottom: 1px solid #eee;
position: relative;
}
.lux-header::after {
content: "+";
position: absolute;
right: 20px;
font-size: 22px;
}
/* ACTIVE */
.lux-item.active .lux-header::after {
content: "-";
}
/* BODY */
.lux-body {
max-height: 0;
overflow: hidden;
transition: all 0.5s ease;
}
.lux-item.active .lux-body {
max-height: 2000px;
padding: 30px 0;
}
/* GRID */
.lux-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
align-items: start;
}
/* IMAGE */
.lux-image img {
width: 100%;
border-radius: 14px;
}
/* CONTENT */
.lux-content h2 {
margin-bottom: 10px;
}
.lux-content p {
color: #555;
margin-bottom: 20px;
line-height: 1.6;
}
/* BLOCKS */
/* .lux-block {
margin-bottom: 18px;
padding-left: 12px;
border-left: 3px solid #c89b3c;
} */
.lux-block h4 {
margin-bottom: 5px;
}
/* MOBILE */
@media (max-width: 768px) {
.lux-grid {
grid-template-columns: 1fr;
}
}
/* TOP SECTION */
.lux-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
margin-bottom: 30px;
}
/* IMAGE */
.lux-image img {
width: 100%;
border-radius: 14px;
}
/* INTRO */
.lux-intro h2 {
margin-bottom: 10px;
}
.lux-intro p {
color: #555;
line-height: 1.6;
}
/* FULL CONTENT */
.lux-full {
margin-top: 20px;
}
/* BLOCKS */
.lux-block {
margin-bottom: 22px;
padding-left: 14px;
border-left: 3px solid #c89b3c;
}
.lux-block h4 {
margin-bottom: 6px;
}
/* MOBILE */
@media (max-width: 768px) {
.lux-top {
grid-template-columns: 1fr;
}
}
.vision-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.vision-card {
text-align: center;
padding: 40px 25px;
border-radius: 18px;
background: #ffffff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.vision-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}
.vision-icon {
width: 60px;
height: 60px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: linear-gradient(135deg, #f7b52f, #b37a08);
}
.vision-icon svg {
width: 30px;
height: 30px;
stroke: #000;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.vision-card h3 {
font-size: 1.2rem;
margin-bottom: 12px;
font-weight: 600;
}
.vision-card p {
font-size: 14px;
color: var(--text-light);
line-height: 1.7;
}
@media (max-width: 900px) {
.vision-section {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.vision-section {
grid-template-columns: 1fr;
}
}
/* category page css */
/* HERO */
.category-hero {
position: relative;
background: url('../images/kitchen_4.png') center/cover no-repeat;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
}
.category-hero h1 {
font-size: 36px;
margin-bottom: 10px;
}
.category-hero p {
width: 70%;
margin: auto;
font-size: 14px;
}
/* GRID */
.categories {
padding: 40px 60px;
}
.cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
/* CARD */
.card {
text-align: center;
}
.img-box {
position: relative;
overflow: hidden;
border-radius: 10px;
}
.img-box img {
width: 100%;
height: 220px;
object-fit: cover;
transition: 0.4s;
}
/* OVERLAY */
.overlay {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.55);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: 0.4s;
}
/* BUTTON */
.overlay a {
padding: 10px 20px;
border: 1px solid #fff;
background: transparent;
color: #fff;
cursor: pointer;
transition: 0.3s;
}
.overlay a:hover {
background: #fff;
color: #000;
}
/* HOVER EFFECT */
.img-box:hover img {
transform: scale(1.1);
}
.img-box:hover .overlay {
opacity: 1;
}
/* TITLE */
.card h3 {
margin-top: 10px;
font-size: 16px;
}
.background-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
/* ✅ better than opacity */
z-index: 1;
}
/* Keep content above overlay */
.category-hero-content {
position: relative;
z-index: 2;
text-align: center;
}
/* BOX WITHOUT IMAGE */
.no-image {
position: relative;
height: 180px;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/* 🔥 nice gradient background */
background: linear-gradient(135deg, #1f1f1f, #3a3a3a);
color: #fff;
transition: 0.4s;
}
/* TITLE inside card */
.card-title {
font-size: 18px;
font-weight: 600;
z-index: 2;
transition: 0.3s;
}
/* cart page css */
.cart-section {
padding: 60px 0;
background: #f9f9f9;
}
.section-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 30px;
}
.cart-wrapper {
display: flex;
gap: 30px;
}
.cart-items {
flex: 2;
display: flex;
flex-direction: column;
gap: 20px;
}
.cart-item {
display: flex;
align-items: center;
gap: 20px;
background: #fff;
padding: 15px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.cart-item img {
width: 80px;
border-radius: 8px;
}
.item-details {
flex: 1;
}
.item-details h4 {
margin-bottom: 5px;
}
.price {
color: #c89b2f;
font-weight: 600;
}
.qty-box {
display: flex;
align-items: center;
margin-top: 10px;
justify-content: space-between;
}
.qty-box button {
width: 30px;
height: 30px;
border: none;
background: #eee;
cursor: pointer;
}
.qty-box input {
width: 40px;
text-align: center;
border: 1px solid #ddd;
}
.item-total {
font-weight: 600;
}
.remove-btn {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
}
/* SUMMARY */
.cart-summary {
flex: 1;
background: #fff;
padding: 25px;
border-radius: 12px;
height: fit-content;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.cart-summary h3 {
margin-bottom: 20px;
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.summary-row.total {
font-weight: 700;
font-size: 18px;
}
.btn-primary-cart {
display: inline-block;
/* important for */
width: 100%;
padding: 12px;
background: #c89b2f;
color: #fff;
border: none;
margin-top: 10px;
border-radius: 6px;
cursor: pointer;
text-align: center;
text-decoration: none;
/* remove underline */
}
.btn-primary-cart:hover {
background: #b38221;
}
.btn-outline {
width: 100%;
padding: 12px;
background: transparent;
border: 1px solid #c89b2f;
color: #c89b2f;
border-radius: 6px;
cursor: pointer;
}
/* checkout page css */
.checkout-section {
padding: 60px 0;
background: #f9f9f9;
}
.checkout-wrapper {
display: flex;
gap: 30px;
}
.checkout-form {
flex: 2;
background: #fff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.checkout-form input,
.checkout-form textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
}
.checkout-form textarea {
margin-top: 15px;
height: 100px;
}
.order-summary {
flex: 1;
background: #fff;
padding: 25px;
border-radius: 12px;
height: fit-content;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
/* faq section */
.faq-section {
padding: 60px 20px;
background: #f9f9f9;
}
.section-title {
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 40px;
}
.faq-wrapper {
max-width: 800px;
margin: auto;
}
.faq-item {
background: #fff;
margin-bottom: 15px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.faq-question {
width: 100%;
padding: 18px 20px;
font-size: 16px;
font-weight: 500;
background: none;
border: none;
outline: none;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-question span {
font-size: 20px;
transition: 0.3s;
}
.faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
font-size: 14px;
color: #555;
transition: all 0.3s ease;
}
.faq-item.active .faq-answer {
padding: 15px 20px;
max-height: 200px;
}
.faq-item.active .faq-question span {
transform: rotate(45deg);
}
/* top bar css */
/* .top-bar {
background: #f7b52f;
color: #000000;
font-size: 13px;
padding: 6px 20px;
}
.top-bar-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-left span {
margin-right: 20px;
}
.top-right {
margin-left: right;
} */
.top-bar {
background: linear-gradient(90deg, #f7b52f, #f8c868);
color: #000000;
font-size: 13px;
padding: 8px 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.top-bar-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.top-left,
.top-right {
display: flex;
align-items: center;
}
.top-item {
display: flex;
align-items: center;
gap: 6px;
opacity: 0.9;
transition: all 0.3s ease;
}
.top-item svg {
width: 14px;
height: 14px;
stroke: #000000;
fill: none;
stroke-width: 2;
}
.top-item span {
white-space: nowrap;
}
.top-item:hover {
opacity: 1;
transform: translateY(-1px);
}
/* divider line */
.divider {
width: 1px;
height: 14px;
background: #f7b52f;
margin: 0 14px;
}
/* phone highlight */
.phone span {
color: #000000;
font-weight: 500;
}
/* responsive */
@media (max-width: 768px) {
.top-bar-container {
flex-direction: column;
gap: 6px;
text-align: center;
}
.top-left {
flex-wrap: wrap;
justify-content: center;
}
.divider {
display: none;
}
}
.container-custom {
max-width: 960px;
margin: 0 auto;
padding: 30px 20px;
font-family: 'Segoe UI', sans-serif;
color: #1a1a1a;
}
/* --- Breadcrumb --- */
.breadcrumb-nav {
font-size: 13px;
color: #888;
margin-bottom: 28px;
}
.breadcrumb-nav a {
color: #888;
text-decoration: none;
}
.breadcrumb-nav a:hover {
color: #1a1a1a;
}
.breadcrumb-nav span {
margin: 0 6px;
}
.breadcrumb-nav .active {
color: #1a1a1a;
}
/* --- Layout --- */
.product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
@media (max-width: 768px) {
.product-layout {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* --- Images --- */
.product-images {
display: flex;
gap: 10px;
}
.thumb-col {
display: flex;
flex-direction: column;
gap: 8px;
width: 72px;
flex-shrink: 0;
}
.thumb-img {
width: 72px;
height: 86px;
object-fit: cover;
border-radius: 4px;
border: 1px solid #ddd;
cursor: pointer;
transition: border-color 0.2s;
}
.thumb-img.active,
.thumb-img:hover {
border-color: #1a1a1a;
}
.main-image-wrap {
flex: 1;
position: relative;
border: 1px solid #e5e5e5;
border-radius: 6px;
overflow: hidden;
background: #fce4ec;
}
.main-img {
width: 100%;
height: 360px;
object-fit: cover;
display: block;
}
.badge-offer {
position: absolute;
top: 12px;
left: 12px;
background: #fff;
border: 1px solid #ddd;
font-size: 11px;
padding: 3px 10px;
border-radius: 3px;
z-index: 2;
}
/* --- Product Info --- */
.product-title {
font-size: 22px;
font-weight: 600;
margin: 0 0 14px;
}
.price-block {
margin-bottom: 20px;
display: flex;
align-items: baseline;
gap: 10px;
}
.price-original {
font-size: 15px;
color: #aaa;
text-decoration: line-through;
}
.price-current {
font-size: 22px;
font-weight: 600;
}
/* --- Form groups --- */
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
font-size: 13px;
color: #555;
margin-bottom: 6px;
}
.form-select {
width: 100%;
padding: 9px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
appearance: none;
cursor: pointer;
}
/* --- Quantity --- */
.qty-control {
display: inline-flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 6px;
overflow: hidden;
}
.qty-control button {
width: 36px;
height: 36px;
border: none;
background: #fff;
font-size: 18px;
cursor: pointer;
color: #555;
line-height: 1;
}
.qty-control button:hover {
background: #f5f5f5;
}
.qty-control input {
width: 48px;
height: 36px;
border: none;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
font-size: 14px;
-moz-appearance: textfield;
}
.qty-control input::-webkit-inner-spin-button,
.qty-control input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
/* --- Buttons --- */
.item-details-btn {
display: block;
width: 100%;
padding: 12px;
font-size: 14px;
border-radius: 6px;
cursor: pointer;
text-align: center;
margin-bottom: 10px;
transition: opacity 0.2s;
}
.btn:hover {
opacity: 0.85;
}
.btn-outline {
background: #fff;
border: 1px solid #1a1a1a;
color: #1a1a1a;
}
.btn-dark {
background: #1a1a1a;
border: 1px solid #1a1a1a;
color: #fff;
margin-bottom: 18px;
}
/* --- Description --- */
.product-description {
font-size: 13px;
color: #555;
line-height: 1.7;
}
.divider {
border: none;
border-top: 1px solid #e5e5e5;
margin: 16px 0 0;
}
/* --- Accordion --- */
.accordion .acc-item {
border-bottom: 1px solid #e5e5e5;
}
.acc-header {
width: 100%;
background: none;
border: none;
padding: 14px 0;
font-size: 14px;
font-weight: 500;
color: #1a1a1a;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
text-align: left;
}
.acc-icon {
font-size: 12px;
color: #888;
transition: transform 0.2s;
}
.acc-body {
font-size: 13px;
color: #555;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.2s;
}
.acc-body.open {
max-height: 200px;
padding-bottom: 12px;
}
.back-btn {
display: inline-block;
margin-bottom: 15px;
padding: 8px 14px;
background: #f5f5f5;
border-radius: 6px;
text-decoration: none;
color: #333;
font-size: 14px;
transition: 0.3s;
}
.back-btn:hover {
background: #f7b52f;
color: #000000;
}
.category-instructions {
background: #fff;
padding: 30px;
margin: 40px 0;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
display: flex;
justify-content: center;
/* horizontal center */
align-items: center;
/* vertical center */
}
.category-instructions h2 {
margin-bottom: 15px;
font-size: 22px;
}
.category-instructions ol {
padding-left: 20px;
}
.category-instructions li {
margin-bottom: 10px;
line-height: 1.6;
}
/* Category Hero Content (Top Section) */
.cate-hero-content {
text-align: center;
padding: 40px 20px 0px;
max-width: 1050px;
margin: 0 auto;
}
.cate-hero-content h1 {
font-size: 38px;
font-weight: 700;
color: #222;
margin-bottom: 14px;
text-transform: capitalize;
letter-spacing: 0.5px;
position: relative;
display: inline-block;
}
/* Elegant underline */
.cate-hero-content h1::after {
content: "";
width: 70px;
height: 3px;
background: #c8a97e;
display: block;
margin: 12px auto 0;
border-radius: 10px;
}
.cate-hero-content p {
font-size: 15px;
line-height: 1.9;
color: #666;
max-width: 1050px;
margin: 0 auto 35px;
font-weight: 400;
}
/* spacing between multiple categories */
.cate-hero-content h1:not(:first-child) {
margin-top: 50px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.cate-hero-content {
padding: 40px 15px 30px;
}
.cate-hero-content h1 {
font-size: 28px;
}
.cate-hero-content p {
font-size: 14px;
line-height: 1.7;
}
}
/* checkoout options css */
/* =========================================
CHECKOUT PAGE - YELLOW THEME (MATCH DESIGN)
========================================= */
.checkout-option {
background: #f7f7f7;
padding: 80px 0;
}
.checkout-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 35px;
max-width: 1200px;
margin: auto;
}
/* LEFT LOGIN BOX */
.login-box {
width: 34%;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 10px;
padding: 35px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
/* RIGHT GUEST BOX */
.guest-box {
width: 66%;
background: #fff;
border: 1px solid #e8e8e8;
border-radius: 10px;
padding: 35px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
/* HEADINGS */
.checkout-box h3,
.checkout-box h4 {
color: #d89b10;
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid #f0d9a2;
letter-spacing: 0.5px;
}
/* LABELS */
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
font-size: 15px;
font-weight: 500;
margin-bottom: 8px;
color: #333;
}
.form-group label span {
color: red;
}
/* INPUTS */
.checkout-box input,
.checkout-box select {
width: 100%;
height: 54px;
border: 1px solid #dddddd;
border-radius: 30px;
padding: 0 20px;
font-size: 15px;
background: #fff;
outline: none;
transition: 0.3s;
}
.checkout-box input:focus {
border-color: #d89b10;
box-shadow: 0 0 0 3px rgba(216, 155, 16, 0.08);
}
/* TWO INPUTS IN ROW */
.double-row {
display: flex;
gap: 15px;
}
.double-row .form-group {
width: 50%;
}
/* TEXT */
.guest-text {
font-size: 15px;
color: #555;
margin-bottom: 18px;
line-height: 1.7;
}
/* BUTTONS */
.login-btn,
.guest-btn,
.create-account-btn {
background: #d89b10;
color: #fff;
border: none;
padding: 14px 28px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
border-radius: 4px;
cursor: pointer;
transition: 0.3s;
text-decoration: none;
display: inline-block;
}
.login-btn:hover,
.guest-btn:hover,
.create-account-btn:hover {
background: #b88208;
color: #fff;
}
/* LOGIN ACTIONS */
.login-actions {
display: flex;
align-items: center;
gap: 25px;
margin-top: 10px;
}
.forgot-link {
font-size: 14px;
font-weight: 600;
color: #132b55;
text-decoration: none;
}
.forgot-link:hover {
text-decoration: underline;
}
/* MARKETING */
.marketing-box {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #ececec;
}
.marketing-box p {
font-weight: 600;
margin-bottom: 15px;
}
.check-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.check-row input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #d89b10;
}
/* TERMS */
.terms-box {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #ececec;
}
.terms-box label {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
margin-bottom: 20px;
}
.terms-box input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #d89b10;
}
.terms-link {
color: #d89b10;
font-weight: 600;
text-decoration: none;
}
/* FULL WIDTH CREATE BUTTON */
.create-account-btn {
width: 100%;
text-align: center;
}
/* MOBILE */
@media (max-width: 991px) {
.checkout-wrapper {
flex-direction: column;
}
.login-box,
.guest-box {
width: 100%;
}
.double-row {
flex-direction: column;
gap: 0;
}
.double-row .form-group {
width: 100%;
}
}
.header-left-info {
display: flex;
margin-top: 0;
/* flex-direction: column; */
align-items: flex-start;
gap: 8px;
font-size: 12px;
color: #111;
flex: 0 0 25%;
}
.info-item {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.label {
font-weight: 600;
min-width: 75px;
}
.info-item svg,
.phone-item svg {
width: 14px;
height: 14px;
stroke: #111;
fill: none;
stroke-width: 2;
flex-shrink: 0;
}
.divider {
display: none;
/* remove | divider */
}
.header-right-section {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20px;
/* flex: 1; */
flex: 0 0 25%;
}
.phone-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
white-space: nowrap;
margin-top: 0;
}
/* floating css */
/* ===============================
FLOATING BUTTONS
================================= */
.floating-buttons {
position: fixed;
top: 50%;
left: 0;
width: 100%;
pointer-events: none;
z-index: 9999;
transform: translateY(-50%);
}
/* Common Button Style */
/* ===============================
FLOATING BUTTONS - BOTTOM CORNERS
================================= */
/* Common Button Style */
.float-btn {
position: fixed;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
transition: 0.3s ease;
pointer-events: auto;
}
/* RIGHT BOTTOM - WHATSAPP */
.whatsapp-btn {
right: 20px;
bottom: 20px;
width: 52px;
height: 52px;
background: #25D366;
color: #fff;
border-radius: 50%;
font-size: 28px;
}
.whatsapp-btn:hover {
transform: scale(1.08);
}
/* LEFT BOTTOM - BROCHURE */
.brochure-btn {
left: 20px;
bottom: 20px;
width: 72px;
height: 72px;
background: #c9920a;
color: #fff;
border-radius: 50%;
flex-direction: column;
gap: 4px;
font-size: 11px;
font-weight: 700;
text-align: center;
line-height: 1.1;
}
.brochure-btn i {
font-size: 22px;
}
.brochure-btn:hover {
transform: translateY(-4px);
background: #b88408;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.whatsapp-btn {
width: 46px;
height: 46px;
font-size: 24px;
right: 12px;
bottom: 12px;
}
.brochure-btn {
width: 62px;
height: 62px;
font-size: 10px;
left: 12px;
bottom: 12px;
}
.brochure-btn i {
font-size: 18px;
}
}
/* bespoke page css */
/* BESPOKE JOURNEY SECTION */
.bespoke-journey {
padding: 90px 0;
background: #faf8f5;
font-family: 'Poppins', sans-serif;
}
.container {
width: 90%;
max-width: 1320px;
margin: auto;
}
/* Heading */
.section-heading {
text-align: center;
margin-bottom: 70px;
}
.sub-title {
display: inline-block;
color: #c9920a;
font-size: 16px;
font-weight: 600;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-heading h2 {
font-size: 38px;
font-weight: 700;
color: #111;
max-width: 850px;
margin: 0 auto 15px;
line-height: 1.4;
}
.section-heading p {
font-size: 20px;
color: #555;
margin-bottom: 30px;
}
.consult-btn {
display: inline-block;
background: #c9920a;
color: #fff;
padding: 14px 32px;
border-radius: 40px;
text-decoration: none;
font-weight: 600;
transition: 0.3s;
}
.consult-btn:hover {
background: #111;
color: #fff;
}
/* Journey Block */
.journey-block {
display: flex;
gap: 40px;
margin-bottom: 80px;
align-items: flex-start;
}
.left-title {
width: 280px;
min-width: 280px;
background: #f7b52f;
padding: 60px 35px;
/* border-radius: 20px; */
border-radius: 0 0 20px 0;
color: #fff;
position: sticky;
top: 100px;
}
.left-title h3 {
font-size: 34px;
line-height: 1.4;
margin: 0;
font-weight: 700;
text-transform: uppercase;
}
.right-content {
flex: 1;
}
/* Grid */
.journey-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.step-card {
background: transparent;
/* border-radius: 18px; */
border: none;
/* padding: 30px; */
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); */
box-shadow: none;
padding: 0;
/* border: 1px solid #f2f2f2; */
transition: 0.3s;
}
.step-card:hover {
transform: translateY(-5px);
}
.step-card span {
display: block;
font-size: 34px;
font-weight: 700;
color: #c9920a;
margin-bottom: 5px;
}
.step-card img {
width: 100%;
height: 190px;
object-fit: cover;
border-radius: 14px;
display: block;
margin-bottom: 12px;
}
.step-card p {
margin: 0;
font-size: 15px;
line-height: 1.8;
color: #222;
}
.delivery-note {
margin-top: 30px;
}
.delivery-note p {
margin-bottom: 10px;
margin-top: 15px;
font-size: 14px;
color: #222;
line-height: 1.8;
}
/* Furniture spacing */
.furniture-section {
margin-top: 40px;
}
/* Responsive */
@media (max-width: 991px) {
.journey-block {
flex-direction: column;
}
.left-title {
width: 100%;
min-width: 100%;
position: relative;
top: auto;
border-radius: 16px;
padding: 40px 30px;
}
.journey-grid {
grid-template-columns: 1fr;
}
.section-heading h2 {
font-size: 30px;
}
.left-title h3 {
font-size: 32px;
}
.step-card img {
height: 220px;
}
}
/* service section css */
.services-section {
padding: 80px 0;
background: #faf8f3;
}
.services-section .section-title {
text-align: center;
margin-bottom: 50px;
}
.services-section .section-title h2 {
font-size: 38px;
margin-bottom: 15px;
}
.services-section .section-title p {
max-width: 750px;
margin: auto;
color: #666;
line-height: 30px;
}
.services-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 30px;
align-items: start;
}
.services-main-card,
.services-side-card {
display: flex;
flex-direction: column;
gap: 25px;
}
.service-block,
.service-small-block {
background: #fff;
padding: 35px;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border: 1px solid #eee;
}
.service-block h3,
.service-small-block h3 {
font-size: 22px;
margin-bottom: 15px;
color: #222;
}
.service-block p,
.service-small-block p,
.service-small-block li {
color: #666;
line-height: 1.8;
font-size: 15px;
}
.service-small-block ul {
padding-left: 20px;
margin-top: 10px;
}
.service-small-block li {
margin-bottom: 10px;
}
@media (max-width: 991px) {
.services-wrapper {
grid-template-columns: 1fr;
}
}
.subcategory-banner {
padding: 20px 0 10px;
background: #fffdf7;
}
.subcategory-banner-inner {
background: linear-gradient(135deg, #fff8e8, #ffffff);
border: 1px solid #f1d58a;
border-radius: 14px;
padding: 22px 28px;
/* reduced height */
text-align: center;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}
.subcategory-banner-inner h2 {
font-size: 24px;
/* smaller heading */
font-weight: 700;
color: #111;
margin-bottom: 10px;
}
.subcategory-banner-inner p {
font-size: 14px;
/* smaller text */
line-height: 1.7;
color: #555;
max-width: 1020px;
margin: 0 auto;
}
.bespoke-intro-content {
max-width: 1100px;
margin: 0 auto 60px;
text-align: center;
}
.bespoke-intro-content p {
font-size: 16px;
line-height: 1.9;
color: #555;
margin-bottom: 20px;
}
.section-heading h2 {
font-size: 34px;
font-weight: 600;
margin-bottom: 10px;
color: #222;
}
.section-heading p {
font-size: 18px;
color: #b8860b;
font-weight: 500;
}
/* my account css */
.account-card {
background: #fff;
padding: 40px;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}
.account-card h2 {
margin-bottom: 30px;
font-size: 28px;
font-weight: 600;
}
.profile-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.profile-item {
padding: 18px;
border: 1px solid #eee;
border-radius: 10px;
background: #fafafa;
}
.profile-item label {
display: block;
font-size: 14px;
color: #777;
margin-bottom: 8px;
font-weight: 500;
}
.profile-item p {
margin: 0;
font-size: 16px;
font-weight: 600;
color: #222;
}
@media (max-width: 768px) {
.profile-grid {
grid-template-columns: 1fr;
}
.account-card {
padding: 25px;
}
}
/* new about us css */
.founder-section {
padding: 90px 0;
background: #f8f6f2;
}
.founder-wrapper {
display: flex;
align-items: flex-start;
gap: 65px;
}
/* IMAGE SIDE */
.founder-image-area {
position: relative;
width: 340px;
flex-shrink: 0;
}
.founder-image-frame {
position: relative;
}
.founder-image-frame::before {
content: '';
position: absolute;
top: -12px;
left: -12px;
right: 12px;
bottom: 12px;
border: 1px solid #c9a96e;
z-index: 0;
pointer-events: none;
}
.founder-image-frame img {
width: 100%;
height: 650px;
object-fit: cover;
object-position: top center;
display: block;
position: relative;
z-index: 1;
}
.founder-overlay-card {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
background: #1a1510;
padding: 18px 22px;
border-top: 2px solid #c9a96e;
}
.founder-overlay-card h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 21px;
font-weight: 600;
color: #c9a96e;
margin: 0 0 4px;
letter-spacing: 0.5px;
}
.founder-overlay-card span {
display: block;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
margin-bottom: 5px;
}
.founder-overlay-card p {
margin: 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 1px;
}
/* CONTENT SIDE */
.founder-content {
flex: 1;
padding-top: 10px;
}
.founder-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.founder-eyebrow-line {
width: 36px;
height: 1px;
background: #c9a96e;
flex-shrink: 0;
}
.founder-label {
font-size: 10px;
letter-spacing: 3.5px;
text-transform: uppercase;
color: #c9a96e;
font-weight: 600;
}
.founder-content h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 56px;
font-weight: 300;
line-height: 1.05;
color: #1a1510;
margin-bottom: 8px;
letter-spacing: -0.5px;
}
.founder-content h2 em {
font-style: italic;
font-weight: 300;
color: #8a7050;
}
.founder-divider {
width: 60px;
height: 1px;
background: linear-gradient(90deg, #c9a96e, transparent);
margin: 22px 0 24px;
}
.founder-intro {
font-size: 15.5px !important;
line-height: 1.9 !important;
color: #3a3228 !important;
margin-bottom: 18px !important;
font-weight: 400;
}
.founder-content p {
font-size: 14px;
line-height: 1.95;
color: #6b5f52;
margin-bottom: 16px;
max-width: 620px;
font-weight: 300;
}
.founder-quote-block {
border-left: 2px solid #c9a96e;
padding: 12px 0 12px 22px;
margin: 26px 0;
background: rgba(201, 169, 110, 0.05);
}
.founder-quote-block p {
font-family: 'Cormorant Garamond', serif;
font-size: 18px;
font-style: italic;
color: #3a3228 !important;
margin: 0 !important;
line-height: 1.65;
font-weight: 400;
}
.founder-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 28px;
}
.founder-tag {
padding: 6px 14px;
border: 1px solid rgba(201, 169, 110, 0.45);
color: #8a7050;
font-size: 10px;
letter-spacing: 1.8px;
text-transform: uppercase;
font-weight: 500;
}
/* ─── VISION / MISSION / VALUES ─── */
/* .vision-section-wrap {
padding: 0 0 70px;
background: #f8f6f2;
}
.vision-section-inner {
border-top: 1px solid rgba(201, 169, 110, 0.3);
padding-top: 65px;
}
.section-eyebrow {
text-align: center;
font-size: 10px;
letter-spacing: 3.5px;
text-transform: uppercase;
color: #c9a96e;
font-weight: 600;
margin-bottom: 44px;
}
.vision-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(201, 169, 110, 0.2);
}
.vision-card {
background: #f8f6f2;
padding: 38px 34px;
position: relative;
transition: background 0.3s ease;
}
.vision-card::after {
content: '';
position: absolute;
bottom: 0;
left: 34px;
width: 0;
height: 2px;
background: #c9a96e;
transition: width 0.4s ease;
}
.vision-card:hover {
background: #f3f0ea;
transition: ease 0.3s;
}
.vision-card:hover::after {
width: calc(100% - 68px);
}
.vision-icon {
width: 34px;
height: 34px;
margin-bottom: 20px;
color: #c9a96e;
}
.vision-icon svg {
width: 100%;
height: 100%;
stroke: black;
fill: none;
stroke-width: 1.3;
}
.vision-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 23px;
font-weight: 600;
color: #1a1510;
margin-bottom: 14px;
letter-spacing: 0.3px;
}
.vision-card p {
font-size: 13.5px;
line-height: 1.9;
color: #6b5f52;
font-weight: 300;
margin: 0;
} */
/* ─── WHAT MAKES US DIFFERENT ─── */
.diff-section {
padding: 65px 0 80px;
background: #1a1510;
}
.diff-inner {
text-align: center;
}
.diff-eyebrow {
font-size: 10px;
letter-spacing: 3.5px;
text-transform: uppercase;
color: #c9a96e;
font-weight: 600;
margin-bottom: 14px;
}
.diff-section h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 42px;
font-weight: 300;
color: #f0ebe3;
margin-bottom: 18px;
letter-spacing: 0.5px;
}
.diff-sub {
font-size: 14px;
line-height: 1.95;
color: rgba(240, 235, 227, 0.5);
max-width: 680px;
margin: 0 auto 56px;
font-weight: 300;
}
.diff-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
text-align: left;
}
.diff-card {
padding: 30px 28px;
border: 1px solid rgba(201, 169, 110, 0.18);
transition: border-color 0.3s ease;
}
.diff-card:hover {
border-color: rgba(201, 169, 110, 0.5);
}
.diff-num {
font-family: 'Cormorant Garamond', serif;
font-size: 52px;
font-weight: 300;
color: rgba(201, 169, 110, 0.12);
line-height: 1;
margin-bottom: 16px;
}
.diff-card h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 21px;
font-weight: 600;
color: #f0ebe3;
margin-bottom: 12px;
}
.diff-card p {
font-size: 13px;
line-height: 1.9;
color: rgba(240, 235, 227, 0.5);
font-weight: 300;
margin: 0;
}
/* ─── RESPONSIVE ─── */
@media (max-width: 991px) {
.founder-wrapper {
flex-direction: column;
gap: 50px;
align-items: flex-start;
}
.founder-image-area {
width: 100%;
max-width: 420px;
}
.founder-content h2 {
font-size: 44px;
}
.vision-section {
grid-template-columns: 1fr;
}
.diff-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
@media (max-width: 767px) {
.container {
padding: 0 20px;
}
.founder-section {
padding: 60px 0;
}
.founder-image-frame img {
height: 420px;
}
.founder-content h2 {
font-size: 36px;
}
.founder-intro {
font-size: 14.5px !important;
}
.diff-section h2 {
font-size: 32px;
}
.vision-card {
padding: 28px 24px;
}
.diff-card {
padding: 24px 22px;
}
}
@media (max-width: 576px) {
.founder-image-frame img {
height: 360px;
}
.founder-content h2 {
font-size: 30px;
}
.founder-content p {
font-size: 13.5px;
}
.founder-tags {
gap: 6px;
}
}
/* new css */
.logo-wrapper img {
width: 100%;
max-width: 80%;
}
.responsive-headerbox {
display: none;
}
.sidebar-section {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
}
@media (max-width:1100px) {
.navbar {
display: none;
}
.navbar.active {
display: block;
}
.responsive-headerbox {
display: block;
}
.responsive-headerbox {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px;
}
.header-logo {
width: 35%;
text-align: center;
}
.logo-tagline {
margin: 5px 0 0;
}
header.header .logo-wrapper {
display: none;
}
.header-logo img {
width: 100%;
}
.menubar i {
font-size: 25px;
}
.nav-list {
display: block;
}
.nav-link {
justify-content: space-between;
}
.dropdown {
position: unset;
top: 100%;
left: 0 !important;
background: #fff;
min-width: 100% !important;
box-shadow: var(--shadow-lg);
border-radius: var(--radius);
border-top: 3px solid var(--primary);
display: none;
transform: translateY(0px);
transition: var(--transition);
z-index: 999;
opacity: 1;
visibility: visible;
}
.nav-item.active .dropdown {
display: block;
}
.nav-list {
padding: 20px 20px 50px;
}
.menubar {
display: flex;
}
.menubar i {
margin-left: 20px;
}
.breadcrumb {
padding: 12px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 0;
border-top: 1px solid var(--border);
}
.container {
width: 95%;
}
.products-grid-3 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.header .header-icons {
display: none;
}
.header-inner {
justify-content: space-between !important;
}
.page-hero-content h1 {
font-size: 40px !important;
}
.service-small-block ul {
padding-left: 0;
margin-top: 10px;
}
}
@media (max-width:991px) {
.header-left-info {
border-top: none;
}
.header-inner {
padding: 6px 20px;
}
.qty-box {
justify-content: space-between;
}
.navbar.active {
display: block;
top: 0 !important;
}
.nav-link svg {
display: flex;
flex: 0 0 50px;
justify-content: flex-end;
}
.nav-item.active .dropdown {
display: block !important;
}
.dropdown a {
color: rgb(17 17 17) !important;
}
.categories .cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.category-instructions {
margin: 20px 0;
}
.header .header-right-section {
display: none;
}
.header-inner {
padding: 15px 20px;
}
.contact-main {
display: block;
}
.contact-map {
height: 400px;
}
}
@media (max-width:768px) {
.header-logo {
width: 45%;
text-align: center !important;
}
.logo-tagline {
font-size: 20px;
text-align: center;
line-height: 1.2;
}
.about-strip {
display: block;
gap: 40px;
align-items: center;
}
.about-strip-text {
flex: 1;
margin: 25px 0 0;
}
.section-title {
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 40px;
}
p {
width: 100% !important;
}
.header .header-right-section {
display: none;
}
.menubar {
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.menubar i {
margin-left: 20px;
}
.hero-content h1 {
font-size: 25px;
}
.faq-section {
padding: 60px 0px;
background: #f9f9f9;
}
.sidebar {
display: block;
}
.founder-image-frame img {
height: auto !important;
}
.founder-content h2 br {
display: none;
}
.page-hero-content h1 {
font-size: 35px !important;
margin-bottom: 15px;
}
.services-section .section-title h2 {
font-size: 30px;
margin-bottom: 15px;
}
.services-section {
padding: 40px 0;
}
}
@media (max-width:640px) {
.section-title h2 {
font-size: 25px;
}
.section-title {
font-size: 16px;
}
.section {
padding: 40px 0;
}
.container {
width: 100%;
max-width: 100%;
}
.footer-main {
gap: 20px;
}
.contact-details {
display: block !important;
}
.mt-2 {
margin-top: 20px;
}
.logo-tagline {
font-size: 20px;
text-align: left;
line-height: 1.2;
}
.header-inner {
gap: 0;
}
.menubar i {
font-size: 22px;
}
.products-grid,
.products-grid-3 {
grid-template-columns: repeat(1, 1fr);
}
.product-card-img {
width: 100%;
height: auto;
}
.page-hero-content h1 {
font-size: 30px !important;
margin-bottom: 10px;
}
.contact-form {
padding: 36px 20px;
}
.carousel-track .product-card {
min-width: 100%;
flex-shrink: inherit;
}
}
@media (max-width:480px) {
.logo-tagline {
font-size: 19px;
}
.service-block h3,
.service-small-block h3 {
font-size: 20px;
}
.section-title {
margin-bottom: 20px;
}
}
/* order history css */
.order-history-wrapper {
max-width: 1100px;
margin: auto;
padding: 30px 15px;
}
.page-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 25px;
color: #111315;
}
.page-title:after {
content: '';
width: 80px;
height: 4px;
background: #c99205;
display: block;
margin-top: 10px;
border-radius: 10px;
}
.order-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
margin-bottom: 30px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
border: 1px solid #ececec;
}
.order-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}
.order-header {
padding: 22px 28px;
background: #111315;
border-left: 6px solid #c99205;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.order-left h3 {
margin: 0;
font-size: 22px;
font-weight: 700;
color: #fff;
}
.order-id {
opacity: .85;
margin-top: 6px;
font-size: 14px;
color: #d7d7d7;
}
.order-status {
background: #c99205;
color: #fff;
padding: 10px 18px;
border-radius: 30px;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
}
.order-body {
padding: 25px;
}
.section-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
color: #111315;
}
.item-box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
border: 1px solid #eee;
border-left: 5px solid #c99205;
border-radius: 12px;
background: #fafafa;
margin-bottom: 15px;
}
.item-box:hover {
background: #fffaf1;
}
.item-name {
font-size: 18px;
font-weight: 600;
color: #111315;
margin-bottom: 5px;
}
.item-desc {
color: #888;
font-size: 14px;
}
.item-price {
text-align: right;
}
.item-price strong {
display: block;
font-size: 20px;
color: #c99205;
}
.order-footer {
margin-top: 25px;
background: #111315;
padding: 18px;
border-radius: 12px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.info-label {
font-size: 13px;
color: #c99205;
}
.info-value {
font-size: 18px;
font-weight: 700;
color: #dfdfdf;
}
.empty-order {
text-align: center;
padding: 60px;
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
}
@media(max-width:768px) {
.order-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.item-box {
flex-direction: column;
align-items: flex-start;
}
.item-price {
margin-top: 10px;
text-align: left;
}
.footer-grid {
grid-template-columns: 1fr;
}
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
flex-wrap: wrap;
gap: 15px;
}
.card-header h2 {
margin: 0;
font-size: 28px;
font-weight: 700;
color: #222;
}
.order-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: linear-gradient(135deg, #ff6b35, #ff8c42);
color: #fff;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
font-size: 14px;
transition: all .3s ease;
box-shadow: 0 6px 20px rgba(255, 107, 53, .25);
}
.order-btn i {
font-size: 15px;
}
.order-btn:hover {
transform: translateY(-3px);
color: #fff;
text-decoration: none;
box-shadow: 0 10px 25px rgba(255, 107, 53, .35);
}
@media(max-width:576px) {
.card-header {
flex-direction: column;
align-items: flex-start;
}
.order-btn {
width: 100%;
justify-content: center;
}
}
.logout-wrapper {
margin-top: 30px;
text-align: right;
}
.logout-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: #111315;
color: #fff !important;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 15px;
border: 2px solid #c99205;
transition: all .35s ease;
box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}
.logout-btn i {
color: #c99205;
font-size: 14px;
}
.logout-btn:hover {
background: #c99205;
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(201, 146, 5, .35);
}
.logout-btn:hover i {
color: #fff;
}
@media(max-width:768px) {
.logout-wrapper {
text-align: center;
}
.logout-btn {
width: 100%;
justify-content: center;
}
}
.forgot-password-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 28px;
background: #c99205;
color: #fff;
border: none;
border-radius: 50px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all .35s ease;
box-shadow: 0 6px 18px rgba(201, 146, 5, .25);
}
.forgot-password-btn i {
font-size: 14px;
}
.forgot-password-btn:hover {
background: #111315;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
}
.forgot-password-btn:active {
transform: scale(.97);
}
.forgot-password-btn:focus {
outline: none;
}
@media(max-width:768px) {
.forgot-password-btn {
width: 100%;
justify-content: center;
}
}