/* =====================================================
VISHWAKARMA STEEL FABRICATION
Complete Website Stylesheet
===================================================== */
/* =====================================================
CSS VARIABLES
===================================================== */
:root {
/* Primary Colors */
--primary-color: #e65100;
--primary-dark: #bf360c;
--primary-light: #ff6d00;
--primary-rgb: 230, 81, 0;
/* Secondary Colors */
--secondary-color: #1a237e;
--secondary-dark: #0d1642;
--secondary-light: #3949ab;
/* Neutral Colors */
--heading-color: #1a1a2e;
--text-color: #4a4a4a;
--text-light: #6c757d;
--text-muted: #9e9e9e;
/* Background Colors */
--bg-light: #f8f9fa;
--bg-dark: #1a1a2e;
--bg-white: #ffffff;
/* Border Colors */
--border-color: #e0e0e0;
--border-light: #f0f0f0;
/* Status Colors */
--success-color: #28a745;
--warning-color: #ffc107;
--danger-color: #dc3545;
--info-color: #17a2b8;
/* WhatsApp Color */
--whatsapp-color: #25d366;
--whatsapp-dark: #128c7e;
/* Fonts */
--font-primary: 'Poppins', sans-serif;
--font-heading: 'Playfair Display', serif;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 5px 20px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
/* Transitions */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
/* Border Radius */
--radius-sm: 5px;
--radius-md: 10px;
--radius-lg: 15px;
--radius-xl: 25px;
--radius-full: 50%;
/* Container Width */
--container-width: 1200px;
--container-narrow: 900px;
/* Header Height */
--header-height: 80px;
--topbar-height: 40px;
}
/* =====================================================
CSS RESET & BASE STYLES
===================================================== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-primary);
font-size: 1rem;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-white);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Selection */
::selection {
background-color: var(--primary-color);
color: #fff;
}
/* Links */
a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition-normal);
}
a:hover {
color: var(--primary-dark);
}
/* Images */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Lists */
ul, ol {
list-style: none;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: 700;
color: var(--heading-color);
line-height: 1.3;
margin-bottom: 0.5em;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: 1rem;
}
/* =====================================================
UTILITY CLASSES
===================================================== */
/* Container */
.container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}
.container-narrow {
max-width: var(--container-narrow);
}
.container-fluid {
width: 100%;
padding: 0 20px;
}
/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--primary-color) !important; }
.text-secondary { color: var(--secondary-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-danger { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-white { color: #fff !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white-80 { color: rgba(255,255,255,0.8) !important; }
.font-weight-bold { font-weight: 700; }
.font-weight-semibold { font-weight: 600; }
.font-weight-normal { font-weight: 400; }
/* Background Utilities */
.bg-primary { background-color: var(--primary-color) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-light { background-color: var(--bg-light) !important; }
.bg-dark { background-color: var(--bg-dark) !important; }
.bg-white { background-color: #fff !important; }
/* Display Utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
/* Flex Utilities */
.flex-wrap { flex-wrap: wrap; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
/* Margin Utilities */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
/* Padding Utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }
/* Section Padding */
.section-padding {
padding: 80px 0;
}
.section-padding-sm {
padding: 50px 0;
}
/* =====================================================
BUTTONS
===================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 28px;
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition-normal);
white-space: nowrap;
}
.btn:hover {
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
/* Button Sizes */
.btn-sm {
padding: 8px 18px;
font-size: 0.875rem;
}
.btn-lg {
padding: 15px 35px;
font-size: 1.1rem;
}
.btn-block {
display: flex;
width: 100%;
}
/* Primary Button */
.btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
border-color: var(--primary-color);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
color: #fff;
box-shadow: 0 5px 20px rgba(var(--primary-rgb), 0.4);
}
/* Secondary Button */
.btn-secondary {
background: var(--secondary-color);
color: #fff;
border-color: var(--secondary-color);
}
.btn-secondary:hover {
background: var(--secondary-dark);
color: #fff;
}
/* Outline Buttons */
.btn-outline-primary {
background: transparent;
color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-outline-primary:hover {
background: var(--primary-color);
color: #fff;
}
.btn-outline-white {
background: transparent;
color: #fff;
border-color: #fff;
}
.btn-outline-white:hover {
background: #fff;
color: var(--primary-color);
}
/* White Button */
.btn-white {
background: #fff;
color: var(--primary-color);
border-color: #fff;
}
.btn-white:hover {
background: var(--bg-light);
color: var(--primary-dark);
}
/* WhatsApp Button */
.btn-whatsapp {
background: linear-gradient(135deg, var(--whatsapp-color), var(--whatsapp-dark));
color: #fff;
border-color: var(--whatsapp-color);
}
.btn-whatsapp:hover {
background: linear-gradient(135deg, var(--whatsapp-dark), var(--whatsapp-color));
color: #fff;
box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
}
/* Link Button */
.btn-link {
background: transparent;
color: var(--primary-color);
border: none;
padding: 0;
}
.btn-link:hover {
color: var(--primary-dark);
transform: none;
}
/* =====================================================
FORMS
===================================================== */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-weight: 500;
color: var(--heading-color);
font-size: 0.95rem;
}
.form-group label i {
color: var(--primary-color);
font-size: 0.9rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 14px 18px;
font-family: var(--font-primary);
font-size: 1rem;
color: var(--text-color);
background-color: #fff;
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
transition: var(--transition-normal);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-muted);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234a4a4a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
padding-right: 40px;
}
.form-hint {
display: block;
margin-top: 5px;
font-size: 0.85rem;
color: var(--text-muted);
}
.form-note {
display: flex;
align-items: center;
gap: 8px;
margin-top: 15px;
font-size: 0.85rem;
color: var(--text-muted);
}
.form-note i {
color: var(--success-color);
}
.form-privacy {
text-align: center;
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 15px;
}
.form-privacy i {
margin-right: 5px;
}
/* Form Row */
.form-row {
margin-bottom: 20px;
}
.form-row.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* Checkbox */
.checkbox-group {
margin-bottom: 20px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 0.95rem;
}
.checkbox-label input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--primary-color);
}
/* =====================================================
ALERTS
===================================================== */
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 15px 20px;
border-radius: var(--radius-md);
margin-bottom: 20px;
font-size: 0.95rem;
}
.alert i {
font-size: 1.2rem;
margin-top: 2px;
}
.alert-success {
background-color: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.alert-error,
.alert-danger {
background-color: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
.alert-warning {
background-color: #fff3cd;
border: 1px solid #ffeeba;
color: #856404;
}
.alert-info {
background-color: #d1ecf1;
border: 1px solid #bee5eb;
color: #0c5460;
}
/* =====================================================
TOP BAR
===================================================== */
.top-bar {
background-color: var(--bg-dark);
color: #fff;
padding: 10px 0;
font-size: 0.85rem;
}
.top-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-bar-left,
.top-bar-right {
display: flex;
align-items: center;
gap: 25px;
}
.top-bar-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.85);
}
.top-bar-item a {
color: rgba(255, 255, 255, 0.85);
}
.top-bar-item a:hover {
color: #fff;
}
.top-bar-item i {
color: var(--primary-color);
}
.top-bar-social {
display: flex;
gap: 15px;
}
.top-bar-social a {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
transition: var(--transition-normal);
}
.top-bar-social a:hover {
color: var(--primary-color);
transform: translateY(-2px);
}
/* =====================================================
MAIN HEADER
===================================================== */
.main-header {
position: sticky;
top: 0;
left: 0;
right: 0;
background: #fff;
box-shadow: var(--shadow-sm);
z-index: 1000;
transition: var(--transition-normal);
}
.main-header.scrolled {
box-shadow: var(--shadow-md);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
}
/* Logo */
.logo a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.logo-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-name {
font-size: 1.3rem;
font-weight: 700;
color: var(--heading-color);
line-height: 1.2;
}
.logo-tagline {
font-size: 0.8rem;
color: var(--primary-color);
font-weight: 500;
}
/* Navigation */
.main-nav {
display: flex;
align-items: center;
}
.nav-menu {
display: flex;
align-items: center;
gap: 5px;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
gap: 5px;
padding: 10px 18px;
font-size: 0.95rem;
font-weight: 500;
color: var(--text-color);
text-decoration: none;
border-radius: var(--radius-sm);
transition: var(--transition-normal);
}
.nav-link:hover,
.nav-link.active {
color: var(--primary-color);
background-color: rgba(var(--primary-rgb), 0.08);
}
.nav-link i {
font-size: 0.7rem;
transition: var(--transition-normal);
}
/* Dropdown Menu */
.nav-item.has-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: #fff;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 10px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition-normal);
z-index: 100;
}
.dropdown-menu li a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
color: var(--text-color);
font-size: 0.95rem;
transition: var(--transition-fast);
}
.dropdown-menu li a:hover {
background-color: var(--bg-light);
color: var(--primary-color);
padding-left: 25px;
}
.dropdown-divider {
border-top: 1px solid var(--border-light);
margin: 8px 0;
}
/* Header Right */
.header-right {
display: flex;
align-items: center;
gap: 20px;
}
.header-phone {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.header-phone .phone-icon {
width: 45px;
height: 45px;
background: rgba(var(--primary-rgb), 0.1);
color: var(--primary-color);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.header-phone .phone-text {
display: flex;
flex-direction: column;
}
.header-phone .phone-label {
font-size: 0.75rem;
color: var(--text-muted);
}
.header-phone .phone-number {
font-size: 1rem;
font-weight: 600;
color: var(--heading-color);
}
.header-phone:hover .phone-icon {
background: var(--primary-color);
color: #fff;
}
.header-cta {
display: flex;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
width: 45px;
height: 45px;
background: none;
border: none;
cursor: pointer;
padding: 10px;
}
.hamburger {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 18px;
}
.hamburger span {
display: block;
width: 100%;
height: 3px;
background-color: var(--heading-color);
border-radius: 2px;
transition: var(--transition-normal);
}
.mobile-menu-toggle.active .hamburger span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active .hamburger span:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Mobile Menu Overlay */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
z-index: 1001;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
/* Mobile Menu */
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 320px;
max-width: 85%;
height: 100%;
background: #fff;
z-index: 1002;
transition: var(--transition-slow);
overflow-y: auto;
}
.mobile-menu.active {
right: 0;
}
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background: var(--bg-dark);
color: #fff;
}
.mobile-logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.mobile-logo i {
font-size: 1.5rem;
color: var(--primary-color);
}
.mobile-menu-close {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: var(--radius-full);
color: #fff;
font-size: 1.2rem;
cursor: pointer;
}
.mobile-menu-body {
padding: 20px;
}
.mobile-nav {
list-style: none;
}
.mobile-nav > li {
border-bottom: 1px solid var(--border-light);
}
.mobile-nav > li > a {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 0;
color: var(--heading-color);
font-weight: 500;
text-decoration: none;
}
.mobile-nav > li > a i {
color: var(--primary-color);
width: 20px;
}
.mobile-dropdown .dropdown-arrow {
margin-left: auto;
transition: var(--transition-normal);
}
.mobile-dropdown.active .dropdown-arrow {
transform: rotate(180deg);
}
.mobile-submenu {
display: none;
padding-left: 32px;
padding-bottom: 10px;
}
.mobile-dropdown.active .mobile-submenu {
display: block;
}
.mobile-submenu li a {
display: block;
padding: 10px 0;
color: var(--text-color);
font-size: 0.95rem;
}
.mobile-menu-contact {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-light);
}
.mobile-phone,
.mobile-whatsapp {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
border-radius: var(--radius-md);
font-weight: 500;
text-decoration: none;
}
.mobile-phone {
background: rgba(var(--primary-rgb), 0.1);
color: var(--primary-color);
}
.mobile-whatsapp {
background: rgba(37, 211, 102, 0.1);
color: var(--whatsapp-dark);
}
.mobile-menu-cta {
margin-top: 20px;
}
/* =====================================================
HERO SECTION
===================================================== */
.hero-section {
position: relative;
overflow: hidden;
}
.hero-slider {
position: relative;
}
.hero-slide {
position: relative;
min-height: 600px;
display: none;
align-items: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-slide.active {
display: flex;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(26, 26, 46, 0.7) 50%, rgba(26, 26, 46, 0.5) 100%);
}
.hero-content {
position: relative;
z-index: 10;
max-width: 700px;
color: #fff;
padding: 60px 0;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
font-size: 0.9rem;
margin-bottom: 25px;
}
.hero-badge i {
color: var(--warning-color);
}
.hero-title {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: #fff;
}
.hero-subtitle {
font-size: 1.15rem;
line-height: 1.7;
opacity: 0.9;
margin-bottom: 25px;
}
.hero-features {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 35px;
}
.hero-feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
}
.hero-feature i {
color: var(--success-color);
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
/* Hero Slider Navigation */
.hero-slider-nav {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 20px;
z-index: 20;
}
.slider-prev,
.slider-next {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: var(--radius-full);
color: #fff;
font-size: 1rem;
cursor: pointer;
transition: var(--transition-normal);
}
.slider-prev:hover,
.slider-next:hover {
background: var(--primary-color);
}
.slider-dots {
display: flex;
gap: 10px;
}
.slider-dots .dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.5);
border-radius: var(--radius-full);
cursor: pointer;
transition: var(--transition-normal);
}
.slider-dots .dot.active,
.slider-dots .dot:hover {
background: var(--primary-color);
transform: scale(1.2);
}
/* Hero Bottom Bar */
.hero-bottom-bar {
background: var(--primary-color);
padding: 20px 0;
}
.hero-contact-bar {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 30px;
}
.hero-contact-bar .contact-item {
display: flex;
align-items: center;
gap: 15px;
color: #fff;
}
.hero-contact-bar .contact-item i {
font-size: 1.5rem;
opacity: 0.9;
}
.hero-contact-bar .contact-item .label {
display: block;
font-size: 0.8rem;
opacity: 0.8;
}
.hero-contact-bar .contact-item a {
color: #fff;
font-weight: 600;
}
/* =====================================================
TRUST BADGES SECTION
===================================================== */
.trust-badges-section {
background: #fff;
padding: 30px 0;
box-shadow: var(--shadow-sm);
position: relative;
z-index: 10;
margin-top: -30px;
}
.trust-badges-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.trust-badge-card {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: var(--bg-light);
border-radius: var(--radius-md);
transition: var(--transition-normal);
}
.trust-badge-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.trust-badge-card .badge-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.trust-badge-card .badge-value {
font-size: 1.8rem;
font-weight: 700;
color: var(--heading-color);
line-height: 1;
}
.trust-badge-card .badge-title {
font-size: 0.9rem;
color: var(--text-muted);
}
/* =====================================================
SECTION HEADERS
===================================================== */
.section-header {
margin-bottom: 50px;
}
.section-header.text-center {
text-align: center;
}
.section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
background: rgba(var(--primary-rgb), 0.1);
color: var(--primary-color);
border-radius: var(--radius-xl);
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 15px;
}
.section-tag.light {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.section-title {
font-size: 2.2rem;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 15px;
}
.section-title.text-white {
color: #fff;
}
.section-subtitle {
font-size: 1.1rem;
color: var(--text-light);
max-width: 600px;
}
.section-header.text-center .section-subtitle {
margin: 0 auto;
}
.section-cta {
margin-top: 40px;
}
.section-cta p {
margin-bottom: 15px;
color: var(--text-muted);
}
/* =====================================================
ABOUT INTRO SECTION
===================================================== */
.about-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-images {
position: relative;
}
.about-images .image-main {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-images .image-main img {
width: 100%;
height: 400px;
object-fit: cover;
}
.about-images .image-secondary {
position: absolute;
bottom: -30px;
right: -30px;
width: 200px;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 5px solid #fff;
}
.about-images .image-secondary img {
width: 100%;
height: 150px;
object-fit: cover;
}
.about-images .experience-badge {
position: absolute;
top: 30px;
left: -30px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
padding: 25px;
border-radius: var(--radius-md);
text-align: center;
box-shadow: var(--shadow-lg);
}
.experience-badge .exp-number {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
}
.experience-badge .exp-number sup {
font-size: 1rem;
}
.experience-badge .exp-text {
font-size: 0.85rem;
margin-top: 5px;
}
.about-content .lead-text {
font-size: 1.1rem;
color: var(--text-color);
margin-bottom: 20px;
}
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 30px 0;
}
.about-features .feature-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.about-features .feature-icon {
width: 50px;
height: 50px;
background: rgba(var(--primary-rgb), 0.1);
color: var(--primary-color);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.about-features .feature-text strong {
display: block;
color: var(--heading-color);
margin-bottom: 3px;
}
.about-features .feature-text span {
font-size: 0.9rem;
color: var(--text-muted);
}
.about-buttons {
display: flex;
gap: 15px;
margin-top: 30px;
}
/* =====================================================
SERVICES SECTION
===================================================== */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.service-card {
background: #fff;
padding: 35px 30px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: var(--transition-normal);
border: 1px solid transparent;
}
.service-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-5px);
border-color: var(--primary-color);
}
.service-card .service-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin-bottom: 25px;
}
.service-card .service-title {
font-size: 1.25rem;
margin-bottom: 12px;
}
.service-card .service-desc {
color: var(--text-light);
margin-bottom: 20px;
font-size: 0.95rem;
}
.service-card .service-features {
margin-bottom: 20px;
}
.service-card .service-features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
font-size: 0.9rem;
color: var(--text-color);
}
.service-card .service-features li i {
color: var(--success-color);
}
.service-card .service-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
font-size: 0.95rem;
}
.service-card .service-link:hover {
gap: 12px;
}
/* =====================================================
PRODUCTS SECTION
===================================================== */
.product-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.product-filters .filter-btn {
padding: 10px 25px;
background: #fff;
border: 2px solid var(--border-color);
border-radius: var(--radius-xl);
font-size: 0.95rem;
font-weight: 500;
color: var(--text-color);
cursor: pointer;
transition: var(--transition-normal);
}
.product-filters .filter-btn:hover,
.product-filters .filter-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.product-card {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition-normal);
}
.product-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-5px);
}
.product-card .product-image {
position: relative;
padding-top: 100%;
overflow: hidden;
}
.product-card .product-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.product-card:hover .product-image img {
transform: scale(1.1);
}
.product-card .product-badges {
position: absolute;
top: 15px;
left: 15px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 5;
}
.product-card .badge {
display: inline-block;
padding: 5px 12px;
border-radius: var(--radius-xl);
font-size: 0.75rem;
font-weight: 600;
color: #fff;
}
.product-card .badge.featured {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}
.product-card .badge.bestseller {
background: linear-gradient(135deg, #f1c40f, #f39c12);
}
.product-card .product-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
opacity: 0;
transition: var(--transition-normal);
}
.product-card:hover .product-overlay {
opacity: 1;
}
.product-overlay .overlay-btn {
width: 45px;
height: 45px;
background: #fff;
color: var(--heading-color);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
text-decoration: none;
transition: var(--transition-normal);
transform: translateY(20px);
opacity: 0;
}
.product-card:hover .overlay-btn {
transform: translateY(0);
opacity: 1;
}
.product-overlay .overlay-btn:nth-child(2) {
transition-delay: 0.1s;
}
.product-overlay .overlay-btn:nth-child(3) {
transition-delay: 0.2s;
}
.product-overlay .overlay-btn:hover {
background: var(--primary-color);
color: #fff;
}
.product-overlay .overlay-btn.whatsapp:hover {
background: var(--whatsapp-color);
}
.product-card .product-content {
padding: 20px;
}
.product-card .product-category {
display: block;
font-size: 0.8rem;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.product-card .product-category a {
color: inherit;
}
.product-card .product-title {
font-size: 1.05rem;
margin-bottom: 10px;
line-height: 1.4;
}
.product-card .product-title a {
color: var(--heading-color);
}
.product-card .product-title a:hover {
color: var(--primary-color);
}
.product-card .product-excerpt {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 15px;
line-height: 1.5;
}
.product-card .product-price {
margin-bottom: 15px;
}
.product-card .price-label {
display: block;
font-size: 0.8rem;
color: var(--text-muted);
}
.product-card .price-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary-color);
}
.product-card .price-unit {
font-size: 0.85rem;
color: var(--text-muted);
}
.product-card .product-actions {
display: flex;
gap: 10px;
}
.product-card .product-actions .btn {
flex: 1;
}
/* No Products */
.no-products {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
background: var(--bg-light);
border-radius: var(--radius-lg);
}
.no-products i {
font-size: 4rem;
color: var(--text-muted);
margin-bottom: 20px;
}
/* =====================================================
WHY CHOOSE US SECTION
===================================================== */
.why-choose-section {
background: var(--bg-dark);
color: #fff;
}
.why-choose-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.why-choose-content .lead-text {
color: rgba(255, 255, 255, 0.8);
font-size: 1.1rem;
margin-bottom: 30px;
}
.reasons-list {
display: flex;
flex-direction: column;
gap: 25px;
}
.reason-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.reason-item .reason-number {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
opacity: 0.8;
line-height: 1;
}
.reason-item .reason-content h4 {
color: #fff;
font-size: 1.1rem;
margin-bottom: 5px;
}
.reason-item .reason-content p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
}
.why-choose-visual {
position: relative;
}
.why-choose-visual .visual-image {
border-radius: var(--radius-lg);
overflow: hidden;
}
.why-choose-visual .visual-image img {
width: 100%;
height: 400px;
object-fit: cover;
}
.stats-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
position: absolute;
bottom: -40px;
left: -40px;
right: 40px;
}
.stat-card {
background: #fff;
padding: 25px;
border-radius: var(--radius-md);
text-align: center;
box-shadow: var(--shadow-lg);
}
.stat-card .stat-icon {
color: var(--primary-color);
font-size: 1.5rem;
margin-bottom: 10px;
}
.stat-card .stat-number {
font-size: 1.8rem;
font-weight: 700;
color: var(--heading-color);
}
.stat-card .stat-label {
font-size: 0.85rem;
color: var(--text-muted);
}
/* =====================================================
GALLERY SECTION
===================================================== */
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.gallery-item {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
}
.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
transition: var(--transition-slow);
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-item .gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
opacity: 0;
transition: var(--transition-normal);
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay .gallery-info {
color: #fff;
}
.gallery-overlay .gallery-info h4 {
font-size: 1rem;
color: #fff;
margin-bottom: 5px;
}
.gallery-overlay .gallery-info p {
font-size: 0.85rem;
opacity: 0.8;
}
.gallery-overlay .gallery-zoom {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: var(--primary-color);
color: #fff;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
/* =====================================================
PROCESS SECTION
===================================================== */
.process-steps {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
position: relative;
}
.process-step {
text-align: center;
flex: 1;
position: relative;
z-index: 2;
}
.process-step .step-number {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: var(--primary-color);
color: #fff;
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.process-step .step-icon {
width: 100px;
height: 100px;
background: #fff;
border: 3px solid var(--border-color);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--primary-color);
margin: 0 auto 20px;
transition: var(--transition-normal);
}
.process-step:hover .step-icon {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
.process-step h3 {
font-size: 1.1rem;
margin-bottom: 10px;
}
.process-step p {
font-size: 0.9rem;
color: var(--text-muted);
}
.process-connector {
display: flex;
align-items: center;
justify-content: center;
color: var(--border-color);
font-size: 1.5rem;
padding-top: 40px;
}
/* =====================================================
TESTIMONIALS SECTION
===================================================== */
.google-rating-banner {
display: flex;
justify-content: center;
margin-bottom: 40px;
}
.google-rating-banner .rating-content {
display: flex;
align-items: center;
gap: 20px;
background: #fff;
padding: 20px 40px;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.google-rating-banner .google-logo {
height: 30px;
}
.google-rating-banner .rating-stars {
color: #fbbc04;
font-size: 1.3rem;
}
.google-rating-banner .rating-text strong {
font-size: 1.5rem;
color: var(--heading-color);
}
.google-rating-banner .rating-text span {
display: block;
font-size: 0.85rem;
color: var(--text-muted);
}
.testimonials-slider {
position: relative;
overflow: hidden;
}
.testimonials-slider .slider-track {
display: flex;
gap: 25px;
transition: transform 0.5s ease;
}
.testimonial-card {
flex: 0 0 calc(33.333% - 17px);
background: #fff;
border-radius: var(--radius-lg);
padding: 30px;
box-shadow: var(--shadow-sm);
}
.testimonial-header {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}
.testimonial-avatar {
width: 60px;
height: 60px;
flex-shrink: 0;
}
.testimonial-avatar img {
width: 100%;
height: 100%;
border-radius: var(--radius-full);
object-fit: cover;
}
.testimonial-avatar i {
font-size: 3.5rem;
color: var(--primary-color);
}
.testimonial-info h4 {
font-size: 1rem;
margin-bottom: 3px;
}
.testimonial-info p {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 0;
}
.testimonial-rating {
margin-left: auto;
color: #ddd;
}
.testimonial-rating .fa-star.active {
color: #fbbc04;
}
.testimonial-content {
position: relative;
margin-bottom: 20px;
}
.testimonial-content .quote-icon {
color: var(--primary-color);
opacity: 0.2;
font-size: 2rem;
position: absolute;
top: -5px;
left: 0;
}
.testimonial-content p {
padding-left: 35px;
color: var(--text-color);
line-height: 1.7;
font-size: 0.95rem;
}
.testimonial-project {
background: var(--bg-light);
padding: 10px 15px;
border-radius: var(--radius-sm);
}
.testimonial-project .project-label {
font-size: 0.8rem;
color: var(--text-muted);
}
.testimonial-project .project-type {
font-weight: 600;
color: var(--primary-color);
}
.testimonials-slider .slider-nav {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
}
.testimonials-slider .slider-btn {
width: 45px;
height: 45px;
background: #fff;
border: 2px solid var(--border-color);
border-radius: var(--radius-full);
color: var(--heading-color);
font-size: 1rem;
cursor: pointer;
transition: var(--transition-normal);
}
.testimonials-slider .slider-btn:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
/* =====================================================
FAQ SECTION (HOMEPAGE)
===================================================== */
.faq-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 50px;
align-items: flex-start;
}
.faq-contact {
margin-top: 30px;
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 15px;
}
.faq-accordion .faq-item {
background: #fff;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.faq-accordion .faq-question {
width: 100%;
padding: 20px 25px;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-size: 1rem;
font-weight: 600;
color: var(--heading-color);
transition: var(--transition-normal);
}
.faq-accordion .faq-question:hover {
color: var(--primary-color);
}
.faq-accordion .faq-question i {
color: var(--primary-color);
transition: var(--transition-normal);
}
.faq-accordion .faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-accordion .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-accordion .faq-item.active .faq-answer {
max-height: 300px;
}
.faq-accordion .faq-answer p {
padding: 0 25px 20px;
color: var(--text-light);
line-height: 1.7;
}
/* =====================================================
BOOK VISIT SECTION
===================================================== */
.book-visit-section {
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
position: relative;
overflow: hidden;
}
.book-visit-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: rgba(var(--primary-rgb), 0.1);
border-radius: var(--radius-full);
}
.book-visit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.book-visit-content {
color: #fff;
}
.book-visit-content .lead-text {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 25px;
}
.visit-benefits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 30px;
}
.visit-benefits .benefit-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
}
.visit-benefits .benefit-item i {
color: var(--success-color);
}
.visit-contact .phone-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 1.5rem;
font-weight: 700;
color: #fff;
}
.visit-contact .phone-link i {
color: var(--primary-color);
}
.book-visit-form-wrapper .form-card {
background: #fff;
padding: 40px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
}
.book-visit-form-wrapper .form-header {
text-align: center;
margin-bottom: 30px;
}
.book-visit-form-wrapper .form-header h3 {
font-size: 1.5rem;
margin-bottom: 8px;
}
.book-visit-form-wrapper .form-header p {
color: var(--text-muted);
}
/* =====================================================
AREAS SECTION
===================================================== */
.areas-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.areas-grid .area-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #fff;
border: 2px solid var(--border-color);
border-radius: var(--radius-xl);
font-size: 0.95rem;
color: var(--text-color);
transition: var(--transition-normal);
}
.areas-grid .area-item:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.areas-grid .area-item i {
color: var(--primary-color);
font-size: 0.8rem;
}
.areas-grid .area-item.highlight {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.areas-grid .area-item.highlight i {
color: #fff;
}
/* =====================================================
FINAL CTA SECTION
===================================================== */
.final-cta-section {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
padding: 50px 0;
}
.final-cta-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.final-cta-content .cta-text h2 {
color: #fff;
font-size: 1.8rem;
margin-bottom: 5px;
}
.final-cta-content .cta-text p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0;
}
.final-cta-content .cta-buttons {
display: flex;
gap: 15px;
}
/* =====================================================
FOOTER
===================================================== */
.main-footer {
background: var(--bg-dark);
color: rgba(255, 255, 255, 0.8);
}
/* Footer CTA */
.footer-cta {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
padding: 40px 0;
margin-top: -40px;
position: relative;
z-index: 10;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.footer-cta-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.footer-cta-text h3 {
color: #fff;
font-size: 1.6rem;
margin-bottom: 5px;
}
.footer-cta-text p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 0;
}
.footer-cta-buttons {
display: flex;
gap: 15px;
}
/* Footer Main */
.footer-main {
padding: 60px 0 40px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 40px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.footer-logo i {
font-size: 2.5rem;
color: var(--primary-color);
}
.footer-logo-name {
display: block;
font-size: 1.3rem;
font-weight: 700;
color: #fff;
}
.footer-logo-tagline {
display: block;
font-size: 0.85rem;
color: var(--primary-color);
}
.footer-description {
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 25px;
}
.footer-trust-badges {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.footer-trust-badges .trust-badge {
display: flex;
align-items: center;
gap: 10px;
}
.footer-trust-badges .trust-badge i {
font-size: 1.5rem;
color: var(--primary-color);
}
.footer-trust-badges .trust-badge strong {
display: block;
color: #fff;
font-size: 1.1rem;
}
.footer-trust-badges .trust-badge span {
display: block;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: var(--transition-normal);
}
.footer-social a:hover {
background: var(--primary-color);
transform: translateY(-3px);
}
/* Footer Links */
.footer-column .footer-title {
color: #fff;
font-size: 1.1rem;
margin-bottom: 25px;
position: relative;
padding-bottom: 12px;
}
.footer-column .footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: var(--primary-color);
border-radius: 2px;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
transition: var(--transition-normal);
}
.footer-links a i {
font-size: 0.7rem;
color: var(--primary-color);
}
.footer-links a:hover {
color: var(--primary-color);
padding-left: 5px;
}
/* Footer Contact */
.footer-contact-list {
list-style: none;
}
.footer-contact-list li {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.footer-contact-list .contact-icon {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
color: var(--primary-color);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.footer-contact-list .contact-text strong {
display: block;
color: #fff;
margin-bottom: 3px;
}
.footer-contact-list .contact-text a {
color: rgba(255, 255, 255, 0.7);
}
.footer-contact-list .contact-text a:hover {
color: var(--primary-color);
}
.footer-contact-list .contact-text span {
display: block;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.5);
}
/* Footer Mini Form */
.footer-mini-form {
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-mini-form h5 {
color: #fff;
font-size: 1rem;
margin-bottom: 15px;
}
.mini-form input {
width: 100%;
padding: 12px 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm);
color: #fff;
margin-bottom: 10px;
font-size: 0.9rem;
}
.mini-form input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.mini-form input:focus {
outline: none;
border-color: var(--primary-color);
}
/* Footer Bottom */
.footer-bottom {
background: rgba(0, 0, 0, 0.3);
padding: 20px 0;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.footer-bottom .copyright {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0;
}
.footer-bottom .copyright .separator {
margin: 0 10px;
color: rgba(255, 255, 255, 0.3);
}
.footer-bottom .text-danger {
color: #e74c3c;
}
.footer-bottom-links {
display: flex;
gap: 25px;
}
.footer-bottom-links a {
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
}
.footer-bottom-links a:hover {
color: var(--primary-color);
}
/* =====================================================
STICKY FORM
===================================================== */
.sticky-form-toggle {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
transform-origin: left center;
z-index: 999;
cursor: pointer;
}
.sticky-form-toggle .toggle-content {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 25px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
border-radius: 0 0 var(--radius-md) var(--radius-md);
font-weight: 600;
font-size: 0.95rem;
box-shadow: var(--shadow-lg);
transition: var(--transition-normal);
}
.sticky-form-toggle:hover .toggle-content {
background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
}
.sticky-form-panel {
position: fixed;
left: -400px;
top: 0;
width: 380px;
max-width: 90%;
height: 100%;
background: #fff;
z-index: 1002;
overflow-y: auto;
transition: var(--transition-slow);
box-shadow: var(--shadow-xl);
}
.sticky-form-panel.active {
left: 0;
}
.sticky-form-close {
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
background: var(--bg-light);
border: none;
border-radius: var(--radius-full);
font-size: 1rem;
cursor: pointer;
transition: var(--transition-normal);
z-index: 10;
}
.sticky-form-close:hover {
background: var(--danger-color);
color: #fff;
}
.sticky-form-header {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
padding: 40px 30px 30px;
text-align: center;
}
.sticky-form-header .form-header-icon {
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin: 0 auto 15px;
}
.sticky-form-header h3 {
color: #fff;
font-size: 1.5rem;
margin-bottom: 8px;
}
.sticky-form-header p {
opacity: 0.9;
font-size: 0.95rem;
margin-bottom: 0;
}
.sticky-form-trust {
display: flex;
justify-content: center;
gap: 20px;
padding: 15px 20px;
background: var(--bg-light);
border-bottom: 1px solid var(--border-light);
}
.sticky-form-trust .trust-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--text-muted);
}
.sticky-form-trust .trust-item i {
color: var(--success-color);
}
.sticky-lead-form {
padding: 25px;
}
.sticky-form-alt {
padding: 0 25px 25px;
text-align: center;
}
.sticky-form-alt p {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 10px;
}
.sticky-form-alt .alt-buttons {
display: flex;
gap: 10px;
justify-content: center;
}
.sticky-form-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1001;
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
}
.sticky-form-overlay.active {
opacity: 1;
visibility: visible;
}
/* =====================================================
WHATSAPP WIDGET
===================================================== */
.whatsapp-widget {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 998;
}
.whatsapp-button {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--whatsapp-color), var(--whatsapp-dark));
color: #fff;
border: none;
border-radius: var(--radius-full);
font-size: 1.8rem;
cursor: pointer;
position: relative;
box-shadow: 0 5px 25px rgba(37, 211, 102, 0.4);
transition: var(--transition-normal);
}
.whatsapp-button:hover {
transform: scale(1.1);
}
.whatsapp-button.active {
background: var(--danger-color);
}
.whatsapp-button.active i::before {
content: "\f00d";
}
.whatsapp-tooltip {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
background: #333;
color: #fff;
padding: 8px 15px;
border-radius: var(--radius-sm);
font-size: 0.85rem;
white-space: nowrap;
margin-right: 15px;
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
}
.whatsapp-button:hover .whatsapp-tooltip {
opacity: 1;
visibility: visible;
}
.whatsapp-pulse {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--whatsapp-color);
border-radius: var(--radius-full);
animation: whatsappPulse 2s infinite;
z-index: -1;
}
@keyframes whatsappPulse {
0% {
transform: scale(1);
opacity: 0.5;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.whatsapp-popup {
position: absolute;
bottom: 80px;
right: 0;
width: 350px;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: var(--transition-normal);
}
.whatsapp-popup.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.whatsapp-popup-header {
background: linear-gradient(135deg, var(--whatsapp-color), var(--whatsapp-dark));
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.popup-header-info {
display: flex;
align-items: center;
gap: 12px;
}
.popup-header-info .header-avatar {
position: relative;
font-size: 2.5rem;
}
.popup-header-info .header-avatar .online-status {
position: absolute;
bottom: 2px;
right: 2px;
width: 12px;
height: 12px;
background: #4caf50;
border: 2px solid #fff;
border-radius: var(--radius-full);
}
.popup-header-info .header-text h4 {
color: #fff;
font-size: 1rem;
margin-bottom: 2px;
}
.popup-header-info .header-text p {
font-size: 0.8rem;
opacity: 0.9;
margin-bottom: 0;
}
.popup-header-info .header-text .text-success {
color: #4caf50 !important;
font-size: 0.5rem;
margin-right: 5px;
}
.popup-close {
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: var(--radius-full);
color: #fff;
cursor: pointer;
}
.whatsapp-popup-body {
padding: 20px;
background: #e5ddd5;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h80v80H10z' fill='none'/%3E%3Cpath d='M0 0h10v10H0zM20 0h10v10H20zM40 0h10v10H40zM60 0h10v10H60zM80 0h10v10H80z' fill='%23d5c9bf' opacity='0.3'/%3E%3C/svg%3E");
}
.chat-message {
margin-bottom: 15px;
}
.chat-message.received .message-content {
background: #fff;
padding: 12px 15px;
border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
position: relative;
max-width: 85%;
}
.chat-message .message-content p {
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 5px;
}
.chat-message .message-time {
font-size: 0.7rem;
color: var(--text-muted);
text-align: right;
display: block;
}
.chat-options {
margin-top: 15px;
}
.chat-options .options-label {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 10px;
}
.chat-option {
display: block;
padding: 10px 15px;
background: #fff;
border-radius: var(--radius-md);
margin-bottom: 8px;
font-size: 0.9rem;
color: var(--heading-color);
text-decoration: none;
transition: var(--transition-normal);
}
.chat-option:hover {
background: var(--primary-color);
color: #fff;
}
.whatsapp-popup-footer {
padding: 15px;
background: #f0f0f0;
}
.whatsapp-input-form {
display: flex;
gap: 10px;
}
.whatsapp-input {
flex: 1;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
font-size: 0.9rem;
}
.whatsapp-input:focus {
outline: none;
border-color: var(--whatsapp-color);
}
.whatsapp-send-btn {
width: 45px;
height: 45px;
background: var(--whatsapp-color);
color: #fff;
border: none;
border-radius: var(--radius-full);
font-size: 1rem;
cursor: pointer;
}
.whatsapp-popup-footer .powered-by {
text-align: center;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 10px;
margin-bottom: 0;
}
/* =====================================================
BACK TO TOP BUTTON
===================================================== */
.back-to-top {
position: fixed;
bottom: 100px;
right: 30px;
width: 45px;
height: 45px;
background: var(--primary-color);
color: #fff;
border: none;
border-radius: var(--radius-full);
font-size: 1rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
z-index: 997;
box-shadow: var(--shadow-md);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: var(--primary-dark);
transform: translateY(-5px);
}
/* =====================================================
PAGE HEADER (Inner Pages)
===================================================== */
.page-header {
position: relative;
padding: 100px 0 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
}
.page-header-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(26, 26, 46, 0.9), rgba(26, 26, 46, 0.8));
}
.page-header-content {
position: relative;
z-index: 10;
color: #fff;
}
.page-header-content h1 {
font-size: 2.5rem;
color: #fff;
margin-bottom: 15px;
}
.page-header .breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
}
.page-header .breadcrumb a {
color: rgba(255, 255, 255, 0.7);
}
.page-header .breadcrumb a:hover {
color: var(--primary-color);
}
.page-header .breadcrumb span:not(:last-child) {
color: var(--primary-color);
}
.page-header-desc {
max-width: 600px;
margin: 20px auto 0;
color: rgba(255, 255, 255, 0.8);
font-size: 1.05rem;
}
.page-header.page-header-sm {
padding: 60px 0;
}
/* Breadcrumb Section (Non-hero) */
.breadcrumb-section {
background: var(--bg-light);
padding: 15px 0;
}
.breadcrumb-section .breadcrumb {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
}
.breadcrumb-section .breadcrumb a {
color: var(--text-color);
}
.breadcrumb-section .breadcrumb span {
color: var(--text-muted);
}
/* =====================================================
MODAL
===================================================== */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
padding: 20px;
}
.modal.active {
opacity: 1;
visibility: visible;
}
.modal-dialog {
width: 100%;
max-width: 500px;
}
.modal-dialog.modal-lg {
max-width: 800px;
}
.modal-content {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
transform: translateY(-30px);
transition: var(--transition-normal);
}
.modal.active .modal-content {
transform: translateY(0);
}
.modal-close {
position: absolute;
top: 15px;
right: 15px;
width: 35px;
height: 35px;
background: var(--bg-light);
border: none;
border-radius: var(--radius-full);
font-size: 1rem;
cursor: pointer;
z-index: 10;
transition: var(--transition-normal);
}
.modal-close:hover {
background: var(--danger-color);
color: #fff;
}
.modal-header {
padding: 30px 30px 0;
text-align: center;
}
.modal-header.success {
color: var(--success-color);
}
.modal-header.success i {
font-size: 4rem;
}
.modal-body {
padding: 25px 30px;
}
.modal-footer {
padding: 0 30px 30px;
text-align: center;
}
/* =====================================================
PAGINATION
===================================================== */
.pagination-wrapper {
margin-top: 50px;
}
.pagination-nav .pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.pagination .page-item .page-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 15px;
background: #fff;
border: 2px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-color);
font-weight: 500;
text-decoration: none;
transition: var(--transition-normal);
}
.pagination .page-item .page-link:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.pagination .page-item.active .page-link {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.pagination .page-item.disabled .page-link {
background: var(--bg-light);
color: var(--text-muted);
cursor: not-allowed;
}
.pagination .page-item .page-link.prev,
.pagination .page-item .page-link.next {
gap: 8px;
}
/* =====================================================
ERROR PAGE
===================================================== */
.error-section {
padding: 100px 0;
}
.error-content {
max-width: 600px;
margin: 0 auto;
}
.error-content .error-icon {
font-size: 5rem;
color: var(--warning-color);
margin-bottom: 20px;
}
.error-content .error-code {
font-size: 8rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1;
margin-bottom: 20px;
}
.error-content h2 {
font-size: 2rem;
margin-bottom: 15px;
}
.error-content p {
color: var(--text-muted);
margin-bottom: 30px;
}
.error-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
}
.error-contact .phone-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 1.3rem;
font-weight: 600;
color: var(--primary-color);
}
/* =====================================================
THANK YOU PAGE
===================================================== */
.thank-you-section {
padding: 80px 0;
}
.thank-you-content {
max-width: 700px;
margin: 0 auto;
}
.thank-you-card {
background: #fff;
padding: 50px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
text-align: center;
}
.thank-you-card.success-card {
border-top: 5px solid var(--success-color);
}
.thank-you-card .success-icon,
.thank-you-card .info-icon {
font-size: 5rem;
margin-bottom: 25px;
}
.thank-you-card .success-icon {
color: var(--success-color);
}
.thank-you-card .info-icon {
color: var(--info-color);
}
.thank-you-card h1 {
font-size: 2.2rem;
margin-bottom: 15px;
}
.thank-you-card .lead-text {
font-size: 1.1rem;
color: var(--text-light);
margin-bottom: 30px;
}
.confirmation-details {
display: flex;
flex-direction: column;
gap: 20px;
text-align: left;
margin-bottom: 30px;
}
.confirmation-details .detail-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px;
background: var(--bg-light);
border-radius: var(--radius-md);
}
.confirmation-details .detail-item i {
font-size: 1.5rem;
color: var(--primary-color);
margin-top: 3px;
}
.confirmation-details .detail-item strong {
display: block;
color: var(--heading-color);
margin-bottom: 3px;
}
.confirmation-details .detail-item span {
color: var(--text-muted);
font-size: 0.9rem;
}
.urgent-contact {
padding: 20px;
background: rgba(var(--primary-rgb), 0.1);
border-radius: var(--radius-md);
margin-bottom: 30px;
}
.urgent-contact p {
margin-bottom: 15px;
color: var(--text-muted);
}
.urgent-buttons {
display: flex;
justify-content: center;
gap: 15px;
}
.next-steps {
text-align: left;
margin-bottom: 30px;
}
.next-steps h3 {
text-align: center;
margin-bottom: 25px;
}
.steps-timeline {
display: flex;
flex-direction: column;
gap: 20px;
}
.steps-timeline .step {
display: flex;
gap: 20px;
position: relative;
}
.steps-timeline .step::before {
content: '';
position: absolute;
left: 20px;
top: 50px;
width: 2px;
height: calc(100% + 20px);
background: var(--border-color);
}
.steps-timeline .step:last-child::before {
display: none;
}
.steps-timeline .step-number {
width: 40px;
height: 40px;
background: var(--primary-color);
color: #fff;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
flex-shrink: 0;
position: relative;
z-index: 2;
}
.steps-timeline .step-content strong {
display: block;
color: var(--heading-color);
margin-bottom: 3px;
}
.steps-timeline .step-content p {
color: var(--text-muted);
margin-bottom: 0;
font-size: 0.95rem;
}
.explore-more {
padding-top: 20px;
border-top: 1px solid var(--border-light);
}
.explore-more p {
margin-bottom: 15px;
color: var(--text-muted);
}
.explore-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
/* =====================================================
LOADING STATES
===================================================== */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* =====================================================
ANIMATIONS
===================================================== */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.animate-fadeIn {
animation: fadeIn 0.5s ease forwards;
}
.animate-fadeInUp {
animation: fadeInUp 0.5s ease forwards;
}
/* =====================================================
SCROLLBAR STYLING
===================================================== */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg-light);
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
/* =====================================================
FIX LAYER: HEADER, FOOTER, LAYOUT NORMALIZATION
Paste this at the END of style.css
===================================================== */
/* --- BASIC LAYOUT NORMALIZATION --- */
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* Ensure main content has some bottom padding above footer */
.main-content {
padding-bottom: 40px;
}
/* =====================================================
HEADER FIX
===================================================== */
/* Header main row must stay in one line on desktop */
.main-header {
position: sticky;
top: 0;
left: 0;
right: 0;
background: #fff;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
height: var(--header-height, 80px);
}
/* Logo kept compact */
.logo {
flex-shrink: 0;
}
/* Navigation takes remaining space but not overflow */
.main-nav {
flex: 1;
}
.nav-menu {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
}
/* Header right: search + phone + CTA + mobile toggle */
.header-right {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
/* Phone block */
.header-phone {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.header-phone .phone-icon {
width: 38px;
height: 38px;
border-radius: 999px;
background: rgba(230,81,0,0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color, #e65100);
font-size: 0.95rem;
}
.header-phone .phone-text {
display: flex;
flex-direction: column;
}
.header-phone .phone-label {
font-size: 0.7rem;
color: var(--text-muted, #9e9e9e);
}
.header-phone .phone-number {
font-size: 0.9rem;
font-weight: 600;
color: var(--heading-color, #1a1a2e);
}
/* CTA button in header */
.header-cta {
padding: 10px 20px;
font-size: 0.9rem;
}
/* Mobile menu toggle only on tablet/mobile */
.mobile-menu-toggle {
display: none;
width: 40px;
height: 40px;
border-radius: 999px;
border: none;
background: var(--bg-light, #f8f9fa);
padding: 8px;
cursor: pointer;
}
/* =====================================================
HEADER SEARCH – INLINE & NON-BREAKING
===================================================== */
/* This assumes markup:
If you used the dropdown version, it will still look fine. */
.header-search {
position: relative;
flex-shrink: 0;
}
.header-search-form {
display: flex;
align-items: center;
gap: 0;
border-radius: 20px;
overflow: hidden;
border: 1px solid var(--border-color, #e0e0e0);
background: #fff;
}
/* Inline input without stretching header */
.header-search-form input[type="text"],
.header-search-form input[type="search"] {
width: 160px;
max-width: 200px;
border: none;
padding: 7px 10px;
font-size: 0.85rem;
outline: none;
}
.header-search-form button {
width: 32px;
height: 32px;
border: none;
background: var(--primary-color, #e65100);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* If you kept the toggle-style dropdown from earlier, ensure it's not visible by default */
.search-dropdown {
position: absolute;
top: 110%;
right: 0;
width: 260px;
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 30px rgba(0,0,0,.15);
padding: 10px 12px 8px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: 0.25s ease;
z-index: 50;
}
.search-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.search-toggle {
width: 36px;
height: 36px;
border-radius: 999px;
border: none;
background: var(--bg-light, #f8f9fa);
color: var(--text-color, #4a4a4a);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* Ensure any bare inside header doesn't break layout */
.main-header input[type="text"],
.main-header input[type="search"] {
max-height: 34px;
}
/* =====================================================
FOOTER FIX
===================================================== */
.main-footer {
background: var(--bg-dark, #1a1a2e);
color: rgba(255,255,255,0.85);
margin-top: 40px;
}
/* Top CTA strip */
.footer-cta {
background: linear-gradient(135deg, var(--primary-color, #e65100), var(--primary-dark, #bf360c));
padding: 28px 0;
}
.footer-cta-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.footer-cta-text h3 {
color: #fff;
font-size: 1.3rem;
margin-bottom: 4px;
}
.footer-cta-text p {
color: rgba(255,255,255,0.9);
margin: 0;
}
.footer-cta-buttons {
display: flex;
gap: 10px;
}
/* Main footer grid (columns) */
.footer-main {
padding: 50px 0 30px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
gap: 30px;
}
/* Columns */
.footer-column {
font-size: 0.9rem;
}
/* About column on left */
.footer-about .footer-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.footer-about .footer-logo i {
font-size: 2.4rem;
color: var(--primary-color, #e65100);
}
.footer-about .footer-logo-name {
display: block;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
}
.footer-about .footer-logo-tagline {
display: block;
font-size: 0.8rem;
color: var(--primary-color, #e65100);
}
.footer-description {
color: rgba(255,255,255,0.8);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 14px;
}
/* Badges in about column */
.footer-trust-badges {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 14px;
}
.footer-trust-badges .trust-badge {
display: flex;
align-items: center;
gap: 8px;
}
.footer-trust-badges .trust-badge i {
color: var(--primary-color, #e65100);
}
.footer-trust-badges .trust-badge strong {
display: block;
color: #fff;
font-size: 1rem;
}
.footer-trust-badges .trust-badge span {
display: block;
font-size: 0.75rem;
color: rgba(255,255,255,0.6);
}
/* Social icons */
.footer-social {
display: flex;
gap: 10px;
}
.footer-social a {
width: 34px;
height: 34px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.footer-social a:hover {
background: var(--primary-color, #e65100);
}
/* Column titles */
.footer-title {
color: #fff;
font-size: 1rem;
margin-bottom: 10px;
position: relative;
padding-bottom: 6px;
}
.footer-title::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 34px;
height: 2px;
border-radius: 2px;
background: var(--primary-color, #e65100);
}
/* Lists */
.footer-links li {
margin-bottom: 6px;
}
.footer-links a {
display: flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,0.75);
font-size: 0.9rem;
}
.footer-links a i {
font-size: 0.7rem;
color: var(--primary-color, #e65100);
}
.footer-links a:hover {
color: var(--primary-color, #e65100);
}
/* Contact list */
.footer-contact-list li {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.footer-contact-list .contact-icon {
width: 32px;
height: 32px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color, #e65100);
}
.footer-contact-list .contact-text strong {
display: block;
color: #fff;
font-size: 0.9rem;
}
.footer-contact-list .contact-text span,
.footer-contact-list .contact-text a {
display: block;
font-size: 0.8rem;
color: rgba(255,255,255,0.7);
}
/* Mini form in contact column */
.footer-mini-form {
margin-top: 10px;
}
.footer-mini-form input[type="text"],
.footer-mini-form input[type="tel"] {
width: 100%;
padding: 8px 10px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.3);
background: rgba(255,255,255,0.05);
color: #fff;
font-size: 0.85rem;
margin-bottom: 8px;
}
.footer-mini-form input::placeholder {
color: rgba(255,255,255,0.6);
}
/* Footer bottom bar */
.footer-bottom {
background: rgba(0,0,0,0.25);
padding: 12px 0;
font-size: 0.8rem;
}
.footer-bottom-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.footer-bottom-links {
display: flex;
gap: 14px;
}
.footer-bottom-links a {
color: rgba(255,255,255,0.7);
}
.footer-bottom-links a:hover {
color: var(--primary-color, #e65100);
}
/* =====================================================
STICKY FORM & OVERLAYS – SAFETY
===================================================== */
/* Panel hidden left until active */
.sticky-form-panel {
position: fixed;
top: 0;
left: -380px;
width: 360px;
max-width: 100%;
height: 100%;
background: #fff;
box-shadow: 0 10px 40px rgba(0,0,0,.35);
z-index: 950;
transition: 0.35s ease;
overflow-y: auto;
}
.sticky-form-panel.active {
left: 0;
}
.sticky-form-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
z-index: 940;
opacity: 0;
visibility: hidden;
transition: 0.25s ease;
}
.sticky-form-overlay.active {
opacity: 1;
visibility: visible;
}
/* Make sure overlay is completely hidden when not active */
.sticky-form-overlay:not(.active) {
pointer-events: none;
}
/* =====================================================
RESPONSIVE TWEAKS FOR HEADER / FOOTER
===================================================== */
@media (max-width: 1024px) {
.header-content {
gap: 10px;
}
.header-right {
gap: 8px;
}
.header-phone {
display: none; /* hide phone on tablet, keep CTA & menu */
}
}
@media (max-width: 768px) {
.main-header {
position: fixed;
top: 0;
}
.main-content {
padding-top: var(--header-height,80px);
}
.header-cta {
display: none; /* CTA moved to sticky form & hero */
}
.mobile-menu-toggle {
display: flex;
}
.footer-cta-content {
flex-direction: column;
text-align: center;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.footer-about {
grid-column: 1 / -1;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 480px) {
.footer-grid {
grid-template-columns: 1fr;
}
.footer-cta-buttons {
flex-direction: column;
width: 100%;
}
.footer-cta-buttons .btn {
width: 100%;
justify-content: center;
}
}
/* =====================================================
GALLERY PAGE STYLES
===================================================== */
/* Gallery Stats */
.gallery-stats-section {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
padding: 40px 0;
margin-top: -50px;
position: relative;
z-index: 10;
border-radius: 15px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.gallery-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
text-align: center;
color: #fff;
}
.gallery-stats-grid .stat-item {
padding: 15px;
}
.gallery-stats-grid .stat-icon {
font-size: 2rem;
margin-bottom: 10px;
opacity: 0.9;
}
.gallery-stats-grid .stat-value {
font-size: 2.5rem;
font-weight: 700;
}
.gallery-stats-grid .stat-label {
font-size: 0.95rem;
opacity: 0.9;
}
/* Gallery Filters */
.gallery-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 30px;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
}
.gallery-filters .filter-label {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--text-color);
}
.gallery-filters .filter-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery-filters .filter-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 30px;
color: var(--text-color);
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
}
.gallery-filters .filter-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.gallery-filters .filter-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.gallery-filters .filter-btn .count {
background: rgba(0,0,0,0.1);
padding: 2px 8px;
border-radius: 15px;
font-size: 0.85rem;
}
.gallery-filters .filter-btn.active .count {
background: rgba(255,255,255,0.2);
}
/* Gallery Masonry Grid */
.gallery-masonry-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.gallery-item {
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.gallery-item.featured {
grid-column: span 2;
grid-row: span 2;
}
.gallery-image {
position: relative;
width: 100%;
padding-top: 100%;
overflow: hidden;
}
.gallery-item.featured .gallery-image {
padding-top: 100%;
}
.gallery-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image img {
transform: scale(1.1);
}
.featured-badge {
position: absolute;
top: 15px;
left: 15px;
background: linear-gradient(135deg, #f1c40f, #f39c12);
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
z-index: 5;
display: flex;
align-items: center;
gap: 5px;
}
/* Gallery Overlay */
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.overlay-content {
color: #fff;
}
.overlay-content h4 {
font-size: 1.2rem;
margin-bottom: 8px;
}
.overlay-content .item-category,
.overlay-content .item-location {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
margin-bottom: 5px;
opacity: 0.9;
}
.overlay-actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
.overlay-actions .action-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
color: #fff;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.overlay-actions .action-btn:hover {
background: var(--primary-color);
transform: scale(1.1);
}
.overlay-actions .whatsapp-btn:hover {
background: #25d366;
}
/* Gallery Caption */
.gallery-caption {
padding: 15px;
background: #fff;
}
.gallery-caption h5 {
font-size: 1rem;
margin-bottom: 5px;
color: var(--heading-color);
}
.gallery-caption .caption-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
font-size: 0.85rem;
color: #666;
}
.gallery-caption .caption-meta span {
display: flex;
align-items: center;
gap: 5px;
}
/* =====================================================
CUSTOM LIGHTBOX STYLES
===================================================== */
.custom-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: none;
}
.custom-lightbox.active {
display: block;
}
.lightbox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.95);
}
.lightbox-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 20px 100px;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border: none;
background: rgba(255,255,255,0.1);
color: #fff;
font-size: 1.5rem;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.lightbox-close:hover {
background: var(--primary-color);
transform: rotate(90deg);
}
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border: none;
background: rgba(255,255,255,0.1);
color: #fff;
font-size: 1.2rem;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
.lightbox-prev:hover,
.lightbox-next:hover {
background: var(--primary-color);
}
.lightbox-image-wrapper {
max-width: 90%;
max-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.lightbox-image-wrapper img {
max-width: 100%;
max-height: 70vh;
object-fit: contain;
border-radius: 5px;
transition: opacity 0.3s ease;
}
.lightbox-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 2rem;
display: none;
}
.lightbox-caption {
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #fff;
}
.lightbox-caption h4 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.lightbox-counter {
font-size: 0.9rem;
opacity: 0.7;
}
.lightbox-actions {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
/* =====================================================
BEFORE/AFTER SLIDER STYLES
===================================================== */
.before-after-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.before-after-item {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.ba-slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
cursor: ew-resize;
}
.ba-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ba-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ba-image.before {
z-index: 2;
clip-path: inset(0 50% 0 0);
}
.ba-image.after {
z-index: 1;
}
.ba-slider-handle {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: #fff;
z-index: 3;
cursor: ew-resize;
}
.handle-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.8rem;
box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.handle-icon i:first-child {
margin-right: 3px;
}
.ba-slider::before,
.ba-slider::after {
position: absolute;
top: 15px;
padding: 5px 12px;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: 0.8rem;
border-radius: 5px;
z-index: 4;
}
.ba-slider::before {
content: attr(data-before);
left: 15px;
}
.ba-slider::after {
content: attr(data-after);
right: 15px;
}
.ba-caption {
padding: 15px;
background: #fff;
text-align: center;
}
.ba-caption h4 {
font-size: 1rem;
margin-bottom: 5px;
}
.ba-caption p {
color: #666;
font-size: 0.9rem;
}
/* =====================================================
PROJECT INFO MODAL
===================================================== */
.gallery-modal .modal-dialog {
max-width: 900px;
}
.project-modal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.project-modal-image img {
width: 100%;
border-radius: 10px;
}
.project-modal-details h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.project-meta {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.project-meta .meta-item {
display: flex;
align-items: center;
gap: 10px;
color: #666;
}
.project-meta .meta-item i {
color: var(--primary-color);
width: 20px;
}
.project-actions {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.project-trust {
border-top: 1px solid #eee;
padding-top: 20px;
}
.project-trust .trust-item {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
color: #28a745;
}
/* =====================================================
TESTIMONIALS PAGE STYLES
===================================================== */
.google-rating-section {
margin-top: -40px;
position: relative;
z-index: 10;
padding: 0 15px;
}
.google-rating-card {
background: #fff;
border-radius: 15px;
padding: 30px 40px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: space-between;
max-width: 800px;
margin: 0 auto;
}
.rating-left {
display: flex;
align-items: center;
gap: 20px;
}
.google-logo {
height: 40px;
}
.rating-stars {
color: #fbbc04;
font-size: 1.5rem;
margin-bottom: 5px;
}
.rating-numbers {
display: flex;
align-items: center;
gap: 10px;
}
.rating-value {
font-size: 2rem;
font-weight: 700;
color: var(--heading-color);
}
.rating-text {
color: #666;
}
/* Testimonials Stats */
.testimonials-stats-section {
padding: 60px 0;
background: #f8f9fa;
}
.testimonials-stats-section .stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.testimonials-stats-section .stat-card {
text-align: center;
padding: 25px;
background: #fff;
border-radius: 10px;
box-shadow: 0 3px 15px rgba(0,0,0,0.05);
}
.testimonials-stats-section .stat-icon {
font-size: 2rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.testimonials-stats-section .stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--heading-color);
}
.testimonials-stats-section .stat-label {
color: #666;
}
/* Testimonials Filters */
.testimonials-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.testimonials-filters .filter-btn {
padding: 10px 25px;
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 30px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.testimonials-filters .filter-btn:hover,
.testimonials-filters .filter-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
/* Testimonials Grid */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.testimonial-card {
background: #fff;
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}
.testimonial-header {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}
.customer-avatar {
width: 60px;
height: 60px;
flex-shrink: 0;
}
.customer-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
border-radius: 50%;
}
.customer-info {
flex: 1;
}
.customer-info h4 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.customer-location {
color: #666;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 5px;
}
.review-rating {
color: #ddd;
}
.review-rating .fa-star.active {
color: #fbbc04;
}
.testimonial-content {
position: relative;
margin-bottom: 20px;
}
.testimonial-content .quote-icon {
color: var(--primary-color);
opacity: 0.3;
font-size: 2rem;
position: absolute;
top: -10px;
left: -5px;
}
.testimonial-content p {
position: relative;
z-index: 1;
color: #555;
line-height: 1.7;
padding-left: 30px;
}
.testimonial-project {
background: #f8f9fa;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 15px;
}
.project-label {
color: #888;
font-size: 0.85rem;
}
.project-type {
font-weight: 600;
color: var(--primary-color);
}
.testimonial-footer {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.verified-badge {
display: inline-flex;
align-items: center;
gap: 5px;
color: #28a745;
font-size: 0.85rem;
}
.testimonial-footer .featured-badge {
color: #f1c40f;
font-size: 0.85rem;
}
/* Video Testimonials */
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.video-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.video-thumbnail {
position: relative;
padding-top: 56.25%;
}
.video-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background: var(--primary-color);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.play-button:hover {
background: var(--primary-dark);
transform: translate(-50%, -50%) scale(1.1);
}
.video-info {
padding: 20px;
background: #fff;
}
.video-info h4 {
font-size: 1rem;
margin-bottom: 5px;
}
.video-info p {
color: #666;
font-size: 0.9rem;
}
/* Submit Review Section */
.submit-review-section {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
padding: 60px 0;
text-align: center;
color: #fff;
}
.submit-review-content .review-icon {
font-size: 3rem;
margin-bottom: 20px;
opacity: 0.9;
}
.submit-review-content h2 {
font-size: 2rem;
margin-bottom: 15px;
}
.submit-review-content p {
opacity: 0.9;
max-width: 600px;
margin: 0 auto 30px;
}
/* Responsive Styles */
@media (max-width: 1024px) {
.gallery-masonry-grid {
grid-template-columns: repeat(3, 1fr);
}
.gallery-item.featured {
grid-column: span 2;
}
.before-after-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid,
.video-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.gallery-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-masonry-grid {
grid-template-columns: repeat(2, 1fr);
}
.gallery-item.featured {
grid-column: span 1;
grid-row: span 1;
}
.gallery-filters {
flex-direction: column;
align-items: stretch;
}
.gallery-filters .filter-buttons {
justify-content: center;
}
.before-after-grid {
grid-template-columns: 1fr;
}
.project-modal-grid {
grid-template-columns: 1fr;
}
.google-rating-card {
flex-direction: column;
gap: 20px;
text-align: center;
}
.rating-left {
flex-direction: column;
}
.testimonials-stats-section .stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid,
.video-grid {
grid-template-columns: 1fr;
}
.lightbox-prev,
.lightbox-next {
width: 40px;
height: 40px;
}
}
@media (max-width: 480px) {
.gallery-stats-grid {
grid-template-columns: 1fr;
}
.gallery-masonry-grid {
grid-template-columns: 1fr;
}
.testimonials-stats-section .stats-grid {
grid-template-columns: 1fr;
}
}
/* =====================================================
BLOG PAGE STYLES
===================================================== */
/* Featured Post */
.featured-post-section {
padding: 60px 0;
background: #f8f9fa;
}
.featured-post-card {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}
.featured-post-image {
position: relative;
min-height: 400px;
}
.featured-post-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.featured-post-image .featured-badge {
position: absolute;
top: 20px;
left: 20px;
background: linear-gradient(135deg, #f1c40f, #f39c12);
color: #fff;
padding: 8px 15px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
}
.featured-post-content {
padding: 40px 40px 40px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.featured-post-content .post-category {
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.85rem;
margin-bottom: 15px;
text-decoration: none;
}
.featured-post-content .post-title {
font-size: 1.8rem;
margin-bottom: 15px;
line-height: 1.3;
}
.featured-post-content .post-title a {
color: var(--heading-color);
text-decoration: none;
}
.featured-post-content .post-title a:hover {
color: var(--primary-color);
}
.featured-post-content .post-excerpt {
color: #666;
margin-bottom: 20px;
line-height: 1.7;
}
.featured-post-content .post-meta {
display: flex;
gap: 20px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.post-meta .meta-item {
display: flex;
align-items: center;
gap: 8px;
color: #888;
font-size: 0.9rem;
}
.post-meta .meta-item i {
color: var(--primary-color);
}
/* Blog Page Layout */
.blog-page-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
}
/* Blog Toolbar */
.blog-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding: 15px 20px;
background: #f8f9fa;
border-radius: 10px;
}
.blog-search-form {
display: flex;
gap: 0;
}
.blog-search-form input {
padding: 10px 15px;
border: 1px solid #e0e0e0;
border-right: none;
border-radius: 5px 0 0 5px;
width: 200px;
}
.blog-search-form button {
padding: 10px 20px;
background: var(--primary-color);
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
/* Category Pills */
.category-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.category-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 25px;
color: var(--text-color);
font-size: 0.9rem;
text-decoration: none;
transition: all 0.3s ease;
}
.category-pill:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.category-pill.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.category-pill .count {
background: rgba(0,0,0,0.1);
padding: 2px 8px;
border-radius: 15px;
font-size: 0.8rem;
}
.category-pill.active .count {
background: rgba(255,255,255,0.2);
}
/* Blog Grid */
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.blog-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.blog-card-image {
position: relative;
padding-top: 60%;
overflow: hidden;
}
.blog-card-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-card:hover .blog-card-image img {
transform: scale(1.05);
}
.blog-card-image .card-badge {
position: absolute;
top: 15px;
left: 15px;
background: linear-gradient(135deg, #f1c40f, #f39c12);
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
}
.blog-card-image .card-category {
position: absolute;
bottom: 15px;
left: 15px;
background: var(--primary-color);
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
text-decoration: none;
}
.blog-card-content {
padding: 25px;
}
.blog-card-meta {
display: flex;
gap: 15px;
margin-bottom: 12px;
}
.blog-card-meta span {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.85rem;
color: #888;
}
.blog-card-title {
font-size: 1.15rem;
margin-bottom: 12px;
line-height: 1.4;
}
.blog-card-title a {
color: var(--heading-color);
text-decoration: none;
}
.blog-card-title a:hover {
color: var(--primary-color);
}
.blog-card-excerpt {
color: #666;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 15px;
}
.read-more-link {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
}
.read-more-link:hover {
gap: 10px;
}
/* Blog Sidebar Widgets */
.blog-sidebar .sidebar-widget {
background: #fff;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
box-shadow: 0 3px 15px rgba(0,0,0,0.05);
}
.sidebar-widget .widget-title {
font-size: 1.1rem;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-widget .widget-title i {
color: var(--primary-color);
}
/* Recent Posts Widget */
.recent-posts-list {
list-style: none;
padding: 0;
margin: 0;
}
.recent-post-item {
display: flex;
gap: 15px;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.recent-post-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.recent-post-item .post-thumb {
width: 70px;
height: 70px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.recent-post-item .post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recent-post-item .post-info {
flex: 1;
}
.recent-post-item .post-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--heading-color);
text-decoration: none;
display: block;
margin-bottom: 5px;
line-height: 1.4;
}
.recent-post-item .post-title:hover {
color: var(--primary-color);
}
.recent-post-item .post-date {
font-size: 0.8rem;
color: #888;
}
/* Popular Posts Widget */
.popular-post-item {
display: flex;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid #f0f0f0;
align-items: flex-start;
}
.popular-post-item:last-child {
border-bottom: none;
}
.popular-post-item .post-number {
font-size: 1.8rem;
font-weight: 700;
color: #e0e0e0;
line-height: 1;
}
.popular-post-item .post-views {
font-size: 0.8rem;
color: #888;
}
/* Tags Widget */
.tags-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tags-cloud .tag {
padding: 6px 14px;
background: #f5f5f5;
border-radius: 20px;
font-size: 0.85rem;
color: #666;
text-decoration: none;
transition: all 0.3s ease;
}
.tags-cloud .tag:hover {
background: var(--primary-color);
color: #fff;
}
/* CTA Widget */
.sidebar-widget.cta-widget {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
}
.cta-widget .cta-content {
text-align: center;
}
.cta-widget .cta-icon {
font-size: 2.5rem;
margin-bottom: 15px;
opacity: 0.9;
}
.cta-widget h3 {
font-size: 1.3rem;
margin-bottom: 10px;
}
.cta-widget p {
opacity: 0.9;
margin-bottom: 20px;
}
/* =====================================================
BLOG DETAIL PAGE STYLES
===================================================== */
.blog-detail-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 40px;
}
.blog-header {
margin-bottom: 30px;
}
.blog-header .blog-category {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--primary-color);
color: #fff;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.85rem;
text-decoration: none;
margin-bottom: 15px;
}
.blog-header .blog-title {
font-size: 2.2rem;
line-height: 1.3;
margin-bottom: 20px;
color: var(--heading-color);
}
.blog-header .blog-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
}
.blog-meta .author {
display: flex;
align-items: center;
gap: 12px;
}
.blog-meta .author-avatar {
width: 45px;
height: 45px;
background: var(--primary-color);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.blog-meta .author-info {
display: flex;
flex-direction: column;
}
.blog-meta .author-name {
font-weight: 600;
color: var(--heading-color);
}
.blog-meta .author-title {
font-size: 0.85rem;
color: #888;
}
/* Blog Featured Image */
.blog-featured-image {
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
}
.blog-featured-image img {
width: 100%;
height: auto;
}
/* Blog Content */
.blog-content {
font-size: 1.05rem;
line-height: 1.8;
color: #444;
}
.blog-content h2 {
font-size: 1.6rem;
margin: 35px 0 20px;
color: var(--heading-color);
}
.blog-content h3 {
font-size: 1.3rem;
margin: 30px 0 15px;
color: var(--heading-color);
}
.blog-content p {
margin-bottom: 20px;
}
.blog-content ul, .blog-content ol {
margin-bottom: 20px;
padding-left: 25px;
}
.blog-content li {
margin-bottom: 10px;
}
.blog-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
}
.blog-content blockquote {
background: #f8f9fa;
border-left: 4px solid var(--primary-color);
padding: 20px 25px;
margin: 25px 0;
font-style: italic;
color: #555;
}
/* Blog Tags */
.blog-tags {
display: flex;
align-items: center;
gap: 15px;
padding: 25px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
margin: 30px 0;
flex-wrap: wrap;
}
.tags-label {
font-weight: 600;
color: var(--heading-color);
display: flex;
align-items: center;
gap: 8px;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tags-list .tag {
padding: 5px 12px;
background: #f5f5f5;
border-radius: 20px;
font-size: 0.85rem;
color: #666;
text-decoration: none;
}
.tags-list .tag:hover {
background: var(--primary-color);
color: #fff;
}
/* Blog Share */
.blog-share {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
}
.share-label {
font-weight: 600;
}
.share-buttons {
display: flex;
gap: 10px;
}
.share-btn {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.share-btn.facebook { background: #3b5998; }
.share-btn.twitter { background: #1da1f2; }
.share-btn.linkedin { background: #0077b5; }
.share-btn.whatsapp { background: #25d366; }
.share-btn.pinterest { background: #bd081c; }
.share-btn.copy { background: #666; }
.share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Author Box */
.author-box {
display: flex;
gap: 25px;
background: #f8f9fa;
padding: 30px;
border-radius: 12px;
margin-bottom: 30px;
}
.author-box .author-avatar {
width: 100px;
height: 100px;
background: var(--primary-color);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
flex-shrink: 0;
}
.author-box .author-info h4 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.author-box .author-title {
color: var(--primary-color);
font-size: 0.9rem;
margin-bottom: 10px;
}
.author-box .author-bio {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
.author-box .author-contact {
display: flex;
gap: 10px;
}
/* Blog CTA Box */
.blog-cta-box {
display: flex;
align-items: center;
gap: 25px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
padding: 30px;
border-radius: 12px;
color: #fff;
margin-bottom: 30px;
}
.blog-cta-box .cta-icon {
font-size: 3rem;
opacity: 0.9;
}
.blog-cta-box .cta-content {
flex: 1;
}
.blog-cta-box .cta-content h3 {
font-size: 1.3rem;
margin-bottom: 5px;
}
.blog-cta-box .cta-content p {
opacity: 0.9;
}
.blog-cta-box .cta-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Post Navigation */
.post-navigation {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #eee;
}
.post-navigation .nav-link {
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s ease;
}
.post-navigation .nav-link:hover {
background: #eee;
}
.post-navigation .nav-link.next {
text-align: right;
}
.post-navigation .nav-label {
display: block;
font-size: 0.85rem;
color: #888;
margin-bottom: 5px;
}
.post-navigation .nav-title {
font-weight: 600;
color: var(--heading-color);
}
/* Related Posts */
.related-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
/* Table of Contents */
.toc-widget .toc-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.toc-widget .toc-nav li {
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.toc-widget .toc-nav li:last-child {
border-bottom: none;
}
.toc-widget .toc-nav li.toc-sub {
padding-left: 20px;
}
.toc-widget .toc-nav a {
color: #666;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.toc-widget .toc-nav a:hover,
.toc-widget .toc-nav a.active {
color: var(--primary-color);
}
/* Reading Progress Bar */
.reading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #eee;
z-index: 9999;
}
.reading-progress .progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
width: 0;
transition: width 0.1s ease;
}
/* =====================================================
FAQ PAGE STYLES
===================================================== */
.faq-search-section {
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
padding: 60px 0;
margin-top: -50px;
position: relative;
z-index: 10;
}
.faq-search-box {
max-width: 600px;
margin: 0 auto;
text-align: center;
color: #fff;
}
.faq-search-box h2 {
font-size: 2rem;
margin-bottom: 10px;
}
.faq-search-box p {
opacity: 0.9;
margin-bottom: 25px;
}
.faq-search-form {
display: flex;
gap: 0;
}
.faq-search-form input {
flex: 1;
padding: 15px 20px;
border: none;
border-radius: 8px 0 0 8px;
font-size: 1rem;
}
.faq-search-form button {
padding: 15px 30px;
background: #fff;
color: var(--primary-color);
border: none;
border-radius: 0 8px 8px 0;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
/* Quick Links */
.faq-quick-links-section {
padding: 60px 0;
}
.quick-links-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.quick-link-card {
text-align: center;
padding: 25px 15px;
background: #fff;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
text-decoration: none;
transition: all 0.3s ease;
}
.quick-link-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.quick-link-card .card-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin: 0 auto 15px;
}
.quick-link-card h3 {
font-size: 1rem;
margin-bottom: 5px;
color: var(--heading-color);
}
.quick-link-card p {
font-size: 0.85rem;
color: #888;
}
/* FAQ Layout */
.faq-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
}
/* FAQ Accordion */
.faq-category-section {
margin-bottom: 40px;
}
.category-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--primary-color);
}
.category-header h2 {
font-size: 1.4rem;
display: flex;
align-items: center;
gap: 10px;
}
.category-header h2 i {
color: var(--primary-color);
}
.category-header .faq-count {
background: var(--primary-color);
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
}
.faq-accordion {
display: flex;
flex-direction: column;
gap: 15px;
}
.faq-item {
background: #fff;
border-radius: 10px;
box-shadow: 0 3px 15px rgba(0,0,0,0.05);
overflow: hidden;
}
.faq-question {
width: 100%;
padding: 20px 25px;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-size: 1rem;
font-weight: 600;
color: var(--heading-color);
transition: all 0.3s ease;
}
.faq-question:hover {
background: #f8f9fa;
}
.faq-icon {
color: var(--primary-color);
transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer {
max-height: 500px;
}
.answer-content {
padding: 0 25px 20px;
color: #666;
line-height: 1.7;
}
.answer-footer {
padding: 15px 25px;
background: #f8f9fa;
display: flex;
align-items: center;
gap: 15px;
}
.helpful-buttons {
display: flex;
gap: 10px;
}
.helpful-btn {
padding: 5px 15px;
border: 1px solid #ddd;
border-radius: 20px;
background: #fff;
cursor: pointer;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.3s ease;
}
.helpful-btn.yes:hover {
border-color: #28a745;
color: #28a745;
}
.helpful-btn.no:hover {
border-color: #dc3545;
color: #dc3545;
}
.thank-you {
color: #28a745;
font-size: 0.9rem;
}
/* =====================================================
CONTACT PAGE STYLES
===================================================== */
.contact-info-section {
margin-top: -60px;
position: relative;
z-index: 10;
padding: 0 15px;
}
.contact-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1100px;
margin: 0 auto;
}
.contact-info-card {
background: #fff;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.contact-info-card:hover {
transform: translateY(-5px);
}
.contact-info-card .card-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
margin: 0 auto 15px;
}
.contact-info-card.whatsapp .card-icon {
background: linear-gradient(135deg, #25d366, #128c7e);
}
.contact-info-card h3 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.contact-info-card p {
color: #888;
font-size: 0.9rem;
margin-bottom: 10px;
}
.contact-info-card .contact-link {
font-size: 1.1rem;
font-weight: 600;
color: var(--primary-color);
text-decoration: none;
display: block;
margin-bottom: 5px;
}
.contact-info-card .availability {
font-size: 0.85rem;
color: #888;
}
/* Contact Layout */
.contact-layout {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 50px;
}
.contact-form-wrapper {
background: #fff;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.form-header {
margin-bottom: 30px;
}
.form-header h2 {
font-size: 1.6rem;
margin-bottom: 10px;
}
.form-header p {
color: #666;
}
/* Contact Form */
.contact-form .form-row {
margin-bottom: 20px;
}
.contact-form .form-row.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.contact-form .form-group label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-weight: 500;
color: var(--heading-color);
}
.contact-form .form-group label i {
color: var(--primary-color);
}
.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus {
border-color: var(--primary-color);
outline: none;
}
.checkbox-group {
display: flex;
align-items: center;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
/* Contact Sidebar */
.contact-sidebar {
display: flex;
flex-direction: column;
gap: 25px;
}
.owner-card {
background: #fff;
border-radius: 15px;
padding: 30px;
text-align: center;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.owner-card .owner-image {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin: 0 auto 15px;
}
.owner-card .owner-info h3 {
font-size: 1.2rem;
margin-bottom: 5px;
}
.owner-card .owner-info p {
color: var(--primary-color);
font-size: 0.9rem;
margin-bottom: 20px;
}
.owner-card .owner-contact {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.owner-card .owner-quote {
font-style: italic;
color: #666;
font-size: 0.95rem;
line-height: 1.6;
border-top: 1px solid #eee;
padding-top: 20px;
}
/* Working Hours Card */
.working-hours-card,
.quick-facts-card {
background: #fff;
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}
.working-hours-card h3,
.quick-facts-card h3 {
font-size: 1.1rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.working-hours-card h3 i,
.quick-facts-card h3 i {
color: var(--primary-color);
}
.hours-list {
list-style: none;
padding: 0;
margin: 0;
}
.hours-list li {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
.hours-list li:last-child {
border-bottom: none;
}
.hours-list li.note {
color: #888;
font-size: 0.9rem;
}
.facts-list {
list-style: none;
padding: 0;
margin: 0;
}
.facts-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
}
.facts-list li i {
color: #28a745;
}
/* Map Section */
.map-wrapper {
position: relative;
height: 450px;
}
.map-overlay {
position: absolute;
top: 50%;
left: 50px;
transform: translateY(-50%);
z-index: 10;
}
.map-info-card {
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
max-width: 300px;
}
.map-info-card h3 {
font-size: 1.1rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
color: var(--primary-color);
}
.map-info-card p {
color: #666;
margin-bottom: 5px;
}
/* Areas Grid */
.areas-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
.area-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: #fff;
border: 2px solid #e0e0e0;
border-radius: 30px;
font-size: 0.95rem;
color: var(--text-color);
transition: all 0.3s ease;
}
.area-tag:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.area-tag i {
color: var(--primary-color);
}
.area-tag.highlight {
background: var(--primary-color);
border-color: var(--primary-color);
color: #fff;
}
.area-tag.highlight i {
color: #fff;
}
/* =====================================================
RESPONSIVE STYLES
===================================================== */
@media (max-width: 1024px) {
.featured-post-card {
grid-template-columns: 1fr;
}
.featured-post-content {
padding: 30px;
}
.blog-page-layout,
.blog-detail-layout,
.faq-layout,
.contact-layout {
grid-template-columns: 1fr;
}
.blog-sidebar,
.faq-sidebar,
.contact-sidebar {
order: -1;
}
.quick-links-grid {
grid-template-columns: repeat(3, 1fr);
}
.contact-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.related-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.blog-grid {
grid-template-columns: 1fr;
}
.blog-header .blog-title {
font-size: 1.6rem;
}
.author-box {
flex-direction: column;
text-align: center;
}
.blog-cta-box {
flex-direction: column;
text-align: center;
}
.post-navigation {
grid-template-columns: 1fr;
}
.quick-links-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-info-grid {
grid-template-columns: 1fr;
}
.contact-form .form-row.two-col {
grid-template-columns: 1fr;
}
.related-posts-grid {
grid-template-columns: 1fr;
}
.map-overlay {
position: relative;
top: auto;
left: auto;
transform: none;
padding: 20px;
}
.map-wrapper {
height: auto;
}
.map-wrapper iframe {
height: 300px;
}
}
@media (max-width: 480px) {
.quick-links-grid {
grid-template-columns: 1fr;
}
.category-pills {
flex-direction: column;
}
.blog-toolbar {
flex-direction: column;
gap: 15px;
}
.faq-search-form {
flex-direction: column;
}
.faq-search-form input,
.faq-search-form button {
border-radius: 8px;
}
}