/*
Theme Name: Techstone Custom
Theme URI: https://yourdomain.com/
Author: Inovashi
Description: Custom theme for Techstone.
Version: 1.0
Tags: bootstrap, gsap, animation, business
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
:root {
--primary-dark: #085457;
--primary-light: #4fd1c7;
--secondary: #0a6b6f;
--accent: #5de0d6;
--text-dark: #1a1a1a;
--text-medium: #4a5568;
--text-light: #718096;
--bg-light: #f8fafc;
--bg-white: #ffffff;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--shadow-md: 0 8px 25px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
--gradient-primary: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 100%);
--gradient-accent: linear-gradient(135deg, var(--primary-light) 0%, var(--accent) 100%);
--border-radius-sm: 8px;
--border-radius-md: 12px;
--border-radius-lg: 16px;
--border-radius-xl: 24px;
--transition-fast: 0.2s ease;
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Playfair Display", serif;
line-height: 1.6;
color: var(--text-dark);
overflow-x: hidden;
background: var(--bg-white);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* Header */
.text-center{
text-align: center;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
header {
background: rgba(8, 84, 87, 0.95);
backdrop-filter: blur(10px);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: white;
text-decoration: none;
}
.logo-image img {
height: 45px;
width: auto;
max-width: 200px;
}
.nav-menu {
display: flex;
list-style: none;
gap: 0;
margin: 0;
padding: 0;
}
.nav-item {
position: relative;
}
.nav-item > a {
color: white;
text-decoration: none;
padding: 1rem 1.5rem;
display: block;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.nav-item > a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: #4fd1c7;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-item > a:hover::after,
.nav-item.active > a::after,
.current-menu-item > a::after,
.current-menu-ancestor > a::after {
width: 80%;
}
.nav-item > a:hover,
.nav-item.active > a,
.current-menu-item > a,
.current-menu-ancestor > a {
color: #4fd1c7 !important;
}
/* Dropdown Styles */
.dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-radius: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
border-top: 3px solid #4fd1c7;
}
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown a {
color: #333;
padding: 12px 20px;
display: block;
text-decoration: none;
transition: all 0.3s ease;
border-bottom: 1px solid #f0f0f0;
}
.dropdown a:hover {
background: #f8f9fa;
color: #085457;
padding-left: 25px;
}
.dropdown a:last-child {
border-bottom: none;
}
/* Dropdown Arrow - WordPress Compatible */
.has-dropdown > a::before,
.menu-item-has-children > a::before {
content: '▼';
font-size: 0.7rem;
margin-left: 8px;
transition: transform 0.3s ease;
float: right;
margin-top: 5px;
}
.nav-item:hover .has-dropdown > a::before,
.nav-item:hover .menu-item-has-children > a::before {
transform: rotate(180deg);
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
background: none;
border: none;
color: white;
cursor: pointer;
padding: 0.5rem;
width: 40px;
height: 40px;
flex-direction: column;
justify-content: space-around;
align-items: center;
transition: all 0.3s ease;
}
.hamburger-line {
width: 25px;
height: 3px;
margin-bottom:4px;
background: white;
transition: all 0.3s ease;
transform-origin: center;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* Sub Menu Styling */
.sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
/* WordPress Admin Bar Compatibility */
.admin-bar #main-header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar #main-header {
top: 46px;
}
}
/* Accessibility Improvements */
.nav-menu a:focus,
.mobile-menu-toggle:focus {
outline: 2px solid #4fd1c7;
outline-offset: 2px;
}
/* Mobile Styles */
@media (max-width: 768px) {
.mobile-menu-toggle {
display: flex;
z-index: 1001;
}
.nav-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(8, 84, 87, 0.98);
backdrop-filter: blur(10px);
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
z-index: 1000;
padding-top: 80px;
overflow-y: auto;
}
.nav-menu.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.nav-item {
width: 100%;
position: relative;
}
.nav-item > a {
padding: 1.2rem 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.1rem;
font-weight: 500;
text-align: left;
width: 100%;
}
.dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: rgba(0, 0, 0, 0.2);
border-radius: 0;
border-top: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
margin: 0;
padding: 0;
}
.nav-item:hover .dropdown,
.nav-item.dropdown-open .dropdown {
max-height: 500px;
}
.dropdown a {
color: rgba(255, 255, 255, 0.9);
padding: 12px 3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
min-height: 44px;
font-size: 0.95rem;
transition: all 0.3s ease;
display: block;
text-align: left;
width: 100%;
}
.dropdown a:hover {
background: rgba(255, 255, 255, 0.1);
color: #4fd1c7;
padding-left: 3.5rem;
}
.dropdown a:last-child {
border-bottom: none;
}
.has-dropdown > a::before,
.menu-item-has-children > a::before {
content: '▼';
font-size: 0.8rem;
transition: transform 0.3s ease;
margin-left: auto;
flex-shrink: 0;
order: 2;
}
.has-dropdown > a,
.menu-item-has-children > a {
display: flex;
align-items: center;
justify-content: space-between;
}
.has-dropdown > a span,
.menu-item-has-children > a span {
order: 1;
flex: 1;
text-align: left;
}
.nav-item.dropdown-open .has-dropdown > a::before,
.nav-item.dropdown-open .menu-item-has-children > a::before {
transform: rotate(180deg);
}
/* Mobile menu close button */
.mobile-menu-toggle {
position: fixed;
top: 5px;
right: 20px;
z-index: 1002;
background: rgba(8, 84, 87, 0.9);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 12px;
transition: all 0.3s ease;
color: white;
font-size: 1.2rem;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-menu-toggle:hover {
background: rgba(8, 84, 87, 1);
border-color: #4fd1c7;
transform: scale(1.05);
}
/* Prevent body scroll when menu is open */
body.menu-open {
overflow: hidden;
}
}
.text-center {
text-align: center;
}
.display-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 700;
line-height: 1.1;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 1.5rem;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 5vw, 3.5rem);
color: #000;
margin-bottom: 1rem;
position: relative;
font-weight: 600;
line-height: 1.2;
}
.section-subtitle {
font-size: clamp(1rem, 2.5vw, 1.2rem);
color: var(--text-medium);
line-height: 1.7;
max-width: 900px;
margin: 0 auto 0px;
padding-bottom:20px;
}
/* Modern Button Styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem 2.5rem;
border: none;
border-radius: var(--border-radius-xl);
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
cursor: pointer;
transition: all var(--transition-smooth);
position: relative;
overflow: hidden;
transform: translateY(0);
box-shadow: var(--shadow-md);
}
.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:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
.btn:active {
transform: translateY(-1px);
}
.btn-primary {
background: var(--gradient-accent);
color: var(--primary-dark);
}
.btn-primary:hover {
background: var(--gradient-accent);
filter: brightness(1.1);
color: var(--primary-dark);
}
.btn-secondary {
background: var(--gradient-primary);
color: white;
}
.btn-secondary:hover {
background: var(--gradient-primary);
filter: brightness(1.1);
color: white;
}
.btn-outline {
background: white;
color: var(--primary-dark);
border: 2px solid var(--primary-light);
box-shadow: var(--shadow-md);
}
.btn-outline:hover {
background: var(--primary-light);
color: white;
border-color: var(--primary-light);
}
.btn-icon {
font-size: 1.2rem;
transition: transform var(--transition-smooth);
}
.btn:hover .btn-icon {
transform: translateX(5px);
}
/* Hero Section */
.hero {
height: 100vh;
min-height: 700px;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
}
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
}
.hero-slide.active {
opacity: 1;
}
.hero-slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
transition: transform 8s ease-out;
z-index: 1;
}
.hero-slide.active img {
transform: scale(1.05);
}
.hero-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(8, 84, 87, 0.85) 0%,
rgba(10, 107, 111, 0.75) 50%,
rgba(8, 84, 87, 0.8) 100%);
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
text-align: center;
color: white;
max-width: 1000px;
padding: 0 2rem;
opacity: 0;
transform: translateY(50px);
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-slide.active .hero-content {
opacity: 1;
transform: translateY(0);
}
.hero-subtitle {
font-size: clamp(1.1rem, 3vw, 1.6rem);
margin-bottom: 3rem;
opacity: 0.95;
line-height: 1.6;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
animation: fadeInUp 1s ease 0.7s both;
}
/* Enhanced Hero Navigation */
.hero-dots {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 3;
}
.hero-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all var(--transition-smooth);
position: relative;
}
.hero-dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
opacity: 0;
transition: all var(--transition-smooth);
}
.hero-dot.active,
.hero-dot:hover {
background: var(--primary-light);
transform: scale(1.2);
}
.hero-dot.active::before {
opacity: 1;
}
/* Card-based About Section */
.about {
padding: 60px 0 0;
background: var(--bg-light);
position: relative;
}
.about-intro {
text-align: center;
}
.about-intro .section-title::after {
content: '';
display: block;
width: 120px;
height: 4px;
background: var(--gradient-accent);
margin: 2rem auto;
border-radius: 2px;
animation: slideInFromBottom 0.8s ease 0.3s both;
}
.about-card {
border-radius: var(--border-radius-xl);
padding: 0;
/* transition: all var(--transition-smooth); */
overflow: hidden;
}
/* .about-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
} */
.about-card img{
border-radius: 15px;
box-shadow: var(--shadow-md);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: center;
}
.about-text {
padding: 4rem;
font-size: 1.15rem;
line-height: 1.8;
color: var(--text-medium);
}
.about-text p {
margin-bottom: 1.5rem;
}
.about-image {
position: relative;
overflow: hidden;
height: 500px;
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
border-radius: 15px;
}
.about-card:hover .about-image img {
transform: scale(1.05);
border-radius: 15px;
}
/* Card-based Products Section */
.products {
padding: 60px 0 0;
background: var(--bg-white);
}
.products-intro {
text-align: center;
margin-bottom: 4rem;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.product-card {
background: white;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
position: relative;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent) 100%);
opacity: 0;
transition: all var(--transition-smooth);
z-index: 1;
}
.product-card:hover::before {
opacity: 0.05;
}
.product-card:hover {
transform: translateY(-15px);
box-shadow: var(--shadow-xl);
}
.product-card img {
width: 100%;
height: 280px;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.product-card:hover img {
transform: scale(1.08);
}
.product-info {
padding: 2rem;
position: relative;
z-index: 2;
}
.product-info h3 {
color: var(--primary-dark);
font-size: 1.4rem;
margin-bottom: 1rem;
font-weight: 600;
}
.product-info a {
color: var(--primary-dark);
text-decoration: none;
font-weight: 600;
transition: color var(--transition-smooth);
display: flex;
align-items: center;
gap: 0.5rem;
}
.product-info a:hover {
color: var(--primary-light);
}
/* Enhanced Multi-Slide Carousel */
.slider-section {
padding: 60px 0 0;
background: var(--bg-light);
}
.carousel-container {
position: relative;
max-width: 1400px;
margin: 0 auto;
overflow: hidden;
}
.carousel {
display: flex;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
gap: 2rem;
}
.carousel-slide {
flex: 0 0 calc(33.333% - 1.333rem);
position: relative;
overflow: hidden;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
background: white;
}
.carousel-slide:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.carousel-slide img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.carousel-slide:hover img {
transform: scale(1.05);
}
.carousel-navigation {
display: flex;
justify-content: center;
gap: 1rem;
margin: 3rem 0;
}
.carousel-btn {
background: white;
border: 2px solid var(--primary-light);
color: var(--primary-dark);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-smooth);
box-shadow: var(--shadow-md);
}
.carousel-btn:hover {
background: var(--primary-light);
color: white;
transform: scale(1.1);
}
/* Card-based Manufacturing Section */
.manufacturing {
padding: 60px 0 0;
background: var(--bg-white);
position: relative;
}
.manufacturing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.manufacturing-item {
background: white;
padding: 3rem 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
text-align: center;
position: relative;
overflow: hidden;
border-top: 4px solid transparent;
}
.manufacturing-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-accent);
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.manufacturing-item:hover::before {
transform: translateX(0);
}
.manufacturing-item:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.manufacturing-item img {
width: 80px;
height: 80px;
margin-bottom: 2rem;
filter: hue-rotate(180deg) saturate(0.8);
transition: all var(--transition-smooth);
}
.manufacturing-item:hover img {
transform: scale(1.1);
filter: hue-rotate(180deg) saturate(1);
}
.manufacturing-item h3 {
color: var(--primary-dark);
margin-bottom: 1.5rem;
font-size: 1.3rem;
font-weight: 600;
}
.manufacturing-item p {
line-height: 1.7;
color: var(--text-medium);
}
/* Enhanced Featured Product */
.featured-product {
padding: 0px 0 60px;
background: var(--bg-light);
text-align: center;
position: relative;
}
.featured-card {
background: white;
border-radius: var(--border-radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
max-width: 1000px;
margin: 2rem auto;
transition: all var(--transition-smooth);
}
.featured-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.featured-image {
position: relative;
overflow: hidden;
}
.featured-image img {
width: 100%;
height: 500px;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.featured-card:hover .featured-image img {
transform: scale(1.05);
}
.featured-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--primary-dark);
margin-bottom: 1rem;
font-weight: 600;
}
.featured-subtitle {
font-size: 1.3rem;
color: var(--text-medium);
margin-bottom: 3rem;
}
/* Enhanced CTA Section with White Background */
.cta-section {
margin-top: 60px;
background: white;
margin-bottom: 60px;
}
.cta-card {
background: linear-gradient(135deg, var(--bg-light) 0%, white 100%);
border-radius: var(--border-radius-xl);
padding: 4rem 3rem;
box-shadow: var(--shadow-lg);
border: 2px solid var(--primary-light);
transition: all var(--transition-smooth);
}
.cta-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.cta-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.cta-content .section-title {
margin-bottom: 1.5rem;
}
.cta-buttons {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 3rem;
}
/* ===============================================
FOOTER STYLES - NEW LAYOUT
=============================================== */
.footer {
background: #1a1a1a;
color: white;
padding: 4rem 0 2rem;
border-top: 3px solid var(--primary-light);
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 1.5fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-section h3 {
color: white;
margin-bottom: 1.5rem;
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Company Logo & Certifications Section */
/* Footer Links */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color var(--transition-smooth);
font-size: 0.95rem;
}
.footer-links a:hover {
color: var(--primary-light);
}
/* Address Section */
.footer-address h3 {
color: white;
font-size: 1rem;
margin-bottom: 1.5rem;
}
.address-info {
margin-bottom: 1.5rem;
}
.company-name {
font-weight: 600;
color: white;
margin-bottom: 0.5rem;
}
.address-line {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
line-height: 1.4;
}
.contact-info {
margin-bottom: 1.5rem;
}
.contact-item {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
/* Social Media */
.social-media {
display: flex;
gap: 1rem;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all var(--transition-smooth);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.social-link:hover {
background: var(--primary-light);
transform: translateY(-2px);
color: var(--primary-dark);
}
.social-link i {
font-size: 1rem;
}
/* Newsletter Section */
.footer-newsletter h3 {
color: white;
font-size: 1rem;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.newsletter-input {
padding: 0.75rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 0.9rem;
transition: all var(--transition-smooth);
}
.newsletter-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.newsletter-input:focus {
outline: none;
border-color: var(--primary-light);
background: rgba(255, 255, 255, 0.15);
}
.newsletter-btn {
padding: 0.75rem 1.5rem;
background: #8B4513;
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all var(--transition-smooth);
}
.newsletter-btn:hover {
background: #A0522D;
transform: translateY(-1px);
}
/* Footer Bottom */
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
/* Enhanced Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.scroll-animate {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-animate.animate {
opacity: 1;
transform: translateY(0);
}
/* Responsive Design */
@media (max-width: 1024px) {
.container {
padding: 0 1.5rem;
}
.about-content {
gap: 0;
}
.products-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.carousel-slide {
flex: 0 0 calc(50% - 1rem);
}
}
@media (max-width: 768px) {
.about-content {
grid-template-columns: 1fr;
}
.about-text {
padding: 2rem;
text-align: center;
}
.about-image {
height: 300px;
}
.manufacturing-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.products-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.btn {
width: 100%;
max-width: 300px;
}
.carousel-slide {
flex: 0 0 100%;
}
.footer {
padding: 3rem 0 1.5rem;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.footer-certifications .certifications-grid {
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.cert-badge {
padding: 0.75rem;
}
.cert-badge img {
width: 40px;
height: 40px;
}
.social-media {
justify-content: center;
}
.newsletter-form {
max-width: 300px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.hero-content {
padding: 0 1rem;
}
.section-title {
font-size: 2rem;
}
.btn {
padding: 0.875rem 2rem;
font-size: 1rem;
}
.carousel-slide img {
height: 300px;
}
.featured-image img {
height: 300px;
}
.about-text {
padding: 1.5rem;
}
.cta-card {
padding: 2rem 1.5rem;
}
/* Footer Mobile Styles */
.footer {
padding: 2.5rem 0 1.5rem;
}
.footer-content {
gap: 1.5rem;
}
.footer-certifications .certifications-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.cert-badge {
padding: 0.5rem;
flex-direction: row;
text-align: left;
gap: 0.75rem;
}
.cert-badge img {
width: 35px;
height: 35px;
margin-bottom: 0;
}
.cert-badge span {
font-size: 0.65rem;
text-align: left;
}
.footer-section h3 {
font-size: 1rem;
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-links a {
font-size: 0.9rem;
}
.newsletter-form {
max-width: 100%;
}
.newsletter-input {
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
}
.newsletter-btn {
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
}
}
.manufacturing-item img {
filter: grayscale(1) sepia(1) hue-rotate(150deg) saturate(700%) brightness(0.2);
}
.manufacturing-item:hover img{
filter: grayscale(1) sepia(1) hue-rotate(150deg) saturate(700%) brightness(0.5);
}
section#products-latest
{
background:url('/wp-content/uploads/2025/09/quartz-slabs-2.jpg');
background-size:cover;
background-repeat:no-repeat;
padding-bottom: 80px;
}
section#products-prefab {
padding-bottom: 60px;
}
section#manufacturing {
background: linear-gradient(
rgba(8, 84, 87, 0.8), /* top overlay color */
rgba(8, 84, 87, 0.8) /* bottom overlay color */
),
url("/wp-content/uploads/2025/08/design-for-2.jpg") center/cover no-repeat;
background-attachment: fixed !important;
padding-bottom: 80px !important;
}
section#manufacturing {
h2{
color: #Fff !important;
}
p{
color: #fff !important;
}
}
section#manufacturing .manufacturing-item p{
color: var(--text-medium) !important;
}
section.featured-product a{
margin-bottom:40px !important;
}
/* Additional CSS for Why Choose Quartz Page - Add to existing CSS */
/* ===============================================
COMPANY PROFILE PAGE STYLES
=============================================== */
/* Company Profile Hero Section */
.company-profile-hero {
/* padding: 120px 0 0px; */
background: linear-gradient(135deg, var(--bg-light) 0%, white 100%);
position: relative;
overflow: hidden;
}
.company-profile-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.company-profile-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: center;
min-height: 500px;
}
.company-profile-text {
padding-right: 2rem;
}
.company-profile-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 4vw, 3.5rem);
font-weight: 700;
color: var(--primary-dark);
line-height: 1.2;
margin-bottom: 1.5rem;
position: relative;
}
.company-profile-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--gradient-accent);
margin: 1.5rem 0;
border-radius: 2px;
}
.company-profile-description {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-medium);
margin-bottom: 2rem;
}
.company-profile-description p {
margin-bottom: 1.5rem;
}
.company-profile-description p:last-child {
margin-bottom: 0;
}
.company-profile-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--bg-light);
color: var(--text-dark);
border: 2px solid #e2e8f0;
border-radius: var(--border-radius-xl);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all var(--transition-smooth);
box-shadow: var(--shadow-sm);
}
.company-profile-button:hover {
background: var(--primary-light);
color: white;
border-color: var(--primary-light);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.company-profile-image {
position: relative;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
height: 400px;
}
.company-profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.company-profile-image:hover img {
transform: scale(1.05);
}
/* Company Profile Slider Section */
.company-profile-slider-intro {
text-align: center;
margin-bottom: 4rem;
}
.company-profile-slider-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1rem;
line-height: 1.2;
}
.company-profile-slider-subtitle {
font-size: 1.1rem;
color: var(--text-medium);
line-height: 1.7;
max-width: 800px;
margin: 0 auto 2rem;
}
.company-profile-slider-subtitle p {
margin-bottom: 1.5rem;
}
.company-profile-slider-subtitle p:last-child {
margin-bottom: 0;
}
/* Image Slider Container */
.profile-slider-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
}
.profile-slider {
display: flex;
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
height: 500px;
}
.profile-slide {
flex: 0 0 100%;
position: relative;
overflow: hidden;
}
.profile-slide img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.profile-slide:hover img {
transform: scale(1.02);
}
/* Slider Navigation */
.profile-slider-nav {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.profile-slider-btn {
background: white;
border: 2px solid var(--primary-light);
color: var(--primary-dark);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-smooth);
box-shadow: var(--shadow-md);
font-size: 1.1rem;
}
.profile-slider-btn:hover {
background: var(--primary-light);
color: white;
transform: scale(1.1);
}
.profile-slider-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* Slider Dots */
.profile-slider-dots {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
}
.profile-slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(8, 84, 87, 0.3);
cursor: pointer;
transition: all var(--transition-smooth);
position: relative;
}
.profile-slider-dot.active,
.profile-slider-dot:hover {
background: var(--primary-dark);
transform: scale(1.2);
}
.profile-slider-dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: white;
opacity: 0;
transition: all var(--transition-smooth);
}
.profile-slider-dot.active::before {
opacity: 1;
}
/* Factory Link Button */
.factory-link-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1.2rem 2.5rem;
background: var(--gradient-primary);
color: white;
border: none;
border-radius: var(--border-radius-xl);
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all var(--transition-smooth);
box-shadow: var(--shadow-md);
margin-top: 2rem;
}
.factory-link-button:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
filter: brightness(1.1);
}
.factory-link-button i {
transition: transform var(--transition-smooth);
}
.factory-link-button:hover i {
transform: translateX(5px);
}
/* Responsive Design for Company Profile */
@media (max-width: 1024px) {
.company-profile-content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.company-profile-text {
padding-right: 0;
}
.company-profile-image {
height: 350px;
}
.profile-slider {
height: 400px;
}
}
@media (max-width: 768px) {
.company-profile-hero {
padding: 100px 0 60px;
}
.company-profile-content {
gap: 2rem;
}
.company-profile-title {
font-size: 2.5rem;
}
.company-profile-description {
font-size: 1rem;
}
.company-profile-image {
height: 300px;
}
.company-profile-slider {
padding: 60px 0;
}
.company-profile-slider-title {
font-size: 2.2rem;
}
.profile-slider {
height: 300px;
}
.profile-slider-btn {
width: 45px;
height: 45px;
}
.factory-link-button {
padding: 1rem 2rem;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.company-profile-hero {
padding: 80px 0 40px;
}
.company-profile-title {
font-size: 2rem;
}
.company-profile-description {
font-size: 0.95rem;
}
.company-profile-button {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
.company-profile-slider {
padding: 40px 0;
}
.profile-slider {
height: 250px;
}
.factory-link-button {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
}
/* ===============================================
ABOUT US PAGE COMPLETE DESIGN
=============================================== */
/* About Us Hero Section with Featured Image */
.about-hero {
position: relative;
height: 80vh;
min-height: 600px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.about-hero-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.about-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(8, 84, 87, 0.8) 0%,
rgba(10, 107, 111, 0.7) 50%,
rgba(8, 84, 87, 0.8) 100%);
z-index: 2;
}
.about-hero-content {
position: relative;
z-index: 3;
text-align: center;
color: white;
max-width: 800px;
padding: 0 2rem;
}
.about-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 8vw, 5rem);
font-weight: 700;
margin-bottom: 2rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* Page Title */
.page-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 3rem;
text-align: left;
}
/* Sustainability Section */
.sustainability-section {
padding: 80px 0;
background: #f8f9fa;
}
.sustainability-intro {
text-align: center;
margin-bottom: 4rem;
}
.sustainability-intro p {
font-size: 1.2rem;
color: var(--text-medium);
line-height: 1.8;
max-width: 900px;
margin: 0 auto;
}
.sustainability-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.sustainability-item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
background: white;
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
}
.sustainability-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.sustainability-item:nth-child(even) {
direction: rtl;
}
.sustainability-item:nth-child(even) > * {
direction: ltr;
}
.sustainability-image {
position: relative;
overflow: hidden;
border-radius: var(--border-radius-md);
height: 250px;
}
.sustainability-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.sustainability-item:hover .sustainability-image img {
transform: scale(1.05);
}
.sustainability-text {
padding: 1rem;
}
.sustainability-text p {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-medium);
}
/* Why Choose Section */
.why-choose-section {
padding: 80px 0;
background: white;
}
.why-choose-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
margin-top: 3rem;
}
.why-choose-image {
position: relative;
border-radius: var(--border-radius-lg);
overflow: hidden;
height: 500px;
box-shadow: var(--shadow-lg);
}
.why-choose-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.why-choose-image:hover img {
transform: scale(1.05);
}
.why-choose-content {
background: #f8f9fa;
padding: 3rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
}
.why-choose-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
}
.why-choose-list {
list-style: none;
padding: 0;
}
.why-choose-list li {
/* display: flex;
align-items: flex-start;
gap: 1rem; */
margin-bottom: 1.5rem;
font-size: 1.1rem;
line-height: 1.6;
color: var(--text-medium);
}
.why-choose-list li::before {
content: '✓';
color: var(--primary-light);
font-weight: bold;
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
/* Mission and Vision Section */
.mission-vision-section {
padding: 80px 0;
background: #f8f9fa;
}
.mission-vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 3rem;
}
.mission-card, .vision-card {
background: white;
padding: 3rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: all var(--transition-smooth);
border-top: 4px solid var(--primary-light);
}
.mission-card:hover, .vision-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.mission-card h3, .vision-card h3 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 4vw, 2.2rem);
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 2rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.mission-card p, .vision-card p {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-medium);
}
/* Values Section */
.values-section {
padding: 80px 0;
background: white;
}
.values-intro {
text-align: center;
margin-bottom: 4rem;
}
.values-intro p {
font-size: 1.2rem;
color: var(--text-medium);
line-height: 1.8;
max-width: 800px;
margin: 0 auto;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.value-card {
background: white;
padding: 2.5rem 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: all var(--transition-smooth);
border-left: 4px solid var(--primary-light);
}
.value-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-left-color: var(--accent);
}
.value-card h4 {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.value-card p {
font-size: 1rem;
line-height: 1.7;
color: var(--text-medium);
}
.values-cta {
text-align: center;
margin-top: 3rem;
}
.values-cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--bg-light);
color: var(--text-dark);
border: 2px solid #e2e8f0;
border-radius: var(--border-radius-xl);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-smooth);
box-shadow: var(--shadow-sm);
}
.values-cta-button:hover {
background: var(--primary-light);
color: white;
border-color: var(--primary-light);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Certifications Section */
.certifications-section {
padding: 80px 0;
background: #f8f9fa;
}
.certifications-intro {
text-align: center;
margin-bottom: 4rem;
}
.certifications-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
}
.certifications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.certification-badge {
background: white;
border-radius: 50%;
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
transition: all var(--transition-smooth);
margin: 0 auto;
position: relative;
overflow: hidden;
}
.certification-badge:hover {
transform: scale(1.1);
box-shadow: var(--shadow-xl);
}
.certification-badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-primary);
opacity: 0;
transition: all var(--transition-smooth);
}
.certification-badge:hover::before {
opacity: 0.1;
}
.certification-content {
position: relative;
z-index: 2;
text-align: center;
color: white;
padding: 1rem;
}
.certification-content h4 {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.certification-content p {
font-size: 0.9rem;
line-height: 1.3;
opacity: 0.9;
}
/* Luxury Meets Responsibility Section */
.luxury-responsibility-section {
padding: 80px 0;
background: white;
}
.luxury-responsibility-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.luxury-responsibility-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
}
.luxury-responsibility-text {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-medium);
margin-bottom: 2rem;
}
/* Responsive Design for About Us Page */
@media (max-width: 1024px) {
.about-hero {
height: 60vh;
min-height: 500px;
}
.sustainability-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.sustainability-item {
grid-template-columns: 1fr;
text-align: center;
}
.sustainability-item:nth-child(even) {
direction: ltr;
}
.why-choose-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.mission-vision-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.values-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.certifications-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.certification-badge {
width: 180px;
height: 180px;
}
}
@media (max-width: 768px) {
.about-hero {
height: 50vh;
min-height: 400px;
}
.about-hero-title {
font-size: 2.5rem;
}
.page-title {
font-size: 2.5rem;
}
.sustainability-section,
.why-choose-section,
.mission-vision-section,
.values-section,
.certifications-section,
.luxury-responsibility-section {
padding: 60px 0;
}
.sustainability-item {
padding: 1.5rem;
}
.why-choose-content {
padding: 2rem;
}
.mission-card, .vision-card {
padding: 2rem;
}
.value-card {
padding: 2rem 1.5rem;
}
.values-grid {
grid-template-columns: 1fr;
}
.certifications-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.certification-badge {
width: 150px;
height: 150px;
}
.certification-content h4 {
font-size: 1rem;
}
.certification-content p {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.about-hero {
height: 40vh;
min-height: 300px;
}
.about-hero-title {
font-size: 2rem;
}
.page-title {
font-size: 2rem;
}
.sustainability-section,
.why-choose-section,
.mission-vision-section,
.values-section,
.certifications-section,
.luxury-responsibility-section {
padding: 40px 0;
}
.sustainability-item {
padding: 1rem;
}
.why-choose-content {
padding: 1.5rem;
}
.mission-card, .vision-card {
padding: 1.5rem;
}
.value-card {
padding: 1.5rem 1rem;
}
.certifications-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.certification-badge {
width: 120px;
height: 120px;
}
.certification-content h4 {
font-size: 0.9rem;
}
.certification-content p {
font-size: 0.7rem;
}
}
/* Why Choose Section */
.why-choose-section {
padding: 80px 0;
background: white;
}
.why-choose-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: center;
background: #f0f4f8;
border-radius: var(--border-radius-lg);
overflow: hidden;
}
.why-choose-image {
position: relative;
height: 100%;
min-height: 500px;
}
.why-choose-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.why-choose-image:hover img {
transform: scale(1.05);
}
.why-choose-content {
padding: 4rem 3rem;
}
.why-choose-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
}
.why-choose-list {
list-style: none;
padding: 0;
}
.why-choose-list li::before {
content: '•';
color: var(--text-dark);
font-weight: bold;
font-size: 1.2rem;
flex-shrink: 0;
margin-top: -0.1rem;
margin-right:10px;
}
/* Luxury Responsibility Section */
.luxury-responsibility-section {
padding: 80px 0;
background: #faf9f7;
}
.luxury-responsibility-intro {
text-align: center;
margin-bottom: 4rem;
}
.luxury-responsibility-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1.5rem;
}
.luxury-responsibility-subtitle {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-medium);
max-width: 800px;
margin: 0 auto;
}
.luxury-content-rows {
display: flex;
flex-direction: column;
gap: 4rem;
}
.luxury-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
padding: 0;
background: transparent;
}
.luxury-row.reverse {
grid-template-columns: 1fr 1fr;
}
.luxury-row.reverse .luxury-row-text {
order: 1;
}
.luxury-row.reverse .luxury-row-image {
order: 2;
}
.luxury-row-image {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
height: 250px;
}
.luxury-row-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.luxury-row:hover .luxury-row-image img {
transform: scale(1.02);
}
.luxury-row-text {
padding: 1rem 0;
display: flex;
align-items: center;
}
.luxury-row-text p {
font-size: 1rem;
line-height: 1.7;
color: var(--text-dark);
margin: 0;
font-weight: 400;
}
/* Advanced Manufacturing Section */
.advanced-manufacturing-section {
padding: 80px 0;
background: white;
}
.manufacturing-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: center;
background: #f0f4f8;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.manufacturing-image {
position: relative;
height: 100%;
min-height: 500px;
}
.manufacturing-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.manufacturing-image:hover img {
transform: scale(1.02);
}
.manufacturing-content {
padding: 4rem 3rem;
background: white;
}
.manufacturing-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
line-height: 1.2;
}
.manufacturing-description {
font-size: 1rem;
line-height: 1.7;
color: var(--text-dark);
margin-bottom: 2rem;
}
.manufacturing-description p {
margin-bottom: 1.5rem;
}
.manufacturing-description p:last-child {
margin-bottom: 0;
}
.factory-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--primary-dark);
color: white;
border: none;
border-radius: var(--border-radius-md);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-smooth);
box-shadow: var(--shadow-md);
margin-top: 1rem;
}
.factory-button:hover {
background: var(--secondary);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.factory-button i {
transition: transform var(--transition-smooth);
}
.factory-button:hover i {
transform: translateX(3px);
}
/* Mission Vision Section */
.mission-vision-section {
padding: 80px 0;
background: white;
}
.mission-vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 3rem;
}
.mission-card, .vision-card {
background: white;
padding: 3rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: all var(--transition-smooth);
border-top: 4px solid var(--primary-light);
}
.mission-card:hover, .vision-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.mission-card h3, .vision-card h3 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 4vw, 2.2rem);
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 2rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.mission-card p, .vision-card p {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-medium);
}
/* Values Section */
.values-section {
padding: 80px 0;
background: #f8f9fa;
}
.values-intro {
text-align: center;
margin-bottom: 4rem;
}
.values-intro p {
font-size: 1.2rem;
color: var(--text-medium);
line-height: 1.8;
max-width: 800px;
margin: 0 auto;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.value-card {
background: white;
padding: 2.5rem 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: all var(--transition-smooth);
border-left: 4px solid var(--primary-light);
}
.value-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-left-color: var(--accent);
}
.value-card h4 {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.value-card p {
font-size: 1rem;
line-height: 1.7;
color: var(--text-medium);
}
/* Responsive Design */
@media (max-width: 1024px) {
.why-choose-grid,
.mission-vision-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.why-choose-grid {
gap: 0;
}
.luxury-content-rows {
gap: 3rem;
}
.luxury-row {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.luxury-row.reverse {
grid-template-columns: 1fr;
}
.luxury-row.reverse .luxury-row-text {
order: 1;
}
.luxury-row.reverse .luxury-row-image {
order: 2;
}
.luxury-row-image {
height: 200px;
max-width: 400px;
margin: 0 auto;
}
.manufacturing-layout {
grid-template-columns: 1fr;
gap: 0;
}
.manufacturing-image {
min-height: 300px;
}
.manufacturing-content {
padding: 3rem 2rem;
}
.values-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
@media (max-width: 768px) {
.why-choose-section,
.luxury-responsibility-section,
.advanced-manufacturing-section,
.mission-vision-section,
.values-section {
padding: 60px 0;
}
.luxury-responsibility-intro {
margin-bottom: 3rem;
}
.luxury-responsibility-title {
font-size: 2.2rem;
}
.luxury-content-rows {
gap: 2.5rem;
}
.luxury-row {
gap: 1.5rem;
}
.luxury-row-image {
height: 180px;
}
.luxury-row-text p {
font-size: 0.95rem;
}
.manufacturing-content {
padding: 2rem 1.5rem;
}
.manufacturing-title {
font-size: 2rem;
}
.manufacturing-description {
font-size: 0.95rem;
}
.factory-button {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
.why-choose-content,
.mission-card,
.vision-card {
padding: 2rem;
}
.value-card {
padding: 2rem 1.5rem;
}
.values-grid {
grid-template-columns: 1fr;
}
.why-choose-image {
height: 350px;
}
}
@media (max-width: 480px) {
.why-choose-section,
.luxury-responsibility-section,
.advanced-manufacturing-section,
.mission-vision-section,
.values-section {
padding: 40px 0;
}
.luxury-responsibility-title {
font-size: 1.8rem;
}
.luxury-responsibility-subtitle {
font-size: 1rem;
}
.luxury-content-rows {
gap: 2rem;
}
.luxury-row {
gap: 1rem;
}
.luxury-row-image {
height: 160px;
}
.luxury-row-text p {
font-size: 0.9rem;
}
.manufacturing-content {
padding: 1.5rem 1rem;
}
.manufacturing-title {
font-size: 1.6rem;
}
.manufacturing-description {
font-size: 0.9rem;
}
.factory-button {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}
.why-choose-content,
.mission-card,
.vision-card {
padding: 1.5rem;
}
.value-card {
padding: 1.5rem 1rem;
}
.why-choose-image {
height: 300px;
}
}
/* ===============================================
PAGE FEATURED IMAGE STYLES
=============================================== */
.page-featured-image {
position: relative;
height: 60vh;
min-height: 400px;
overflow: hidden;
}
.featured-image-container {
position: relative;
width: 100%;
height: 100%;
}
.featured-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.featured-image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(8, 84, 87, 0.7) 0%,
rgba(10, 107, 111, 0.6) 50%,
rgba(8, 84, 87, 0.7) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.page-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 700;
color: white !important;
text-align: center;
margin: 0;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
line-height: 1.2;
}
.page-content {
padding: 60px 0;
background: white;
}
.page-content .container {
/* max-width: 1200px; */
margin: 0 auto;
padding: 0 2rem;
}
/* Responsive Design for Featured Image */
@media (max-width: 768px) {
.page-featured-image {
height: 50vh;
min-height: 300px;
}
.page-content {
padding: 40px 0;
}
.page-content .container {
padding: 0 1.5rem;
}
}
@media (max-width: 480px) {
.page-featured-image {
height: 40vh;
min-height: 250px;
}
.page-content {
padding: 30px 0;
}
.page-content .container {
padding: 0 1rem;
}
}
/* Our Factory Page Styles */
.our-factory-hero {
background: var(--primary-dark);
padding: 80px 0;
color: white;
}
.factory-hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.factory-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 2.7rem);
font-weight: 600;
line-height: 1.2;
margin: 0;
}
.factory-hero-description {
font-size: 1.1rem;
line-height: 1.7;
}
.factory-hero-description p {
margin-bottom: 1.5rem;
}
.factory-hero-description p:last-child {
margin-bottom: 0;
}
.our-factory-intro {
padding: 80px 0;
background: white;
text-align: center;
}
.factory-intro-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
}
.factory-intro-description {
font-size: 1.2rem;
line-height: 1.7;
color: var(--text-medium);
max-width: 900px;
margin: 0 auto 4rem;
}
.factory-main-photos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.factory-photo {
text-align: center;
}
.factory-photo img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
}
.photo-caption {
font-size: 1rem;
color: var(--text-dark);
font-weight: 500;
margin: 0;
}
.factory-process-section {
padding: 80px 0;
background: #f8f9fa;
}
.factory-process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.factory-process-item {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.factory-process-item:hover {
transform: translateY(-5px);
}
.process-image {
height: 200px;
overflow: hidden;
}
.process-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.factory-process-item:hover .process-image img {
transform: scale(1.05);
}
.process-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-dark);
padding: 1.5rem;
margin: 0;
text-align: center;
}
/* Responsive Design */
@media (max-width: 768px) {
.factory-hero-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.factory-main-photos {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.factory-process-grid {
grid-template-columns: 1fr;
}
.our-factory-hero,
.our-factory-intro,
.factory-process-section {
padding: 60px 0;
margin-top: 60px;
}
}
@media (max-width: 480px) {
.our-factory-hero,
.our-factory-intro,
.factory-process-section {
padding: 40px 0;
}
.factory-hero-title {
font-size: 1.8rem;
}
.factory-intro-title {
font-size: 2.2rem;
}
.factory-intro-description {
font-size: 1.1rem;
}
}
/* Inspiration Page Styles */
.inspiration-hero {
padding: 80px 0;
background: white;
text-align: center;
}
.inspiration-main-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
}
.inspiration-description {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-dark);
max-width: 900px;
margin: 0 auto;
}
.highlight-text {
color: #e74c3c;
text-decoration: underline;
text-decoration-style: wavy;
text-underline-offset: 3px;
}
.ignite-inspiration-section {
background: white;
}
.ignite-content {
text-align: center;
margin-bottom: 4rem;
}
.ignite-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
}
.ignite-description {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-dark);
max-width: 900px;
margin: 0 auto;
}
.inspiration-category {
margin-bottom: 4rem;
}
.category-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 2rem;
text-align: left;
}
.inspiration-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.inspiration-item {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
background: white;
}
.inspiration-item:hover {
transform: translateY(-5px);
}
.inspiration-image {
position: relative;
height: 300px;
overflow: hidden;
}
.inspiration-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.inspiration-item:hover .inspiration-image img {
transform: scale(1.05);
}
.watermark {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 16px;
border-radius: 4px;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 1px;
}
.inspiration-caption {
padding: 1.5rem;
text-align: center;
}
.inspiration-caption h4 {
font-size: 1rem;
font-weight: 600;
color: var(--primary-dark);
margin: 0 0 0.5rem 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.inspiration-caption p {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
margin: 0;
}
/* Responsive Design */
@media (max-width: 1024px) {
.inspiration-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.inspiration-hero,
.ignite-inspiration-section {
padding: 60px 0;
}
.inspiration-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.inspiration-image {
height: 250px;
}
.ignite-title {
font-size: 2.2rem;
}
.category-title {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.inspiration-hero,
.ignite-inspiration-section {
padding: 40px 0;
}
.inspiration-image {
height: 200px;
}
.ignite-title {
font-size: 1.8rem;
}
.category-title {
font-size: 1.3rem;
}
.watermark {
font-size: 0.8rem;
padding: 6px 12px;
}
}
.why-choose-quartz-page {
background: white;
}
.why-quartz-hero {
padding: 120px 0 80px;
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 100%);
color: white;
text-align: center;
}
.why-quartz-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.why-quartz-hero h2 {
font-size: clamp(1.2rem, 3vw, 1.6rem);
font-weight: 400;
opacity: 0.9;
line-height: 1.5;
max-width: 800px;
margin: 0 auto;
}
.why-quartz-content {
padding: 0;
}
.why-quartz-section {
padding: 80px 0;
}
.why-quartz-section-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.why-quartz-section h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
text-align: center;
}
.why-quartz-section p {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-medium);
text-align: center;
max-width: 900px;
margin: 0 auto 2rem;
}
/* Benefits Section */
.benefits-section {
background: #f8f9fa;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.benefit-item {
background: white;
padding: 2.5rem 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
border-left: 4px solid var(--primary-light);
}
.benefit-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-left-color: var(--accent);
}
.benefit-item h4 {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1rem;
}
.benefit-item p {
font-size: 1rem;
line-height: 1.6;
color: var(--text-medium);
text-align: left;
margin: 0;
}
.benefit-item-wide {
grid-column: 1 / -1;
text-align: center;
}
.benefit-item-wide p {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
/* Applications Section */
.applications-section {
background: white;
}
.applications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
.application-item {
background: var(--primary-dark);
color: white;
padding: 2rem;
border-radius: var(--border-radius-md);
text-align: center;
font-size: 1.1rem;
font-weight: 600;
transition: all var(--transition-smooth);
box-shadow: var(--shadow-md);
}
.application-item:hover {
background: var(--secondary);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
/* Collections Section */
.collections-section {
background: #f8f9fa;
}
/* Gallery Section */
.quartz-gallery {
padding: 80px 0;
background: white;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.gallery-item {
position: relative;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
height: 300px;
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.gallery-item:hover img {
transform: scale(1.05);
}
.gallery-cta {
text-align: center;
}
/* Responsive Design */
@media (max-width: 1024px) {
.benefits-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.applications-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.gallery-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
@media (max-width: 768px) {
.why-quartz-hero {
padding: 100px 0 60px;
}
.why-quartz-section {
padding: 60px 0;
}
.benefits-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.benefit-item {
padding: 2rem 1.5rem;
}
.applications-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.gallery-item {
height: 250px;
}
}
@media (max-width: 480px) {
.why-quartz-hero {
padding: 80px 0 40px;
}
.why-quartz-section {
padding: 40px 0;
}
.why-quartz-section-content {
padding: 0 1rem;
}
.benefit-item {
padding: 1.5rem 1rem;
}
.application-item {
padding: 1.5rem;
font-size: 1rem;
}
.gallery-grid {
grid-template-columns: 1fr;
}
.gallery-item {
height: 200px;
}
}
/* Manufacturing Process Page Styles */
.manufacturing-process-page {
background: white;
}
.process-hero {
padding: 80px 0;
text-align: center;
background: #f8f9fa;
}
.process-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
}
.process-hero p {
font-size: 1.2rem;
line-height: 1.7;
color: var(--text-medium);
max-width: 900px;
margin: 0 auto;
}
.process-steps {
padding: 80px 0;
}
.process-step {
display: grid;
grid-template-columns: 1fr 1fr;
/* gap: 4rem; */
align-items: center;
/* margin-bottom: 6rem; */
background: white;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: all var(--transition-smooth);
}
.process-step:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.process-step.reverse {
grid-template-columns: 1fr 1fr;
}
.process-step.reverse .step-content {
order: 1;
}
.process-step.reverse .step-image {
order: 2;
}
.step-image {
position: relative;
height: 400px;
overflow: hidden;
}
.step-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.process-step:hover .step-image img {
transform: scale(1.02);
}
.step-content {
padding: 3rem;
position: relative;
}
.step-content::before {
content: '';
position: absolute;
bottom: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
opacity: 0.3;
}
.step-content h3 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1.5rem;
}
.step-content p {
font-size: 1rem;
line-height: 1.7;
color: var(--text-medium);
margin: 0;
}
/* Responsive Design */
@media (max-width: 1024px) {
.process-step {
gap: 3rem;
margin-bottom: 4rem;
}
.step-content {
padding: 2.5rem;
}
}
@media (max-width: 768px) {
.process-hero {
padding: 60px 0;
}
.process-steps {
padding: 60px 0;
}
.process-step {
grid-template-columns: 1fr;
gap: 0;
margin-bottom: 3rem;
}
.process-step.reverse {
grid-template-columns: 1fr;
}
.process-step.reverse .step-content {
order: 1;
}
.process-step.reverse .step-image {
order: 2;
}
.step-content {
padding: 2rem;
}
.step-content h3 {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.process-hero {
padding: 40px 0;
}
.process-steps {
padding: 40px 0;
}
.process-step {
margin-bottom: 2rem;
}
.step-content {
padding: 1.5rem;
}
.step-content h3 {
font-size: 1.3rem;
}
.step-content p {
font-size: 0.95rem;
}
}
/* ===============================================
PREFAB QUARTZ PAGE STYLES
=============================================== */
.prefab-quartz-page {
background: white;
}
.prefab-hero {
padding: 80px 0;
background:#e6f2ff;
color: #000000;
text-align: center;
/*background: var(--primary-dark);
color: white;*/
text-align: center;
}
.prefab-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
margin-bottom: 2rem;
line-height: 1.2;
}
.prefab-hero-description {
font-size: 1.1rem;
line-height: 1.7;
max-width: 900px;
margin: 0 auto 1.5rem auto;
opacity: 1;
text-align: left;
/* updated
opacity: 0.9;*/
}
.prefab-hero-description:last-child {
margin-bottom: 0;
}
/* Product Categories Section */
.prefab-categories {
padding: 80px 0;
background: white;
}
.category-item {
display: grid;
grid-template-columns: 1fr 1fr;
/* gap: 4rem; */
align-items: center;
/* margin-bottom: 6rem; */
background: white;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: all var(--transition-smooth);
}
.category-item:last-child {
margin-bottom: 0;
}
.category-item:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.category-content {
padding: 3rem;
position: relative;
}
.category-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.category-description {
font-size: 1rem;
line-height: 1.7;
color: var(--text-medium);
margin: 0;
}
.category-image {
position: relative;
height: 400px;
overflow: hidden;
}
.category-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.category-item:hover .category-image img {
transform: scale(1.02);
}
/* Our Development Process Section */
.prefab-process {
padding: 80px 0;
background: #f8f9fa;
text-align: center;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 3rem;
text-align: center;
}
.process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.process-step-item {
background: white;
padding: 0;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
border-left: 4px solid var(--primary-light);
overflow: hidden;
}
.process-step-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-left-color: var(--accent);
}
.process-image {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.process-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-smooth);
}
.process-step-item:hover .process-image img {
transform: scale(1.05);
}
.step-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-dark);
margin: 0;
text-align: center;
padding: 1.5rem 1rem;
}
/* Why Techstone Quartz is the Preferred B2B Partner Section */
.b2b-partner {
padding: 80px 0;
background: white;
}
.b2b-list {
list-style: none;
padding: 0;
max-width: 900px;
margin: 0 auto;
}
.b2b-list li {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-medium);
margin-bottom: 1.5rem;
position: relative;
padding-left: 30px;
}
.b2b-list li::before {
content: '✓';
color: var(--primary-light);
font-weight: bold;
position: absolute;
left: 0;
top: 0;
font-size: 1.2rem;
}
.b2b-list li strong {
color: var(--primary-dark);
}
/* FAQs Section */
.faq-accordion {
max-width: 1000px;
margin: 0 auto;
}
.faq-accordion-item {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 1rem;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-accordion-item:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.faq-accordion-item.active {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.faq-accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
cursor: pointer;
transition: all 0.3s ease;
background: white;
border: none;
width: 100%;
text-align: left;
}
.faq-accordion-header:hover {
background: #f8f9fa;
}
.faq-accordion-item.active .faq-accordion-header {
background: var(--primary-light);
border-bottom: 1px solid #e9ecef;
}
.faq-accordion-question {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-dark);
margin: 0;
flex: 1;
padding-right: 1rem;
line-height: 1.4;
}
.faq-accordion-icon {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--primary-dark);
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
}
.faq-accordion-item.active .faq-accordion-icon {
background: var(--accent);
transform: rotate(180deg);
}
.faq-accordion-icon i {
font-size: 0.9rem;
transition: transform 0.3s ease;
}
.faq-accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
background: white;
}
.faq-accordion-item.active .faq-accordion-content {
max-height: 500px;
padding: 0 2rem 1.5rem 2rem;
}
.faq-accordion-content p {
font-size: 1rem;
line-height: 1.7;
color: var(--text-medium);
margin: 0;
padding-top: 1rem;
}
.faq-accordion-content ul {
margin: 1rem 0 0 0;
padding-left: 20px;
}
.faq-accordion-content li {
margin-bottom: 0.5rem;
color: var(--text-medium);
line-height: 1.6;
}
.faq-accordion-content strong {
color: var(--primary-dark);
font-weight: 600;
}
/* Responsive FAQ Styles */
@media (max-width: 768px) {
.faq-accordion-header {
padding: 1.25rem 1.5rem;
}
.faq-accordion-question {
font-size: 1.1rem;
padding-right: 0.75rem;
}
.faq-accordion-icon {
width: 28px;
height: 28px;
}
.faq-accordion-item.active .faq-accordion-content {
padding: 0 1.5rem 1.25rem 1.5rem;
}
.faq-accordion-content p {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.faq-accordion-header {
padding: 1rem 1.25rem;
}
.faq-accordion-question {
font-size: 1rem;
padding-right: 0.5rem;
}
.faq-accordion-icon {
width: 26px;
height: 26px;
}
.faq-accordion-item.active .faq-accordion-content {
padding: 0 1.25rem 1rem 1.25rem;
}
.faq-accordion-content p {
font-size: 0.9rem;
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.category-item {
gap: 3rem;
margin-bottom: 4rem;
}
.category-content {
padding: 2.5rem;
}
.category-image {
height: 350px;
}
.process-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.process-step-item {
padding: 2rem 1.5rem;
}
}
@media (max-width: 768px) {
.prefab-hero {
padding: 60px 0;
}
.prefab-categories,
.prefab-process,
.b2b-partner{
padding: 60px 0;
}
.category-item {
grid-template-columns: 1fr;
gap: 0;
margin-bottom: 3rem;
}
.category-content {
padding: 2rem;
}
.category-image {
height: 300px;
}
.process-grid {
grid-template-columns: 1fr;
max-width: 500px;
}
.process-step-item {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.prefab-hero {
padding: 40px 0;
}
.prefab-categories,
.prefab-process,
.b2b-partner
{
padding: 40px 0;
}
.category-item {
margin-bottom: 2rem;
}
.category-content {
padding: 1.5rem;
}
.category-title {
font-size: 1.5rem;
}
.category-description {
font-size: 0.95rem;
}
.category-image {
height: 250px;
}
.process-step-item {
padding: 1.2rem;
}
.step-title {
font-size: 1.1rem;
}
.b2b-list li {
font-size: 1rem;
padding-left: 25px;
}
}
.category-button {
display: inline-block;
background: var(--primary-dark);
color: white;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
margin-top: 30px;
font-weight: 600;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all var(--transition-smooth);
border: 2px solid var(--primary-dark);
}
.category-button:hover {
background: transparent;
color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Contact Page Styles */
.contact-page {
padding: 80px 0;
}
.contact-header {
text-align: center;
margin-bottom: 4rem;
}
.contact-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 4vw, 4rem);
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 1rem;
}
.contact-main-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 4rem;
}
/* Contact Form Section */
.contact-form-section {
background: white;
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
text-align: center;
}
.submit-btn:hover {
background: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.submit-btn i {
font-size: 1rem;
}
/* Location Section */
.location-section {
background: white;
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.company-info {
margin-top: 1rem;
}
.company-details {
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 2rem;
font-size: 1rem;
line-height: 1.6;
color: var(--primary-dark);
}
.company-details strong {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-dark);
display: block;
margin-bottom: 0.5rem;
}
.map-container {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.map-container iframe {
width: 100%;
height: 300px;
border: none;
}
/* Contact Information Cards */
.contact-info-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.info-card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
transition: transform 0.3s ease;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.card-icon {
width: 60px;
height: 60px;
background: var(--primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem auto;
color: var(--primary-dark);
font-size: 1.5rem;
}
.card-content h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1rem;
}
.card-content p {
color: var(--text-medium);
line-height: 1.6;
margin: 0;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive Design */
@media (max-width: 1024px) {
.contact-main-section {
grid-template-columns: 1fr;
gap: 3rem;
}
.contact-form-section,
.location-section {
padding: 2rem;
}
}
@media (max-width: 768px) {
.contact-page {
padding: 60px 0;
}
.contact-title {
font-size: 2.5rem;
}
.contact-form-section,
.location-section {
padding: 1.5rem;
}
.contact-info-cards {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.info-card {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.contact-page {
padding: 40px 0;
}
.contact-title {
font-size: 2rem;
}
.contact-form-section,
.location-section {
padding: 1rem;
}
.submit-btn {
padding: 12px 24px;
font-size: 1rem;
}
.company-details {
padding: 1rem;
font-size: 0.95rem;
}
.map-container iframe {
height: 250px;
}
}
/* Animation Classes */
.fade-in-up {
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-in-left {
animation: slideInLeft 0.6s ease-out;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.slide-in-right {
animation: slideInRight 0.6s ease-out;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.wpcf7-form input,
.wpcf7-form textarea {
width: 100%;
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 1rem;
font-family: inherit;
transition: all 0.3s ease;
background: #f8f9fa;
margin-bottom: 20px;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
outline: none;
border-color: var(--primary-dark);
background: white;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
color: #6c757d;
font-weight: 400;
}
.wpcf7-form textarea {
resize: vertical;
min-height: 120px;
}
.wpcf7-submit{
background: var(--primary-dark) !important;
color: white !important;
padding: 15px 30px !important;
border: none !important;
border-radius: 8px !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
width: 100%;
}
.wpcf7-submit:hover {
background: var(--accent) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
/* ===============================================
CERTIFICATION PAGE STYLES
=============================================== */
/* Certification Page Container */
.certification-page {
background: white;
padding: 0;
}
/* Certification Hero Section */
.certification-hero {
padding: 120px 0 80px;
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary) 100%);
color: white;
text-align: center;
}
.certification-hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* Certification Content Section */
.certification-content {
padding: 80px 0;
background: white;
}
.certification-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Certification Items */
.certification-item {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 3rem;
padding: 2rem;
background: #f8f9fa;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
transition: all var(--transition-smooth);
border-left: 4px solid var(--primary-light);
}
.certification-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-left-color: var(--accent);
}
.certification-item:last-child {
margin-bottom: 0;
}
.certification-image {
flex-shrink: 0;
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all var(--transition-smooth);
}
.certification-item:hover .certification-image {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.certification-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: all var(--transition-smooth);
}
.certification-item:hover .certification-image img {
transform: scale(1.1);
}
.certification-text {
flex: 1;
padding-left: 1rem;
}
.certification-text p {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-dark);
margin: 0;
font-weight: 400;
}
/* Environment Section */
.environment-section {
padding: 80px 0;
background: #f8f9fa;
margin-top: 60px;
}
.environment-header {
text-align: center;
margin-bottom: 4rem;
}
.environment-header h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.environment-header h4 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-weight: 500;
color: var(--text-medium);
line-height: 1.6;
font-style: italic;
max-width: 900px;
margin: 0 auto 2rem;
}
.environment-intro {
text-align: center;
margin-bottom: 3rem;
}
.environment-intro p {
font-size: 1.2rem;
color: var(--text-medium);
line-height: 1.7;
max-width: 800px;
margin: 0 auto;
}
/* Environment Activities List */
.environment-activities {
background: white;
border-radius: var(--border-radius-lg);
padding: 3rem;
box-shadow: var(--shadow-md);
max-width: 1000px;
margin: 0 auto;
}
.environment-activities ul {
list-style: none;
padding: 0;
margin: 0;
}
.environment-activities li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: var(--border-radius-md);
transition: all var(--transition-smooth);
border-left: 3px solid var(--primary-light);
}
.environment-activities li:last-child {
margin-bottom: 0;
}
.environment-activities li:hover {
background: white;
transform: translateX(5px);
box-shadow: var(--shadow-sm);
border-left-color: var(--accent);
}
.environment-activities li::before {
content: '🌱';
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 0.2rem;
filter: hue-rotate(120deg);
}
.environment-activities li {
font-size: 1rem;
line-height: 1.7;
color: var(--text-dark);
margin: 0;
}
/* Animation Classes for Certification Page */
.certification-animate {
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.certification-animate.animate {
opacity: 1;
transform: translateY(0);
}
/* Responsive Design for Certification Page */
@media (max-width: 1024px) {
.certification-container {
padding: 0 1.5rem;
}
.certification-item {
gap: 1.5rem;
padding: 1.5rem;
}
.certification-image {
width: 120px;
height: 120px;
}
.environment-activities {
padding: 2.5rem;
}
}
@media (max-width: 768px) {
.certification-hero {
padding: 100px 0 60px;
}
.certification-content,
.environment-section {
padding: 60px 0;
}
.certification-item {
flex-direction: column;
text-align: center;
gap: 1.5rem;
padding: 1.5rem;
}
.certification-image {
width: 100px;
height: 100px;
margin: 0 auto;
}
.certification-text {
padding-left: 0;
}
.certification-text p {
font-size: 1rem;
}
.environment-header h2 {
font-size: 2.2rem;
}
.environment-header h4 {
font-size: 1.3rem;
}
.environment-intro p {
font-size: 1.1rem;
}
.environment-activities {
padding: 2rem;
}
.environment-activities li {
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.environment-activities li::before {
font-size: 1.3rem;
}
}
@media (max-width: 480px) {
.certification-hero {
padding: 80px 0 40px;
}
.certification-content,
.environment-section {
padding: 40px 0;
}
.certification-container {
padding: 0 1rem;
}
.certification-item {
padding: 1rem;
margin-bottom: 2rem;
}
.certification-image {
width: 80px;
height: 80px;
}
.certification-text p {
font-size: 0.95rem;
}
.environment-header h2 {
font-size: 1.8rem;
}
.environment-header h4 {
font-size: 1.1rem;
}
.environment-intro p {
font-size: 1rem;
}
.environment-activities {
padding: 1.5rem;
}
.environment-activities li {
padding: 1rem;
margin-bottom: 1.25rem;
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.environment-activities li::before {
font-size: 1.2rem;
margin-top: 0;
}
}
/* ===============================================
PRODUCT MAINTENANCE PAGE STYLES
=============================================== */
/* Maintenance Page Container */
.maintenance-page {
background: white;
padding: 0;
}
/* Maintenance Hero Section */
/* Maintenance Content Section */
.maintenance-content {
padding: 80px 0;
background: white;
}
.maintenance-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Maintenance Introduction */
.maintenance-intro {
text-align: center;
margin-bottom: 4rem;
padding: 3rem;
background: #f8f9fa;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
}
.maintenance-intro p {
font-size: 1.2rem;
line-height: 1.8;
color: var(--text-dark);
margin: 0;
font-weight: 500;
}
/* Maintenance Sections Grid */
.maintenance-sections {
display: grid;
gap: 3rem;
}
/* Individual Maintenance Section */
.maintenance-section {
background: white;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: all var(--transition-smooth);
border-top: 4px solid var(--primary-light);
}
.maintenance-section:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-top-color: var(--accent);
}
.maintenance-section-header {
background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent) 100%);
padding: 2rem;
color: var(--primary-dark);
text-align: center;
}
.maintenance-section-header h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.5rem, 3vw, 2.2rem);
font-weight: 600;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.maintenance-section-header h2::before {
font-size: 2rem;
filter: hue-rotate(180deg);
}
.maintenance-section-header p {
font-size: 1rem;
margin: 0;
opacity: 0.9;
font-weight: 500;
}
/* Section Icons */
.cleaning-icon::before { content: '🧽'; }
.resistance-icon::before { content: '💎'; }
.heat-icon::before { content: '🔥'; }
.chemicals-icon::before { content: '⚠️'; }
.maintenance-section-content {
padding: 2.5rem;
}
/* Maintenance Lists */
.maintenance-list {
list-style: none;
padding: 0;
margin: 0;
}
.maintenance-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
background: #f8f9fa;
border-radius: var(--border-radius-md);
transition: all var(--transition-smooth);
border-left: 3px solid var(--primary-light);
position: relative;
}
.maintenance-list li:last-child {
margin-bottom: 0;
}
.maintenance-list li:hover {
background: white;
transform: translateX(5px);
box-shadow: var(--shadow-sm);
border-left-color: var(--accent);
}
.maintenance-list li::before {
content: '✓';
color: var(--primary-light);
font-weight: bold;
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 0.1rem;
background: var(--primary-dark);
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
}
.maintenance-list li {
font-size: 1rem;
line-height: 1.7;
color: var(--text-dark);
margin: 0;
}
/* Warning Lists (for chemicals section) */
.warning-list {
list-style: none;
padding: 0;
margin: 0;
}
.warning-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
background: #fff5f5;
border-radius: var(--border-radius-md);
transition: all var(--transition-smooth);
border-left: 3px solid #e53e3e;
}
.warning-list li:last-child {
margin-bottom: 0;
}
.warning-list li:hover {
background: white;
transform: translateX(5px);
box-shadow: var(--shadow-sm);
border-left-color: #c53030;
}
.warning-list li::before {
content: '⚠️';
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 0.1rem;
}
.warning-list li {
font-size: 1rem;
line-height: 1.7;
color: var(--text-dark);
margin: 0;
}
/* Maintenance Paragraphs */
.maintenance-paragraph {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-dark);
margin-bottom: 2rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: var(--border-radius-md);
border-left: 4px solid var(--primary-light);
}
.maintenance-paragraph:last-child {
margin-bottom: 0;
}
.maintenance-paragraph strong {
color: var(--primary-dark);
font-weight: 600;
}
/* Special Highlight Box */
.maintenance-highlight {
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 2px solid var(--primary-light);
border-radius: var(--border-radius-lg);
padding: 2rem;
margin: 2rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
.maintenance-highlight::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.maintenance-highlight-content {
position: relative;
z-index: 2;
}
.maintenance-highlight h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1rem;
}
.maintenance-highlight p {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-dark);
margin: 0;
}
/* Responsive Design for Maintenance Page */
@media (max-width: 1024px) {
.maintenance-container {
padding: 0 1.5rem;
}
.maintenance-intro {
padding: 2.5rem;
}
.maintenance-section-content {
padding: 2rem;
}
}
@media (max-width: 768px) {
.maintenance-hero {
padding: 100px 0 60px;
}
.maintenance-content {
padding: 60px 0;
}
.maintenance-intro {
padding: 2rem;
}
.maintenance-intro p {
font-size: 1.1rem;
}
.maintenance-section-header {
padding: 1.5rem;
}
.maintenance-section-header h2 {
font-size: 1.8rem;
flex-direction: column;
gap: 0.5rem;
}
.maintenance-section-content {
padding: 1.5rem;
}
.maintenance-list li,
.warning-list li {
padding: 1rem;
margin-bottom: 1.25rem;
}
.maintenance-paragraph {
padding: 1.25rem;
font-size: 1rem;
}
.maintenance-highlight {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.maintenance-hero {
padding: 80px 0 40px;
}
.maintenance-content {
padding: 40px 0;
}
.maintenance-container {
padding: 0 1rem;
}
.maintenance-intro {
padding: 1.5rem;
}
.maintenance-intro p {
font-size: 1rem;
}
.maintenance-section-header {
padding: 1.25rem;
}
.maintenance-section-header h2 {
font-size: 1.5rem;
}
.maintenance-section-content {
padding: 1.25rem;
}
.maintenance-list li,
.warning-list li {
padding: 0.875rem;
margin-bottom: 1rem;
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
}
/* ===============================================
BLOG STYLES - Additional Global Styles
=============================================== */
/* Blog Archive Global Styles */
.blog-archive-page .page-numbers {
display: inline-block;
padding: 8px 16px;
margin: 0 4px;
background: white;
color: var(--primary-dark);
text-decoration: none;
border-radius: 6px;
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
font-weight: 500;
}
.blog-archive-page .page-numbers:hover,
.blog-archive-page .page-numbers.current {
background: var(--primary-dark);
color: white;
border-color: var(--primary-dark);
transform: translateY(-2px);
}
.blog-archive-page .page-numbers.dots {
background: transparent;
border: none;
color: var(--text-light);
}
.blog-archive-page .page-numbers.prev,
.blog-archive-page .page-numbers.next {
background: var(--primary-light);
color: var(--primary-dark);
font-weight: 600;
}
.blog-archive-page .page-numbers.prev:hover,
.blog-archive-page .page-numbers.next:hover {
background: var(--accent);
transform: translateY(-2px);
}
/* Blog Single Post Global Styles */
.single-blog-post .page-numbers {
display: inline-block;
padding: 8px 16px;
margin: 0 4px;
background: white;
color: var(--primary-dark);
text-decoration: none;
border-radius: 6px;
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
font-weight: 500;
}
.single-blog-post .page-numbers:hover,
.single-blog-post .page-numbers.current {
background: var(--primary-dark);
color: white;
border-color: var(--primary-dark);
transform: translateY(-2px);
}
/* Blog Comments Styles */
.comments-area {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-top: 3rem;
}
.comments-title {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 2rem;
text-align: center;
}
.comment-list {
list-style: none;
padding: 0;
margin: 0;
}
.comment {
background: var(--bg-light);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-left: 4px solid var(--primary-dark);
}
.comment-author {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.comment-author .avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.comment-author .fn {
font-weight: 600;
color: var(--primary-dark);
text-decoration: none;
}
.comment-meta {
font-size: 0.85rem;
color: var(--text-light);
margin-bottom: 1rem;
}
.comment-content {
color: var(--text-dark);
line-height: 1.6;
}
.comment-reply-link {
background: var(--primary-dark);
color: white;
padding: 6px 12px;
border-radius: 4px;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
}
.comment-reply-link:hover {
background: var(--accent);
transform: translateY(-1px);
}
/* Comment Form Styles */
.comment-form {
background: var(--bg-light);
border-radius: 8px;
padding: 2rem;
margin-top: 2rem;
}
.comment-form h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 1.5rem;
text-align: center;
}
.comment-form p {
margin-bottom: 1rem;
}
.comment-form label {
display: block;
font-weight: 600;
color: var(--primary-dark);
margin-bottom: 0.5rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 12px;
border: 1px solid #e0e0e0;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
outline: none;
border-color: var(--primary-dark);
box-shadow: 0 0 0 2px rgba(8, 84, 87, 0.1);
}
.comment-form textarea {
min-height: 120px;
resize: vertical;
}
.comment-form .form-submit {
text-align: center;
margin-top: 1.5rem;
}
.comment-form input[type="submit"] {
background: var(--primary-dark);
color: white;
padding: 12px 30px;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.comment-form input[type="submit"]:hover {
background: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Blog Search Results */
.search-results .search-query {
font-style: italic;
color: var(--primary-dark);
font-weight: 600;
}
/* Blog Archive Filters (if needed) */
.blog-filters {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
.blog-filters label {
font-weight: 600;
color: var(--primary-dark);
}
.blog-filters select {
padding: 8px 12px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background: white;
color: var(--text-dark);
font-size: 0.9rem;
}
.blog-filters select:focus {
outline: none;
border-color: var(--primary-dark);
}
/* Blog Post Formats */
.post-format-aside .post-content {
background: var(--bg-light);
border-left: 4px solid var(--primary-light);
padding: 1.5rem;
border-radius: 0 8px 8px 0;
font-style: italic;
}
.post-format-quote .post-content {
background: var(--primary-dark);
color: white;
padding: 2rem;
border-radius: 8px;
text-align: center;
font-size: 1.2rem;
font-style: italic;
position: relative;
}
.post-format-quote .post-content::before {
content: '"';
font-size: 4rem;
position: absolute;
top: -10px;
left: 20px;
color: var(--accent);
font-family: serif;
}
.post-format-gallery .post-content {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Blog Reading Time Indicator */
.reading-time {
background: var(--primary-light);
color: var(--primary-dark);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
display: inline-block;
margin-top: 1rem;
}
/* Blog Featured Post Badge */
.featured-post-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--accent);
color: var(--primary-dark);
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 10;
}
/* Blog Post Subtitle */
.post-subtitle {
font-size: 1.2rem;
color: var(--text-medium);
font-style: italic;
text-align: center;
margin-bottom: 2rem;
padding: 1rem;
background: var(--bg-light);
border-radius: 8px;
border-left: 4px solid var(--primary-light);
}
/* Responsive Blog Styles */
@media (max-width: 768px) {
.blog-filters {
flex-direction: column;
align-items: stretch;
}
.blog-filters select {
width: 100%;
}
.comment-author {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.comment-form {
padding: 1.5rem;
}
.comments-area {
padding: 1.5rem;
}
.post-format-quote .post-content {
padding: 1.5rem;
font-size: 1.1rem;
}
.post-format-quote .post-content::before {
font-size: 3rem;
top: -5px;
left: 15px;
}
}
@media (max-width: 480px) {
.comment-form {
padding: 1rem;
}
.comments-area {
padding: 1rem;
}
.comment {
padding: 1rem;
}
.post-format-quote .post-content {
padding: 1rem;
font-size: 1rem;
}
.featured-post-badge {
top: 0.5rem;
right: 0.5rem;
font-size: 0.7rem;
padding: 4px 8px;
}
}
.maintenance-list li::before,
.warning-list li::before {
margin-top: 0;
}
.maintenance-paragraph {
padding: 1rem;
font-size: 0.95rem;
}
.maintenance-highlight {
padding: 1.25rem;
}
.maintenance-highlight h3 {
font-size: 1.3rem;
}
.maintenance-highlight p {
font-size: 1rem;
}
.page-id-1483 .prefab-hero{
padding:40px 0 !important;
}
section.ktcoun {
margin-top:60px;
margin-bottom:60px;
}
.page-id-1483 section.b2b-partner {
padding-bottom:0 !important;
}
/* Quartz Kitchen Countertops Specifications Section */
.specifications-section {
margin: 60px 0;
padding: 40px 0;
}
.specifications-section .section-title {
text-align: center;
font-size: 2.2rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 40px;
position: relative;
}
.specifications-section .section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, #3498db, #2ecc71);
border-radius: 2px;
}
.specifications-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.specifications-column {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.spec-row {
display: flex;
border-bottom: 1px solid #e8e8e8;
transition: background-color 0.3s ease;
}
.spec-row:last-child {
border-bottom: none;
}
.spec-row:hover {
background-color: #f8f9fa;
}
.spec-label {
flex: 0 0 35%;
padding: 18px 20px;
font-weight: 600;
color: #2c3e50;
background-color: #f8f9fa;
border-right: 1px solid #e8e8e8;
font-size: 0.95rem;
line-height: 1.4;
}
.spec-value {
flex: 1;
padding: 18px 20px;
color: #555;
font-size: 0.9rem;
line-height: 1.5;
}
/* Responsive Design for Specifications */
@media (max-width: 768px) {
.specifications-container {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
.specifications-section .section-title {
font-size: 1.8rem;
margin-bottom: 30px;
}
.spec-row {
flex-direction: column;
}
.spec-label {
flex: none;
border-right: none;
border-bottom: 1px solid #e8e8e8;
padding: 15px 20px;
}
.spec-value {
padding: 15px 20px;
}
}
@media (max-width: 480px) {
.specifications-section {
margin: 40px 0;
padding: 30px 0;
}
.specifications-section .section-title {
font-size: 1.6rem;
margin-bottom: 25px;
}
.specifications-container {
padding: 0 10px;
}
.spec-label,
.spec-value {
padding: 12px 15px;
font-size: 0.85rem;
}
}
.threepic {
display:flex;
flex-direction:row;
gap:10px;
align-items:center;
}
.factory-main-photos-new,
.actory-main-photos-old{
flex: 0 0 50%;
max-width:50%;
}
.threepic img{
width:100% !important
}
@media(max-width:767px){
.threepic {
flex-direction:column !important; }
.factory-main-photos-new,
.actory-main-photos-old{
flex:0 0 100%;
max-width:100%;
}
}
section.page-content a{
color:#0a5557;
font-weight:bold;
text-decoration:none;
}
section.page-content a:hover{
color:#000;
}
textarea.wpcf7-form-control.wpcf7-textarea {
height:100px;
}
@media(max-width:767px){
.hero-slide {
height:500px;
}
}
.featured-image-fullwidth {
background:linear-gradient(
rgba(8, 84, 87, 0.5), /* top overlay color */
rgba(8, 84, 87, 0.5) /* bottom overlay color */
),url('/wp-content/uploads/2025/09/kitchen-countertop-manufacturer.jpg');
background-size:cover;
background-repeat:no-repeat;
padding:80px 0;
background-attachment:fixed;
}
.featured-image-fullwidth *{
color:#fff !important;
}
.page-id-224 .card-icon {
color:#fff;
}
a.factory-button,
a.category-button{
color:#fff !important;
font-size: 0.92rem;
}
a.category-button:hover{
color:var(--primary-dark) !important;
}
.page-id-1363 section.page-content,.page-id-173 section.page-content,
.page-id-193 section.page-content{
padding-top:0 !important;
}
@media(max-width:767px){
.luxury-row-image {
width:100% !important;
height:auto;
}
.luxury-row.mobrev {
display:flex;
flex-direction:column-reverse;
}
.process-step.step2,
.category-item.step2{
display:flex;
flex-direction:column-reverse;
}
.hero{
min-height:500px;
height:100%;
}
.hero-dots {
bottom:40px !important;
}
}
#lightbox{
height:100% !important;
}
#lightbox {
background: rgba(0, 0, 0, 0.6) !important;
}
.luxury-row-image img{
max-width: 100% !important;
height: auto !important;
object-fit: contain !Important;
display: block !Important;
margin: 0 auto !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
border-radius:10px;
}
.luxury-row-image {
box-shadow:none;
height:auto;
}
.luxury-row-text p{
font-size: 1.8rem;
}
.certifictiongrid {
display:flex;
gap:40px;
justify-content:center;
}
.certifictiongrid img{
width:90px;
height:auto;
background:#fff; !important;
padding:10px;
border-radius:20px;
}
@media(max-width:767px){
.certifictiongrid img{
width:60px;
}}