/**
* Izende Studio Web - New Design System
* Modern zen-themed design with nature-inspired elements
* Based on Material Design principles
* Fonts: Open Sans (body) + Raleway (headings) - existing fonts
*/
/*--------------------------------------------------------------
# CSS Variables - New Color Palette
--------------------------------------------------------------*/
:root {
/* Primary Brand Colors - Updated Green Palette */
--brand-primary: #34a853;
--brand-secondary: #0f9d58;
--brand-hover: #2d8e47;
--brand-light: #e4f5e8;
/* Text Colors */
--text-primary: #202124;
--text-secondary: #5f6368;
--text-muted: #80868b;
--text-on-brand: #ffffff;
/* Background Colors */
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #e4f5e8 100%);
/* UI Colors */
--border-color: #e9ecef;
--shadow-sm: 0 4px 20px rgba(0,0,0,0.04);
--shadow-md: 0 6px 24px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 30px rgba(0,0,0,0.08);
--shadow-brand: 0 4px 12px rgba(52, 168, 83, 0.15);
/* Spacing */
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 20px;
--spacing-lg: 30px;
--spacing-xl: 40px;
--spacing-2xl: 60px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 30px;
--radius-full: 50px;
/* Transitions */
--transition-fast: 0.2s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.4s ease;
}
/*--------------------------------------------------------------
# Page-Wide Zen Background Elements
--------------------------------------------------------------*/
body {
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 50%, #f8f9fa 100%),
radial-gradient(circle at 5% 15%, rgba(52, 168, 83, 0.15) 0%, transparent 40%),
radial-gradient(circle at 95% 25%, rgba(15, 157, 88, 0.12) 0%, transparent 35%),
radial-gradient(circle at 50% 50%, rgba(52, 168, 83, 0.06) 0%, transparent 60%),
radial-gradient(circle at 20% 80%, rgba(15, 157, 88, 0.10) 0%, transparent 45%),
radial-gradient(circle at 85% 75%, rgba(52, 168, 83, 0.08) 0%, transparent 50%) !important;
background-attachment: fixed !important;
}
a,
a:hover,
a:focus {
text-decoration: none !important;
}
/*--------------------------------------------------------------
# Full-Page Zen Decorations
--------------------------------------------------------------*/
.page-decorations {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 100vh !important;
z-index: 0 !important;
pointer-events: none !important;
overflow: visible !important;
}
/* Zen decorations positioned fixed in viewport */
.page-decoration-waterfall {
position: fixed !important;
right: 2% !important;
width: 280px !important;
height: 350px !important;
opacity: 0.35 !important;
z-index: 0 !important;
}
.page-decoration-waterfall.waterfall-1 {
top: 20% !important;
}
.page-decoration-waterfall.waterfall-2 {
top: 45% !important;
}
.page-decoration-waterfall.waterfall-3 {
top: 70% !important;
}
.page-decoration-mountains {
position: fixed !important;
right: 5% !important;
width: 450px !important;
height: 280px !important;
opacity: 0.30 !important;
z-index: 0 !important;
}
.page-decoration-mountains.mountains-1 {
top: 35% !important;
}
.page-decoration-mountains.mountains-2 {
top: 60% !important;
}
.page-decoration-clouds {
position: fixed !important;
left: 3% !important;
width: 320px !important;
height: 140px !important;
opacity: 0.28 !important;
z-index: 0 !important;
}
.page-decoration-clouds.clouds-1 {
top: 15% !important;
}
.page-decoration-clouds.clouds-2 {
top: 50% !important;
}
.page-decoration-clouds.clouds-3 {
top: 75% !important;
}
.page-decoration-bamboo {
position: fixed !important;
left: 1% !important;
width: 280px !important;
height: 280px !important;
opacity: 0.25 !important;
z-index: 0 !important;
}
.page-decoration-bamboo.bamboo-1 {
top: 40% !important;
}
.page-decoration-bamboo.bamboo-2 {
top: 65% !important;
}
/*--------------------------------------------------------------
# Section-Specific Zen Background Elements
--------------------------------------------------------------*/
.zen-pattern {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image:
radial-gradient(circle at 10% 20%, rgba(52, 168, 83, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(15, 157, 88, 0.05) 0%, transparent 50%) !important;
z-index: 0 !important;
pointer-events: none !important;
}
.zen-circle {
position: absolute !important;
border-radius: 50% !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.1), rgba(15, 157, 88, 0.05)) !important;
z-index: 0 !important;
pointer-events: none !important;
}
.zen-circle-1 {
width: 300px !important;
height: 300px !important;
top: -100px !important;
right: -100px !important;
}
.zen-circle-2 {
width: 200px !important;
height: 200px !important;
bottom: 100px !important;
left: -50px !important;
}
/*--------------------------------------------------------------
# Section Backgrounds with Green Gradient + Zen Images
--------------------------------------------------------------*/
/* Services Section - with waterfall */
#services {
position: relative !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.15) 0%, rgba(15, 157, 88, 0.10) 100%) !important;
overflow: hidden;
}
#services::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 400px;
height: 400px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
#services .container {
position: relative;
z-index: 1;
}
/* Stats Section - with mountains */
#stats {
position: relative !important;
background: linear-gradient(135deg, rgba(15, 157, 88, 0.12) 0%, rgba(52, 168, 83, 0.10) 100%) !important;
overflow: hidden;
}
#stats::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 500px;
height: 350px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
#stats .container {
position: relative;
z-index: 1;
}
/* Trust Badges/Why Choose Us Section - with clouds */
#trust-badges, .why-choose-us {
position: relative !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.13) 0%, rgba(15, 157, 88, 0.11) 100%) !important;
overflow: hidden;
}
#trust-badges::before, .why-choose-us::before {
content: '';
position: absolute;
right: 0;
top: 50px;
width: 380px;
height: 180px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
#trust-badges .container, .why-choose-us .container {
position: relative;
z-index: 1;
}
/* Testimonials Section - with bamboo */
#testimonials {
position: relative !important;
background: linear-gradient(135deg, rgba(15, 157, 88, 0.14) 0%, rgba(52, 168, 83, 0.09) 100%) !important;
overflow: hidden;
}
#testimonials::before {
content: '';
position: absolute;
left: 0;
bottom: 50px;
width: 320px;
height: 320px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
#testimonials .container {
position: relative;
z-index: 1;
}
/* Portfolio Section - with waterfall */
#portfolio {
position: relative !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.14) 0%, rgba(15, 157, 88, 0.12) 100%) !important;
overflow: hidden;
}
#portfolio::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 400px;
height: 400px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
#portfolio .container {
position: relative;
z-index: 1;
}
/* Blog/Latest Posts Section - with clouds */
#latest-posts, #blog {
position: relative !important;
background: linear-gradient(135deg, rgba(15, 157, 88, 0.13) 0%, rgba(52, 168, 83, 0.11) 100%) !important;
overflow: hidden;
}
#latest-posts::before, #blog::before {
content: '';
position: absolute;
left: 0;
top: 50px;
width: 380px;
height: 180px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
#latest-posts .container, #blog .container {
position: relative;
z-index: 1;
}
/* Contact Section - with mountains */
#contact {
position: relative !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.15) 0%, rgba(15, 157, 88, 0.13) 100%) !important;
overflow: hidden;
}
#contact::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 500px;
height: 350px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
#contact .container {
position: relative;
z-index: 1;
}
/*--------------------------------------------------------------
# Blog Page Styling
--------------------------------------------------------------*/
.blog-hero {
position: relative !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.15) 0%, rgba(15, 157, 88, 0.10) 100%) !important;
padding: 60px 0 !important;
overflow: hidden;
}
.blog-posts {
position: relative !important;
background: linear-gradient(135deg, rgba(15, 157, 88, 0.12) 0%, rgba(52, 168, 83, 0.10) 100%) !important;
overflow: hidden;
}
.blog-posts::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 500px;
height: 350px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
.blog-posts .container {
position: relative;
z-index: 1;
}
.blog-categories {
position: relative !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.13) 0%, rgba(15, 157, 88, 0.11) 100%) !important;
padding: 40px 0 !important;
overflow: hidden;
}
.blog-categories::before {
content: '';
position: absolute;
right: 0;
top: 50px;
width: 380px;
height: 180px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
.blog-categories .container {
position: relative;
z-index: 1;
}
.newsletter-signup {
position: relative !important;
background: linear-gradient(135deg, rgba(15, 157, 88, 0.14) 0%, rgba(52, 168, 83, 0.09) 100%) !important;
padding: 60px 0 !important;
overflow: hidden;
}
.newsletter-signup::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 320px;
height: 320px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
.newsletter-signup .container {
position: relative;
z-index: 1;
}
/*--------------------------------------------------------------
# Section Separators
--------------------------------------------------------------*/
.section-separator {
border: none !important;
height: 3px !important;
background: linear-gradient(90deg, transparent 0%, var(--brand-primary) 25%, var(--brand-secondary) 50%, var(--brand-primary) 75%, transparent 100%) !important;
margin: 20px 0 !important;
opacity: 0.6 !important;
}
/*--------------------------------------------------------------
# Section Spacing - Tightened
--------------------------------------------------------------*/
section {
padding: 40px 0 !important;
}
/*--------------------------------------------------------------
# Modern Card System
--------------------------------------------------------------*/
.card-modern {
background: var(--bg-primary);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-sm);
transition: all var(--transition-slow);
position: relative;
overflow: hidden;
}
.card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
}
.card-modern:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
/*--------------------------------------------------------------
# Service Cards
--------------------------------------------------------------*/
.service-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-2xl);
}
.service-card-new {
background: var(--bg-primary);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-sm);
transition: all var(--transition-slow);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.service-card-new::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
}
.service-card-new:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.service-icon-new {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
transition: all var(--transition-base);
}
.service-card-new:hover .service-icon-new {
transform: scale(1.05);
}
.service-icon-new .material-icons {
color: var(--text-on-brand);
font-size: 32px;
}
.service-title-new {
font-family: 'Raleway', sans-serif;
font-size: 20px;
font-weight: 500;
margin-bottom: var(--spacing-sm);
color: var(--text-primary);
}
.service-desc-new {
color: var(--text-secondary);
font-size: 14px;
margin-bottom: var(--spacing-md);
font-weight: 300;
line-height: 1.6;
flex-grow: 1;
}
.service-price-new {
font-size: 24px;
font-weight: 500;
color: var(--brand-primary);
margin-bottom: var(--spacing-md);
}
.service-price-new span {
font-size: 14px;
color: var(--text-secondary);
font-weight: 300;
}
/*--------------------------------------------------------------
# Modern Buttons
--------------------------------------------------------------*/
.btn-modern {
padding: 14px 28px;
border-radius: var(--radius-full);
font-weight: 500;
cursor: pointer;
transition: all var(--transition-base);
border: none;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
display: inline-block;
text-decoration: none;
text-align: center;
}
.btn-modern-primary {
background: var(--brand-primary);
color: var(--text-on-brand);
}
.btn-modern-primary:hover {
background: var(--brand-secondary);
transform: translateY(-2px);
box-shadow: var(--shadow-brand);
color: var(--text-on-brand);
}
.btn-modern-outline {
background: transparent;
color: var(--brand-primary);
border: 2px solid var(--brand-primary);
}
.btn-modern-outline:hover {
background: var(--brand-primary);
color: var(--text-on-brand);
}
.btn-modern-full {
width: 100%;
}
/*--------------------------------------------------------------
# Domain Search Bar
--------------------------------------------------------------*/
.domain-search-new {
display: flex;
max-width: 600px;
margin: 0 auto;
background: var(--bg-primary);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all var(--transition-base);
}
.domain-search-new:hover,
.domain-search-new:focus-within {
box-shadow: var(--shadow-md);
}
.domain-search-new input {
flex: 1;
border: none;
padding: 18px 24px;
font-size: 16px;
outline: none;
font-family: 'Open Sans', sans-serif;
}
.domain-search-new button {
background: var(--brand-primary);
color: var(--text-on-brand);
border: none;
padding: 18px 32px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-base);
font-family: 'Open Sans', sans-serif;
}
.domain-search-new button:hover {
background: var(--brand-secondary);
}
/*--------------------------------------------------------------
# Zen Quote Styling
--------------------------------------------------------------*/
.zen-quote {
text-align: center;
font-style: italic;
color: var(--text-secondary);
margin: 40px 0;
font-size: 18px;
line-height: 1.8;
font-weight: 300;
position: relative;
}
.zen-quote::before {
content: '"';
font-size: 48px;
color: var(--brand-primary);
opacity: 0.3;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-family: Georgia, serif;
}
/*--------------------------------------------------------------
# Features Grid
--------------------------------------------------------------*/
.features-section-new {
background: rgba(255, 255, 255, 0.7);
border-radius: var(--radius-lg);
padding: var(--spacing-2xl);
box-shadow: var(--shadow-sm);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.features-grid-new {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.feature-item-new {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
}
.feature-icon-new {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feature-icon-new .material-icons {
color: var(--text-on-brand);
font-size: 24px;
}
.feature-content-new {
flex: 1;
}
.feature-title-new {
font-family: 'Raleway', sans-serif;
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
}
.feature-desc-new {
font-size: 14px;
color: var(--text-secondary);
font-weight: 300;
line-height: 1.6;
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials-container-new {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.testimonial-card-new {
background: var(--bg-primary);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-sm);
transition: all var(--transition-base);
}
.testimonial-card-new:hover {
box-shadow: var(--shadow-md);
}
.testimonial-text-new {
font-size: 16px;
color: var(--text-secondary);
font-weight: 300;
line-height: 1.6;
margin-bottom: var(--spacing-md);
font-style: italic;
}
.testimonial-author-new {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar-new {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
display: flex;
align-items: center;
justify-content: center;
}
.author-avatar-new .material-icons {
color: var(--text-on-brand);
font-size: 20px;
}
.author-name-new {
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 2px;
}
.author-role-new {
font-size: 14px;
color: var(--text-secondary);
}
/*--------------------------------------------------------------
# CTA Section
--------------------------------------------------------------*/
.cta-section-new {
text-align: center;
background: rgba(255, 255, 255, 0.7);
border-radius: var(--radius-lg);
padding: var(--spacing-2xl);
box-shadow: var(--shadow-sm);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.cta-title-new {
font-family: 'Raleway', sans-serif;
font-size: 32px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--spacing-md);
}
.cta-desc-new {
font-size: 16px;
color: var(--text-secondary);
margin-bottom: var(--spacing-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons-new {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
/*--------------------------------------------------------------
# Section Titles
--------------------------------------------------------------*/
.section-title-new {
font-family: 'Raleway', sans-serif;
font-size: 36px;
font-weight: 500;
text-align: center;
margin-bottom: var(--spacing-2xl);
color: var(--text-primary);
}
/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-new {
animation: fadeIn 0.8s ease-out;
}
@keyframes breathe {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.breathe-animation {
animation: breathe 4s infinite ease-in-out;
}
/*--------------------------------------------------------------
# Zen Mode Toggle Button (floating)
--------------------------------------------------------------*/
.zen-mode-toggle {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--brand-primary);
color: var(--text-on-brand);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-brand);
transition: all var(--transition-base);
z-index: 999;
animation: breathe 4s infinite ease-in-out;
}
.zen-mode-toggle:hover {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(52, 168, 83, 0.4);
}
.zen-mode-toggle .material-icons {
font-size: 24px;
}
/*--------------------------------------------------------------
# Hero Section Modern
--------------------------------------------------------------*/
.hero-modern {
text-align: center;
padding: 80px 0 60px;
position: relative;
}
.hero-modern h1 {
font-family: 'Raleway', sans-serif;
font-size: 48px;
font-weight: 500;
margin-bottom: 24px;
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.3;
}
.hero-modern p {
font-size: 18px;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto 40px;
font-weight: 300;
line-height: 1.7;
}
/*--------------------------------------------------------------
# Zen Design for Service Pages
--------------------------------------------------------------*/
/* Generic zen styling for all page sections */
.service-hero,
.feature-comparison,
#pricing,
.server-specs,
.hosting-faq,
.security-features,
.portfolio-hero,
.portfolio-details,
.quote-hero,
.quote-form,
.contact-hero,
.contact-form {
position: relative !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.12) 0%, rgba(15, 157, 88, 0.08) 100%) !important;
overflow: hidden;
}
/* Service page sections with alternating zen images */
.service-hero::before {
content: '';
position: absolute;
right: 0;
top: 50px;
width: 400px;
height: 350px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
.feature-comparison::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 400px;
height: 350px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
#pricing::before {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 380px;
height: 280px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
.server-specs::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 350px;
height: 300px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
.hosting-faq::before,
.contact-form::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 320px;
height: 280px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
.portfolio-hero::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 400px;
height: 350px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.3;
z-index: 0;
pointer-events: none;
}
/* Blog Post Page Styles */
.blog-post-content {
position: relative !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.10) 0%, rgba(15, 157, 88, 0.08) 100%) !important;
padding: 60px 0 !important;
overflow: hidden;
}
.blog-post-content::before {
content: '';
position: absolute;
right: 0;
top: 100px;
width: 350px;
height: 300px;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.25;
z-index: 0;
pointer-events: none;
}
.blog-post-content .container {
position: relative;
z-index: 1;
}
/* Ensure content is above decorations */
.service-hero .container,
.feature-comparison .container,
#pricing .container,
.server-specs .container,
.hosting-faq .container,
.security-features .container,
.portfolio-hero .container,
.portfolio-details .container,
.quote-hero .container,
.quote-form .container,
.contact-hero .container,
.contact-form .container {
position: relative;
z-index: 1;
}
/*--------------------------------------------------------------
# Responsive Design
--------------------------------------------------------------*/
@media (max-width: 768px) {
.service-cards-grid {
grid-template-columns: 1fr;
}
.features-grid-new {
grid-template-columns: 1fr;
}
.testimonials-container-new {
grid-template-columns: 1fr;
}
.hero-modern h1 {
font-size: 36px;
}
.section-title-new {
font-size: 28px;
}
.cta-buttons-new {
flex-direction: column;
}
.btn-modern {
width: 100%;
}
/* Scale down zen decorations on mobile */
#services::before,
#stats::before,
#trust-badges::before,
.why-choose-us::before,
#testimonials::before,
#portfolio::before,
#latest-posts::before,
#blog::before,
#contact::before,
.blog-posts::before,
.blog-categories::before,
.newsletter-signup::before,
#footer::before {
width: 250px !important;
height: 200px !important;
opacity: 0.15 !important;
}
/* Hide larger decorations on small mobile screens */
@media (max-width: 480px) {
#services::before,
#stats::before,
#trust-badges::before,
.why-choose-us::before,
#testimonials::before,
#portfolio::before,
#latest-posts::before,
#blog::before,
#contact::before,
.blog-posts::before,
.blog-categories::before,
.newsletter-signup::before,
#footer::before {
display: none;
}
}
.section-separator {
margin: 15px 0 !important;
}
}
/*--------------------------------------------------------------
# Header Modern Updates
--------------------------------------------------------------*/
.logo-modern {
display: flex;
align-items: center;
text-decoration: none;
}
.logo-icon-modern {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
box-shadow: var(--shadow-brand);
transition: all var(--transition-base);
}
.logo-modern:hover .logo-icon-modern {
transform: scale(1.05);
}
.logo-icon-modern .material-icons {
color: var(--text-on-brand);
font-size: 28px;
}
.logo-text-modern {
display: flex;
flex-direction: column;
}
.logo-name-modern {
font-family: 'Raleway', sans-serif;
font-size: 22px;
font-weight: 500;
color: var(--brand-primary);
line-height: 1.2;
}
.logo-tagline-modern {
font-size: 11px;
color: var(--text-secondary);
letter-spacing: 1px;
text-transform: uppercase;
}
/*--------------------------------------------------------------
# Footer Modern
--------------------------------------------------------------*/
.footer-modern {
text-align: center;
padding: 60px 0 30px;
background: var(--text-primary);
color: rgba(255, 255, 255, 0.8);
}
.footer-links-modern {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
}
.footer-link-modern {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 14px;
transition: color var(--transition-base);
}
.footer-link-modern:hover {
color: var(--brand-primary);
}
/*--------------------------------------------------------------
# Utility Classes
--------------------------------------------------------------*/
.container-zen {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.text-center-zen {
text-align: center;
}
.mb-lg {
margin-bottom: var(--spacing-2xl);
}
.mt-lg {
margin-top: var(--spacing-2xl);
}
.py-lg {
padding-top: var(--spacing-2xl);
padding-bottom: var(--spacing-2xl);
}
/*--------------------------------------------------------------
# Header Overrides - Apply Mockup Colors (Keep Old Logo)
--------------------------------------------------------------*/
/* Update header to match mockup aesthetic */
#header {
background: #ffffff !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}
/* Keep old logo but update colors */
#header .logo {
color: #34a853 !important;
}
#header .logo-font {
color: #34a853 !important;
}
/* Update navigation to match mockup */
.navbar a,
.navbar a:focus {
color: #5f6368 !important;
font-weight: 400 !important;
}
.navbar a:hover,
.navbar .active > a,
.navbar .active:focus > a,
.navbar li:hover > a {
color: #34a853 !important;
}
/* Update "Free Quote" button to new green */
.navbar .getstarted,
.navbar .getstarted:focus {
background: #34a853 !important;
color: #fff !important;
border-radius: 50px !important;
padding: 8px 25px !important;
}
.navbar .getstarted:hover {
background: #0f9d58 !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(52, 168, 83, 0.2) !important;
}
/* Update topbar - reduce white space since content removed */
#topbar {
height: auto !important;
min-height: 0 !important;
padding: 5px 0 !important;
background: #ffffff !important;
border-bottom: none !important;
}
/* Hide topbar if only Elfsight widget present */
#topbar:empty {
display: none !important;
}
/* Update topbar colors to match mockup */
#topbar .contact-info i {
color: #34a853 !important;
}
#topbar .contact-info a:hover {
color: #34a853 !important;
}
#topbar .social-links a:hover {
color: #34a853 !important;
}
/* Update dropdown menu styling */
.navbar .dropdown ul {
border-top: 3px solid #34a853 !important;
}
.navbar .dropdown ul li:hover > a {
color: #34a853 !important;
}
/*--------------------------------------------------------------
# Hero Section Overrides - Force Mockup Design
--------------------------------------------------------------*/
/* Hide old hero carousel elements */
#hero .swiper,
#hero .swiper-wrapper,
#hero .swiper-button-prev,
#hero .swiper-button-next,
#hero .swiper-pagination,
#hero .carousel-container {
display: none !important;
}
/* Ensure new hero modern displays correctly */
#hero.hero-modern {
display: block !important;
position: relative !important;
min-height: 42vh !important;
padding: 60px 0 30px !important;
background: var(--bg-gradient) !important;
overflow: hidden !important;
}
/* Hero content centering */
#hero.hero-modern .hero-content {
max-width: 800px !important;
margin: 0 auto !important;
text-align: center !important;
position: relative !important;
z-index: 2 !important;
}
/* Zen background positioning */
#hero.hero-modern .zen-pattern,
#hero.hero-modern .zen-circle {
position: absolute !important;
z-index: 0 !important;
}
/* Additional decorative background elements - nature inspired */
#hero.hero-modern::before {
content: '';
position: absolute;
bottom: 0;
right: 40px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(52, 168, 83, 0.06) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
}
#hero.hero-modern::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 300px;
height: 300px;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.05) 0%, transparent 70%);
clip-path: polygon(0 100%, 100% 100%, 100% 0);
z-index: 0;
}
/* Hero decorative SVG elements */
#hero.hero-modern .hero-decoration-bamboo,
#hero.hero-modern .hero-decoration-waterfall,
#hero.hero-modern .hero-decoration-mountain,
#hero.hero-modern .hero-decoration-cloud {
pointer-events: none;
max-width: 35vw;
height: auto;
}
#hero.hero-modern .hero-decoration-waterfall {
max-width: 28vw;
}
#hero.hero-modern .hero-decoration-cloud {
max-width: 30vw;
}
@media (max-width: 992px) {
#hero.hero-modern .hero-decoration-bamboo,
#hero.hero-modern .hero-decoration-waterfall,
#hero.hero-modern .hero-decoration-mountain,
#hero.hero-modern .hero-decoration-cloud {
opacity: 0.08 !important;
}
}
@media (max-width: 768px) {
#hero.hero-modern .hero-decoration-bamboo,
#hero.hero-modern .hero-decoration-waterfall,
#hero.hero-modern .hero-decoration-mountain {
display: none;
}
#hero.hero-modern .hero-decoration-cloud {
top: auto !important;
bottom: 15%;
left: 50% !important;
transform: translateX(-50%);
}
}
/* Top decorative elements */
.zen-circle.zen-circle-1::before {
content: '';
position: absolute;
top: 50px;
right: 10%;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(15, 157, 88, 0.04) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
}
/* Mountain-like shapes at bottom */
.zen-circle.zen-circle-2::before {
content: '';
position: absolute;
top: 200px;
left: 5%;
width: 180px;
height: 180px;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.04) 0%, transparent 60%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
z-index: 0;
}
/* Hero heading */
#hero.hero-modern h1 {
font-family: 'Raleway', sans-serif !important;
font-size: 48px !important;
font-weight: 500 !important;
margin-bottom: 24px !important;
background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
line-height: 1.3 !important;
}
/* Hero paragraph */
#hero.hero-modern p {
font-size: 18px !important;
color: var(--text-secondary) !important;
max-width: 700px !important;
margin: 0 auto 40px !important;
font-weight: 300 !important;
line-height: 1.7 !important;
}
/* Responsive hero */
@media (max-width: 768px) {
#hero.hero-modern {
min-height: 42vh !important;
padding: 70px 0 50px !important;
}
#hero.hero-modern h1 {
font-size: 36px !important;
}
#hero.hero-modern p {
font-size: 16px !important;
}
#hero.hero-modern .domain-search-new {
flex-direction: column !important;
}
#hero.hero-modern .domain-search-new input,
#hero.hero-modern .domain-search-new button {
width: 100% !important;
border-radius: var(--radius-md) !important;
}
#hero.hero-modern .cta-buttons-new {
flex-direction: column !important;
}
#hero.hero-modern .btn-modern {
width: 100% !important;
}
}
@media (max-width: 575px) {
#hero.hero-modern {
min-height: unset !important;
padding: 40px 0 32px !important;
}
#hero.hero-modern h1 {
font-size: 30px !important;
margin-bottom: 18px !important;
}
#hero.hero-modern p {
font-size: 15px !important;
margin-bottom: 20px !important;
}
}
/* CTA zen illustrations */
.zen-cta .cta-illustrations {
position: absolute;
inset: 0;
pointer-events: none;
}
.zen-cta .cta-bamboo {
position: absolute;
bottom: -10px;
left: -40px;
width: 220px;
height: auto;
opacity: 0.35;
}
.zen-cta .cta-cloud {
position: absolute;
top: -40px;
right: 28%;
width: 260px;
height: auto;
opacity: 0.28;
}
.zen-cta .cta-bonsai {
position: absolute;
bottom: -20px;
right: -30px;
width: 240px;
height: auto;
opacity: 0.4;
}
@media (max-width: 992px) {
.zen-cta .cta-illustrations svg {
opacity: 0.25;
}
}
@media (max-width: 768px) {
.zen-cta .cta-bamboo,
.zen-cta .cta-bonsai {
width: 160px;
}
.zen-cta .cta-cloud {
right: 10%;
width: 200px;
}
}
/*--------------------------------------------------------------
# Services Section - Modern Material Design
--------------------------------------------------------------*/
#services.services {
padding: 80px 0 !important;
background: #ffffff !important;
}
#services .section-title {
margin-bottom: 50px !important;
}
#services .section-title h2 {
font-size: 2.8rem !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
margin-bottom: 20px !important;
font-family: 'Raleway', sans-serif !important;
}
#services .section-title p {
font-size: 1.1rem !important;
color: var(--text-secondary) !important;
max-width: 700px !important;
margin: 0 auto !important;
line-height: 1.8 !important;
}
#services .row > div {
display: flex !important;
}
/* Service Card Container */
#services .icon-box {
background: #ffffff !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important;
padding: 40px 30px !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
transition: all 0.3s ease !important;
box-shadow: var(--shadow-sm) !important;
position: relative !important;
}
#services .icon-box:hover {
box-shadow: var(--shadow-lg) !important;
transform: translateY(-8px) !important;
border-color: var(--brand-primary) !important;
}
/* Service Icon */
#services .icon-box .icon {
width: 60px !important;
height: 60px !important;
background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
border-radius: var(--radius-lg) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 25px !important;
color: #ffffff !important;
font-size: 28px !important;
}
#services .icon-box .icon i {
color: #ffffff !important;
font-size: 28px !important;
}
#services .icon-box .icon svg {
display: none !important;
}
/* Service Title */
#services .icon-box h4 {
font-size: 1.4rem !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
margin-bottom: 15px !important;
font-family: 'Raleway', sans-serif !important;
}
#services .icon-box h4 a {
color: var(--text-primary) !important;
transition: color 0.3s ease !important;
text-decoration: none !important;
}
#services .icon-box:hover h4 a {
color: var(--brand-primary) !important;
}
/* Service Description */
#services .icon-box p {
font-size: 1rem !important;
color: var(--text-secondary) !important;
line-height: 1.7 !important;
margin-bottom: 0 !important;
}
#services .icon-box p.mt-2 {
margin-top: 15px !important;
padding-top: 15px !important;
border-top: 1px solid var(--border-color) !important;
}
#services .icon-box .btn-link {
color: var(--brand-primary) !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
#services .icon-box .btn-link:hover {
color: var(--brand-secondary) !important;
text-decoration: underline !important;
}
/* Service Card Colors - Remove colored icons, use gradient */
#services .icon-box.iconbox-blue,
#services .icon-box.iconbox-orange,
#services .icon-box.iconbox-pink,
#services .icon-box.iconbox-red,
#services .icon-box.iconbox-brand,
#services .icon-box.iconbox-yellow,
#services .icon-box.iconbox-teal,
#services .icon-box.iconbox-purple {
background: #ffffff !important;
border: 1px solid var(--border-color) !important;
}
/* Remove old colored styles */
#services .icon-box.iconbox-blue .icon,
#services .icon-box.iconbox-orange .icon,
#services .icon-box.iconbox-pink .icon,
#services .icon-box.iconbox-red .icon,
#services .icon-box.iconbox-brand .icon,
#services .icon-box.iconbox-yellow .icon,
#services .icon-box.iconbox-teal .icon,
#services .icon-box.iconbox-purple .icon {
background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
}
/* Responsive */
@media (max-width: 768px) {
#services .icon-box {
padding: 30px 20px !important;
}
#services .section-title h2 {
font-size: 2.2rem !important;
}
#services .icon-box h4 {
font-size: 1.2rem !important;
}
}
/*--------------------------------------------------------------
# Trust Badges / Why Choose Us Section
--------------------------------------------------------------*/
#trust-badges {
padding: 80px 0 !important;
background: #f8f9fa !important;
}
#trust-badges .section-title {
margin-bottom: 60px !important;
}
#trust-badges .section-title h2 {
font-size: 2.8rem !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
margin-bottom: 20px !important;
font-family: 'Raleway', sans-serif !important;
}
#trust-badges .section-title p {
font-size: 1.1rem !important;
color: var(--text-secondary) !important;
max-width: 700px !important;
margin: 0 auto !important;
line-height: 1.8 !important;
}
/* Trust Badge Icon Box */
#trust-badges .icon-box {
padding: 35px 30px !important;
background: #ffffff !important;
border-radius: var(--radius-lg) !important;
text-align: center !important;
border: 1px solid var(--border-color) !important;
transition: all 0.3s ease !important;
box-shadow: var(--shadow-sm) !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
#trust-badges .icon-box:hover {
box-shadow: var(--shadow-lg) !important;
transform: translateY(-6px) !important;
border-color: var(--brand-primary) !important;
background: linear-gradient(135deg, rgba(52, 168, 83, 0.02) 0%, rgba(15, 157, 88, 0.02) 100%) !important;
}
/* Trust Badge Icon */
#trust-badges .icon-box i {
font-size: 40px !important;
color: var(--brand-primary) !important;
margin-bottom: 20px !important;
display: block !important;
transition: all 0.3s ease !important;
}
#trust-badges .icon-box:hover i {
color: var(--brand-secondary) !important;
transform: scale(1.15) !important;
}
/* Trust Badge Title */
#trust-badges .icon-box h4 {
font-size: 1.2rem !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
margin-bottom: 12px !important;
margin-top: 0 !important;
font-family: 'Raleway', sans-serif !important;
}
/* Trust Badge Description */
#trust-badges .icon-box p {
font-size: 0.95rem !important;
color: var(--text-secondary) !important;
line-height: 1.6 !important;
margin-bottom: 0 !important;
}
/* Responsive */
@media (max-width: 768px) {
#trust-badges {
padding: 60px 0 !important;
}
#trust-badges .section-title h2 {
font-size: 2.2rem !important;
}
#trust-badges .icon-box {
padding: 25px 20px !important;
margin-bottom: 20px !important;
}
#trust-badges .icon-box i {
font-size: 32px !important;
}
#trust-badges .icon-box h4 {
font-size: 1.1rem !important;
}
}
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
#testimonials.testimonials {
padding: 80px 0 !important;
background: #ffffff !important;
}
#testimonials .section-title {
margin-bottom: 60px !important;
}
#testimonials .section-title h2 {
font-size: 2.8rem !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
margin-bottom: 20px !important;
font-family: 'Raleway', sans-serif !important;
}
#testimonials .section-title p {
font-size: 1.1rem !important;
color: var(--text-secondary) !important;
max-width: 700px !important;
margin: 0 auto !important;
line-height: 1.8 !important;
}
/* Testimonial Card */
#testimonials .testimonial-item {
padding: 35px 30px !important;
background: #ffffff !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-sm) !important;
transition: all 0.3s ease !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
position: relative !important;
overflow: hidden !important;
}
#testimonials .testimonial-item::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
}
#testimonials .testimonial-item:hover {
box-shadow: var(--shadow-lg) !important;
transform: translateY(-8px) !important;
border-color: var(--brand-primary) !important;
}
/* Stars */
#testimonials .stars {
display: flex !important;
gap: 4px !important;
margin-bottom: 20px !important;
}
#testimonials .stars i {
color: #ffc107 !important;
font-size: 16px !important;
}
/* Testimonial Text */
#testimonials .testimonial-text {
font-size: 1rem !important;
color: var(--text-secondary) !important;
line-height: 1.8 !important;
font-style: italic !important;
margin-bottom: 25px !important;
flex-grow: 1 !important;
position: relative !important;
padding: 0 5px !important;
}
#testimonials .quote-icon-left,
#testimonials .quote-icon-right {
color: var(--brand-light) !important;
font-size: 20px !important;
opacity: 0.8 !important;
}
#testimonials .quote-icon-left {
margin-right: 5px !important;
}
#testimonials .quote-icon-right {
margin-left: 5px !important;
}
/* Testimonial Author */
#testimonials .testimonial-author {
display: flex !important;
align-items: center !important;
gap: 15px !important;
padding-top: 20px !important;
border-top: 1px solid var(--border-color) !important;
}
#testimonials .testimonial-img {
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 3px solid var(--brand-light) !important;
}
#testimonials .testimonial-author h4 {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: var(--text-primary) !important;
margin-bottom: 2px !important;
font-family: 'Raleway', sans-serif !important;
}
#testimonials .testimonial-author p {
font-size: 0.9rem !important;
color: var(--text-secondary) !important;
margin-bottom: 4px !important;
}
#testimonials .testimonial-author p.text-muted {
color: var(--text-muted) !important;
font-size: 0.85rem !important;
}
#testimonials .badge {
background: var(--brand-light) !important;
color: var(--brand-secondary) !important;
font-size: 0.75rem !important;
padding: 4px 8px !important;
border-radius: 12px !important;
}
/* Responsive */
@media (max-width: 768px) {
#testimonials {
padding: 60px 0 !important;
}
#testimonials .section-title h2 {
font-size: 2.2rem !important;
}
#testimonials .testimonial-item {
padding: 25px 20px !important;
margin-bottom: 20px !important;
}
#testimonials .testimonial-text {
font-size: 0.95rem !important;
}
#testimonials .testimonial-author {
flex-direction: column !important;
text-align: center !important;
}
#testimonials .testimonial-img {
width: 60px !important;
height: 60px !important;
}
}
/*--------------------------------------------------------------
# CTA Section - Call to Action
--------------------------------------------------------------*/
#cta.cta {
padding: 80px 0 !important;
background: linear-gradient(135deg, #f5f7fa 0%, #e4f5e8 100%) !important;
position: relative !important;
overflow: hidden !important;
}
#cta.cta::before {
content: '' !important;
position: absolute !important;
top: -100px !important;
right: -100px !important;
width: 400px !important;
height: 400px !important;
background: radial-gradient(circle, var(--brand-primary) 0%, transparent 70%) !important;
opacity: 0.1 !important;
border-radius: 50% !important;
pointer-events: none !important;
}
#cta.cta::after {
content: '' !important;
position: absolute !important;
bottom: -80px !important;
left: -80px !important;
width: 300px !important;
height: 300px !important;
background: radial-gradient(circle, var(--brand-secondary) 0%, transparent 70%) !important;
opacity: 0.08 !important;
border-radius: 50% !important;
pointer-events: none !important;
}
#cta .container {
position: relative !important;
z-index: 1 !important;
}
/* CTA Heading */
#cta h3 {
font-size: 2.5rem !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
margin-bottom: 20px !important;
font-family: 'Raleway', sans-serif !important;
}
/* CTA Paragraph */
#cta p {
font-size: 1.1rem !important;
color: var(--text-secondary) !important;
line-height: 1.8 !important;
max-width: 600px !important;
margin-bottom: 0 !important;
}
/* CTA Button Container */
#cta .cta-btn-container {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* CTA Button */
#cta .cta-btn {
display: inline-block !important;
padding: 16px 40px !important;
background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
color: #ffffff !important;
text-decoration: none !important;
border-radius: var(--radius-lg) !important;
font-weight: 600 !important;
font-size: 1rem !important;
transition: all 0.3s ease !important;
box-shadow: var(--shadow-brand) !important;
border: none !important;
cursor: pointer !important;
white-space: nowrap !important;
}
#cta .cta-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 20px rgba(52, 168, 83, 0.3) !important;
color: #ffffff !important;
text-decoration: none !important;
}
#cta .cta-btn:active {
transform: translateY(-1px) !important;
}
/* Responsive */
@media (max-width: 992px) {
#cta h3 {
font-size: 2rem !important;
text-align: center !important;
}
#cta p {
text-align: center !important;
margin-bottom: 30px !important;
}
#cta .cta-btn-container {
justify-content: center !important;
}
}
@media (max-width: 768px) {
#cta.cta {
padding: 60px 0 !important;
}
#cta h3 {
font-size: 1.8rem !important;
margin-bottom: 15px !important;
}
#cta p {
font-size: 1rem !important;
margin-bottom: 25px !important;
}
#cta .cta-btn {
padding: 14px 30px !important;
font-size: 0.95rem !important;
width: 100% !important;
max-width: 300px !important;
}
}
/*--------------------------------------------------------------
# Footer Section
--------------------------------------------------------------*/
#footer {
background: linear-gradient(135deg, #1a1f36 0%, #0f1621 100%) !important;
color: #ffffff !important;
padding: 60px 0 20px !important;
position: relative !important;
overflow: hidden !important;
}
#footer::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 1px !important;
background: linear-gradient(90deg, transparent 0%, var(--brand-primary) 50%, transparent 100%) !important;
}
/* Newsletter Signup */
#footer .newsletter-signup {
text-align: center !important;
margin-bottom: 50px !important;
padding-bottom: 50px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#footer .newsletter-signup h3 {
font-size: 1.6rem !important;
font-weight: 600 !important;
color: #ffffff !important;
margin-bottom: 12px !important;
font-family: 'Raleway', sans-serif !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
}
#footer .newsletter-signup h3 i {
color: var(--brand-primary) !important;
font-size: 24px !important;
}
#footer .newsletter-signup p {
color: rgba(255, 255, 255, 0.8) !important;
font-size: 1rem !important;
margin-bottom: 20px !important;
line-height: 1.6 !important;
}
#footer .newsletter-signup input {
background: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
transition: all 0.3s ease !important;
}
#footer .newsletter-signup input:focus {
background: rgba(255, 255, 255, 0.15) !important;
border-color: var(--brand-primary) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(52, 168, 83, 0.1) !important;
}
#footer .newsletter-signup input::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}
#footer .newsletter-signup button {
background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
transition: all 0.3s ease !important;
border: none !important;
font-weight: 600 !important;
}
#footer .newsletter-signup button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(52, 168, 83, 0.3) !important;
}
#footer .newsletter-signup button:disabled {
opacity: 0.7 !important;
cursor: not-allowed !important;
}
#footer #newsletterMessage {
margin-top: 15px !important;
font-size: 14px !important;
font-weight: 500 !important;
}
/* Section Headers */
#footer h3 {
font-size: 1.4rem !important;
font-weight: 600 !important;
color: #ffffff !important;
margin-bottom: 15px !important;
font-family: 'Raleway', sans-serif !important;
margin-top: 30px !important;
}
#footer > .container > h3:first-of-type {
margin-top: 0 !important;
}
#footer p {
color: rgba(255, 255, 255, 0.8) !important;
line-height: 1.6 !important;
margin-bottom: 15px !important;
}
/* Social Links */
#footer .social-links {
display: flex !important;
justify-content: center !important;
gap: 20px !important;
margin-bottom: 40px !important;
}
#footer .social-links a {
width: 45px !important;
height: 45px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(52, 168, 83, 0.15) !important;
color: var(--brand-primary) !important;
border-radius: 50% !important;
transition: all 0.3s ease !important;
border: 1px solid transparent !important;
text-decoration: none !important;
font-size: 20px !important;
}
#footer .social-links a:hover {
background: var(--brand-primary) !important;
color: #ffffff !important;
transform: translateY(-4px) !important;
border-color: var(--brand-primary) !important;
box-shadow: 0 8px 20px rgba(52, 168, 83, 0.3) !important;
}
/* Service Area */
#footer .footer-service-area {
background: rgba(52, 168, 83, 0.08) !important;
border: 1px solid rgba(52, 168, 83, 0.15) !important;
border-radius: var(--radius-lg) !important;
padding: 20px !important;
margin-bottom: 30px !important;
}
#footer .footer-service-area p {
margin-bottom: 8px !important;
}
#footer .footer-service-area i {
color: var(--brand-primary) !important;
}
/* Legal Links */
#footer .footer-legal-links {
text-align: center !important;
margin: 30px 0 20px !important;
padding-top: 20px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#footer .footer-legal-links a {
color: rgba(255, 255, 255, 0.7) !important;
text-decoration: none !important;
font-size: 0.95rem !important;
transition: all 0.3s ease !important;
display: inline-block !important;
margin-bottom: 8px !important;
}
#footer .footer-legal-links a:hover {
color: var(--brand-primary) !important;
}
/* Copyright */
#footer .copyright {
text-align: center !important;
padding-top: 15px !important;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 0.9rem !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#footer .copyright strong {
color: var(--brand-primary) !important;
font-weight: 600 !important;
}
/* Back to Top Button - Zen/Buddha Style */
.back-to-top {
background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%) !important;
color: #ffffff !important;
width: 55px !important;
height: 55px !important;
border-radius: 50% !important;
position: fixed !important;
bottom: 30px !important;
right: 30px !important;
z-index: 99996 !important;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
box-shadow: 0 6px 25px rgba(52, 168, 83, 0.35), inset 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 2px solid rgba(255, 255, 255, 0.2) !important;
font-size: 22px !important;
font-weight: bold !important;
}
.back-to-top::before {
content: '☸' !important;
position: absolute !important;
opacity: 0.15 !important;
font-size: 40px !important;
animation: spin-slow 20s linear infinite !important;
}
.back-to-top i {
position: relative !important;
z-index: 1 !important;
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.back-to-top.active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.back-to-top:hover {
background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%) !important;
transform: translateY(-6px) scale(1.1) !important;
box-shadow: 0 10px 35px rgba(52, 168, 83, 0.5), inset 0 -2px 8px rgba(0, 0, 0, 0.15) !important;
}
.back-to-top:active {
transform: translateY(-3px) scale(1.05) !important;
}
/* Responsive */
@media (max-width: 768px) {
#footer {
padding: 40px 0 15px !important;
}
#footer .newsletter-signup {
margin-bottom: 40px !important;
padding-bottom: 40px !important;
}
#footer .newsletter-signup h3 {
font-size: 1.4rem !important;
}
#footer h3 {
font-size: 1.2rem !important;
margin-top: 25px !important;
}
#footer .social-links {
gap: 15px !important;
margin-bottom: 30px !important;
}
#footer .social-links a {
width: 40px !important;
height: 40px !important;
font-size: 18px !important;
}
#footer .footer-legal-links a {
display: inline !important;
margin: 0 8px !important;
}
.back-to-top {
bottom: 20px !important;
right: 20px !important;
width: 40px !important;
height: 40px !important;
}
}