/* Reset and Base Styles */
*{
margin: 0; 
padding: 0; 
box-sizing: border-box; 
}
/* Prevent horizontal overflow */
html, body{
overflow-x: hidden; 
max-width: 100%; 
}
:root{
/* Premium Color Palette */
--wooden-brown: #5D4037; 
--wooden-brown-light: #8B4513; 
--crisp-white: #FFFFFF; 
--warm-off-white: #F8F4F0; 
--dark-charcoal: #2D2D2D; 
--brushed-gold: #D4AF37; 
--warm-brass: #B8860B; 
--olive-green: #6B705E; 
--light-beige: #E8E0D2; 
/* Typography */
--font-heading: 'Cormorant Garamond', serif; 
--font-body: 'Poppins', sans-serif; 
/* Spacing */
--section-padding: 80px 0; 
--container-padding: 0 20px; 
}
body{
font-family: var(--font-body); 
color: var(--dark-charcoal); 
line-height: 1.6; 
overflow-x: hidden; 
background: var(--light-beige); 
}
.container{
max-width: 1200px; 
margin: 0 auto; 
padding: var(--container-padding); 
}
/* Announcement Bar */
.announcement-bar{
background: var(--olive-green); 
color: var(--crisp-white); 
padding: 10px 0; 
text-align: center; 
font-size: 0.9rem; 
font-weight: 500; 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
z-index: 1001; 
width: 100%; 
margin: 0; 
}
.announcement-bar p{
margin: 0; 
display: flex; 
align-items: center; 
justify-content: center; 
gap: 0.5rem; 
}
.announcement-icon{
width: 16px; 
height: 16px; 
flex-shrink: 0; 
}
/* Navigation */
.navbar{
position: fixed; 
top: 40px; 
width: 100%; 
background: var(--crisp-white); 
backdrop-filter: blur(10px); 
z-index: 1000; 
padding: 15px 0; 
transition: all 0.3s ease; 
box-shadow: 0 2px 10px rgba(93, 64, 55, 0.1); 
margin-top: 0; 
}
.nav-container{
max-width: 1200px; 
margin: 0 auto; 
padding: 0 20px; 
display: flex; 
justify-content: space-between; 
align-items: center; 
}
.nav-logo{
display: flex; 
align-items: center; 
gap: 10px; 
}
.logo-icon{
width: 250px; 
height: 75px; 
color: var(--wooden-brown); 
flex-shrink: 0; 
}
.logo-icon svg{
width: 100%; 
height: 100%; 
}
.logo-image{
width: 100%; 
height: 100%; 
object-fit: contain; 
border-radius: 4px; 
}
.logo-text h2{
font-family: var(--font-heading); 
font-size: 2rem; 
color: var(--wooden-brown); 
font-weight: 600; 
margin: 0; 
}
.logo-text span{
font-size: 0.9rem; 
color: var(--dark-charcoal); 
display: block; 
margin-top: -5px; 
}
.nav-actions{
display: flex; 
gap: 1rem; 
align-items: center; 
}
.nav-cta{
display: flex; 
align-items: center; 
gap: 0.5rem; 
background: var(--wooden-brown); 
color: var(--crisp-white); 
padding: 10px 20px; 
border-radius: 25px; 
text-decoration: none; 
font-weight: 600; 
transition: all 0.3s ease; 
font-size: 0.9rem; 
}
.nav-cta svg{
width: 16px; 
height: 16px; 
}
.nav-cta:hover{
background: var(--wooden-brown-light); 
transform: translateY(-2px); 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.3); 
}
.nav-menu{
display: flex; 
list-style: none; 
gap: 2rem; 
}
.nav-menu a{
text-decoration: none; 
color: var(--dark-charcoal); 
font-weight: 500; 
transition: color 0.3s ease; 
position: relative; 
}
.nav-menu a:hover{
color: var(--wooden-brown); 
}
.nav-menu a::after{
content: ''; 
position: absolute; 
bottom: -5px; 
left: 0; 
width: 0; 
height: 2px; 
background: var(--wooden-brown); 
transition: width 0.3s ease; 
}
.nav-menu a:hover::after{
width: 100%; 
}
.hamburger{
display: none; 
flex-direction: column; 
cursor: pointer; 
padding: 5px; 
z-index: 1002; 
}
.hamburger span{
width: 25px; 
height: 3px; 
background: var(--wooden-brown); 
margin: 3px 0; 
transition: 0.3s; 
border-radius: 2px; 
}
.hamburger.active span:nth-child(1){
transform: rotate(-45deg) translate(-5px, 6px); 
}
.hamburger.active span:nth-child(2){
opacity: 0; 
}
.hamburger.active span:nth-child(3){
transform: rotate(45deg) translate(-5px, -6px); 
}
/* Hero Section */
.hero{
min-height: 100vh; 
background: var(--light-beige); 
display: flex; 
align-items: center; 
padding: 150px 0 80px; 
position: relative; 
overflow: hidden; 
}
.hero-content{
display: grid; 
grid-template-columns: 1fr 2fr 1fr; 
gap: 3rem; 
align-items: center; 
width: 100%; 
padding: 40px 20px 0; 
}
.hero-left{
opacity: 0; 
transform: translateX(-30px); 
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}
.hero-center{
opacity: 0; 
transform: translateY(30px); 
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}
.hero-right{
opacity: 0; 
transform: translateX(30px); 
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}
.hero-left.animated{
opacity: 1; 
transform: translateX(0); 
}
.hero-center.animated{
opacity: 1; 
transform: translateY(0); 
}
.hero-right.animated{
opacity: 1; 
transform: translateX(0); 
}
.hero-left,
.hero-right{
display: flex; 
justify-content: center; 
}
.hero-center{
text-align: center; 
}
.hero-image{
width: 450px; 
height: 450px; 
border-radius: 20px; 
overflow: hidden; 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.2); 
}
.hero-image img{
width: 100%; 
height: 100%; 
object-fit: cover; 
transition: all 0.5s ease; 
}
.hero-image:hover img{
transform: translateY(-15px) scale(1.05); 
box-shadow: 0 25px 50px rgba(93, 64, 55, 0.3); 
}
.product-showcase,
.lifestyle-showcase{
width: 100%; 
height: 100%; 
position: relative; 
}
.kitchen-preview{
width: 100%; 
height: 100%; 
background: linear-gradient(45deg, var(--wooden-brown), var(--wooden-brown-light)); 
border-radius: 20px; 
}
.chef-preview{
width: 100%; 
height: 100%; 
background: linear-gradient(135deg, var(--warm-off-white), var(--crisp-white)); 
border-radius: 20px; 
position: relative; 
}
.hero-text{
max-width: 500px; 
margin: 0 auto; 
}
.hero-subtitle{
font-family: var(--font-heading); 
font-size: 1.2rem; 
color: var(--wooden-brown); 
font-style: italic; 
display: block; 
margin-bottom: 1rem; 
}
.hero-text h1{
font-family: var(--font-heading); 
font-size: 3.5rem; 
font-weight: 600; 
color: var(--dark-charcoal); 
margin-bottom: 1.5rem; 
line-height: 1.2; 
}
.hero-text p{
font-size: 1.1rem; 
color: var(--dark-charcoal); 
margin-bottom: 2rem; 
opacity: 0.8; 
line-height: 1.6; 
}
.btn{
padding: 15px 30px; 
text-decoration: none; 
border-radius: 5px; 
font-weight: 600; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
display: inline-block; 
border: 2px solid transparent; 
position: relative; 
overflow: hidden; 
}
.btn::before{
content: ''; 
position: absolute; 
top: 0; 
left: -100%; 
width: 100%; 
height: 100%; 
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); 
transition: left 0.6s ease; 
}
.btn:hover::before{
left: 100%; 
}
.btn-primary{
background: var(--wooden-brown); 
color: var(--crisp-white); 
border-color: var(--wooden-brown); 
}
.btn-primary:hover{
background: var(--wooden-brown-light); 
border-color: var(--wooden-brown-light); 
transform: translateY(-2px); 
box-shadow: 0 10px 25px rgba(93, 64, 55, 0.3); 
}
.btn-secondary{
background: transparent; 
color: var(--wooden-brown); 
border-color: var(--wooden-brown); 
}
.btn-secondary:hover{
background: var(--wooden-brown); 
color: var(--crisp-white); 
transform: translateY(-2px); 
box-shadow: 0 10px 25px rgba(93, 64, 55, 0.3); 
}
/* Service Guarantee Section */
.service-guarantee{
padding: 60px 0; 
background: var(--crisp-white); 
border-bottom: 1px solid rgba(93, 64, 55, 0.1); 
}
.guarantee-grid{
display: grid; 
grid-template-columns: repeat(4, 1fr); 
gap: 2rem; 
}
.guarantee-item{
display: flex; 
align-items: center; 
gap: 1rem; 
padding: 1.5rem; 
border-right: 1px solid rgba(93, 64, 55, 0.1); 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
opacity: 0; 
transform: translateY(30px); 
}
.guarantee-item.animated{
opacity: 1; 
transform: translateY(0); 
}
.guarantee-item:hover{
transform: translateY(-5px); 
background: var(--warm-off-white); 
border-radius: 10px; 
}
.guarantee-item:last-child{
border-right: none; 
}
.guarantee-icon{
width: 32px; 
height: 32px; 
color: var(--wooden-brown); 
flex-shrink: 0; 
}
.guarantee-icon svg{
width: 100%; 
height: 100%; 
}
.guarantee-text h3{
font-size: 1rem; 
font-weight: 600; 
color: var(--dark-charcoal); 
margin-bottom: 0.3rem; 
}
.guarantee-text p{
font-size: 0.9rem; 
color: var(--dark-charcoal); 
opacity: 0.7; 
margin: 0; 
}
/* Product Categories Section */
.product-categories{
padding: var(--section-padding); 
background: var(--warm-off-white); 
}
.categories-grid{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 2rem; 
}
/* Index Page Product Categories Section - Unique Classes */
.index-product-categories{
padding: var(--section-padding); 
background: var(--warm-off-white); 
}
.index-categories-grid{
display: grid; 
grid-template-columns: repeat(6, 1fr); 
grid-template-rows: auto auto; 
gap: 2rem; 
margin-top: 3rem; 
max-width: 1000px; 
margin-left: auto; 
margin-right: auto; 
}
.index-category-card:nth-child(1),
.index-category-card:nth-child(2),
.index-category-card:nth-child(3){
grid-row: 1; 
grid-column: span 2; 
}
.index-category-card:nth-child(4),
.index-category-card:nth-child(5){
grid-row: 2; 
grid-column: span 3; 
}
.index-category-card{
position: relative; 
height: 300px; 
border-radius: 15px; 
overflow: hidden; 
cursor: pointer; 
transition: transform 0.3s ease; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
}
.index-category-card:hover{
transform: translateY(-10px); 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.2); 
}
.index-category-image{
width: 100%; 
height: 100%; 
position: relative; 
overflow: hidden; 
}
.index-category-image img{
width: 100%; 
height: 100%; 
object-fit: cover; 
transition: transform 0.3s ease; 
}
.index-category-card:hover .index-category-image img{
transform: scale(1.05); 
}
.index-category-overlay{
position: absolute; 
bottom: 0; 
left: 0; 
right: 0; 
background: linear-gradient(transparent, rgba(45, 45, 45, 0.9)); 
color: var(--crisp-white); 
padding: 2rem; 
transform: translateY(0); 
transition: transform 0.3s ease; 
}
.index-category-card:hover .index-category-overlay{
transform: translateY(0); 
}
.index-category-overlay h3{
font-family: var(--font-heading); 
font-size: 1.5rem; 
margin-bottom: 0.5rem; 
font-weight: 600; 
}
.index-category-btn{
display: inline-block; 
padding: 0.8rem 1.5rem; 
background: var(--wooden-brown); 
color: var(--crisp-white); 
text-decoration: none; 
border-radius: 25px; 
font-weight: 600; 
transition: all 0.3s ease; 
font-size: 0.9rem; 
}
.index-category-btn:hover{
background: var(--wooden-brown-light); 
transform: translateY(-2px); 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.3); 
}
/* Section Headers */
.section-header{
text-align: center; 
margin-bottom: 4rem; 
}
.section-header h2{
font-family: var(--font-heading); 
font-size: 3rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 600; 
}
.section-header p{
font-size: 1.2rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
max-width: 600px; 
margin: 0 auto; 
}
/* About Section */
.about{
padding: var(--section-padding); 
background: var(--crisp-white); 
}
.process-grid{
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
gap: 3rem; 
margin-top: 3rem; 
}
.process-item{
text-align: center; 
padding: 2rem; 
background: var(--warm-off-white); 
border-radius: 15px; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
position: relative; 
overflow: hidden; 
}
.process-item::before{
content: ''; 
position: absolute; 
top: 0; 
left: -100%; 
width: 100%; 
height: 100%; 
background: linear-gradient(90deg, transparent, rgba(93, 64, 55, 0.1), transparent); 
transition: left 0.6s ease; 
}
.process-item:hover{
transform: translateY(-15px) scale(1.02); 
box-shadow: 0 25px 50px rgba(93, 64, 55, 0.15); 
background: var(--crisp-white); 
}
.process-item:hover::before{
left: 100%; 
}
.process-icon{
width: 48px; 
height: 48px; 
margin: 0 auto 1.5rem; 
color: var(--wooden-brown); 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
position: relative; 
}
.process-icon svg{
width: 100%; 
height: 100%; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}
.process-item:hover .process-icon{
transform: scale(1.1) rotate(5deg); 
color: var(--olive-green); 
}
.process-item:hover .process-icon svg{
filter: drop-shadow(0 4px 8px rgba(107, 112, 94, 0.3)); 
}
.process-item h3{
font-family: var(--font-heading); 
font-size: 1.8rem; 
color: var(--wooden-brown); 
margin-bottom: 1rem; 
font-weight: 600; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}
.process-item p{
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.7; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}
.process-item:hover h3{
color: var(--olive-green); 
transform: translateY(-2px); 
}
.process-item:hover p{
opacity: 1; 
transform: translateY(-2px); 
}
/* Precision Engineering Section */
.precision-engineering{
padding: var(--section-padding); 
background: var(--light-beige); 
}
.precision-content{
display: grid; 
grid-template-columns: 1fr 1fr; 
gap: 4rem; 
align-items: stretch; 
margin-top: 3rem; 
}
.precision-text{
display: flex; 
flex-direction: column; 
height: 100%; 
}
.precision-text h3{
font-family: var(--font-heading); 
font-size: 2rem; 
color: var(--dark-charcoal); 
margin-bottom: 1.5rem; 
font-weight: 600; 
}
.precision-text p{
font-size: 1.1rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
margin-bottom: 2rem; 
line-height: 1.7; 
}
.precision-features{
list-style: none; 
margin-bottom: 2rem; 
}
.precision-features li{
padding: 1rem 0; 
color: var(--dark-charcoal); 
position: relative; 
padding-left: 0; 
font-size: 22px; 
display: flex; 
align-items: center; 
gap: 1.5rem; 
}
.precision-features li::before{
display: none; 
}
.precision-icon{
font-size: 16px; 
color: var(--brushed-gold); 
flex-shrink: 0; 
display: inline-block; 
width: 20px; 
text-align: center; 
}
.precision-features li .precision-icon{
font-size: 16px; 
}
.precision-stats{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 1.5rem; 
margin-top: auto; 
align-items: stretch; 
}
.stat-item{
text-align: center; 
padding: 1rem; 
background: transparent; 
border: 2px solid var(--wooden-brown); 
border-radius: 15px; 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.1); 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
opacity: 0; 
transform: translateY(30px); 
display: flex; 
flex-direction: column; 
justify-content: center; 
min-height: 80px; 
}
.stat-item.animated{
opacity: 1; 
transform: translateY(0); 
}
.stat-item:hover{
transform: translateY(-5px); 
}
.stat-number{
font-family: var(--font-heading); 
font-size: 1.8rem; 
font-weight: 600; 
color: var(--wooden-brown); 
margin-bottom: 0.3rem; 
}
.stat-label{
font-size: 0.8rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
font-weight: 500; 
}
.precision-visual{
display: flex; 
justify-content: center; 
align-items: stretch; 
height: 100%; 
min-height: 500px; 
}
.precision-single-image{
position: relative; 
width: 100%; 
height: 100%; 
border-radius: 15px; 
overflow: hidden; 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.2); 
transition: transform 0.3s ease; 
}
.precision-single-image:hover{
transform: scale(1.02); 
}
.precision-single-image img{
width: 100%; 
height: 100%; 
object-fit: cover; 
object-position: center; 
}
.image-overlay{
position: absolute; 
bottom: 0; 
left: 0; 
right: 0; 
background: linear-gradient(transparent, rgba(45, 45, 45, 0.9)); 
color: var(--crisp-white); 
padding: 1.5rem; 
transform: translateY(100%); 
transition: transform 0.3s ease; 
}
.precision-single-image:hover .image-overlay{
transform: translateY(0); 
}
.image-overlay h4{
font-family: var(--font-heading); 
font-size: 1.2rem; 
margin-bottom: 0.5rem; 
font-weight: 600; 
}
.image-overlay p{
font-size: 0.9rem; 
opacity: 0.9; 
margin: 0; 
}
/* The TKC Difference Section */
.tkc-difference{
padding: 6rem 0; 
background: var(--crisp-white); 
position: relative; 
overflow: hidden; 
}
.tkc-difference::before{
content: ''; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background:
radial-gradient(circle at 20% 20%, rgba(93, 64, 55, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(107, 112, 94, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 60%, rgba(212, 175, 55, 0.03) 0%, transparent 50%); 
pointer-events: none; 
}
.difference-header{
text-align: center; 
margin-bottom: 4rem; 
position: relative; 
z-index: 2; 
}
.section-badge{
display: inline-block; 
background: var(--wooden-brown); 
color: var(--crisp-white); 
padding: 0.5rem 1.5rem; 
border-radius: 25px; 
font-size: 0.9rem; 
font-weight: 600; 
text-transform: uppercase; 
letter-spacing: 1px; 
margin-bottom: 1.5rem; 
box-shadow: 0 4px 15px rgba(93, 64, 55, 0.3); 
}
.difference-header h2{
font-family: var(--font-heading); 
font-size: 3.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1.5rem; 
font-weight: 700; 
position: relative; 
}
.difference-header h2::after{
content: ''; 
position: absolute; 
bottom: -15px; 
left: 50%; 
transform: translateX(-50%); 
width: 80px; 
height: 4px; 
background: var(--wooden-brown); 
border-radius: 2px; 
}
.difference-header p{
font-size: 1.2rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
max-width: 700px; 
margin: 0 auto; 
line-height: 1.6; 
}
.difference-showcase{
display: grid; 
grid-template-columns: 1fr 1fr 1fr; 
gap: 3rem; 
align-items: center; 
margin-bottom: 4rem; 
position: relative; 
z-index: 2; 
}
.showcase-left,
.showcase-right{
display: flex; 
flex-direction: column; 
gap: 2rem; 
}
.innovation-card{
background: var(--crisp-white); 
border: 2px solid transparent; 
border-radius: 20px; 
padding: 2rem; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
position: relative; 
overflow: hidden; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
}
.innovation-card::before{
content: ''; 
position: absolute; 
top: 0; 
left: -100%; 
width: 100%; 
height: 100%; 
background: linear-gradient(90deg, transparent, rgba(93, 64, 55, 0.05), transparent); 
transition: left 0.6s ease; 
}
.innovation-card:hover::before{
left: 100%; 
}
.innovation-card:hover{
transform: translateY(-10px); 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.15); 
}
.card-number{
font-size: 3rem; 
font-weight: 700; 
color: var(--wooden-brown); 
margin-bottom: 1rem; 
opacity: 0.3; 
font-family: var(--font-heading); 
}
.card-content h3{
font-family: var(--font-heading); 
font-size: 1.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 600; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}
.innovation-card:hover .card-content h3{
color: var(--wooden-brown); 
transform: translateY(-2px); 
}
.card-content p{
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.6; 
margin-bottom: 1.5rem; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}
.innovation-card:hover .card-content p{
opacity: 1; 
transform: translateY(-2px); 
}
.tech-features{
display: flex; 
gap: 0.5rem; 
flex-wrap: wrap; 
}
.tech-tag{
background: var(--wooden-brown); 
color: var(--crisp-white); 
padding: 0.3rem 0.8rem; 
border-radius: 15px; 
font-size: 0.8rem; 
font-weight: 500; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
box-shadow: 0 2px 8px rgba(93, 64, 55, 0.2); 
}
.innovation-card:hover .tech-tag{
transform: translateY(-2px) scale(1.05); 
box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3); 
}
.showcase-center{
display: flex; 
justify-content: center; 
align-items: center; 
}
.center-visual{
display: flex; 
flex-direction: column; 
gap: 2rem; 
align-items: center; 
}
.visual-circle{
width: 120px; 
height: 120px; 
border-radius: 50%; 
background: var(--wooden-brown); 
display: flex; 
align-items: center; 
justify-content: center; 
position: relative; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.3); 
}
.visual-circle:hover{
transform: scale(1.1) rotate(5deg); 
box-shadow: 0 15px 40px rgba(93, 64, 55, 0.4); 
}
.visual-circle:nth-child(2){
background: var(--wooden-brown); 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.3); 
}
.visual-circle:nth-child(2):hover{
box-shadow: 0 15px 40px rgba(93, 64, 55, 0.4); 
}
.visual-circle:nth-child(3){
background: var(--wooden-brown); 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.3); 
}
.visual-circle:nth-child(3):hover{
box-shadow: 0 15px 40px rgba(93, 64, 55, 0.4); 
}
.circle-content{
text-align: center; 
color: var(--crisp-white); 
}
.circle-content h4{
font-family: var(--font-heading); 
font-size: 1rem; 
font-weight: 600; 
margin-bottom: 0.5rem; 
}
.circle-icon svg{
width: 30px; 
height: 30px; 
color: var(--crisp-white); 
}
/* Index Future CTA Section - Unique Classes */
.index-future-cta{
text-align: center; 
padding: 4rem 2rem; 
background: linear-gradient(135deg, var(--warm-off-white) 0%, var(--light-beige) 100%); 
position: relative; 
z-index: 2; 
}
.index-future-title{
font-family: var(--font-heading); 
font-size: 2.5rem; 
font-weight: 700; 
color: var(--wooden-brown); 
margin-bottom: 1rem; 
opacity: 0.8; 
}
.index-future-description{
color: var(--dark-charcoal); 
opacity: 0.8; 
font-size: 1.1rem; 
margin-bottom: 2rem; 
line-height: 1.6; 
}
.index-future-btn{
background: var(--wooden-brown); 
color: var(--crisp-white); 
border: none; 
padding: 0.6rem 1.2rem; 
font-size: 0.95rem; 
font-weight: 600; 
border-radius: 50px; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
box-shadow: 0 8px 25px rgba(93, 64, 55, 0.3); 
text-decoration: none; 
display: inline-block; 
min-width: 100px; 
cursor: pointer; 
}
.index-future-btn:hover{
background: var(--wooden-brown-light); 
transform: translateY(-3px) scale(1.05); 
box-shadow: 0 12px 35px rgba(93, 64, 55, 0.4); 
}
/* Gallery Section - Index Page */
.gallery{
padding: var(--section-padding); 
background: var(--light-beige); 
}
.gallery-filters{
display: flex; 
justify-content: center; 
gap: 1rem; 
margin-bottom: 3rem; 
flex-wrap: wrap; 
}
.filter-btn{
padding: 12px 24px; 
border: 2px solid var(--wooden-brown); 
background: var(--crisp-white); 
color: var(--wooden-brown); 
border-radius: 25px; 
cursor: pointer; 
font-weight: 600; 
transition: all 0.3s ease; 
font-family: var(--font-body); 
}
.filter-btn:hover,
.filter-btn.active{
background: var(--wooden-brown); 
color: var(--crisp-white); 
}
.gallery-grid{
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
gap: 2rem; 
}
.gallery-item{
position: relative; 
height: 300px; 
border-radius: 15px; 
overflow: hidden; 
cursor: pointer; 
transition: transform 0.3s ease; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
}
.gallery-item:hover{
transform: translateY(-10px); 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.2); 
}
.gallery-image{
width: 100%; 
height: 100%; 
position: relative; 
overflow: hidden; 
}
.gallery-image img{
width: 100%; 
height: 100%; 
object-fit: cover; 
transition: transform 0.3s ease; 
}
.gallery-item:hover .gallery-image img{
transform: scale(1.05); 
}
.gallery-overlay{
position: absolute; 
bottom: 0; 
left: 0; 
right: 0; 
background: linear-gradient(transparent, rgba(45, 45, 45, 0.9)); 
color: var(--crisp-white); 
padding: 2rem; 
transform: translateY(100%); 
transition: transform 0.3s ease; 
}
.gallery-item:hover .gallery-overlay{
transform: translateY(0); 
}
.gallery-overlay h3{
font-family: var(--font-heading); 
font-size: 1.5rem; 
margin-bottom: 0.5rem; 
font-weight: 600; 
}
.gallery-overlay p{
opacity: 0.9; 
margin: 0; 
}
/* Gallery Page Section - Unique Classes */
.gallery-page-section{
padding: 6rem 0; 
background: var(--crisp-white); 
}
.gallery-page-header{
text-align: center; 
margin-bottom: 4rem; 
}
.gallery-page-header h2{
font-family: var(--font-heading); 
font-size: 2.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 600; 
}
.gallery-page-header p{
color: var(--dark-charcoal); 
opacity: 0.7; 
font-size: 1.1rem; 
max-width: 600px; 
margin: 0 auto; 
}
.gallery-page-filters{
padding: 2rem 0; 
background: var(--warm-off-white); 
}
.gallery-filter-buttons{
display: flex; 
justify-content: center; 
gap: 1rem; 
flex-wrap: wrap; 
}
.gallery-filter-btn{
padding: 0.8rem 2rem; 
border: 2px solid var(--wooden-brown); 
background: transparent; 
color: var(--wooden-brown); 
border-radius: 25px; 
font-weight: 600; 
cursor: pointer; 
transition: all 0.3s ease; 
font-size: 0.95rem; 
}
.gallery-filter-btn:hover,
.gallery-filter-btn.active{
background: var(--wooden-brown); 
color: var(--crisp-white); 
transform: translateY(-2px); 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.3); 
}
.gallery-page-grid{
padding: 4rem 0; 
background: var(--crisp-white); 
}
.gallery-page-items{
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
gap: 2rem; 
margin-top: 2rem; 
}
.gallery-page-item{
position: relative; 
border-radius: 15px; 
overflow: hidden; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
transition: all 0.4s ease; 
background: var(--crisp-white); 
}
.gallery-page-item:hover{
transform: translateY(-10px); 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.2); 
}
.gallery-page-image{
position: relative; 
height: 300px; 
overflow: hidden; 
}
.gallery-page-image img{
width: 100%; 
height: 100%; 
object-fit: cover; 
transition: transform 0.4s ease; 
cursor: pointer; 
}
.gallery-page-item:hover .gallery-page-image img{
transform: scale(1.05); 
}
/* Gallery page images are now clickable for lightbox - no overlay needed */
/* Lightbox Styles */
.lightbox{
display: none; 
position: fixed; 
z-index: 9999; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
background-color: rgba(0, 0, 0, 0.9); 
backdrop-filter: blur(5px); 
}
.lightbox-content{
position: relative; 
margin: auto; 
padding: 20px; 
width: 90%; 
max-width: 1200px; 
height: 90%; 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
animation: lightboxFadeIn 0.3s ease; 
}
@keyframes lightboxFadeIn{
from{opacity: 0; transform: scale(0.8); }
to{opacity: 1; transform: scale(1); }
}
.lightbox-close{
position: absolute; 
top: 20px; 
right: 35px; 
color: var(--crisp-white); 
font-size: 40px; 
font-weight: bold; 
cursor: pointer; 
z-index: 10000; 
transition: all 0.3s ease; 
}
.lightbox-close:hover{
color: var(--wooden-brown); 
transform: scale(1.1); 
}
#lightbox-image{
max-width: 100%; 
max-height: 80%; 
object-fit: contain; 
border-radius: 10px; 
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); 
}
.lightbox-caption{
text-align: center; 
margin-top: 20px; 
color: var(--crisp-white); 
}
.lightbox-caption h3{
font-family: var(--font-heading); 
font-size: 1.5rem; 
font-weight: 600; 
margin: 0; 
}
.lightbox-nav{
position: absolute; 
top: 50%; 
width: 100%; 
display: flex; 
justify-content: space-between; 
padding: 0 20px; 
transform: translateY(-50%); 
pointer-events: none; 
}
.lightbox-prev,
.lightbox-next{
background: rgba(93, 64, 55, 0.8); 
color: var(--crisp-white); 
border: none; 
padding: 15px 20px; 
font-size: 24px; 
cursor: pointer; 
border-radius: 50%; 
transition: all 0.3s ease; 
pointer-events: all; 
backdrop-filter: blur(10px); 
}
.lightbox-prev:hover,
.lightbox-next:hover{
background: var(--wooden-brown); 
transform: scale(1.1); 
}
.lightbox-prev{
left: 20px; 
}
.lightbox-next{
right: 20px; 
}
/* Trusted Partners Section */
.trusted-partners{
padding: var(--section-padding); 
background: var(--crisp-white); 
}
.section-underline{
width: 60px; 
height: 3px; 
background: var(--wooden-brown); 
margin: 1rem auto 0; 
border-radius: 2px; 
}
.partners-grid{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 3rem 2rem; 
margin-top: 4rem; 
max-width: 1000px; 
margin-left: auto; 
margin-right: auto; 
align-items: center; 
}
.partner-item{
display: flex; 
justify-content: center; 
align-items: center; 
padding: 2rem; 
background: var(--crisp-white); 
border-radius: 15px; 
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); 
transition: all 0.3s ease; 
min-height: 120px; 
}
.partner-item:hover{
transform: translateY(-5px); 
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); 
}
.partner-logo{
display: flex; 
justify-content: center; 
align-items: center; 
width: 100%; 
height: 80px; 
}
.partner-logo img{
max-width: 100%; 
max-height: 60px; 
width: auto; 
height: auto; 
object-fit: contain; 
filter: grayscale(100%) opacity(0.7); 
transition: all 0.3s ease; 
}
.partner-item:hover .partner-logo img{
filter: grayscale(0%) opacity(1); 
transform: scale(1.05); 
}
.logo-placeholder{
display: flex; 
justify-content: center; 
align-items: center; 
width: 80px; 
height: 60px; 
background: var(--wooden-brown); 
color: var(--crisp-white); 
font-size: 1.2rem; 
font-weight: 600; 
border-radius: 8px; 
filter: grayscale(100%) opacity(0.7); 
transition: all 0.3s ease; 
}
.partner-item:hover .logo-placeholder{
filter: grayscale(0%) opacity(1); 
transform: scale(1.05); 
}
/* Contact Information Section */
.contact-info-section{
padding: 6rem 0; 
background: var(--light-beige); 
}
/* Contact Page Specific Styles */
.contact-info-grid{
display: grid; 
grid-template-columns: repeat(2, 1fr); 
gap: 2rem; 
margin-top: 4rem; 
max-width: 1000px; 
margin-left: auto; 
margin-right: auto; 
}
.contact-info-card{
background: var(--crisp-white); 
padding: 2rem 1.5rem; 
border-radius: 16px; 
box-shadow: 0 8px 25px rgba(93, 64, 55, 0.08); 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
display: flex; 
align-items: flex-start; 
gap: 1.2rem; 
border: 1px solid rgba(93, 64, 55, 0.05); 
position: relative; 
overflow: hidden; 
min-height: 120px; 
}
.contact-info-card::before{
content: ''; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
height: 4px; 
background: linear-gradient(90deg, var(--wooden-brown), var(--wooden-brown-light)); 
transform: scaleX(0); 
transition: transform 0.3s ease; 
}
.contact-info-card:hover::before{
transform: scaleX(1); 
}
.contact-info-card:hover{
transform: translateY(-8px); 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.12); 
border-color: rgba(93, 64, 55, 0.1); 
}
.contact-info-icon{
width: 60px; 
height: 60px; 
background: linear-gradient(135deg, var(--wooden-brown), var(--wooden-brown-light)); 
border-radius: 16px; 
display: flex; 
align-items: center; 
justify-content: center; 
color: var(--crisp-white); 
flex-shrink: 0; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
box-shadow: 0 4px 15px rgba(93, 64, 55, 0.2); 
margin-top: 0.5rem; 
position: relative; 
font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome", sans-serif; 
}
.contact-info-icon *{
fill: var(--crisp-white) !important; 
color: var(--crisp-white) !important; 
}
.contact-info-card:hover .contact-info-icon{
transform: scale(1.05) rotate(3deg); 
box-shadow: 0 8px 25px rgba(93, 64, 55, 0.3); 
}
.contact-info-icon i,
.contact-info-icon svg{
font-size: 24px; 
width: 24px; 
height: 24px; 
transition: all 0.3s ease; 
color: var(--crisp-white) !important; 
display: block; 
text-align: center; 
line-height: 1; 
position: relative; 
z-index: 1; 
}
.contact-info-icon i::before{
color: var(--crisp-white) !important; 
font-weight: 900; 
}
.contact-info-icon .fas{
font-weight: 900; 
}
.contact-info-icon svg{
fill: var(--crisp-white); 
}
.contact-info-card:hover .contact-info-icon i,
.contact-info-card:hover .contact-info-icon svg{
transform: scale(1.05); 
}
.contact-info-content{
flex: 1; 
min-width: 0; 
}
.contact-info-content h3{
font-family: var(--font-heading); 
font-size: 1.3rem; 
color: var(--dark-charcoal); 
margin-bottom: 0.6rem; 
font-weight: 600; 
transition: all 0.3s ease; 
line-height: 1.3; 
}
.contact-info-card:hover .contact-info-content h3{
color: var(--wooden-brown); 
}
.contact-info-content p{
color: var(--dark-charcoal); 
opacity: 0.7; 
line-height: 1.5; 
margin: 0; 
font-size: 0.9rem; 
transition: all 0.3s ease; 
}
.contact-info-card:hover .contact-info-content p{
opacity: 0.9; 
}
/* Contact Form Section */
.contact-form-section{
padding: 6rem 0; 
background: var(--crisp-white); 
}
.contact-form-container{
max-width: 900px; 
margin: 4rem auto 0; 
background: var(--crisp-white); 
padding: 4rem; 
border-radius: 24px; 
box-shadow: 0 20px 60px rgba(93, 64, 55, 0.08); 
border: 1px solid rgba(93, 64, 55, 0.05); 
position: relative; 
overflow: hidden; 
}
.contact-form-container::before{
content: ''; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
height: 6px; 
background: linear-gradient(90deg, var(--wooden-brown), var(--wooden-brown-light)); 
}
.contact-form-row{
display: grid; 
grid-template-columns: 1fr 1fr; 
gap: 2rem; 
margin-bottom: 2rem; 
}
.contact-form-wrapper{
position: relative; 
}
.contact-form-wrapper h3{
font-family: var(--font-heading); 
font-size: 2rem; 
color: var(--dark-charcoal); 
margin-bottom: 0.5rem; 
font-weight: 600; 
text-align: center; 
}
.contact-form-wrapper p{
text-align: center; 
color: var(--dark-charcoal); 
opacity: 0.7; 
margin-bottom: 3rem; 
font-size: 1.1rem; 
}
.contact-form-group{
position: relative; 
margin-bottom: 1.5rem; 
}
.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea{
width: 100%; 
padding: 1rem 1.5rem; 
border: 2px solid rgba(93, 64, 55, 0.1); 
border-radius: 12px; 
font-size: 1rem; 
font-family: var(--font-body); 
background: var(--warm-off-white); 
transition: all 0.3s ease; 
outline: none; 
}
.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus{
border-color: var(--wooden-brown); 
background: var(--crisp-white); 
box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.1); 
transform: translateY(-2px); 
}
.contact-form-group textarea{
resize: vertical; 
min-height: 120px; 
line-height: 1.6; 
}
.btn-primary{
background: linear-gradient(135deg, var(--wooden-brown), var(--wooden-brown-light)); 
color: var(--crisp-white); 
border: none; 
padding: 1rem 3rem; 
border-radius: 12px; 
font-size: 1.1rem; 
font-weight: 600; 
cursor: pointer; 
transition: all 0.3s ease; 
box-shadow: 0 4px 15px rgba(93, 64, 55, 0.2); 
width: 100%; 
margin-top: 1rem; 
}
.btn-primary:hover{
transform: translateY(-2px); 
box-shadow: 0 8px 25px rgba(93, 64, 55, 0.3); 
background: linear-gradient(135deg, var(--wooden-brown-light), var(--wooden-brown)); 
}
/* View All Projects button - Desktop */
.btn-view-all-projects{
background: linear-gradient(135deg, var(--wooden-brown), var(--wooden-brown-light)); 
color: var(--crisp-white); 
border: none; 
padding: 12px 20px; 
font-size: 0.9rem; 
font-weight: 600; 
border-radius: 8px; 
cursor: pointer; 
transition: all 0.3s ease; 
text-decoration: none; 
display: inline-block; 
text-align: center; 
width: auto; 
min-width: 140px; 
max-width: 160px; 
box-shadow: 0 4px 15px rgba(93, 64, 55, 0.2); 
}
.btn-view-all-projects:hover{
transform: translateY(-2px); 
box-shadow: 0 8px 25px rgba(93, 64, 55, 0.3); 
background: linear-gradient(135deg, var(--wooden-brown-light), var(--wooden-brown)); 
color: var(--crisp-white); 
text-decoration: none; 
}
/* Section Header */
.section-header{
text-align: center; 
margin-bottom: 4rem; 
}
.section-header h2{
font-family: var(--font-heading); 
font-size: 2.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 600; 
position: relative; 
}
.section-header h2::after{
content: ''; 
position: absolute; 
bottom: -10px; 
left: 50%; 
transform: translateX(-50%); 
width: 60px; 
height: 3px; 
background: var(--wooden-brown); 
border-radius: 2px; 
}
.section-header p{
color: var(--dark-charcoal); 
opacity: 0.8; 
font-size: 1.1rem; 
line-height: 1.6; 
max-width: 600px; 
margin: 0 auto; 
}
.contact-details{
margin-bottom: 3rem; 
}
.contact-item{
display: flex; 
align-items: flex-start; 
gap: 1rem; 
margin-bottom: 2rem; 
padding: 1.5rem; 
background: var(--crisp-white); 
border-radius: 12px; 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.08); 
transition: all 0.3s ease; 
}
.contact-item:hover{
transform: translateY(-2px); 
box-shadow: 0 10px 25px rgba(93, 64, 55, 0.12); 
}
.contact-icon{
width: 50px; 
height: 50px; 
background: var(--wooden-brown); 
border-radius: 50%; 
display: flex; 
align-items: center; 
justify-content: center; 
color: var(--crisp-white); 
flex-shrink: 0; 
transition: all 0.3s ease; 
}
.contact-item:hover .contact-icon{
background: var(--wooden-brown-light); 
transform: scale(1.1); 
}
.contact-icon svg{
width: 24px; 
height: 24px; 
}
.contact-text h3{
font-family: var(--font-heading); 
font-size: 1.2rem; 
color: var(--dark-charcoal); 
margin-bottom: 0.5rem; 
font-weight: 600; 
}
.contact-text p{
color: var(--dark-charcoal); 
opacity: 0.8; 
margin: 0; 
line-height: 1.5; 
}
.business-hours{
background: var(--crisp-white); 
padding: 2rem; 
border-radius: 12px; 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.08); 
}
.business-hours h3{
font-family: var(--font-heading); 
font-size: 1.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1.5rem; 
font-weight: 600; 
text-align: center; 
}
.hours-list{
display: flex; 
flex-direction: column; 
gap: 1rem; 
}
.hours-item{
display: flex; 
justify-content: space-between; 
align-items: center; 
padding: 0.8rem 1rem; 
background: var(--warm-off-white); 
border-radius: 8px; 
transition: all 0.3s ease; 
}
.hours-item:hover{
background: var(--wooden-brown); 
color: var(--crisp-white); 
}
.hours-item span:first-child{
font-weight: 500; 
}
.hours-item span:last-child{
font-weight: 600; 
}
/* Removed duplicate contact form section - using unique contact page classes instead */
.form-header h2{
font-family: var(--font-heading); 
font-size: 2.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 0.8rem; 
font-weight: 300; 
line-height: 1.1; 
letter-spacing: -0.5px; 
position: relative; 
}
.form-header h2::after{
content: ''; 
position: absolute; 
bottom: -8px; 
left: 0; 
width: 60px; 
height: 3px; 
background: linear-gradient(90deg, var(--wooden-brown), var(--wooden-brown-light)); 
border-radius: 2px; 
}
.form-header p{
color: var(--dark-charcoal); 
opacity: 0.7; 
margin-bottom: 2rem; 
font-size: 1rem; 
line-height: 1.6; 
font-weight: 400; 
margin-top: 1rem; 
}
.contact-form{
display: flex; 
flex-direction: column; 
gap: 1.5rem; 
}
.form-group{
display: flex; 
flex-direction: column; 
}
.form-group input,
.form-group textarea{
padding: 1rem 1.2rem; 
border: 1px solid rgba(93, 64, 55, 0.2) !important; 
border-radius: 8px; 
font-size: 1rem; 
font-family: var(--font-body); 
background: var(--crisp-white); 
color: var(--dark-charcoal); 
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
box-shadow: none !important; 
position: relative; 
overflow: hidden; 
}
.form-group input::before,
.form-group textarea::before{
content: ''; 
position: absolute; 
top: 0; 
left: -100%; 
width: 100%; 
height: 100%; 
background: linear-gradient(90deg, transparent, rgba(93, 64, 55, 0.1), transparent); 
transition: left 0.5s ease; 
}
.form-group input:focus::before,
.form-group textarea:focus::before{
left: 100%; 
}
.form-group input:focus,
.form-group textarea:focus{
outline: none !important; 
border-color: var(--wooden-brown) !important; 
box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.1) !important; 
transform: translateY(-2px); 
}
/* Special handling for phone field to prevent brown border on click */
.form-group input[type="tel"]{
border-color: rgba(93, 64, 55, 0.2) !important; 
}
.form-group input[type="tel"]:focus{
border-color: var(--wooden-brown) !important; 
box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.1) !important; 
transform: translateY(-2px); 
}
/* Animation for form filling */
@keyframes formFieldFill{
0%{
transform: scale(1); 
box-shadow: 0 0 0 0 rgba(93, 64, 55, 0.1); 
}
50%{
transform: scale(1.02); 
box-shadow: 0 4px 12px rgba(93, 64, 55, 0.15); 
}
100%{
transform: scale(1); 
box-shadow: 0 0 0 0 rgba(93, 64, 55, 0.1); 
}
}
.form-group input.filling,
.form-group textarea.filling{
animation: formFieldFill 0.6s ease-in-out; 
}
/* Error Message Styles */
.error-message{
color: #e74c3c; 
font-size: 0.85rem; 
margin-top: 0.5rem; 
display: none; 
font-weight: 500; 
line-height: 1.3; 
}
/* About Page Styles */
.page-header{
padding: 6rem 0 4rem; 
background: var(--warm-off-white); 
margin-top: 100px; 
}
.page-header-content{
display: grid; 
grid-template-columns: 1fr 1fr; 
gap: 4rem; 
align-items: center; 
}
.page-subtitle{
color: var(--wooden-brown); 
font-size: 1rem; 
font-weight: 500; 
text-transform: uppercase; 
letter-spacing: 1px; 
margin-bottom: 1rem; 
display: block; 
}
.page-header-text h1{
font-family: var(--font-heading); 
font-size: 3rem; 
color: var(--dark-charcoal); 
margin-bottom: 1.5rem; 
line-height: 1.2; 
font-weight: 400; 
}
.page-header-text p{
font-size: 1.1rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.6; 
margin-bottom: 0; 
}
.page-header-image{
position: relative; 
border-radius: 12px; 
overflow: hidden; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
display: flex; 
align-items: center; 
justify-content: center; 
}
.page-header-image img{
width: 100%; 
height: 400px; 
object-fit: cover; 
object-position: center; 
display: block; 
margin: 0; 
padding: 0; 
}
/* Company Story Styles */
.company-story{
padding: 6rem 0; 
background: var(--crisp-white); 
}
.story-content{
display: grid; 
grid-template-columns: 1fr 1fr; 
gap: 4rem; 
align-items: start; 
}
.story-text h2{
font-family: var(--font-heading); 
font-size: 2.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 2rem; 
font-weight: 400; 
}
.story-text p{
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.6; 
margin-bottom: 1.5rem; 
font-size: 1.1rem; 
}
.story-image{
position: relative; 
border-radius: 12px; 
overflow: hidden; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
display: flex; 
align-items: center; 
justify-content: center; 
}
.story-image img{
width: 100%; 
height: 500px; 
object-fit: cover; 
object-position: center; 
display: block; 
margin: 0; 
padding: 0; 
}
/* About Page Animation Styles */
.animate-on-scroll{
opacity: 0; 
transform: translateY(30px); 
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}
.animate-on-scroll.animated{
opacity: 1; 
transform: translateY(0); 
}
/* Animation Types */
.animate-on-scroll[data-animation="fadeInUp"].animated{
opacity: 1; 
transform: translateY(0); 
}
.animate-on-scroll[data-animation="slideInLeft"].animated{
opacity: 1; 
transform: translateX(0); 
}
.animate-on-scroll[data-animation="slideInRight"].animated{
opacity: 1; 
transform: translateX(0); 
}
.animate-on-scroll[data-animation="slideInLeft"]{
transform: translateX(-50px); 
}
.animate-on-scroll[data-animation="slideInRight"]{
transform: translateX(50px); 
}
/* Philosophy Section Styles */
.philosophy{
padding: 6rem 0; 
background: var(--light-beige); 
}
.philosophy-grid{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 3rem; 
margin-top: 4rem; 
}
.philosophy-item{
background: var(--crisp-white); 
padding: 3rem 2rem; 
border-radius: 16px; 
text-align: center; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
transition: all 0.3s ease; 
}
.philosophy-item:hover{
transform: translateY(-10px); 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.15); 
}
.philosophy-icon{
width: 60px; 
height: 60px; 
background: var(--warm-off-white); 
border-radius: 50%; 
display: flex; 
align-items: center; 
justify-content: center; 
margin: 0 auto 2rem; 
color: var(--wooden-brown); 
transition: all 0.3s ease; 
position: relative; 
}
.philosophy-item:hover .philosophy-icon{
background: var(--wooden-brown); 
color: var(--crisp-white); 
transform: scale(1.1); 
}
.philosophy-icon svg{
width: 24px; 
height: 24px; 
transition: all 0.3s ease; 
}
.philosophy-item:hover .philosophy-icon svg{
transform: rotate(360deg); 
}
.philosophy-item h3{
font-family: var(--font-heading); 
font-size: 1.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 500; 
}
.philosophy-item p{
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.6; 
margin-bottom: 0; 
}
/* Team Section Styles */
.team{
padding: 6rem 0; 
background: var(--crisp-white); 
}
.team-grid{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 3rem; 
margin-top: 4rem; 
}
.team-member{
background: var(--warm-off-white); 
border-radius: 16px; 
overflow: hidden; 
transition: all 0.3s ease; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
text-align: center; 
padding: 2rem; 
}
.team-member:hover{
transform: translateY(-10px); 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.15); 
}
.member-image{
position: relative; 
height: 200px; 
overflow: hidden; 
border-radius: 12px; 
margin-bottom: 1.5rem; 
display: flex; 
align-items: center; 
justify-content: center; 
}
.member-image img{
width: 100%; 
height: 100%; 
object-fit: cover; 
object-position: center; 
transition: all 0.3s ease; 
display: block; 
margin: 0; 
padding: 0; 
}
.team-member:hover .member-image img{
transform: scale(1.05); 
}
.team-member h3{
font-family: var(--font-heading); 
font-size: 1.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 500; 
transition: all 0.3s ease; 
}
.team-member:hover h3{
color: var(--wooden-brown); 
}
.team-member p{
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.6; 
margin-bottom: 0; 
transition: all 0.3s ease; 
}
.team-member:hover p{
opacity: 1; 
}
/* About Page Responsive Styles */
@media (max-width: 768px){
.page-header-content{
grid-template-columns: 1fr; 
gap: 3rem; 
text-align: center; 
}
.page-header-text h1{
font-size: 2.5rem; 
}
.page-header-image img{
height: 300px; 
}
.story-content{
grid-template-columns: 1fr; 
gap: 3rem; 
}
.story-image img{
height: 300px; 
}
.philosophy-grid{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.team-grid{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.member-image{
height: 250px; 
}
}
@media (max-width: 480px){
.page-header{
padding: 4rem 0 3rem; 
}
.page-header-text h1{
font-size: 2rem; 
}
.page-header-image img{
height: 250px; 
}
.story-image img{
height: 250px; 
}
.philosophy-item{
padding: 2rem 1.5rem; 
}
.team-member{
padding: 1.5rem; 
}
.member-image{
height: 200px; 
}
}
.form-group input.error, .form-group textarea.error{
border-color: #e74c3c !important; 
box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1) !important; 
}
.form-group input.success, .form-group textarea.success{
border-color: #27ae60 !important; 
box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1) !important; 
}
.form-group input:invalid,
.form-group input:invalid:focus{
border-color: rgba(93, 64, 55, 0.2) !important; 
box-shadow: none !important; 
}
.form-group input:valid{
border-color: rgba(93, 64, 55, 0.2) !important; 
box-shadow: none !important; 
}
.form-group input:valid:focus{
border-color: var(--wooden-brown) !important; 
box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.1) !important; 
}
.form-group input::placeholder,
.form-group textarea::placeholder{
color: rgba(93, 64, 55, 0.5); 
font-weight: 400; 
}
/* Override browser default form styling */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea{
border: 1px solid rgba(93, 64, 55, 0.2) !important; 
box-shadow: none !important; 
outline: none !important; 
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus{
border-color: var(--wooden-brown) !important; 
box-shadow: 0 0 0 2px rgba(93, 64, 55, 0.1) !important; 
outline: none !important; 
}
.contact-form input[type="text"]:invalid,
.contact-form input[type="email"]:invalid,
.contact-form input[type="tel"]:invalid,
.contact-form textarea:invalid{
border-color: rgba(93, 64, 55, 0.2) !important; 
box-shadow: none !important; 
}
.form-group textarea{
resize: vertical; 
min-height: 100px; 
line-height: 1.6; 
}
.submit-btn{
background: var(--wooden-brown); 
color: var(--crisp-white); 
border: none; 
padding: 1.2rem 3rem; 
border-radius: 12px; 
font-size: 1rem; 
font-weight: 600; 
text-transform: uppercase; 
letter-spacing: 1.5px; 
cursor: pointer; 
transition: all 0.3s ease; 
align-self: center; 
min-width: 180px; 
box-shadow: 0 4px 16px rgba(93, 64, 55, 0.2); 
}
.submit-btn:hover{
background: var(--wooden-brown-light); 
transform: translateY(-3px); 
box-shadow: 0 8px 25px rgba(93, 64, 55, 0.3); 
}
/* Contact Page Map Section - Unique Classes */
.contact-map-section{
padding: 6rem 0; 
background: var(--light-beige); 
}
.contact-map-section h2{
font-family: var(--font-heading); 
font-size: 2.5rem; 
color: var(--dark-charcoal); 
text-align: center; 
margin-bottom: 1rem; 
font-weight: 600; 
}
.contact-map-section p{
text-align: center; 
color: var(--dark-charcoal); 
opacity: 0.7; 
font-size: 1.1rem; 
margin-bottom: 3rem; 
max-width: 600px; 
margin-left: auto; 
margin-right: auto; 
}
.contact-map-container{
width: 100%; 
height: 500px; 
border-radius: 20px; 
overflow: hidden; 
box-shadow: 0 15px 40px rgba(93, 64, 55, 0.1); 
transition: all 0.4s ease; 
border: 1px solid rgba(93, 64, 55, 0.05); 
position: relative; 
background: var(--crisp-white); 
}
.contact-map-container::before{
content: ''; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
height: 4px; 
background: linear-gradient(90deg, var(--wooden-brown), var(--wooden-brown-light)); 
z-index: 1; 
border-radius: 20px 20px 0 0; 
}
.contact-map-container:hover{
transform: translateY(-5px); 
box-shadow: 0 25px 50px rgba(93, 64, 55, 0.15); 
}
.contact-map-container iframe{
width: 100%; 
height: 100%; 
border: none; 
border-radius: 20px; 
display: block; 
}
/* Contact Details Section */
.contact-details-section{
background: var(--warm-off-white); 
padding: 2rem; 
border-radius: 8px; 
box-shadow: 0 2px 8px rgba(93, 64, 55, 0.1); 
}
.contact-details-grid{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 2rem; 
align-items: start; 
}
.contact-detail-item{
display: flex; 
align-items: flex-start; 
gap: 1rem; 
min-height: 80px; 
transition: all 0.3s ease; 
}
.contact-detail-item:hover{
transform: translateY(-2px); 
}
.detail-icon{
width: 24px; 
height: 24px; 
color: var(--wooden-brown); 
flex-shrink: 0; 
margin-top: 0.2rem; 
}
.detail-icon svg{
width: 100%; 
height: 100%; 
}
.detail-content strong{
display: block; 
color: var(--wooden-brown); 
font-weight: 600; 
margin-bottom: 0.3rem; 
font-size: 1rem; 
}
.detail-content p{
color: var(--dark-charcoal); 
opacity: 0.7; 
margin: 0; 
line-height: 1.4; 
font-size: 0.9rem; 
}
/* Removed conflicting map-container rules - using unique contact-map-container instead */
/* Footer */
.footer{
background: var(--light-beige); 
color: var(--dark-charcoal); 
padding: 4rem 0 1rem; 
position: relative; 
border-top: 2px solid rgba(93, 64, 55, 0.1); 
}
.footer-logo-section{
text-align: center; 
margin-bottom: 3rem; 
}
.footer-logo{
display: flex; 
justify-content: center; 
margin-bottom: 1rem; 
}
.logo-circle{
width: 120px; 
height: 120px; 
border: 3px solid var(--wooden-brown); 
border-radius: 50%; 
display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
position: relative; 
background: var(--crisp-white); 
}
.logo-text-circle{
font-size: 0.7rem; 
color: var(--wooden-brown); 
font-weight: 600; 
text-align: center; 
line-height: 1.2; 
position: absolute; 
top: 10px; 
left: 10px; 
right: 10px; 
}
.logo-icon-center{
width: 32px; 
height: 32px; 
color: var(--wooden-brown); 
margin-top: 10px; 
}
.logo-icon-center svg{
width: 100%; 
height: 100%; 
}
.footer-tagline{
font-style: italic; 
color: var(--dark-charcoal); 
opacity: 0.8; 
max-width: 600px; 
margin: 0 auto; 
}
.footer-content{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 2rem; 
margin-bottom: 3rem; 
}
.footer-section h4{
font-family: var(--font-heading); 
color: var(--wooden-brown); 
margin-bottom: 1rem; 
font-weight: 600; 
font-size: 1.1rem; 
}
.footer-section ul{
list-style: none; 
}
.footer-section ul li{
margin-bottom: 0.5rem; 
}
.footer-section a{
color: var(--dark-charcoal); 
text-decoration: none; 
opacity: 0.7; 
transition: all 0.3s ease; 
font-size: 0.9rem; 
}
.footer-section a:hover{
opacity: 1; 
color: var(--wooden-brown); 
}
.newsletter-form{
display: flex; 
gap: 0.5rem; 
margin-bottom: 1rem; 
}
.newsletter-input{
flex: 1; 
padding: 10px 15px; 
border: 1px solid rgba(93, 64, 55, 0.3); 
border-radius: 5px; 
background: var(--crisp-white); 
font-size: 0.9rem; 
}
.newsletter-btn{
background: var(--olive-green); 
color: var(--crisp-white); 
border: none; 
padding: 10px 15px; 
border-radius: 5px; 
cursor: pointer; 
display: flex; 
align-items: center; 
gap: 0.5rem; 
font-weight: 600; 
transition: all 0.3s ease; 
}
.newsletter-icon{
width: 16px; 
height: 16px; 
flex-shrink: 0; 
}
.newsletter-btn:hover{
background: var(--wooden-brown); 
}
.newsletter-text{
font-size: 0.8rem; 
color: var(--dark-charcoal); 
opacity: 0.7; 
margin: 0; 
}
.footer-contact-social{
display: flex; 
justify-content: space-between; 
align-items: center; 
padding: 2rem 0; 
border-top: 1px solid rgba(93, 64, 55, 0.2); 
border-bottom: 1px solid rgba(93, 64, 55, 0.2); 
margin-bottom: 2rem; 
}
.footer-contact{
display: flex; 
flex-direction: column; 
gap: 0.8rem; 
}
.contact-item{
display: flex; 
align-items: center; 
gap: 0.5rem; 
font-size: 0.9rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
}
.contact-icon{
width: 16px; 
height: 16px; 
color: var(--wooden-brown); 
flex-shrink: 0; 
}
.contact-icon svg{
width: 100%; 
height: 100%; 
}
.footer-social{
display: flex; 
align-items: center; 
gap: 1rem; 
}
.social-label{
font-weight: 600; 
color: var(--dark-charcoal); 
}
.social-icons{
display: flex; 
gap: 0.5rem; 
}
.social-icon{
width: 40px; 
height: 40px; 
background: var(--olive-green); 
border-radius: 50%; 
display: flex; 
align-items: center; 
justify-content: center; 
color: var(--crisp-white); 
cursor: pointer; 
transition: all 0.3s ease; 
}
.social-icon svg{
width: 20px; 
height: 20px; 
}
.social-icon:hover{
background: var(--wooden-brown); 
transform: scale(1.1); 
}
.footer-bottom{
display: grid; 
grid-template-columns: 1fr auto 1fr; 
align-items: center; 
padding-top: 1rem; 
border-top: 1px solid rgba(93, 64, 55, 0.2); 
gap: 1rem; 
}
.footer-bottom-left{
text-align: left; 
}
.footer-bottom-left p{
margin: 0; 
font-size: 0.9rem; 
color: var(--dark-charcoal); 
opacity: 0.7; 
}
.footer-bottom-center{
text-align: center; 
justify-self: center; 
}
.footer-bottom-center p{
margin: 0; 
font-size: 0.9rem; 
color: var(--dark-charcoal); 
opacity: 0.7; 
}
.footer-bottom-right{
text-align: right; 
justify-self: end; 
}
.footer-bottom-center a{
color: var(--wooden-brown); 
text-decoration: none; 
font-weight: 500; 
transition: all 0.3s ease; 
}
.footer-bottom-center a:hover{
color: var(--wooden-brown-light); 
text-decoration: underline; 
}
.certification-badges{
display: flex; 
gap: 1rem; 
align-items: center; 
}
.cert-badge{
display: flex; 
align-items: center; 
gap: 0.5rem; 
background: var(--crisp-white); 
border: 1px solid rgba(93, 64, 55, 0.2); 
border-radius: 20px; 
padding: 8px 12px; 
color: var(--wooden-brown); 
font-size: 0.8rem; 
font-weight: 600; 
transition: all 0.3s ease; 
}
.cert-badge svg{
width: 16px; 
height: 16px; 
}
.cert-badge:hover{
transform: translateY(-2px); 
box-shadow: 0 3px 10px rgba(93, 64, 55, 0.2); 
border-color: var(--wooden-brown); 
}
.scroll-to-top{
position: fixed; 
bottom: 30px; 
right: 30px; 
z-index: 1000; 
}
.scroll-btn{
width: 50px; 
height: 50px; 
background: var(--olive-green); 
color: var(--crisp-white); 
border-radius: 50%; 
display: flex; 
align-items: center; 
justify-content: center; 
cursor: pointer; 
transition: all 0.3s ease; 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.3); 
}
.scroll-btn svg{
width: 24px; 
height: 24px; 
}
.scroll-btn:hover{
background: var(--wooden-brown); 
transform: translateY(-3px); 
box-shadow: 0 8px 25px rgba(93, 64, 55, 0.4); 
}
/* Page Header */
.page-header{
padding: 120px 0 60px; 
background: var(--warm-off-white); 
text-align: center; 
}
.page-header h1{
font-family: var(--font-heading); 
font-size: 3rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 600; 
}
.page-header p{
font-size: 1.2rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
}
/* Company Story */
.company-story{
padding: var(--section-padding); 
background: var(--crisp-white); 
}
.story-content{
display: grid; 
grid-template-columns: 1fr 1fr; 
gap: 4rem; 
align-items: center; 
}
.story-text h2{
font-family: var(--font-heading); 
font-size: 2.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1.5rem; 
font-weight: 600; 
}
.story-text p{
font-size: 1.1rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
margin-bottom: 1.5rem; 
line-height: 1.7; 
}
.story-image{
border-radius: 15px; 
overflow: hidden; 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.2); 
}
.story-image img{
width: 100%; 
height: 400px; 
object-fit: cover; 
}
/* Kitchen Categories */
.kitchen-categories{
padding: 6rem 0; 
background: var(--crisp-white); 
}
/* Kitchen Carousel */
.kitchen-carousel-container{
position: relative; 
max-width: 1200px; 
margin: 0 auto; 
padding: 0 2rem; 
}
.kitchen-carousel{
position: relative; 
overflow: hidden; 
border-radius: 20px; 
background: transparent; 
min-height: 500px; 
}
.carousel-slides-wrapper{
display: flex; 
transition: transform 0.5s ease-in-out; 
gap: 2rem; 
}
.carousel-slide{
flex: 0 0 calc(33.333% - 1.33rem); 
background: var(--crisp-white); 
border-radius: 20px; 
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
overflow: hidden; 
transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.carousel-slide:hover{
transform: translateY(-5px); 
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
}
@keyframes fadeIn{
from{opacity: 0; }
to{opacity: 1; }
}
.slide-content{
display: flex; 
flex-direction: column; 
height: 100%; 
}
.slide-image{
position: relative; 
height: 250px; 
overflow: hidden; 
margin: 0; 
padding: 0; 
border: none; 
display: block; 
}
.slide-image img{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
object-fit: cover; 
object-position: center; 
transition: transform 0.3s ease; 
display: block; 
margin: 0; 
padding: 0; 
border: none; 
outline: none; 
}
.slide-text{
padding: 2rem; 
background: var(--crisp-white); 
display: flex; 
flex-direction: column; 
justify-content: space-between; 
flex: 1; 
min-height: 280px; 
}
.slide-text h3{
font-family: var(--font-heading); 
font-size: 1.8rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 600; 
letter-spacing: -0.02em; 
line-height: 1.3; 
}
.slide-text p{
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.6; 
margin-bottom: 1.5rem; 
font-size: 0.95rem; 
flex: 1; 
}
.slide-text ul{
list-style: none; 
padding: 0; 
margin: 0 0 1.5rem 0; 
}
.slide-text ul li{
color: var(--dark-charcoal); 
margin-bottom: 0.6rem; 
padding-left: 1.2rem; 
position: relative; 
font-size: 0.9rem; 
font-weight: 500; 
}
.slide-text ul li::before{
content: '✓'; 
position: absolute; 
left: 0; 
color: var(--wooden-brown); 
font-weight: bold; 
font-size: 0.8rem; 
}
.slide-text .btn{
align-self: flex-start; 
padding: 0.8rem 1.8rem; 
background: var(--wooden-brown); 
color: var(--crisp-white); 
text-decoration: none; 
border-radius: 30px; 
font-weight: 600; 
font-size: 0.9rem; 
letter-spacing: 0.5px; 
transition: all 0.3s ease; 
box-shadow: 0 6px 20px rgba(93, 64, 55, 0.3); 
display: inline-block; 
border: none; 
cursor: pointer; 
min-width: 120px; 
text-align: center; 
margin-top: auto; 
}
.slide-text .btn:hover{
background: var(--wooden-brown-light); 
transform: translateY(-3px); 
box-shadow: 0 12px 35px rgba(93, 64, 55, 0.4); 
}
/* Carousel Navigation */
.carousel-navigation{
display: flex; 
justify-content: center; 
align-items: center; 
gap: 2rem; 
margin-top: 2rem; 
}
.carousel-btn{
background: var(--wooden-brown); 
color: var(--crisp-white); 
border: none; 
border-radius: 50%; 
width: 50px; 
height: 50px; 
display: flex; 
align-items: center; 
justify-content: center; 
cursor: pointer; 
transition: all 0.3s ease; 
box-shadow: 0 4px 15px rgba(93, 64, 55, 0.3); 
}
.carousel-btn:hover{
background: #8B4513; 
transform: scale(1.1); 
box-shadow: 0 6px 20px rgba(93, 64, 55, 0.4); 
}
.carousel-btn svg{
width: 24px; 
height: 24px; 
}
.carousel-dots{
display: flex; 
gap: 0.8rem; 
justify-content: center; 
margin-top: 2rem; 
}
.dot{
width: 12px; 
height: 12px; 
border-radius: 50%; 
background: #ddd; 
cursor: pointer; 
transition: all 0.3s ease; 
border: 2px solid transparent; 
}
.dot.active{
background: var(--wooden-brown); 
transform: scale(1.3); 
border-color: var(--wooden-brown); 
}
.dot:hover{
background: var(--wooden-brown); 
transform: scale(1.1); 
}
/* Kitchen Type Overlay on Images */
.kitchen-type-overlay{
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); 
display: flex; 
align-items: flex-end; 
justify-content: center; 
padding: 2rem; 
z-index: 2; 
opacity: 1; 
transition: all 0.4s ease; 
}
.overlay-content{
display: flex; 
flex-direction: column; 
align-items: center; 
gap: 1rem; 
transition: all 0.4s ease; 
}
.kitchen-type-overlay h3{
font-family: var(--font-heading); 
font-size: 2.2rem; 
color: var(--crisp-white); 
font-weight: 700; 
text-align: center; 
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); 
margin: 0; 
letter-spacing: -0.5px; 
transition: all 0.4s ease; 
}
.overlay-btn{
background: var(--wooden-brown); 
color: var(--crisp-white); 
padding: 0.8rem 2rem; 
border-radius: 25px; 
text-decoration: none; 
font-weight: 600; 
font-size: 1rem; 
transition: all 0.4s ease; 
opacity: 0; 
transform: translateY(20px); 
box-shadow: 0 4px 15px rgba(93, 64, 55, 0.3); 
}
.overlay-btn:hover{
background: #8B4513; 
transform: translateY(-2px); 
box-shadow: 0 6px 20px rgba(93, 64, 55, 0.4); 
}
.category-card:hover .kitchen-type-overlay{
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); 
}
.category-card:hover .overlay-content{
transform: translateY(-20px); 
}
.category-card:hover .kitchen-type-overlay h3{
transform: translateY(-10px); 
}
.category-card:hover .overlay-btn{
opacity: 1; 
transform: translateY(0); 
}
/* Ensure kitchen type names are visible */
.kitchen-categories .category-content h3{
font-family: var(--font-heading) !important; 
font-size: 1.8rem !important; 
color: var(--dark-charcoal) !important; 
margin-bottom: 1.5rem !important; 
font-weight: 700 !important; 
transition: all 0.3s ease; 
position: relative; 
letter-spacing: -0.5px; 
display: block !important; 
visibility: visible !important; 
opacity: 1 !important; 
text-align: left !important; 
line-height: 1.2 !important; 
text-transform: none !important; 
text-decoration: none !important; 
}
.categories-grid{
display: grid; 
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); 
gap: 3rem; 
margin-top: 4rem; 
max-width: 1400px; 
margin-left: auto; 
margin-right: auto; 
}
.category-card{
background: var(--crisp-white); 
border-radius: 24px; 
overflow: hidden; 
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); 
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
position: relative; 
border: 1px solid rgba(93, 64, 55, 0.06); 
backdrop-filter: blur(10px); 
}
.category-card:hover{
transform: translateY(-20px) scale(1.03); 
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); 
border-color: var(--wooden-brown); 
}
.category-image{
position: relative; 
height: 300px; 
overflow: hidden; 
display: flex; 
align-items: center; 
justify-content: center; 
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
}
.category-image::before{
content: ''; 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background: linear-gradient(135deg, transparent 0%, rgba(93, 64, 55, 0.1) 100%); 
opacity: 0; 
transition: all 0.3s ease; 
z-index: 1; 
}
.category-card:hover .category-image::before{
opacity: 1; 
}
.category-image img{
width: 100%; 
height: 100%; 
object-fit: cover; 
object-position: center; 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
display: block; 
margin: 0; 
padding: 0; 
position: relative; 
z-index: 0; 
}
.category-card:hover .category-image img{
transform: scale(1.08); 
}
.category-content{
padding: 2.5rem 2.5rem; 
background: var(--crisp-white); 
position: relative; 
}
.category-content h3{
font-family: var(--font-heading); 
font-size: 1.8rem; 
color: var(--dark-charcoal) !important; 
margin-bottom: 1.5rem; 
font-weight: 700; 
transition: all 0.3s ease; 
position: relative; 
letter-spacing: -0.5px; 
display: block; 
visibility: visible; 
opacity: 1; 
}
.category-content h3::after{
content: ''; 
position: absolute; 
bottom: -10px; 
left: 0; 
width: 0; 
height: 3px; 
background: linear-gradient(90deg, var(--wooden-brown), #8B4513); 
transition: all 0.4s ease; 
border-radius: 2px; 
}
.category-card:hover .category-content h3{
color: var(--wooden-brown); 
}
.category-card:hover .category-content h3::after{
width: 60px; 
}
.category-content p{
color: var(--dark-charcoal); 
opacity: 0.85; 
line-height: 1.7; 
margin-bottom: 2rem; 
font-size: 1rem; 
font-weight: 500; 
}
.category-content ul{
list-style: none; 
padding: 0; 
margin: 0 0 2.5rem 0; 
}
.category-content ul li{
color: var(--dark-charcoal); 
opacity: 0.8; 
margin-bottom: 1rem; 
padding-left: 2.2rem; 
position: relative; 
font-size: 0.95rem; 
font-weight: 500; 
transition: all 0.4s ease; 
transform: translateX(-10px); 
}
.category-content ul li::before{
content: '✓'; 
position: absolute; 
left: 0; 
color: var(--wooden-brown); 
font-weight: bold; 
font-size: 1.2rem; 
transition: all 0.4s ease; 
}
.category-card:hover .category-content ul li{
opacity: 1; 
transform: translateX(0); 
}
.category-card:hover .category-content ul li::before{
color: var(--wooden-brown-light); 
transform: scale(1.2); 
}
.category-content .btn{
width: 100%; 
text-align: center; 
padding: 1.4rem 2rem; 
background: linear-gradient(135deg, var(--wooden-brown), #8B4513); 
color: var(--crisp-white); 
text-decoration: none; 
border-radius: 14px; 
font-weight: 700; 
font-size: 1rem; 
letter-spacing: 0.5px; 
transition: all 0.4s ease; 
display: inline-block; 
position: relative; 
overflow: hidden; 
box-shadow: 0 10px 25px rgba(93, 64, 55, 0.25); 
border: none; 
}
.category-content .btn::before{
content: ''; 
position: absolute; 
top: 0; 
left: -100%; 
width: 100%; 
height: 100%; 
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); 
transition: all 0.5s ease; 
}
.category-content .btn:hover::before{
left: 100%; 
}
.category-content .btn:hover{
background: linear-gradient(135deg, #8B4513, var(--wooden-brown)); 
transform: translateY(-4px); 
box-shadow: 0 15px 35px rgba(93, 64, 55, 0.4); 
}
.category-content p{
color: var(--dark-charcoal); 
opacity: 0.8; 
margin-bottom: 1.5rem; 
line-height: 1.7; 
}
.category-content ul{
list-style: none; 
margin-bottom: 2rem; 
}
.category-content li{
padding: 0.5rem 0; 
color: var(--dark-charcoal); 
position: relative; 
padding-left: 1.5rem; 
}
.category-content li::before{
content: '✓'; 
position: absolute; 
left: 0; 
color: var(--brushed-gold); 
font-weight: bold; 
}
/* Materials */
.materials{
padding: 6rem 0; 
background: var(--light-beige); 
}
.materials-grid{
display: grid; 
grid-template-columns: repeat(4, 1fr); 
gap: 2rem; 
margin-top: 3rem; 
}
.material-item{
text-align: center; 
padding: 2rem; 
background: var(--warm-off-white); 
border-radius: 15px; 
transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.material-item:hover{
transform: translateY(-5px); 
box-shadow: 0 15px 30px rgba(93, 64, 55, 0.1); 
}
.material-preview{
width: 80px; 
height: 80px; 
border-radius: 10px; 
margin: 0 auto 1.5rem; 
border: 2px solid var(--wooden-brown); 
background-size: cover; 
background-position: center; 
}
.material-preview.oak{
background: linear-gradient(135deg, #D2B48C, #8B4513); 
}
.material-preview.walnut{
background: linear-gradient(135deg, #5D4037, #3E2723); 
}
.material-preview.maple{
background: linear-gradient(135deg, #F5DEB3, #DEB887); 
}
.material-preview.cherry{
background: linear-gradient(135deg, #DEB887, #A0522D); 
}
.material-item h3{
font-family: var(--font-heading); 
font-size: 1.3rem; 
color: var(--wooden-brown); 
margin-bottom: 1rem; 
font-weight: 600; 
}
.material-item p{
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.6; 
}
/* Features */
.features{
padding: var(--section-padding); 
background: var(--warm-off-white); 
}
.features-grid{
display: grid; 
grid-template-columns: repeat(4, 1fr); 
gap: 2rem; 
margin-top: 3rem; 
}
.feature-item{
text-align: center; 
padding: 2rem; 
background: var(--crisp-white); 
border-radius: 15px; 
transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.feature-item:hover{
transform: translateY(-5px); 
box-shadow: 0 15px 30px rgba(93, 64, 55, 0.1); 
}
.feature-icon{
width: 48px; 
height: 48px; 
margin: 0 auto 1.5rem; 
color: var(--wooden-brown); 
}
.feature-icon svg{
width: 100%; 
height: 100%; 
}
.feature-item h3{
font-family: var(--font-heading); 
font-size: 1.3rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 600; 
}
.feature-item p{
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.6; 
}
/* Index Page Contact Section - Unique Classes */
.index-contact-section{
padding: var(--section-padding); 
background: var(--light-beige); 
}
.index-contact-content{
display: grid; 
grid-template-columns: 1fr 1fr; 
gap: 4rem; 
align-items: start; 
}
.index-map-section{
height: 100%; 
display: flex; 
flex-direction: column; 
}
.index-map-container{
flex: 1; 
min-height: 400px; 
border-radius: 15px; 
overflow: hidden; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
border: 1px solid rgba(93, 64, 55, 0.05); 
}
.index-map-container iframe{
width: 100%; 
height: 100%; 
border: none; 
border-radius: 15px; 
}
.index-contact-form-section{
background: var(--crisp-white); 
padding: 3rem; 
border-radius: 20px; 
box-shadow: 0 15px 40px rgba(93, 64, 55, 0.1); 
border: 1px solid rgba(93, 64, 55, 0.05); 
}
.index-form-header h2{
font-family: var(--font-heading); 
font-size: 2.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 0.5rem; 
font-weight: 600; 
}
.index-form-header p{
color: var(--dark-charcoal); 
opacity: 0.7; 
font-size: 1.1rem; 
margin-bottom: 2rem; 
}
.index-contact-form{
display: flex; 
flex-direction: column; 
gap: 1.5rem; 
}
.index-form-group{
display: flex; 
flex-direction: column; 
}
.index-contact-form input,
.index-contact-form textarea{
padding: 1rem 1.5rem; 
border: 2px solid rgba(93, 64, 55, 0.1); 
border-radius: 12px; 
background: var(--warm-off-white); 
font-family: var(--font-body); 
font-size: 1rem; 
transition: all 0.3s ease; 
outline: none; 
}
.index-contact-form input:focus,
.index-contact-form textarea:focus{
border-color: var(--wooden-brown); 
box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.1); 
transform: translateY(-2px); 
}
.index-submit-btn{
background: var(--wooden-brown); 
color: var(--crisp-white); 
padding: 1rem 2rem; 
border: none; 
border-radius: 12px; 
font-family: var(--font-body); 
font-size: 1rem; 
font-weight: 600; 
cursor: pointer; 
transition: all 0.3s ease; 
text-transform: uppercase; 
letter-spacing: 1px; 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.3); 
}
.index-submit-btn:hover{
background: var(--wooden-brown-light); 
transform: translateY(-2px); 
box-shadow: 0 8px 25px rgba(93, 64, 55, 0.4); 
}
.index-contact-details-section{
margin-top: 4rem; 
background: var(--warm-off-white); 
padding: 3rem; 
border-radius: 20px; 
box-shadow: 0 15px 40px rgba(93, 64, 55, 0.1); 
border: 1px solid rgba(93, 64, 55, 0.05); 
}
.index-contact-details-grid{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 2rem; 
align-items: stretch; 
}
.index-contact-detail-item{
display: flex; 
align-items: center; 
gap: 1.5rem; 
min-height: 120px; 
transition: all 0.3s ease; 
padding: 2rem; 
background: var(--crisp-white); 
border-radius: 15px; 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.05); 
border: 1px solid rgba(93, 64, 55, 0.05); 
}
.index-contact-detail-item:hover{
transform: translateY(-5px); 
box-shadow: 0 10px 25px rgba(93, 64, 55, 0.15); 
}
.index-detail-icon{
width: 60px; 
height: 60px; 
background: var(--wooden-brown); 
border-radius: 12px; 
display: flex; 
align-items: center; 
justify-content: center; 
color: var(--crisp-white); 
flex-shrink: 0; 
margin-right: 0.5rem; 
}
.index-detail-icon svg{
width: 28px; 
height: 28px; 
}
.index-detail-content{
flex: 1; 
display: flex; 
flex-direction: column; 
justify-content: center; 
}
.index-detail-content strong{
display: block; 
color: var(--dark-charcoal); 
font-weight: 600; 
margin-bottom: 0.8rem; 
font-size: 1.1rem; 
line-height: 1.2; 
}
.index-detail-content p{
color: var(--dark-charcoal); 
opacity: 0.8; 
margin: 0; 
line-height: 1.6; 
font-size: 0.95rem; 
}
/* Contact Section - Original (for other pages) */
.contact-section{
padding: var(--section-padding); 
background: var(--light-beige); 
}
.contact-content{
display: grid; 
grid-template-columns: 1fr 1fr; 
gap: 4rem; 
align-items: start; 
}
.contact-info h2{
font-family: var(--font-heading); 
font-size: 2.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1.5rem; 
font-weight: 600; 
}
.contact-info p{
font-size: 1.1rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
margin-bottom: 2rem; 
line-height: 1.7; 
}
.contact-details{
margin-bottom: 3rem; 
}
.contact-item{
display: flex; 
align-items: flex-start; 
gap: 1rem; 
margin-bottom: 2rem; 
}
.contact-icon{
width: 24px; 
height: 24px; 
color: var(--wooden-brown); 
flex-shrink: 0; 
margin-top: 0.2rem; 
}
.contact-icon svg{
width: 100%; 
height: 100%; 
}
.contact-text h3{
font-size: 1.2rem; 
color: var(--dark-charcoal); 
margin-bottom: 0.5rem; 
font-weight: 600; 
}
.contact-text p{
color: var(--dark-charcoal); 
opacity: 0.8; 
margin: 0; 
line-height: 1.6; 
}
.business-hours h3{
font-family: var(--font-heading); 
font-size: 1.5rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 600; 
}
.hours-list{
background: var(--crisp-white); 
border-radius: 10px; 
padding: 1.5rem; 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.1); 
}
.hours-item{
display: flex; 
justify-content: space-between; 
padding: 0.8rem 0; 
border-bottom: 1px solid rgba(93, 64, 55, 0.1); 
}
.hours-item:last-child{
border-bottom: none; 
}
.hours-item span:first-child{
font-weight: 600; 
color: var(--dark-charcoal); 
}
.hours-item span:last-child{
color: var(--dark-charcoal); 
opacity: 0.8; 
}
/* Contact Form */
.contact-form-container{
background: var(--crisp-white); 
padding: 2rem; 
border-radius: 15px; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
}
.contact-form h3{
font-family: var(--font-heading); 
font-size: 1.8rem; 
color: var(--dark-charcoal); 
margin-bottom: 2rem; 
font-weight: 600; 
text-align: center; 
}
.form-group{
margin-bottom: 1.5rem; 
}
.form-group input,
.form-group select,
.form-group textarea{
width: 100%; 
padding: 12px 15px; 
border: 2px solid rgba(93, 64, 55, 0.2); 
border-radius: 8px; 
font-size: 1rem; 
font-family: var(--font-body); 
transition: all 0.3s ease; 
background: var(--crisp-white); 
color: var(--dark-charcoal); 
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
outline: none; 
border-color: var(--wooden-brown); 
box-shadow: 0 0 0 3px rgba(93, 64, 55, 0.1); 
transform: translateY(-1px); 
}
.form-group input:invalid,
.form-group select:invalid,
.form-group textarea:invalid{
border-color: #e74c3c; 
}
.form-group input:valid,
.form-group select:valid,
.form-group textarea:valid{
border-color: #27ae60; 
}
.form-group textarea{
resize: vertical; 
min-height: 120px; 
}
/* Navigation Active State */
.nav-menu a.active{
color: var(--wooden-brown); 
font-weight: 600; 
}
.nav-menu a.active::after{
width: 100%; 
}
/* Animations */
@keyframes fadeIn{
from{
opacity: 0; 
transform: translateY(30px); 
}
to{
opacity: 1; 
transform: translateY(0); 
}
}
@keyframes slideIn{
from{
opacity: 0; 
transform: translateX(-30px); 
}
to{
opacity: 1; 
transform: translateX(0); 
}
}
@keyframes slideInRight{
from{
opacity: 0; 
transform: translateX(30px); 
}
to{
opacity: 1; 
transform: translateX(0); 
}
}
@keyframes slideInUp{
from{
opacity: 0; 
transform: translateY(50px); 
}
to{
opacity: 1; 
transform: translateY(0); 
}
}
@keyframes scaleIn{
from{
opacity: 0; 
transform: scale(0.8); 
}
to{
opacity: 1; 
transform: scale(1); 
}
}
@keyframes pulse{
0%{
transform: scale(1); 
}
50%{
transform: scale(1.05); 
}
100%{
transform: scale(1); 
}
}
@keyframes float{
0%, 100%{
transform: translateY(0px); 
}
50%{
transform: translateY(-10px); 
}
}
@keyframes shimmer{
0%{
background-position: -200% 0; 
}
100%{
background-position: 200% 0; 
}
}
/* Loading and transition states */
.loading{
opacity: 0.7; 
pointer-events: none; 
}
.fade-in{
animation: fadeIn 0.8s ease-out; 
}
.slide-in{
animation: slideIn 0.8s ease-out; 
}
.slide-in-right{
animation: slideInRight 0.8s ease-out; 
}
.slide-in-up{
animation: slideInUp 0.8s ease-out; 
}
.scale-in{
animation: scaleIn 0.6s ease-out; 
}
.float{
animation: float 3s ease-in-out infinite; 
}
.pulse{
animation: pulse 2s ease-in-out infinite; 
}
/* Scroll-triggered animations */
.animate-on-scroll{
opacity: 0; 
transform: translateY(30px); 
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}
.animate-on-scroll.animated{
opacity: 1; 
transform: translateY(0); 
}
.animate-on-scroll-left{
opacity: 0; 
transform: translateX(-30px); 
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}
.animate-on-scroll-left.animated{
opacity: 1; 
transform: translateX(0); 
}
.animate-on-scroll-right{
opacity: 0; 
transform: translateX(30px); 
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}
.animate-on-scroll-right.animated{
opacity: 1; 
transform: translateX(0); 
}
.animate-on-scroll-scale{
opacity: 0; 
transform: scale(0.8); 
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}
.animate-on-scroll-scale.animated{
opacity: 1; 
transform: scale(1); 
}
/* Project Statistics */
.project-stats{
padding: var(--section-padding); 
background: var(--light-beige); 
}
.stats-grid{
display: grid; 
grid-template-columns: repeat(4, 1fr); 
gap: 2rem; 
margin-top: 3rem; 
}
.project-stats .stat-item{
text-align: center; 
padding: 1rem; 
background: transparent; 
border: 2px solid var(--wooden-brown); 
border-radius: 15px; 
box-shadow: 0 5px 15px rgba(93, 64, 55, 0.1); 
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
opacity: 0; 
transform: translateY(30px); 
display: flex; 
flex-direction: column; 
justify-content: center; 
min-height: 80px; 
}
.project-stats .stat-item.animated{
opacity: 1; 
transform: translateY(0); 
}
.project-stats .stat-item:hover{
transform: translateY(-5px); 
}
.project-stats .stat-number{
font-family: var(--font-heading); 
font-size: 1.8rem; 
font-weight: 600; 
color: var(--wooden-brown); 
margin-bottom: 0.3rem; 
}
.project-stats .stat-label{
font-size: 0.8rem; 
color: var(--dark-charcoal); 
opacity: 0.8; 
font-weight: 500; 
}
.partner-stats{
display: flex; 
justify-content: center; 
gap: 2rem; 
}
.partner-stats .stat{
text-align: center; 
}
.partner-stats .stat-number{
font-size: 1.5rem; 
color: var(--wooden-brown); 
font-weight: 700; 
display: block; 
margin-bottom: 0.25rem; 
}
.partner-stats .stat-label{
font-size: 0.9rem; 
color: var(--dark-charcoal); 
opacity: 0.7; 
}
/* Testimonials */
.testimonials{
padding: var(--section-padding); 
background: var(--warm-off-white); 
}
.testimonials-grid{
display: grid; 
grid-template-columns: repeat(3, 1fr); 
gap: 2rem; 
margin-top: 3rem; 
}
.testimonial-card{
background: var(--crisp-white); 
padding: 2.5rem; 
border-radius: 15px; 
box-shadow: 0 10px 30px rgba(93, 64, 55, 0.1); 
transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.testimonial-card:hover{
transform: translateY(-5px); 
box-shadow: 0 20px 40px rgba(93, 64, 55, 0.15); 
}
.testimonial-content{
margin-bottom: 2rem; 
}
.quote-icon{
width: 40px; 
height: 40px; 
color: var(--brushed-gold); 
margin-bottom: 1.5rem; 
}
.quote-icon svg{
width: 100%; 
height: 100%; 
}
.testimonial-content p{
color: var(--dark-charcoal); 
font-style: italic; 
line-height: 1.7; 
margin-bottom: 0; 
}
.testimonial-author{
border-top: 1px solid rgba(93, 64, 55, 0.1); 
padding-top: 1.5rem; 
}
.author-info h4{
font-family: var(--font-heading); 
font-size: 1.2rem; 
color: var(--wooden-brown); 
margin-bottom: 0.25rem; 
font-weight: 600; 
}
.author-info span{
color: var(--dark-charcoal); 
opacity: 0.7; 
font-size: 0.9rem; 
}
/* Partnership Benefits */
.partnership-benefits{
padding: var(--section-padding); 
background: var(--crisp-white); 
}
.benefits-grid{
display: grid; 
grid-template-columns: repeat(4, 1fr); 
gap: 2rem; 
margin-top: 3rem; 
}
.benefit-item{
text-align: center; 
padding: 2rem; 
background: var(--warm-off-white); 
border-radius: 15px; 
transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.benefit-item:hover{
transform: translateY(-5px); 
box-shadow: 0 15px 30px rgba(93, 64, 55, 0.1); 
}
.benefit-icon{
width: 48px; 
height: 48px; 
margin: 0 auto 1.5rem; 
color: var(--wooden-brown); 
}
.benefit-icon svg{
width: 100%; 
height: 100%; 
}
.benefit-item h3{
font-family: var(--font-heading); 
font-size: 1.3rem; 
color: var(--dark-charcoal); 
margin-bottom: 1rem; 
font-weight: 600; 
}
.benefit-item p{
color: var(--dark-charcoal); 
opacity: 0.8; 
line-height: 1.6; 
}
/* TKC Difference Responsive */
@media (max-width: 768px){
.tkc-difference{
padding: 4rem 0; 
}
.difference-header h2{
font-size: 2.5rem; 
}
.difference-showcase{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.showcase-center{
order: -1; 
}
.center-visual{
flex-direction: row; 
gap: 1rem; 
}
.visual-circle{
width: 80px; 
height: 80px; 
}
.circle-content h4{
font-size: 0.8rem; 
}
.circle-icon svg{
width: 20px; 
height: 20px; 
}
.innovation-card{
padding: 1.5rem; 
}
.card-number{
font-size: 2rem; 
}
}
@media (max-width: 480px){
.difference-header h2{
font-size: 2rem; 
}
.difference-header p{
font-size: 1rem; 
}
.center-visual{
flex-direction: column; 
gap: 1rem; 
}
.visual-circle{
width: 70px; 
height: 70px; 
}
.innovation-card{
padding: 1rem; 
}
.card-content h3{
font-size: 1.2rem; 
}
.index-future-cta{
padding: 3rem 1.5rem; 
}
.index-future-title{
font-size: 2rem; 
}
.index-future-btn{
padding: 0.5rem 1rem; 
font-size: 0.9rem; 
min-width: 90px; 
}
}
/* Floating WhatsApp Button */
.whatsapp-float{
position: fixed; 
bottom: 30px; 
right: 30px; 
z-index: 1000; 
background: #25D366; 
color: white; 
width: 60px; 
height: 60px; 
border-radius: 50%; 
display: flex; 
align-items: center; 
justify-content: center; 
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); 
transition: all 0.3s ease; 
text-decoration: none; 
animation: pulse 2s infinite; 
}
.whatsapp-float:hover{
background: #128C7E; 
transform: scale(1.1); 
box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6); 
}
.whatsapp-float svg{
width: 30px; 
height: 30px; 
fill: currentColor; 
}
@keyframes pulse{
0%{
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); 
}
50%{
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.8); 
}
100%{
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); 
}
}
/* WhatsApp Button Responsive */
@media (max-width: 768px){
.whatsapp-float{
bottom: 20px; 
right: 20px; 
width: 55px; 
height: 55px; 
}
.whatsapp-float svg{
width: 28px; 
height: 28px; 
}
}
@media (max-width: 480px){
.whatsapp-float{
bottom: 15px; 
right: 15px; 
width: 50px; 
height: 50px; 
}
.whatsapp-float svg{
width: 25px; 
height: 25px; 
}
}
/* Lightbox Responsive */
@media (max-width: 768px){
.lightbox-content{
width: 95%; 
height: 95%; 
padding: 10px; 
}
.lightbox-close{
top: 10px; 
right: 20px; 
font-size: 30px; 
}
#lightbox-image{
max-height: 70%; 
}
.lightbox-caption h3{
font-size: 1.2rem; 
}
.lightbox-prev,
.lightbox-next{
padding: 10px 15px; 
font-size: 20px; 
}
.lightbox-nav{
padding: 0 10px; 
}
}
@media (max-width: 480px){
.lightbox-content{
width: 98%; 
height: 98%; 
padding: 5px; 
}
.lightbox-close{
top: 5px; 
right: 15px; 
font-size: 25px; 
}
#lightbox-image{
max-height: 60%; 
}
.lightbox-caption h3{
font-size: 1rem; 
}
.lightbox-prev,
.lightbox-next{
padding: 8px 12px; 
font-size: 18px; 
}
}
/* Responsive Design */
@media (max-width: 768px){
/* Announcement bar mobile styles */
.announcement-bar{
font-size: 0.75rem; 
}
/* Browse Collection button responsive */
.btn-primary{
padding: 10px 20px; 
font-size: 0.85rem; 
width: auto; 
text-align: center; 
min-width: 140px; 
}
/* View All Projects button - Mobile */
@media (max-width: 768px){
.btn-view-all-projects{
padding: 10px 16px; 
font-size: 0.8rem; 
min-width: 120px; 
max-width: 140px; 
}
}
/* Contact section mobile layout - form first, then map, then details */
.index-contact-content{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.index-contact-form-section{
order: 1; 
}
.index-map-section{
order: 2; 
}
.index-contact-details-section{
order: 3; 
margin-top: 0; 
}
/* Products page carousel - 1 slide on mobile */
.carousel-slide{
flex: 0 0 100%; 
}
.carousel-slides-wrapper{
gap: 1rem; 
}
/* Fix horizontal overflow */
body{
overflow-x: hidden !important; 
}
.container{
max-width: 100% !important; 
padding: 0 1rem !important; 
}
*{
box-sizing: border-box !important; 
}
/* Prevent specific elements from causing overflow */
.hero-content,
.section-header,
.philosophy-grid,
.team-grid,
.gallery-grid,
.partners-grid,
.contact-content,
.footer-content,
.footer-bottom{
max-width: 100% !important; 
overflow-x: hidden !important; 
}
/* Fix text overflow */
h1, h2, h3, h4, h5, h6, p, a, span, li{
word-wrap: break-word !important; 
overflow-wrap: break-word !important; 
hyphens: auto !important; 
}
/* Fix image overflow */
img{
max-width: 100% !important; 
height: auto !important; 
}
/* Force mobile footer layout */
.footer .footer-content{
display: flex !important; 
flex-direction: column !important; 
gap: 2rem !important; 
text-align: left !important; 
padding: 0 1rem !important; 
grid-template-columns: none !important; 
}
.footer .footer-section{
background: none !important; 
padding: 0 !important; 
border-radius: 0 !important; 
box-shadow: none !important; 
margin-bottom: 2rem !important; 
width: 100% !important; 
}
.footer .footer-section h4{
font-size: 1.2rem !important; 
margin-bottom: 1rem !important; 
color: var(--wooden-brown) !important; 
font-weight: 600 !important; 
border-bottom: none !important; 
padding-bottom: 0 !important; 
text-align: left !important; 
}
.footer .footer-section ul{
list-style: none !important; 
padding: 0 !important; 
margin: 0 !important; 
}
.footer .footer-section ul li{
margin-bottom: 0.6rem !important; 
padding: 0 !important; 
}
.footer .footer-section a{
font-size: 0.95rem !important; 
color: var(--dark-charcoal) !important; 
text-decoration: none !important; 
opacity: 0.7 !important; 
transition: all 0.3s ease !important; 
display: block !important; 
padding: 0.3rem 0 !important; 
border-radius: 0 !important; 
}
.footer .footer-section a:hover{
opacity: 1 !important; 
color: var(--wooden-brown) !important; 
background: none !important; 
transform: none !important; 
}
.footer .footer-section:last-child ul li{
font-size: 0.9rem !important; 
color: var(--dark-charcoal) !important; 
opacity: 0.7 !important; 
padding: 0.3rem 0 !important; 
border-radius: 0 !important; 
transition: all 0.3s ease !important; 
}
.footer .footer-section:last-child ul li:hover{
background: none !important; 
transform: none !important; 
opacity: 1 !important; 
color: var(--wooden-brown) !important; 
}
/* Footer bottom section - vertical layout */
.footer .footer-bottom{
display: flex !important; 
flex-direction: column !important; 
gap: 1.5rem !important; 
text-align: left !important; 
padding-top: 2rem !important; 
align-items: flex-start !important; 
grid-template-columns: none !important; 
}
.footer .footer-bottom-left,
.footer .footer-bottom-center,
.footer .footer-bottom-right{
text-align: left !important; 
width: 100% !important; 
justify-self: auto !important; 
}
.footer .footer-bottom-left p{
font-size: 0.9rem !important; 
margin-bottom: 0 !important; 
color: var(--dark-charcoal) !important; 
opacity: 0.7 !important; 
}
.footer .footer-bottom-center p{
font-size: 0.9rem !important; 
margin-bottom: 0 !important; 
color: var(--dark-charcoal) !important; 
opacity: 0.7 !important; 
}
.footer .footer-bottom-center a{
color: var(--wooden-brown) !important; 
text-decoration: none !important; 
font-weight: 500 !important; 
transition: all 0.3s ease !important; 
}
.footer .footer-bottom-center a:hover{
color: var(--wooden-brown-light) !important; 
text-decoration: underline !important; 
}
.footer .certification-badges{
flex-direction: row !important; 
justify-content: flex-start !important; 
gap: 1rem !important; 
align-items: center !important; 
width: 100% !important; 
flex-wrap: wrap !important; 
}
.footer .cert-badge{
font-size: 0.8rem !important; 
padding: 0.5rem 1rem !important; 
background: var(--crisp-white) !important; 
border-radius: 20px !important; 
box-shadow: 0 2px 8px rgba(93, 64, 55, 0.1) !important; 
display: flex !important; 
align-items: center !important; 
gap: 0.5rem !important; 
color: var(--dark-charcoal) !important; 
transition: all 0.3s ease !important; 
}
.footer .cert-badge:hover{
transform: translateY(-2px) !important; 
box-shadow: 0 4px 12px rgba(93, 64, 55, 0.15) !important; 
}
.footer .cert-badge svg{
width: 16px !important; 
height: 16px !important; 
color: var(--wooden-brown) !important; 
}
.announcement-bar{
padding: 8px 0; 
font-size: 0.8rem; 
}
.announcement-bar p{
flex-wrap: nowrap; 
white-space: nowrap; 
gap: 0.3rem; 
}
.navbar{
top: 36px; 
box-shadow: 0 2px 10px rgba(93, 64, 55, 0.1); 
}
.hamburger{
display: flex; 
}
.nav-actions{
display: none; 
}
.nav-cta{
display: none; 
}
.nav-menu{
position: fixed; 
left: -100%; 
top: 90px; 
flex-direction: column; 
background-color: var(--crisp-white); 
width: 100%; 
text-align: center; 
transition: 0.3s; 
box-shadow: 0 10px 27px rgba(93, 64, 55, 0.15); 
padding: 2rem 0; 
z-index: 999; 
}
.nav-menu.active{
left: 0; 
}
.hero{
min-height: 60vh; 
padding: 120px 0 40px; 
display: flex; 
align-items: center; 
}
.hero-content{
padding: 30px 15px 0; 
gap: 2rem; 
grid-template-columns: 1fr; 
text-align: center; 
width: 100%; 
}
.hero-left,
.hero-right{
display: none; 
}
.hero-text h1{
font-size: 2.5rem; 
}
.guarantee-grid{
grid-template-columns: 1fr; 
gap: 1rem; 
}
.guarantee-item{
border-right: none; 
border-bottom: 1px solid rgba(93, 64, 55, 0.1); 
padding: 1rem; 
}
.categories-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.precision-content,
.contact-content{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.form-header h2{
font-size: 2.5rem; 
letter-spacing: -0.3px; 
}
.form-header h2::after{
width: 50px; 
height: 2px; 
}
.map-container{
min-height: 250px; 
}
.contact-details-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.contact-detail-item{
min-height: 60px; 
}
.contact-form-section,
.contact-details-section{
padding: 2rem; 
}
.index-contact-form-section{
padding: 2rem; 
}
.index-contact-details-section{
padding: 2rem; 
margin-top: 2rem; 
}
.index-contact-details-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.index-contact-detail-item{
min-height: 100px; 
padding: 1.5rem; 
gap: 1.2rem; 
}
.index-detail-icon{
width: 50px; 
height: 50px; 
}
.index-detail-icon svg{
width: 24px; 
height: 24px; 
}
.index-map-container{
min-height: 300px; 
}
.precision-stats{
grid-template-columns: 1fr; 
gap: 1rem; 
}
.precision-gallery{
grid-template-columns: 1fr; 
grid-template-rows: auto; 
max-width: 100%; 
}
.precision-image.main-image,
.precision-image.secondary-image,
.precision-image.tertiary-image{
height: 200px; 
grid-column: 1; 
}
/* Page-specific responsive styles */
.story-content{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.philosophy-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.team-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.categories-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.materials-grid{
grid-template-columns: repeat(2, 1fr); 
gap: 1.5rem; 
}
.features-grid{
grid-template-columns: repeat(2, 1fr); 
gap: 1.5rem; 
}
.contact-info-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.contact-info-card{
padding: 1.5rem; 
flex-direction: row; 
text-align: left; 
gap: 1rem; 
min-height: 100px; 
}
.contact-info-icon{
width: 50px; 
height: 50px; 
margin-top: 0; 
flex-shrink: 0; 
}
.contact-info-icon i,
.contact-info-icon svg{
font-size: 20px; 
width: 20px; 
height: 20px; 
color: var(--crisp-white) !important; 
font-weight: 900; 
}
.contact-info-icon svg{
fill: var(--crisp-white) !important; 
}
.contact-info-icon .fas{
font-weight: 900; 
}
.contact-info-content h3{
font-size: 1.2rem; 
margin-bottom: 0.4rem; 
}
.contact-info-content p{
font-size: 0.85rem; 
line-height: 1.4; 
}
.contact-form-row{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.contact-form-container{
padding: 2.5rem; 
}
.contact-map-container{
height: 400px; 
overflow: hidden; 
}
.section-header h2{
font-size: 2rem; 
}
.section-header h2::after{
width: 40px; 
height: 2px; 
}
.contact-item{
padding: 1rem; 
margin-bottom: 1.5rem; 
}
.contact-icon{
width: 40px; 
height: 40px; 
}
.contact-icon svg{
width: 20px; 
height: 20px; 
}
.business-hours{
padding: 1.5rem; 
}
.map-section h2{
font-size: 2rem; 
}
.map-container{
height: 300px; 
}
.stats-grid{
grid-template-columns: repeat(2, 1fr); 
gap: 1.5rem; 
}
.partners-grid{
grid-template-columns: repeat(2, 1fr); 
gap: 2rem; 
}
.partner-item{
min-height: 100px; 
padding: 1.5rem; 
}
.partner-logo{
height: 60px; 
}
.partner-logo img{
max-height: 50px; 
}
.logo-placeholder{
width: 70px; 
height: 50px; 
font-size: 1rem; 
}
.testimonials-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.benefits-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.materials-grid{
grid-template-columns: repeat(2, 1fr); 
gap: 1rem; 
}
.features-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.stats-grid{
grid-template-columns: repeat(2, 1fr); 
gap: 1rem; 
}
.selector-container{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.material-options{
flex-direction: row; 
overflow-x: auto; 
padding-bottom: 1rem; 
}
.material-option{
min-width: 120px; 
flex-direction: column; 
text-align: center; 
}
.gallery-grid{
grid-template-columns: 1fr; 
}
.gallery-page-items{
grid-template-columns: 1fr; 
gap: 1.5rem; 
}
.gallery-page-item{
height: 250px; 
}
.gallery-page-image{
height: 250px; 
}
.index-categories-grid{
grid-template-columns: 1fr; 
gap: 1.5rem; 
max-width: 100%; 
}
.index-category-card:nth-child(1),
.index-category-card:nth-child(2),
.index-category-card:nth-child(3),
.index-category-card:nth-child(4),
.index-category-card:nth-child(5){
grid-row: auto; 
grid-column: auto; 
margin: 0; 
}
.index-category-card{
height: 250px; 
}
.partners-grid{
grid-template-columns: repeat(2, 1fr); 
gap: 1.5rem; 
margin-top: 2rem; 
padding: 0 1rem; 
}
.partner-item{
padding: 1.5rem; 
min-height: 100px; 
flex-direction: column; 
text-align: center; 
}
.partner-logo{
max-height: 50px; 
margin-bottom: 0.5rem; 
}
.partner-text{
font-size: 0.9rem; 
font-weight: 600; 
color: var(--dark-charcoal); 
margin-top: 0.5rem; 
}
}
@media (max-width: 480px){
.partners-grid{
grid-template-columns: 1fr; 
gap: 1rem; 
margin-top: 1.5rem; 
padding: 0 0.5rem; 
}
.partner-item{
min-height: 80px; 
padding: 1rem; 
flex-direction: column; 
text-align: center; 
}
.partner-text{
font-size: 0.8rem; 
margin-top: 0.3rem; 
}
.index-future-cta{
padding: 2.5rem 1rem; 
}
.index-future-title{
font-size: 1.8rem; 
}
.index-future-description{
font-size: 1rem; 
}
.index-future-btn{
padding: 0.45rem 0.9rem; 
font-size: 0.85rem; 
min-width: 80px; 
}
.partner-logo{
height: 50px; 
margin-bottom: 0.5rem; 
}
.partner-logo img{
max-height: 40px; 
width: auto; 
height: auto; 
object-fit: contain; 
}
.logo-placeholder{
width: 60px; 
height: 40px; 
font-size: 0.9rem; 
margin-bottom: 0.5rem; 
}
.trusted-partners{
padding: 3rem 0; 
}
.section-header h2{
font-size: 2rem; 
margin-bottom: 0.5rem; 
}
.section-underline{
width: 40px; 
height: 2px; 
}
.form-header h2{
font-size: 2rem; 
letter-spacing: -0.2px; 
}
.form-header h2::after{
width: 40px; 
height: 2px; 
}
.contact-info-grid{
gap: 1rem; 
}
.contact-info-card{
padding: 1.2rem; 
min-height: 90px; 
}
.contact-info-icon{
width: 45px; 
height: 45px; 
}
.contact-info-icon i,
.contact-info-icon svg{
font-size: 18px; 
width: 18px; 
height: 18px; 
color: var(--crisp-white) !important; 
font-weight: 900; 
}
.contact-info-icon svg{
fill: var(--crisp-white) !important; 
}
.contact-info-icon .fas{
font-weight: 900; 
}
.contact-info-content h3{
font-size: 1.1rem; 
margin-bottom: 0.3rem; 
}
.contact-info-content p{
font-size: 0.8rem; 
}
.contact-form-container{
padding: 1.5rem; 
}
.map-container{
height: 300px; 
}
.section-header h2{
font-size: 1.8rem; 
}
.section-header h2::after{
width: 30px; 
height: 2px; 
}
.contact-item{
padding: 0.8rem; 
margin-bottom: 1rem; 
}
.contact-icon{
width: 35px; 
height: 35px; 
}
.contact-icon svg{
width: 18px; 
height: 18px; 
}
.business-hours{
padding: 1rem; 
}
.business-hours h3{
font-size: 1.3rem; 
}
.map-section h2{
font-size: 1.8rem; 
}
.contact-map-container{
height: 350px; 
overflow: hidden; 
}
.contact-form-section,
.contact-details-section{
padding: 1.5rem; 
}
.index-contact-form-section{
padding: 1.5rem; 
}
.index-contact-details-section{
padding: 1.5rem; 
margin-top: 1.5rem; 
}
.index-map-container{
min-height: 250px; 
}
.index-form-header h2{
font-size: 2rem; 
}
.index-detail-icon{
width: 45px; 
height: 45px; 
}
.index-detail-icon svg{
width: 22px; 
height: 22px; 
}
.index-contact-detail-item{
min-height: 90px; 
padding: 1.2rem; 
gap: 1rem; 
}
.index-detail-content strong{
font-size: 1rem; 
margin-bottom: 0.6rem; 
}
.index-detail-content p{
font-size: 0.9rem; 
}
.contact-details-grid{
gap: 1.5rem; 
}
.contact-detail-item{
gap: 0.8rem; 
min-height: 50px; 
}
.submit-btn{
padding: 1rem 2rem; 
min-width: 150px; 
}
.section-header h2{
font-size: 2rem; 
}
.process-grid{
grid-template-columns: 1fr; 
}
.footer{
padding: 3rem 0 1rem; 
}
.footer-contact-social{
flex-direction: column; 
gap: 1.5rem; 
text-align: center; 
}
.footer-bottom{
display: flex; 
flex-direction: column; 
gap: 1.5rem; 
text-align: center; 
padding-top: 2rem; 
align-items: center; 
}
.footer-bottom-left,
.footer-bottom-center,
.footer-bottom-right{
text-align: center; 
width: 100%; 
}
.footer-bottom-left p{
font-size: 0.85rem; 
margin-bottom: 0.5rem; 
}
.footer-bottom-center p{
font-size: 0.8rem; 
margin-bottom: 0.5rem; 
}
.certification-badges{
flex-direction: column; 
justify-content: center; 
gap: 0.8rem; 
align-items: center; 
width: 100%; 
}
.cert-badge{
font-size: 0.8rem; 
padding: 0.5rem 1rem; 
width: auto; 
min-width: 140px; 
}
/* About Page Responsive */
.page-header-content{
grid-template-columns: 1fr; 
gap: 3rem; 
text-align: center; 
}
.page-header-text h1{
font-size: 2.5rem; 
}
.page-header-stats{
justify-content: center; 
gap: 1.5rem; 
}
.story-content{
grid-template-columns: 1fr; 
gap: 3rem; 
}
.philosophy-grid{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.team-grid{
grid-template-columns: 1fr; 
gap: 2rem; 
}
}
@media (max-width: 480px){
.container{
padding: 0 15px; 
}
.announcement-bar{
padding: 6px 0; 
font-size: 0.65rem; 
}
.announcement-bar p{
gap: 0.2rem; 
}
.navbar{
top: 32px; 
}
.hero-text h1{
font-size: 2rem; 
}
.hero-text p{
font-size: 1rem; 
}
.btn{
padding: 12px 24px; 
font-size: 0.9rem; 
}
.page-header h1{
font-size: 2.5rem; 
}
.section-header h2{
font-size: 1.8rem; 
}
.materials-grid,
.stats-grid{
grid-template-columns: 1fr; 
gap: 1rem; 
}
.filter-buttons{
flex-direction: column; 
gap: 0.5rem; 
}
/* Products Page Responsive */
.categories-grid{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.category-card{
margin-bottom: 2rem; 
}
.category-image{
height: 200px; 
}
.materials-grid{
grid-template-columns: repeat(2, 1fr); 
gap: 2rem; 
}
.features-grid{
grid-template-columns: 1fr; 
gap: 2rem; 
}
.filter-btn{
width: 100%; 
text-align: center; 
}
.guarantee-grid{
grid-template-columns: 1fr; 
}
.kitchen-carousel-container{
padding: 0 1rem; 
}
.carousel-slide{
flex: 0 0 calc(100% - 1rem); 
}
.slide-content{
flex-direction: column; 
height: 100%; 
}
.slide-image{
height: 200px; 
order: 1; 
overflow: hidden; 
margin: 0; 
padding: 0; 
border: none; 
display: block; 
position: relative; 
}
.slide-image img{
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
object-fit: cover; 
object-position: center; 
display: block; 
margin: 0; 
padding: 0; 
border: none; 
}
.slide-text{
padding: 1.5rem; 
order: 2; 
}
.slide-text h3{
font-size: 1.8rem; 
margin-bottom: 1rem; 
}
.slide-text p{
font-size: 0.95rem; 
margin-bottom: 1.5rem; 
}
.slide-text ul{
margin-bottom: 2rem; 
}
.slide-text ul li{
font-size: 0.9rem; 
margin-bottom: 0.8rem; 
}
.slide-text .btn{
padding: 0.9rem 1.8rem; 
font-size: 0.95rem; 
min-width: 130px; 
border-radius: 25px; 
}
.carousel-navigation{
gap: 1rem; 
margin-top: 1.5rem; 
flex-wrap: wrap; 
}
.carousel-btn{
width: 45px; 
height: 45px; 
}
.carousel-btn svg{
width: 22px; 
height: 22px; 
}
.dot{
width: 12px; 
height: 12px; 
}
.kitchen-carousel{
border-radius: 15px; 
}
.slide-text{
min-height: 300px; 
}
.partners-grid{
grid-template-columns: 1fr; 
}
.footer{
padding: 2.5rem 0 1rem; 
}
.footer-content{
gap: 2rem; 
padding: 0 0.5rem; 
}
.footer-section{
padding: 1.2rem; 
}
.footer-section h4{
font-size: 1.2rem; 
margin-bottom: 1rem; 
}
.footer-section a{
font-size: 0.9rem; 
padding: 0.3rem 0.6rem; 
}
.footer-section:last-child ul li{
font-size: 0.85rem; 
padding: 0.3rem 0.6rem; 
}
.footer-bottom{
gap: 1rem; 
padding-top: 1.5rem; 
}
.footer-bottom-left p{
font-size: 0.8rem; 
line-height: 1.4; 
}
.footer-bottom-center p{
font-size: 0.75rem; 
line-height: 1.4; 
}
.certification-badges{
flex-direction: column; 
gap: 0.5rem; 
align-items: center; 
}
.cert-badge{
font-size: 0.75rem; 
padding: 0.4rem 0.8rem; 
width: auto; 
min-width: 120px; 
}
}