/* ==================== ROOT VARIABLES ==================== */
:root {
/* Colors */
--primary-color: #667eea;
--primary-dark: #5568d3;
--secondary-color: #764ba2;
--accent-color: #f093fb;
--text-color: #2d3748;
--text-light: #718096;
--text-dark: #1a202c;
--bg-color: #ffffff;
--bg-secondary: #f7fafc;
--bg-tertiary: #edf2f7;
--border-color: #e2e8f0;
--success-color: #48bb78;
--error-color: #f56565;
/* Gradient */
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
/* Typography */
--font-primary: 'Inter', sans-serif;
--font-heading: 'Poppins', sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2rem;
--spacing-xl: 3rem;
--spacing-2xl: 4rem;
/* Layout */
--container-width: 1200px;
--header-height: 5rem;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
/* Transitions */
--transition-fast: 0.2s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--radius-full: 9999px;
/* Z-index */
--z-fixed: 100;
--z-modal: 1000;
}
/* ==================== BASE ==================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-primary);
font-size: var(--font-size-base);
color: var(--text-color);
background-color: var(--bg-color);
line-height: 1.6;
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
color: var(--text-dark);
line-height: 1.2;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
video, iframe, embed, object {
max-width: 100%;
height: auto;
}
button {
cursor: pointer;
border: none;
outline: none;
font-family: inherit;
}
input, textarea {
font-family: inherit;
outline: none;
}
/* ==================== REUSABLE CLASSES ==================== */
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
width: 100%;
box-sizing: border-box;
}
.section {
padding: var(--spacing-2xl) 0;
}
.section__header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.section__badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 12px;
padding: 6px 16px;
background: rgba(102, 126, 234, 0.1);
border-radius: 20px;
}
.section__subtitle {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--spacing-xs);
}
.section__title {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-sm);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section__description {
font-size: 1.05rem;
color: var(--text-light);
line-height: 1.7;
max-width: 700px;
margin: 0 auto;
}
.button {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: 0.875rem 2rem;
font-weight: 600;
border-radius: var(--radius-full);
transition: all var(--transition-base);
font-size: var(--font-size-base);
}
.button--primary {
background: var(--gradient-primary);
color: white;
box-shadow: var(--shadow-md);
}
.button--primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.button--secondary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.button--secondary:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
.button--full {
width: 100%;
justify-content: center;
}
.highlight {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ==================== HEADER & NAVIGATION ==================== */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow-sm);
z-index: var(--z-fixed);
backdrop-filter: blur(10px);
transition: var(--transition-base);
}
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo {
font-size: var(--font-size-xl);
font-weight: 800;
font-family: var(--font-heading);
display: flex;
align-items: center;
}
.nav__logo-img {
height: 50px;
width: auto;
object-fit: contain;
transition: var(--transition-fast);
}
.nav__logo-img:hover {
transform: scale(1.05);
}
.logo-text {
color: var(--text-dark);
}
.logo-highlight {
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav__list {
display: flex;
gap: var(--spacing-lg);
}
.nav__link {
font-weight: 500;
color: var(--text-color);
transition: var(--transition-fast);
position: relative;
}
.nav__link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: var(--transition-base);
}
.nav__link:hover::after,
.nav__link.active-link::after {
width: 100%;
}
.nav__link:hover {
color: var(--primary-color);
}
/* CTA Button in Header */
.nav__cta-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.75rem 1.5rem;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-full);
font-weight: 600;
font-size: var(--font-size-sm);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
transition: all var(--transition-base);
white-space: nowrap;
margin-left: 1.5rem;
text-decoration: none;
border: none;
}
.nav__cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
background: var(--primary-dark);
}
.nav__cta-button i {
font-size: 1rem;
}
.nav__cta-button span {
display: inline;
}
.nav__cta-button--active {
background: var(--primary-dark);
}
/* Dropdown Menu Styles */
.nav__item--dropdown {
position: relative;
}
.nav__link .fa-chevron-down {
font-size: 0.75rem;
margin-left: 4px;
transition: var(--transition-fast);
}
.nav__item--dropdown:hover .nav__link .fa-chevron-down {
transform: rotate(180deg);
}
.nav__dropdown {
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
border-radius: var(--border-radius-md);
padding: var(--spacing-sm) 0;
min-width: 220px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition-base);
z-index: 1000;
margin-top: 15px;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.nav__item--dropdown:hover .nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav__dropdown li {
list-style: none;
}
.nav__dropdown-link {
display: block;
padding: var(--spacing-sm) var(--spacing-lg);
color: var(--text-color);
font-size: var(--font-size-sm);
transition: var(--transition-fast);
white-space: nowrap;
}
.nav__dropdown-link:hover {
background: var(--primary-light);
color: var(--primary-color);
padding-left: calc(var(--spacing-lg) + 8px);
}
/* Multi-level Dropdown (Submenu) Styles */
.nav__dropdown-item {
position: relative;
}
.nav__dropdown-item--submenu > .nav__dropdown-link {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__dropdown-item--submenu > .nav__dropdown-link .fa-chevron-right {
font-size: 0.75rem;
transition: var(--transition-fast);
}
.nav__dropdown-item--submenu:hover > .nav__dropdown-link .fa-chevron-right {
transform: translateX(3px);
}
.nav__submenu {
position: absolute;
top: 0;
left: 100%;
background: #ffffff;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
border-radius: var(--border-radius-md);
padding: var(--spacing-sm) 0;
min-width: 220px;
opacity: 0;
visibility: hidden;
transform: translateX(-10px);
transition: var(--transition-base);
z-index: 1001;
margin-left: 5px;
border: 1px solid rgba(0, 0, 0, 0.08);
list-style: none;
}
.nav__dropdown-item--submenu:hover .nav__submenu {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.nav__submenu li {
list-style: none;
}
.nav__submenu-link {
display: block;
padding: var(--spacing-sm) var(--spacing-lg);
color: var(--text-color);
font-size: var(--font-size-sm);
transition: var(--transition-fast);
white-space: nowrap;
}
.nav__submenu-link:hover {
background: var(--primary-light);
color: var(--primary-color);
padding-left: calc(var(--spacing-lg) + 8px);
}
.service__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
margin-top: var(--spacing-md);
transition: var(--transition-fast);
}
.service__link:hover {
gap: 12px;
color: var(--primary-dark);
}
.service__link i {
font-size: 0.875rem;
}
.nav__toggle,
.nav__close {
display: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-dark);
}
/* Mobile Menu Overlay */
.nav__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
pointer-events: none;
}
.nav__overlay.show-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
visibility: visible;
}
/* ==================== HERO SECTION ==================== */
.hero {
padding-top: calc(var(--header-height) + 80px);
padding-bottom: 80px;
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.hero__container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
align-items: center;
position: relative;
z-index: 1;
}
.hero__subtitle {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--spacing-sm);
}
.hero__title {
font-size: var(--font-size-5xl);
margin-bottom: var(--spacing-md);
line-height: 1.1;
}
.hero__description {
font-size: var(--font-size-lg);
color: var(--text-light);
margin-bottom: var(--spacing-lg);
line-height: 1.8;
}
.hero__buttons {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.hero__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}
.stat {
text-align: center;
}
.stat__number {
font-size: var(--font-size-3xl);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--spacing-xs);
}
.stat__label {
font-size: var(--font-size-sm);
color: var(--text-light);
}
.hero__image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero__blob {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
animation: blob-animation 8s ease-in-out infinite;
}
@keyframes blob-animation {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.1) rotate(180deg); }
}
.hero__img {
position: relative;
z-index: 2;
width: 400px;
height: 400px;
object-fit: cover;
border-radius: 50%;
box-shadow: var(--shadow-xl);
border: 5px solid white;
}
/* ==================== ABOUT SECTION ==================== */
.about {
background: var(--bg-color);
}
.about__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
align-items: start;
}
.about__description {
font-size: var(--font-size-lg);
color: var(--text-light);
margin-bottom: var(--spacing-md);
line-height: 1.8;
}
.about__info {
margin: var(--spacing-lg) 0;
}
.about__info-item {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--bg-secondary);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-md);
transition: var(--transition-base);
}
.about__info-item:hover {
transform: translateX(10px);
box-shadow: var(--shadow-md);
}
.about__info-item i {
font-size: var(--font-size-2xl);
color: var(--primary-color);
min-width: 40px;
}
.about__info-item h4 {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xs);
}
.about__info-item p {
color: var(--text-light);
font-size: var(--font-size-sm);
}
.about__skills-title {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-lg);
}
.skill {
margin-bottom: var(--spacing-lg);
}
.skill__header {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-xs);
}
.skill__name {
font-weight: 600;
color: var(--text-dark);
}
.skill__percentage {
font-weight: 600;
color: var(--primary-color);
}
.skill__bar {
height: 8px;
background: var(--bg-tertiary);
border-radius: var(--radius-full);
overflow: hidden;
}
.skill__progress {
height: 100%;
background: var(--gradient-primary);
border-radius: var(--radius-full);
transition: width 1s ease;
}
/* ==================== STATS SECTION ==================== */
.stats {
background: var(--bg-secondary);
padding: var(--spacing-2xl) 0;
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-xl);
max-width: 1200px;
margin: 0 auto;
}
.stat {
background: var(--bg-color);
padding: var(--spacing-xl) var(--spacing-lg);
border-radius: var(--radius-xl);
text-align: center;
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.stat::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.stat:hover::before {
transform: scaleX(1);
}
.stat:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.stat__icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
transition: all 0.3s ease;
}
.stat__icon i {
font-size: 2rem;
color: var(--primary-color);
transition: all 0.3s ease;
}
.stat:hover .stat__icon {
background: var(--gradient-primary);
transform: scale(1.1);
}
.stat:hover .stat__icon i {
color: white;
}
.stat__number {
font-size: 2.5rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: var(--spacing-xs);
font-family: var(--font-heading);
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.stat__label {
font-size: 1rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: var(--spacing-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stat__description {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.5;
margin: 0;
}
/* ==================== SERVICES SECTION ==================== */
.services {
background: var(--bg-secondary);
}
.services__container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}
.service__card {
background: var(--bg-color);
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
border: 2px solid transparent;
}
.service__card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.service__icon {
width: 70px;
height: 70px;
background: var(--gradient-primary);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
font-size: var(--font-size-2xl);
color: white;
}
.service__title {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
.service__description {
color: var(--text-light);
margin-bottom: var(--spacing-md);
line-height: 1.8;
}
.service__features {
margin-top: var(--spacing-md);
}
.service__features li {
display: flex;
align-items: center;
gap: var(--spacing-sm);
color: var(--text-light);
margin-bottom: var(--spacing-xs);
}
.service__features i {
color: var(--success-color);
font-size: var(--font-size-sm);
}
/* ==================== BENEFITS SECTION ==================== */
.benefits {
background: var(--bg-light);
}
.benefits__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.benefit__card {
background: var(--bg-color);
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border: 1px solid transparent;
}
.benefit__card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.benefit__card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
border-color: var(--primary-color);
}
.benefit__card:hover::before {
transform: scaleX(1);
}
.benefit__icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-lg);
transition: all 0.4s ease;
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
}
.benefit__icon i {
font-size: 2rem;
color: var(--bg-color);
transition: transform 0.3s ease;
}
.benefit__card:hover .benefit__icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3);
}
.benefit__card:hover .benefit__icon i {
transform: scale(1.1);
}
.benefit__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: var(--spacing-md);
font-family: var(--font-heading);
line-height: 1.3;
}
.benefit__description {
color: var(--text-light);
line-height: 1.7;
font-size: 0.95rem;
}
/* ==================== PORTFOLIO SECTION ==================== */
.portfolio {
background: var(--bg-color);
}
.portfolio__container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}
.portfolio__card {
background: var(--bg-color);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: var(--transition-base);
}
.portfolio__card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.portfolio__image {
position: relative;
height: 250px;
overflow: hidden;
}
.portfolio__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.portfolio__card:hover .portfolio__image img {
transform: scale(1.1);
}
.portfolio__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(102, 126, 234, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition-base);
}
.portfolio__card:hover .portfolio__overlay {
opacity: 1;
}
.portfolio__button {
padding: 0.75rem 1.5rem;
background: white;
color: var(--primary-color);
border-radius: var(--radius-full);
font-weight: 600;
transition: var(--transition-base);
}
.portfolio__button:hover {
transform: scale(1.05);
}
.portfolio__content {
padding: var(--spacing-lg);
}
.portfolio__category {
display: inline-block;
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--primary-color);
background: rgba(102, 126, 234, 0.1);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
margin-bottom: var(--spacing-sm);
}
.portfolio__title {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-sm);
}
.portfolio__description {
color: var(--text-light);
margin-bottom: var(--spacing-md);
line-height: 1.6;
}
.portfolio__metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-color);
}
.metric {
text-align: center;
}
.metric__value {
display: block;
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--primary-color);
}
.metric__label {
font-size: var(--font-size-xs);
color: var(--text-light);
}
/* ==================== RESULTS SECTION ==================== */
.results {
background: var(--gradient-primary);
color: white;
}
.results .section__subtitle {
color: rgba(255, 255, 255, 0.9);
}
.results .section__title {
color: white;
background: none;
-webkit-text-fill-color: white;
}
.results__container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
}
.result__card {
text-align: center;
padding: var(--spacing-xl);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: var(--radius-xl);
border: 2px solid rgba(255, 255, 255, 0.2);
transition: var(--transition-base);
}
.result__card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.15);
}
.result__icon {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-md);
color: white;
}
.result__number {
font-size: var(--font-size-4xl);
font-weight: 800;
margin-bottom: var(--spacing-xs);
display: inline-block;
}
.result__suffix {
font-size: var(--font-size-2xl);
font-weight: 800;
}
.result__label {
font-size: var(--font-size-sm);
opacity: 0.9;
}
/* ==================== TESTIMONIALS SECTION ==================== */
.testimonials {
background: var(--bg-secondary);
}
.testimonials__container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}
.testimonial__card {
background: var(--bg-color);
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
transition: var(--transition-base);
}
.testimonial__card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.testimonial__rating {
margin-bottom: var(--spacing-md);
}
.testimonial__rating i {
color: #fbbf24;
font-size: var(--font-size-sm);
}
.testimonial__text {
font-size: var(--font-size-base);
color: var(--text-light);
line-height: 1.8;
margin-bottom: var(--spacing-lg);
font-style: italic;
}
.testimonial__author {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.testimonial__author img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.testimonial__name {
font-size: var(--font-size-base);
margin-bottom: 0.25rem;
}
.testimonial__position {
font-size: var(--font-size-sm);
color: var(--text-light);
}
/* ==================== CONTACT SECTION ==================== */
.contact {
background: var(--bg-color);
}
.contact__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.contact__info-title {
font-size: var(--font-size-2xl);
margin-bottom: var(--spacing-md);
}
.contact__info-description {
font-size: var(--font-size-base);
color: var(--text-light);
line-height: 1.8;
margin-bottom: var(--spacing-xl);
}
.contact__details {
margin-bottom: var(--spacing-xl);
}
.contact__detail {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.contact__detail i {
width: 50px;
height: 50px;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
}
.contact__detail h4 {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-xs);
}
.contact__detail p,
.contact__detail a {
color: var(--text-light);
font-size: var(--font-size-base);
}
.contact__detail a:hover {
color: var(--primary-color);
}
.contact__social {
display: flex;
gap: var(--spacing-md);
}
.contact__social-link {
width: 45px;
height: 45px;
background: var(--bg-secondary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: var(--font-size-lg);
transition: var(--transition-base);
}
.contact__social-link:hover {
background: var(--gradient-primary);
color: white;
transform: translateY(-5px);
}
.contact__form {
background: var(--bg-secondary);
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
}
.form__group {
margin-bottom: var(--spacing-lg);
}
.form__label {
display: block;
font-weight: 600;
margin-bottom: var(--spacing-xs);
color: var(--text-dark);
}
.form__input {
width: 100%;
padding: 0.875rem 1.25rem;
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
transition: var(--transition-base);
background: var(--bg-color);
}
.form__input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form__textarea {
resize: vertical;
min-height: 120px;
}
.form__message {
text-align: center;
margin-top: var(--spacing-md);
font-weight: 600;
display: none;
}
.form__message.success {
color: var(--success-color);
display: block;
}
.form__message.error {
color: var(--error-color);
display: block;
}
/* ==================== FOOTER ==================== */
.footer {
background: var(--text-dark);
color: rgba(255, 255, 255, 0.8);
padding: var(--spacing-2xl) 0 var(--spacing-lg);
}
.footer__container {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.footer__logo {
font-size: var(--font-size-xl);
font-weight: 800;
font-family: var(--font-heading);
margin-bottom: var(--spacing-md);
display: inline-block;
}
.footer__logo-img {
height: 60px;
width: auto;
object-fit: contain;
transition: var(--transition-fast);
}
.footer__logo-img:hover {
transform: scale(1.05);
}
.footer__description {
line-height: 1.8;
margin-top: var(--spacing-md);
}
.footer__title {
color: white;
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-md);
}
.footer__list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.footer__link {
transition: var(--transition-fast);
}
.footer__link:hover {
color: white;
padding-left: var(--spacing-xs);
}
.footer__social {
display: flex;
gap: var(--spacing-sm);
}
.footer__social-link {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: var(--transition-base);
}
.footer__social-link:hover {
background: var(--primary-color);
transform: translateY(-5px);
}
.footer__contact-item {
display: flex;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, 0.8);
}
.footer__contact-item i {
color: var(--primary-color);
font-size: 1rem;
}
.footer__social-container .footer__social {
margin-top: var(--spacing-md);
}
.footer__bottom {
padding-top: var(--spacing-lg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.footer__copy {
font-size: var(--font-size-sm);
}
/* ==================== SCROLL UP ==================== */
.scrollup {
position: fixed;
right: 2rem;
bottom: -30%;
background: var(--gradient-primary);
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
color: white;
font-size: var(--font-size-lg);
box-shadow: var(--shadow-lg);
z-index: var(--z-fixed);
transition: var(--transition-base);
}
.scrollup:hover {
transform: translateY(-5px);
}
.show-scroll {
bottom: 2rem;
}
/* ==================== TECHNICAL SEO PAGE STYLES ==================== */
/* Technical SEO Overview Section */
.technical-seo-overview {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 80px 0 100px;
}
.technical-seo-overview__content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.technical-seo-overview__badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
color: #667eea;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: var(--spacing-md);
background: rgba(102, 126, 234, 0.1);
padding: 8px 20px;
border-radius: 50px;
}
.technical-seo-overview__container {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: center;
}
.technical-seo-overview__content {
max-width: 100%;
padding-right: 20px;
}
.technical-seo-overview__title {
font-size: var(--font-size-4xl);
color: #667eea;
margin-bottom: var(--spacing-lg);
line-height: 1.2;
}
.technical-seo-overview__description {
font-size: 1.05rem;
color: var(--text-light);
line-height: 1.8;
margin-bottom: var(--spacing-md);
}
.technical-seo-stats {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
align-items: stretch;
}
.technical-seo-stats__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
align-items: stretch;
}
.technical-seo-stat {
background: white;
padding: 40px 30px;
border-radius: 16px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 210px;
}
.technical-seo-stat:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
border-color: var(--primary-color);
}
.technical-seo-stat i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 20px;
display: block;
}
.technical-seo-stat__number {
font-size: 3rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 10px;
line-height: 1;
}
.technical-seo-stat__label {
font-size: 1rem;
color: var(--text-light);
font-weight: 500;
line-height: 1.4;
}
.technical-stat-card {
background: white;
padding: 40px 30px;
border-radius: 16px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: var(--transition-base);
}
.technical-stat-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
}
.technical-stat-card__icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
}
.technical-stat-card__icon i {
font-size: 1.75rem;
color: white;
}
.technical-stat-card__title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-dark);
margin-bottom: var(--spacing-xs);
}
.technical-stat-card__subtitle {
font-size: var(--font-size-sm);
color: var(--text-light);
}
/* Technical Services Section */
.technical-services {
padding: 100px 0;
background: white;
}
.section__subtitle-blue {
display: block;
text-align: center;
font-size: 0.75rem;
font-weight: 700;
color: #667eea;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 12px;
}
.section__title-blue {
text-align: center;
font-size: var(--font-size-3xl);
color: #667eea;
margin-bottom: 50px;
}
.technical-services__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
}
.technical-service-card {
background: #f8f9fa;
padding: 30px;
border-radius: 12px;
border-left: 4px solid #667eea;
transition: var(--transition-base);
}
.technical-service-card:hover {
background: white;
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
transform: translateY(-5px);
}
.technical-service-card__icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
}
.technical-service-card__icon i {
font-size: 1.5rem;
color: white;
}
.technical-service-card__title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-dark);
margin-bottom: var(--spacing-md);
}
.technical-service-card__description {
font-size: var(--font-size-base);
color: var(--text-light);
line-height: 1.7;
margin-bottom: var(--spacing-lg);
}
.technical-service-card__list {
list-style: none;
padding: 0;
margin: 0;
}
.technical-service-card__list li {
padding: var(--spacing-xs) 0;
color: var(--text-color);
font-size: var(--font-size-sm);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.technical-service-card__list i {
color: #667eea;
font-size: 0.875rem;
}
/* What's Included Section */
.whats-included__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
.whats-included__item {
background: white;
padding: 35px 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.whats-included__item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
border-color: var(--primary-color);
}
.whats-included__icon {
width: 65px;
height: 65px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
color: var(--primary-color);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
margin-bottom: 20px;
}
.whats-included__title {
font-size: 1.35rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 15px;
}
.whats-included__description {
color: var(--text-light);
line-height: 1.7;
margin-bottom: 20px;
font-size: 0.95rem;
}
.whats-included__list {
list-style: none;
padding: 0;
margin: 0;
}
.whats-included__list li {
padding: 8px 0;
color: var(--text-color);
font-size: 0.9rem;
display: flex;
align-items: flex-start;
gap: 12px;
line-height: 1.6;
}
.whats-included__list i {
color: var(--primary-color);
font-size: 0.75rem;
margin-top: 5px;
flex-shrink: 0;
}
/* Technical Process Section */
.technical-process {
padding: 100px 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.technical-process__intro {
text-align: center;
font-size: var(--font-size-lg);
color: var(--text-light);
max-width: 700px;
margin: 20px auto 60px;
}
.technical-process__timeline {
max-width: 900px;
margin: 0 auto;
}
.technical-process-step {
background: white;
padding: 30px;
border-radius: 12px;
margin-bottom: 24px;
display: flex;
gap: 30px;
align-items: flex-start;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: var(--transition-base);
}
.technical-process-step:hover {
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
transform: translateX(8px);
}
.technical-process-step:last-child {
margin-bottom: 0;
}
.technical-process-step__number {
min-width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-2xl);
font-weight: 700;
color: white;
}
.technical-process-step__content {
flex: 1;
}
.technical-process-step__title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-dark);
margin-bottom: var(--spacing-sm);
}
.technical-process-step__description {
font-size: var(--font-size-base);
color: var(--text-light);
line-height: 1.7;
}
/* Technical Benefits Section */
.technical-benefits {
padding: 100px 0;
background: white;
}
.technical-benefits__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 60px;
}
.technical-benefit-card {
background: #f8f9fa;
padding: 40px 30px;
border-radius: 12px;
text-align: left;
transition: var(--transition-base);
border-top: 4px solid #667eea;
}
.technical-benefit-card:hover {
background: white;
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.15);
transform: translateY(-8px);
}
.technical-benefit-card__icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-lg);
}
.technical-benefit-card__icon i {
font-size: 1.75rem;
color: white;
}
.technical-benefit-card__title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-dark);
margin-bottom: var(--spacing-md);
}
.technical-benefit-card__description {
font-size: var(--font-size-base);
color: var(--text-light);
line-height: 1.7;
}
/* ==================== RESPONSIVE DESIGN ==================== */
@media screen and (max-width: 1024px) {
.container {
padding: 0 var(--spacing-md);
max-width: 100%;
}
/* CTA Button Tablet Styles */
.nav__cta-button {
padding: 0.6rem 1rem;
font-size: 0.85rem;
gap: 6px;
margin-left: 1rem;
}
.nav__cta-button span {
display: inline;
}
.hero__container,
.about__container,
.contact__container {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.hero__image {
order: -1;
}
.hero__img {
width: 300px;
height: 300px;
}
.services__container,
.portfolio__container {
grid-template-columns: repeat(2, 1fr);
}
.results__container {
grid-template-columns: repeat(2, 1fr);
}
.testimonials__container {
grid-template-columns: repeat(2, 1fr);
}
.footer__container {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
:root {
--font-size-5xl: 2rem;
--font-size-3xl: 1.5rem;
--font-size-2xl: 1.25rem;
}
.container {
padding: 0 15px;
max-width: 100%;
}
/* CTA Button Mobile Styles */
.nav__cta-button {
padding: 0.7rem;
font-size: 0.85rem;
margin-left: 0.75rem;
gap: 0;
min-width: 44px;
height: 44px;
justify-content: center;
}
.nav__cta-button span {
display: none;
}
.nav__cta-button i {
font-size: 1.2rem;
margin: 0;
}
.nav__menu {
position: fixed;
top: 0;
right: -100%;
background: white;
width: 85%;
max-width: 400px;
height: 100vh;
padding: var(--spacing-2xl) var(--spacing-lg);
box-shadow: var(--shadow-xl);
transition: right 0.3s ease-in-out;
overflow-y: auto;
z-index: 1000;
}
.nav__menu.show-menu {
right: 0;
}
.nav__list {
flex-direction: column;
gap: 0;
}
.nav__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.nav__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md) 0;
width: 100%;
}
.nav__toggle {
display: flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 100;
position: relative;
}
.nav__toggle i {
font-size: 1.5rem;
color: var(--color-text);
}
.nav__close {
display: block;
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
font-size: 1.5rem;
color: var(--color-text);
cursor: pointer;
z-index: 1001;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
/* Mobile Dropdown Styles */
.nav__dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: transparent;
border-radius: 0;
padding: 0;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
border: none;
min-width: auto;
}
.nav__item--dropdown.active .nav__dropdown,
.nav__item--multilevel.active .nav__dropdown {
max-height: 1000px;
padding: var(--spacing-xs) 0;
margin-top: var(--spacing-xs);
}
/* Mobile Multi-level Submenu */
.nav__submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
background: transparent;
border-radius: 0;
padding: 0;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
border: none;
min-width: auto;
}
.nav__dropdown-item--submenu.active .nav__submenu {
max-height: 600px;
padding: var(--spacing-xs) 0;
margin-top: var(--spacing-xs);
padding-left: var(--spacing-md);
}
.nav__dropdown-item--submenu > .nav__dropdown-link .fa-chevron-right {
transition: transform 0.3s ease;
}
.nav__dropdown-item--submenu.active > .nav__dropdown-link .fa-chevron-right {
transform: rotate(90deg);
}
.nav__dropdown-link,
.nav__submenu-link {
padding: var(--spacing-sm) var(--spacing-md);
margin-bottom: 2px;
}
.nav__dropdown-link:hover,
.nav__submenu-link:hover {
background: rgba(102, 126, 234, 0.1);
padding-left: calc(var(--spacing-md) + 5px);
}
.nav__dropdown-item {
margin-bottom: 0;
}
.nav__submenu li {
margin-bottom: 0;
}
/* Add spacing below header for mobile */
.hero,
.page-header {
padding-top: calc(var(--header-height) + 80px) !important;
}
.hero__stats {
grid-template-columns: repeat(2, 1fr);
}
.hero__buttons {
flex-direction: column;
}
.services__container,
.portfolio__container,
.results__container {
grid-template-columns: 1fr;
}
.footer__container {
grid-template-columns: 1fr;
}
/* Technical SEO Page Responsive */
.technical-seo-overview {
padding: 60px 0 80px;
}
.technical-seo-overview__container {
grid-template-columns: 1fr;
gap: 40px;
}
.technical-seo-stats {
width: 100%;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.technical-seo-stats__grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.technical-seo-stat {
padding: 35px 25px;
min-height: 180px;
}
.technical-seo-stat i {
font-size: 2.5rem;
margin-bottom: 15px;
}
.technical-seo-stat__number {
font-size: 2.5rem;
}
.technical-seo-stat__label {
font-size: 0.9rem;
}
.technical-seo-overview__title {
font-size: var(--font-size-2xl);
}
.whats-included__grid {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
.whats-included__item {
padding: 30px 25px;
}
.whats-included__icon {
width: 55px;
height: 55px;
font-size: 1.5rem;
}
.whats-included__title {
font-size: 1.2rem;
}
.section__badge {
font-size: 0.65rem;
padding: 5px 14px;
letter-spacing: 1.5px;
}
.section__title {
font-size: var(--font-size-2xl);
}
.section__description {
font-size: 0.95rem;
}
.technical-services {
padding: 60px 0;
}
.technical-services__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.section__title-blue {
margin-bottom: 40px;
}
.technical-process {
padding: 60px 0;
}
.technical-process__intro {
margin: 16px auto 40px;
}
.technical-process-step {
flex-direction: column;
text-align: center;
padding: 24px;
margin-bottom: 20px;
}
.technical-process-step__number {
margin: 0 auto 20px;
}
.technical-benefits {
padding: 60px 0;
}
.technical-benefits__grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 40px;
}
.tools {
padding: 60px 0;
}
.tools__grid {
margin-top: 40px;
}
.testimonials__container {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.testimonial__card {
padding: var(--spacing-lg);
}
.results__container {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 480px) {
.hero__stats {
grid-template-columns: 1fr;
}
.technical-seo-overview__container {
gap: 30px;
}
.technical-seo-overview__title {
font-size: var(--font-size-xl);
}
.technical-seo-overview__description {
font-size: 0.95rem;
}
.technical-seo-stats {
grid-template-columns: 1fr;
gap: 15px;
}
.technical-seo-stats__grid {
grid-template-columns: 1fr;
gap: 15px;
}
.technical-seo-stat {
padding: 30px 25px;
min-height: 160px;
}
.technical-seo-stat i {
font-size: 2.25rem;
margin-bottom: 12px;
}
.technical-seo-stat__number {
font-size: 2.25rem;
}
.technical-seo-stat__label {
font-size: 0.9rem;
}
.whats-included__grid {
gap: 20px;
}
.whats-included__item {
padding: 25px 20px;
}
.whats-included__icon {
width: 50px;
height: 50px;
font-size: 1.35rem;
margin-bottom: 15px;
}
.whats-included__title {
font-size: 1.1rem;
margin-bottom: 12px;
}
.whats-included__description {
font-size: 0.9rem;
margin-bottom: 15px;
}
.whats-included__list li {
font-size: 0.85rem;
padding: 6px 0;
gap: 10px;
}
.section__badge {
font-size: 0.6rem;
padding: 4px 12px;
letter-spacing: 1px;
}
.section__title {
font-size: var(--font-size-xl);
}
.section__description {
font-size: 0.9rem;
padding: 0 10px;
}
.scrollup {
width: 40px;
height: 40px;
right: 1rem;
}
.show-scroll {
bottom: 1rem;
}
.testimonial__text {
font-size: var(--font-size-sm);
}
/* Technical SEO Page - Extra Small Devices */
.technical-seo-overview {
padding: 40px 0 60px;
}
.page-header {
padding: calc(var(--header-height) + 60px) 0 40px !important;
}
.technical-seo-overview__title {
font-size: var(--font-size-xl);
line-height: 1.3;
}
.technical-seo-overview__description {
font-size: var(--font-size-base);
}
.technical-seo-overview__badge {
font-size: 0.65rem;
padding: 6px 16px;
}
.technical-stat-card {
padding: 30px 20px;
}
.technical-stat-card__icon {
width: 60px;
height: 60px;
}
.technical-stat-card__icon i {
font-size: 1.5rem;
}
.technical-stat-card__title {
font-size: var(--font-size-lg);
}
.technical-services {
padding: 40px 0;
}
.section__title-blue {
font-size: var(--font-size-xl);
margin-bottom: 30px;
}
.section__subtitle-blue {
font-size: 0.65rem;
}
.technical-service-card {
padding: 20px;
}
.technical-service-card__title {
font-size: var(--font-size-lg);
}
.technical-service-card__description {
font-size: var(--font-size-sm);
}
.technical-service-card__list li {
font-size: var(--font-size-sm);
}
.technical-process {
padding: 40px 0;
}
.technical-process-step {
padding: 20px;
}
.technical-process-step__number {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.technical-process-step__title {
font-size: var(--font-size-lg);
}
.technical-process-step__description {
font-size: var(--font-size-sm);
}
.technical-benefits {
padding: 40px 0;
}
.technical-benefit-card {
padding: 20px;
}
.technical-benefit-card__icon {
width: 50px;
height: 50px;
}
.technical-benefit-card__icon i {
font-size: 1.25rem;
}
.technical-benefit-card__title {
font-size: var(--font-size-lg);
}
.technical-benefit-card__description {
font-size: var(--font-size-sm);
}
.tools {
padding: 40px 0;
}
.tools__grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.tool__item {
padding: 15px;
}
.tool__item i {
font-size: 1.5rem;
}
.tool__item h4 {
font-size: var(--font-size-sm);
}
.section__description {
font-size: var(--font-size-sm);
}
}
/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
[data-aos="fade-up"] {
animation: fadeInUp 0.8s ease;
}
[data-aos="fade-left"] {
animation: fadeInLeft 0.8s ease;
}
[data-aos="fade-right"] {
animation: fadeInRight 0.8s ease;
}
[data-aos="zoom-in"] {
animation: zoomIn 0.8s ease;
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ==================== MULTI-PAGE STYLES ==================== */
/* Page Header */
.page-header {
padding: calc(var(--header-height) + 80px) 0 80px;
background: var(--gradient-primary);
color: white;
text-align: center;
position: relative;
overflow: hidden;
min-height: 50vh;
display: flex;
align-items: center;
}
/* Page Header with Background Image */
.page-header--with-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.page-header--with-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.92) 0%, rgba(118, 75, 162, 0.92) 100%);
z-index: 1;
}
.page-header__content {
position: relative;
z-index: 2;
}
/* Service-specific backgrounds */
.page-header--technical-seo {
background-image: url('https://images.unsplash.com/photo-1555421689-d68471e189f2?q=80&w=2070&auto=format&fit=crop');
}
.page-header--onpage-offpage {
background-image: url('https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?q=80&w=2074&auto=format&fit=crop');
}
.page-header--local-seo {
background-image: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2074&auto=format&fit=crop');
}
.page-header--seo-services {
background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop');
}
.page-header--sem {
background-image: url('https://images.unsplash.com/photo-1533750516457-a7f992034fec?q=80&w=2006&auto=format&fit=crop');
}
.page-header--smm {
background-image: url('https://images.unsplash.com/photo-1611926653458-09294b3142bf?q=80&w=2070&auto=format&fit=crop');
}
.page-header--wordpress {
background-image: url('https://images.unsplash.com/photo-1504639725590-34d0984388bd?q=80&w=2074&auto=format&fit=crop');
}
.page-header--shopify {
background-image: url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?q=80&w=2070&auto=format&fit=crop');
}
.page-header--content-writing {
background-image: url('https://images.unsplash.com/photo-1455390582262-044cdead277a?q=80&w=2073&auto=format&fit=crop');
}
.page-header__title {
font-size: var(--font-size-4xl);
font-weight: 800;
margin-bottom: var(--spacing-sm);
color: white;
}
.page-header__description {
font-size: var(--font-size-lg);
opacity: 0.9;
margin-bottom: var(--spacing-md);
}
.breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xs);
font-size: var(--font-size-sm);
opacity: 0.9;
}
.breadcrumb a {
color: white;
transition: var(--transition-base);
}
.breadcrumb a:hover {
opacity: 0.7;
}
/* =============== PORTFOLIO FILTER TABS =============== */
.portfolio-filters {
display: flex;
justify-content: center;
gap: 1rem;
margin: 2.5rem 0 1.5rem 0;
}
.portfolio-filter-btn {
background: var(--bg-primary);
color: var(--primary-color);
border: 2px solid var(--primary-color);
border-radius: 30px;
padding: 0.5rem 2rem;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.2s;
font-weight: 600;
}
.portfolio-filter-btn.active,
.portfolio-filter-btn:hover {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
.portfolio-section {
display: block;
transition: opacity 0.3s;
}
.portfolio-section[hidden] {
display: none !important;
opacity: 0;
}
/* =============== SEO RESULTS SECTION =============== */
.seo-results {
background: var(--bg-secondary);
padding: var(--spacing-xl) 0;
}
.seo-results__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.seo-result-card {
background: var(--bg-primary);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
position: relative;
}
.seo-result-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.seo-result-card--wide {
grid-column: span 2;
display: flex;
align-items: center;
justify-content: center;
}
.seo-result-card--wide .seo-result-card__image {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.seo-result-card--wide .seo-result-card__image img {
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
display: block;
}
.seo-result-card__image {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
background: var(--bg-secondary);
}
.seo-result-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
cursor: zoom-in;
transition: transform 0.3s ease;
}
.seo-result-card:hover .seo-result-card__image img {
transform: scale(1.05);
}
/* Portfolio Grid */
.portfolio__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.portfolio__card--large {
grid-column: span 2;
}
.portfolio__tags {
display: flex;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-sm);
flex-wrap: wrap;
}
.tag {
background: var(--gradient-primary);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: var(--font-size-xs);
font-weight: 600;
}
.portfolio__highlights {
list-style: none;
margin-top: var(--spacing-md);
}
.portfolio__highlights li {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
font-size: var(--font-size-sm);
}
.portfolio__highlights i {
color: var(--success-color);
}
/* Services Page */
.service__tools {
display: flex;
gap: var(--spacing-xs);
margin-top: var(--spacing-md);
flex-wrap: wrap;
}
.tool-badge {
background: var(--bg-tertiary);
padding: 0.4rem 1rem;
border-radius: 20px;
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--text-color);
}
.tools {
background: var(--bg-secondary);
padding: 100px 0;
}
.tools__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-lg);
margin-top: 60px;
}
.tool__item {
text-align: center;
padding: var(--spacing-lg);
background: white;
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
}
.tool__item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.tool__item i {
font-size: var(--font-size-3xl);
color: var(--primary-color);
margin-bottom: var(--spacing-sm);
}
.tool__item h4 {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-color);
}
/* About Page */
.about__image-wrapper {
position: relative;
}
.about__experience-badge {
position: absolute;
bottom: 20px;
right: 20px;
background: var(--gradient-primary);
color: white;
padding: var(--spacing-md);
border-radius: 12px;
text-align: center;
box-shadow: var(--shadow-lg);
}
.about__experience-badge h3 {
font-size: var(--font-size-3xl);
font-weight: 800;
margin-bottom: 0;
}
.about__experience-badge p {
font-size: var(--font-size-sm);
margin: 0;
}
.about__subtitle {
font-size: var(--font-size-xl);
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
/* Timeline */
.experience {
background: var(--bg-secondary);
}
.timeline {
position: relative;
max-width: 900px;
margin: var(--spacing-xl) auto 0;
}
.timeline::before {
content: '';
position: absolute;
left: 30px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-color);
}
.timeline__item {
position: relative;
padding-left: 80px;
margin-bottom: var(--spacing-xl);
}
.timeline__marker {
position: absolute;
left: 22px;
top: 0;
width: 18px;
height: 18px;
background: var(--primary-color);
border-radius: 50%;
border: 3px solid white;
}
.timeline__content {
background: white;
padding: var(--spacing-lg);
border-radius: 12px;
box-shadow: var(--shadow-md);
}
.timeline__date {
display: inline-block;
padding: 0.25rem 0.75rem;
background: var(--bg-tertiary);
color: var(--text-color);
border-radius: 20px;
font-size: var(--font-size-xs);
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.timeline__title {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-dark);
margin-bottom: var(--spacing-xs);
}
.timeline__company {
font-size: var(--font-size-base);
color: var(--primary-color);
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.timeline__description {
color: var(--text-light);
margin-bottom: var(--spacing-md);
}
.timeline__highlights {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xs);
}
.timeline__highlights li {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-sm);
color: var(--text-light);
}
.timeline__highlights i {
color: var(--success-color);
}
/* Skills Section */
.skills__wrapper {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
}
.skills__category-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-lg);
color: var(--text-dark);
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.skill-tag {
background: var(--bg-tertiary);
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-color);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.skill-tag i {
color: var(--success-color);
font-size: var(--font-size-xs);
}
.tools__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm);
}
.tool__badge {
background: white;
padding: var(--spacing-sm);
border-radius: 8px;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-color);
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.tool__badge i {
color: var(--primary-color);
}
/* Education */
.education__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.education__card {
background: white;
padding: var(--spacing-xl);
border-radius: 12px;
box-shadow: var(--shadow-md);
text-align: center;
transition: var(--transition-base);
}
.education__card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.education__icon {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-md);
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.education__icon i {
font-size: var(--font-size-3xl);
color: white;
}
.education__title {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-dark);
}
.education__institution {
color: var(--primary-color);
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.education__description {
color: var(--text-light);
font-size: var(--font-size-sm);
}
/* Contact Page */
.contact__form-title {
font-size: var(--font-size-2xl);
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-dark);
}
.contact__form-description {
color: var(--text-light);
margin-bottom: var(--spacing-lg);
}
.contact__social-title {
font-size: var(--font-size-base);
font-weight: 600;
margin-bottom: var(--spacing-sm);
color: var(--text-dark);
}
.contact__social-links {
display: flex;
gap: var(--spacing-sm);
}
.contact__availability {
margin-top: var(--spacing-lg);
padding: var(--spacing-md);
background: var(--bg-tertiary);
border-radius: 8px;
}
.contact__availability h4 {
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
color: var(--text-dark);
}
.contact__availability p {
margin: 0.25rem 0;
color: var(--text-light);
font-size: var(--font-size-sm);
}
/* Industries & Markets */
.industries__grid,
.markets__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.industry__card,
.market__item {
background: white;
padding: var(--spacing-xl);
border-radius: 12px;
box-shadow: var(--shadow-md);
text-align: center;
transition: var(--transition-base);
}
.industry__card:hover,
.market__item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.industry__icon,
.market__item i {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-md);
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-3xl);
color: white;
}
.market__item i {
width: auto;
height: auto;
background: none;
margin-bottom: var(--spacing-sm);
}
.industry__title,
.market__item h4 {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--spacing-sm);
color: var(--text-dark);
}
.industry__description,
.market__item p {
color: var(--text-light);
font-size: var(--font-size-sm);
}
/* FAQ */
.faq__container {
max-width: 800px;
margin: var(--spacing-xl) auto 0;
}
.faq__item {
background: white;
margin-bottom: var(--spacing-md);
border-radius: 12px;
box-shadow: var(--shadow-sm);
overflow: hidden;
border: 2px solid #d1d5db;
}
.faq__question {
padding: var(--spacing-lg);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: var(--transition-base);
}
.faq__question:hover {
background: var(--bg-secondary);
}
.faq__question h3,
.faq__question span {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-dark);
margin: 0;
}
.faq__question i {
color: var(--primary-color);
transition: var(--transition-base);
}
.faq__item.active .faq__question i {
transform: rotate(180deg);
}
.faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq__item.active .faq__answer {
max-height: 500px;
}
.faq__answer p {
padding: 0 var(--spacing-lg) var(--spacing-lg);
color: var(--text-light);
margin: 0;
}
/* Responsive for Multi-Page */
@media screen and (max-width: 1024px) {
.portfolio__grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.portfolio__card--large {
grid-column: span 1;
}
.skills__wrapper {
grid-template-columns: 1fr;
}
.timeline__highlights {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 768px) {
.nav__logo-img {
height: 40px;
}
.footer__logo-img {
height: 50px;
}
.page-header {
padding: calc(var(--header-height) + 60px) 0 60px;
min-height: 45vh;
}
.page-header--with-bg::before {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
}
.page-header__title {
font-size: var(--font-size-3xl);
}
.hero {
padding-top: calc(var(--header-height) + 60px);
padding-bottom: 60px;
min-height: 90vh;
}
.portfolio__grid {
grid-template-columns: 1fr;
}
.seo-results__grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.seo-result-card--wide {
grid-column: span 1;
display: block;
align-items: stretch;
justify-content: stretch;
}
.seo-result-card--wide .seo-result-card__image {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.seo-result-card--wide .seo-result-card__image img {
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
}
.seo-result-card__image img {
object-fit: contain;
max-height: 400px;
}
.tools__grid {
grid-template-columns: repeat(2, 1fr);
}
.timeline {
padding-left: 0;
}
.timeline::before {
left: 20px;
}
.timeline__item {
padding-left: 60px;
}
.timeline__marker {
left: 12px;
}
.tools__list {
grid-template-columns: 1fr;
}
}
/* ==================== WHATSAPP FLOATING BUTTON ==================== */
.whatsapp-float {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 1000;
transition: all 0.3s ease;
}
.whatsapp-float__link {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
text-decoration: none;
animation: whatsapp-pulse 2s infinite;
}
.whatsapp-float__link:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}
.whatsapp-float__link i {
font-size: 32px;
color: #ffffff;
}
/* Pulse animation */
@keyframes whatsapp-pulse {
0% {
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.4);
}
50% {
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0);
}
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
.whatsapp-float {
bottom: 20px;
left: 20px;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 9999 !important;
}
.whatsapp-float__link {
width: 56px;
height: 56px;
display: flex !important;
visibility: visible !important;
}
.whatsapp-float__link i {
font-size: 28px;
}
}
@media screen and (max-width: 480px) {
.whatsapp-float {
bottom: 20px;
left: 20px;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 9999 !important;
}
.whatsapp-float__link {
width: 52px;
height: 52px;
display: flex !important;
visibility: visible !important;
}
.whatsapp-float__link i {
font-size: 26px;
}
.seo-results__grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.seo-result-card--wide .seo-result-card__image {
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.seo-result-card--wide .seo-result-card__image img {
width: 100%;
max-width: 100%;
height: auto;
object-fit: contain;
}
.seo-result-card__image img {
max-height: 180px;
}
}
/* ==================== BLOG STYLES ==================== */
/* Blog Grid Page */
.blog-grid {
padding: 80px 0;
background-color: var(--bg-secondary);
}
.blog-grid__container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 40px;
margin-top: 40px;
}
.blog-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.blog-card__image {
position: relative;
width: 100%;
height: 240px;
overflow: hidden;
}
.blog-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.blog-card:hover .blog-card__image img {
transform: scale(1.1);
}
.blog-card__badge {
position: absolute;
top: 20px;
left: 20px;
background: var(--gradient-primary);
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
z-index: 1;
}
.blog-card__content {
padding: 30px;
flex: 1;
display: flex;
flex-direction: column;
}
.blog-card__meta {
display: flex;
gap: 20px;
margin-bottom: 15px;
font-size: 0.875rem;
color: var(--text-light);
}
.blog-card__meta span {
display: flex;
align-items: center;
gap: 6px;
}
.blog-card__meta i {
color: var(--primary-color);
}
.blog-card__title {
margin-bottom: 15px;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
color: var(--text-dark);
}
.blog-card__title a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.blog-card__title a:hover {
color: var(--primary-color);
}
.blog-card__excerpt {
flex: 1;
color: var(--text-light);
line-height: 1.7;
margin-bottom: 20px;
}
.blog-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
transition: gap 0.3s ease;
}
.blog-card__link:hover {
gap: 12px;
}
.blog-card__link i {
font-size: 0.875rem;
}
/* Newsletter CTA */
.newsletter-cta {
background: var(--gradient-primary);
padding: 60px 0;
color: white;
}
.newsletter-cta__content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.newsletter-cta__text {
flex: 1;
}
.newsletter-cta__title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 10px;
}
.newsletter-cta__description {
font-size: 1.125rem;
opacity: 0.9;
}
/* Blog Post Header */
.blog-post-header {
padding: calc(var(--header-height) + 80px) 0 60px;
background: var(--gradient-primary);
color: white;
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 50vh;
}
.blog-post-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.blog-post-header .container {
position: relative;
z-index: 2;
}
.blog-post-header__content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.blog-post-header__meta {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.blog-post-header__badge {
background: rgba(255, 255, 255, 0.2);
padding: 6px 16px;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
}
.blog-post-header__date,
.blog-post-header__read-time {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
}
.blog-post-header__title {
font-size: 3rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 20px;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.blog-post-header__excerpt {
font-size: 1.25rem;
line-height: 1.6;
opacity: 0.95;
margin-bottom: 30px;
}
.blog-post-header__author {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
}
.blog-post-header__author-img {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
}
.blog-post-header__author-info {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.blog-post-header__author-name {
font-weight: 700;
font-size: 1.125rem;
}
.blog-post-header__author-title {
font-size: 0.875rem;
opacity: 0.9;
}
/* Blog Post Content */
.blog-post {
padding: 80px 0;
}
.blog-post__content {
display: grid;
grid-template-columns: 1fr 320px;
gap: 60px;
max-width: 1400px;
margin: 0 auto;
}
.blog-post__body {
max-width: 100%;
}
.blog-post__intro {
font-size: 1.25rem;
line-height: 1.8;
color: var(--text-color);
margin-bottom: 40px;
padding-left: 20px;
border-left: 4px solid var(--primary-color);
}
.blog-post__body h2 {
font-size: 2.25rem;
font-weight: 700;
color: var(--text-dark);
margin: 50px 0 25px;
line-height: 1.3;
}
.blog-post__body h3 {
font-size: 1.75rem;
font-weight: 600;
color: var(--text-dark);
margin: 40px 0 20px;
}
.blog-post__body h4 {
font-size: 1.375rem;
font-weight: 600;
color: var(--text-dark);
margin: 30px 0 15px;
}
.blog-post__body p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--text-color);
margin-bottom: 20px;
}
.blog-post__body strong {
color: var(--text-dark);
font-weight: 600;
}
.blog-post__list {
margin: 25px 0;
padding-left: 0;
list-style: none;
}
.blog-post__list > li {
position: relative;
padding-left: 35px;
margin-bottom: 15px;
font-size: 1.125rem;
line-height: 1.7;
color: var(--text-color);
}
.blog-post__list > li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 20px;
height: 20px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.875rem;
flex-shrink: 0;
}
.blog-post__list ul {
margin-top: 10px;
padding-left: 25px;
}
.blog-post__list ul li {
list-style: disc;
margin-bottom: 8px;
}
/* Highlight Boxes */
.blog-post__highlight,
.blog-post__warning {
padding: 25px 30px;
border-radius: 12px;
margin: 35px 0;
display: flex;
gap: 20px;
align-items: flex-start;
}
.blog-post__highlight {
background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
border-left: 4px solid #3b82f6;
}
.blog-post__warning {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-left: 4px solid #f59e0b;
}
.blog-post__highlight i,
.blog-post__warning i {
font-size: 1.5rem;
color: #3b82f6;
flex-shrink: 0;
margin-top: 2px;
}
.blog-post__warning i {
color: #f59e0b;
}
.blog-post__highlight p,
.blog-post__warning p {
margin: 0;
font-size: 1rem;
}
/* Featured Box */
.blog-post__featured-box {
background: var(--gradient-primary);
color: white;
padding: 40px;
border-radius: 16px;
margin: 40px 0;
display: flex;
gap: 30px;
}
/* Featured Consultant Card - Complete Redesign */
.featured-consultant-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
border-radius: 15px;
margin: 30px 0;
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.featured-consultant-card * {
color: white;
}
.featured-consultant-card__wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.featured-consultant-card__left,
.featured-consultant-card__right {
display: flex;
flex-direction: column;
}
.featured-consultant-card__header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px;
}
.featured-consultant-card__rating {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.featured-consultant-card__rating i {
color: #ffd700;
font-size: 1.1rem;
}
.featured-consultant-card__rating span {
font-weight: 600;
margin-left: 8px;
font-size: 1rem;
color: white;
}
.featured-consultant-card__badge {
background: #ffd700;
color: #1a202c !important;
padding: 8px 20px;
border-radius: 25px;
font-weight: 700;
font-size: 0.9rem;
white-space: nowrap;
}
.featured-consultant-card__title {
font-size: 1.6rem;
margin-bottom: 20px;
color: white;
line-height: 1.3;
}
.featured-consultant-card__intro {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 25px;
color: rgba(255, 255, 255, 0.95);
}
.featured-consultant-card__subtitle {
font-size: 1.2rem;
margin: 20px 0 15px;
color: white;
font-weight: 600;
}
.featured-consultant-card__list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.featured-consultant-card__list li {
padding: 10px 0;
padding-left: 25px;
position: relative;
line-height: 1.6;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.95);
}
.featured-consultant-card__list li strong {
color: white;
}
.featured-consultant-card__list li:before {
content: "✓";
position: absolute;
left: 0;
color: #ffd700;
font-weight: bold;
font-size: 1.2rem;
}
.featured-consultant-card__features {
display: flex;
flex-direction: column;
gap: 15px;
margin: 20px 0;
}
.featured-consultant-card__feature {
background: rgba(255, 255, 255, 0.15);
padding: 15px;
border-radius: 10px;
backdrop-filter: blur(10px);
display: flex;
align-items: flex-start;
gap: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.featured-consultant-card__feature i {
font-size: 1.8rem;
color: #ffd700;
flex-shrink: 0;
margin-top: 5px;
}
.featured-consultant-card__feature strong {
display: block;
margin-bottom: 5px;
font-size: 1rem;
color: white;
}
.featured-consultant-card__feature p {
margin: 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
}
.featured-consultant-card__industries {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 15px 0 25px;
}
.featured-consultant-card__industries span {
background: rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.3);
white-space: nowrap;
color: white;
}
.featured-consultant-card__actions {
display: flex;
gap: 12px;
margin-top: 20px;
flex-wrap: wrap;
}
.featured-consultant-card__btn {
padding: 14px 28px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
font-size: 0.95rem;
flex: 1;
min-width: 180px;
}
.featured-consultant-card__btn--primary {
background: white;
color: #667eea !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.featured-consultant-card__btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.featured-consultant-card__btn--secondary {
background: rgba(255, 255, 255, 0.2);
color: white !important;
border: 2px solid white;
}
.featured-consultant-card__btn--secondary:hover {
background: rgba(255, 255, 255, 0.3);
}
/* Tablet View */
@media (max-width: 1024px) {
.featured-consultant-card__wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
}
/* Mobile View */
@media (max-width: 768px) {
.featured-consultant-card {
padding: 25px;
}
.featured-consultant-card__title {
font-size: 1.3rem;
}
.featured-consultant-card__subtitle {
font-size: 1.1rem;
}
.featured-consultant-card__intro {
font-size: 0.95rem;
}
.featured-consultant-card__list li {
font-size: 0.9rem;
}
.featured-consultant-card__btn {
padding: 12px 20px;
font-size: 0.9rem;
min-width: 150px;
}
}
/* Small Mobile View */
@media (max-width: 480px) {
.featured-consultant-card {
padding: 20px;
}
.featured-consultant-card__header {
flex-direction: column;
align-items: flex-start;
}
.featured-consultant-card__rating {
font-size: 0.9rem;
}
.featured-consultant-card__rating i {
font-size: 1rem;
}
.featured-consultant-card__title {
font-size: 1.2rem;
}
.featured-consultant-card__industries span {
padding: 6px 12px;
font-size: 0.8rem;
}
.featured-consultant-card__actions {
flex-direction: column;
}
.featured-consultant-card__btn {
width: 100%;
min-width: auto;
}
.featured-consultant-card__feature {
padding: 12px;
}
.featured-consultant-card__feature i {
font-size: 1.5rem;
}
}
.blog-post__featured-icon {
font-size: 3rem;
opacity: 0.9;
}
.blog-post__featured-content h4 {
color: white;
margin: 0 0 15px;
font-size: 1.5rem;
}
.blog-post__featured-content p {
color: white;
opacity: 0.95;
margin: 0;
}
/* Stats Grid */
.blog-post__stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
margin: 40px 0;
}
.blog-post__stat {
background: white;
border: 2px solid var(--border-color);
border-radius: 12px;
padding: 30px 20px;
text-align: center;
transition: all 0.3s ease;
}
.blog-post__stat:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.blog-post__stat-number {
font-size: 2.5rem;
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
}
.blog-post__stat-label {
font-size: 0.938rem;
color: var(--text-light);
font-weight: 500;
}
/* CTA Boxes */
.blog-post__cta {
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
padding: 40px;
border-radius: 16px;
text-align: center;
margin: 50px 0;
}
.blog-post__cta h4 {
margin: 0 0 15px;
color: var(--text-dark);
}
.blog-post__cta p {
margin: 0 0 25px;
}
.blog-post__final-cta {
background: var(--gradient-primary);
color: white;
padding: 60px;
border-radius: 20px;
text-align: center;
margin: 60px 0;
}
.blog-post__final-cta h3 {
color: white;
margin: 0 0 15px;
font-size: 2rem;
}
.blog-post__final-cta p {
color: white;
opacity: 0.95;
margin: 0 0 30px;
font-size: 1.125rem;
}
.blog-post__cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
/* Pricing Table */
.blog-post__pricing-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin: 40px 0;
}
.pricing-tier {
background: white;
border: 2px solid var(--border-color);
border-radius: 16px;
padding: 35px;
transition: all 0.3s ease;
}
.pricing-tier:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-lg);
}
.pricing-tier--featured {
border-color: var(--primary-color);
border-width: 3px;
position: relative;
transform: scale(1.05);
}
.pricing-tier h4 {
margin: 0 0 15px;
font-size: 1.375rem;
}
.pricing-tier__price {
font-size: 2rem;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 20px;
}
.pricing-tier ul {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-tier ul li {
padding: 10px 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.938rem;
}
.pricing-tier ul li:last-child {
border-bottom: none;
}
/* Case Study Box */
.blog-post__case-study {
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
border-left: 4px solid #10b981;
padding: 30px;
border-radius: 12px;
margin: 35px 0;
}
.blog-post__case-study p {
margin: 0;
font-style: italic;
}
/* Example Box */
.blog-post__example {
background: #f9fafb;
border: 2px dashed var(--border-color);
border-radius: 12px;
padding: 30px;
margin: 35px 0;
}
.blog-post__example h4 {
margin: 0 0 20px;
color: var(--text-dark);
}
.code-block {
background: #1e293b;
border-radius: 8px;
padding: 20px;
overflow-x: auto;
margin: 15px 0;
}
.code-block code {
color: #e2e8f0;
font-family: 'Courier New', monospace;
font-size: 0.875rem;
line-height: 1.6;
white-space: pre;
}
/* Comparison Box */
.blog-post__comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 35px 0;
}
.comparison-item {
padding: 25px;
border-radius: 12px;
border: 2px solid;
}
.comparison-item:first-child {
background: #fef2f2;
border-color: #ef4444;
}
.comparison-item:last-child {
background: #f0fdf4;
border-color: #22c55e;
}
.comparison-item h4 {
margin: 0 0 15px;
font-size: 1.125rem;
}
.comparison-item p {
margin: 0;
}
/* Strategy Steps */
.blog-post__strategy-steps {
margin: 40px 0;
}
.strategy-step {
display: flex;
gap: 25px;
margin-bottom: 30px;
padding: 25px;
background: white;
border-radius: 12px;
border: 2px solid var(--border-color);
transition: all 0.3s ease;
}
.strategy-step:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
}
.strategy-step__number {
width: 50px;
height: 50px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
flex-shrink: 0;
}
.strategy-step__content h4 {
margin: 0 0 10px;
font-size: 1.25rem;
}
.strategy-step__content p {
margin: 0;
font-size: 1rem;
}
/* Decision Guide */
.blog-post__decision-guide {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 40px 0;
}
.decision-option {
background: white;
border: 2px solid var(--border-color);
border-radius: 16px;
padding: 35px;
}
.decision-option h4 {
margin: 0 0 20px;
color: var(--primary-color);
}
.decision-option ul {
list-style: none;
padding: 0;
margin: 0;
}
.decision-option ul li {
padding: 10px 0;
display: flex;
align-items: flex-start;
gap: 10px;
}
/* Checklist */
.blog-post__checklist {
margin: 35px 0;
}
.checklist-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
padding: 20px;
background: white;
border-radius: 12px;
border-left: 4px solid #22c55e;
}
.checklist-item i {
color: #22c55e;
font-size: 1.5rem;
flex-shrink: 0;
}
.checklist-item p {
margin: 0;
}
/* Author Bio */
.blog-post__author-bio {
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
padding: 40px;
border-radius: 16px;
display: flex;
gap: 30px;
margin: 60px 0;
border: 2px solid var(--border-color);
}
.blog-post__author-bio-img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid white;
box-shadow: var(--shadow-md);
flex-shrink: 0;
}
.blog-post__author-bio-content h4 {
margin: 0 0 15px;
font-size: 1.5rem;
color: var(--text-dark);
}
.blog-post__author-bio-content p {
margin: 0 0 20px;
color: var(--text-color);
font-size: 1rem;
line-height: 1.7;
}
.blog-post__author-social {
display: flex;
gap: 15px;
}
.blog-post__author-social a {
width: 40px;
height: 40px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.blog-post__author-social a:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
/* Blog Sidebar */
.blog-post__sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
.blog-sidebar-widget {
background: white;
border: 2px solid var(--border-color);
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
}
.blog-sidebar-widget__title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 20px;
color: var(--text-dark);
}
.blog-sidebar-widget__toc {
list-style: none;
padding: 0;
margin: 0;
}
.blog-sidebar-widget__toc li {
margin-bottom: 12px;
}
.blog-sidebar-widget__toc a {
color: var(--text-color);
text-decoration: none;
transition: color 0.3s ease;
display: block;
padding: 8px 0;
}
.blog-sidebar-widget__toc a:hover {
color: var(--primary-color);
padding-left: 10px;
}
.blog-sidebar-widget--cta {
background: var(--gradient-primary);
color: white;
border: none;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.blog-sidebar-widget--cta::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
.blog-sidebar-widget--cta * {
position: relative;
z-index: 1;
}
.blog-sidebar-widget--cta .blog-sidebar-widget__title {
color: white;
font-size: 1.5rem;
margin-bottom: 12px;
}
.blog-sidebar-widget--cta p {
color: white;
opacity: 0.95;
margin: 0 0 20px;
font-size: 1rem;
line-height: 1.6;
}
.blog-sidebar-widget--cta .btn {
background: white;
color: var(--primary-color);
font-weight: 700;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.blog-sidebar-widget--cta .btn:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.sidebar-post {
display: block;
text-decoration: none;
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.sidebar-post:last-child {
border-bottom: none;
}
.sidebar-post:hover {
padding-left: 10px;
}
.sidebar-post__content h4 {
font-size: 1rem;
color: var(--text-dark);
margin: 0 0 8px;
line-height: 1.4;
}
.sidebar-post__date {
font-size: 0.875rem;
color: var(--text-light);
}
/* Share Buttons */
.blog-sidebar-widget__share {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.blog-sidebar-widget__share-btn {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.blog-sidebar-widget__share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.blog-sidebar-widget__share-btn--facebook {
background: #1877f2;
}
.blog-sidebar-widget__share-btn--facebook:hover {
background: #1464d6;
}
.blog-sidebar-widget__share-btn--twitter {
background: #1da1f2;
}
.blog-sidebar-widget__share-btn--twitter:hover {
background: #1a8cd8;
}
.blog-sidebar-widget__share-btn--linkedin {
background: #0a66c2;
}
.blog-sidebar-widget__share-btn--linkedin:hover {
background: #0952a5;
}
.blog-sidebar-widget__share-btn--whatsapp {
background: #25d366;
}
.blog-sidebar-widget__share-btn--whatsapp:hover {
background: #20ba5a;
}
/* Blog Sidebar Posts */
.blog-sidebar-widget__posts {
display: flex;
flex-direction: column;
gap: 15px;
}
.blog-sidebar-widget__post {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 15px;
background: var(--bg-secondary);
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.blog-sidebar-widget__post:hover {
background: white;
border-left-color: var(--primary-color);
transform: translateX(5px);
box-shadow: var(--shadow-sm);
}
.blog-sidebar-widget__post i {
color: var(--primary-color);
font-size: 0.9rem;
margin-top: 3px;
flex-shrink: 0;
}
.blog-sidebar-widget__post span {
color: var(--text-dark);
font-size: 0.95rem;
line-height: 1.5;
font-weight: 500;
}
.blog-sidebar-widget__post:hover span {
color: var(--primary-color);
}
.share-btn {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
}
.share-btn:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.share-btn--facebook {
background: #1877f2;
}
.share-btn--twitter {
background: #1da1f2;
}
.share-btn--linkedin {
background: #0a66c2;
}
.share-btn--whatsapp {
background: #25d366;
}
/* Responsive Design */
@media screen and (max-width: 1024px) {
/* Blog Grid Tablet */
.blog-grid {
padding: 60px 0;
}
.blog-grid__container {
grid-template-columns: repeat(2, 1fr);
gap: 35px;
}
.blog-card__title {
font-size: 1.35rem;
}
/* Newsletter CTA Tablet */
.newsletter-cta {
padding: 50px 0;
}
.newsletter-cta__title {
font-size: 1.75rem;
}
/* Blog Post Tablet */
.blog-post__content {
grid-template-columns: 1fr;
gap: 40px;
}
.blog-post__sidebar {
position: static;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
min-width: 100%;
max-width: 100%;
}
.blog-post-header__title {
font-size: 2.5rem;
}
}
@media screen and (max-width: 768px) {
/* Blog Grid Page Mobile */
.blog-grid {
padding: 50px 0;
}
.blog-grid__container {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 30px;
}
.blog-card {
border-radius: 10px;
}
.blog-card__image {
height: 200px;
}
.blog-card__badge {
top: 15px;
left: 15px;
padding: 5px 12px;
font-size: 0.8rem;
}
.blog-card__content {
padding: 20px;
}
.blog-card__meta {
flex-wrap: wrap;
gap: 12px;
font-size: 0.8rem;
}
.blog-card__title {
font-size: 1.25rem;
margin-bottom: 12px;
}
.blog-card__excerpt {
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 15px;
}
.blog-card__link {
font-size: 0.9rem;
}
/* Newsletter CTA Mobile */
.newsletter-cta {
padding: 40px 0;
}
.newsletter-cta__content {
flex-direction: column;
text-align: center;
gap: 25px;
}
.newsletter-cta__title {
font-size: 1.5rem;
line-height: 1.3;
}
.newsletter-cta__description {
font-size: 1rem;
}
.newsletter-cta__content .btn {
width: 100%;
justify-content: center;
}
/* Blog Post Pages Mobile */
.blog-post-header {
padding: calc(var(--header-height) + 60px) 0 40px;
min-height: 45vh;
}
.blog-post-header__title {
font-size: 2rem;
}
.blog-post-header__excerpt {
font-size: 1.125rem;
}
.blog-post__body h2 {
font-size: 1.75rem;
}
.blog-post__body h3 {
font-size: 1.5rem;
}
.blog-post__featured-box {
flex-direction: column;
padding: 30px;
}
.blog-post__author-bio {
flex-direction: column;
text-align: center;
}
.blog-post__author-bio-img {
margin: 0 auto;
}
.blog-post__author-social {
justify-content: center;
}
.blog-post__stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.blog-post__pricing-table {
grid-template-columns: 1fr;
}
.pricing-tier--featured {
transform: scale(1);
}
.strategy-step {
flex-direction: column;
}
}
@media screen and (max-width: 480px) {
/* Blog Grid Small Mobile */
.blog-grid {
padding: 40px 0;
}
.blog-grid__container {
gap: 20px;
margin-top: 20px;
}
.blog-card {
border-radius: 8px;
}
.blog-card__image {
height: 180px;
}
.blog-card__badge {
top: 12px;
left: 12px;
padding: 4px 10px;
font-size: 0.75rem;
}
.blog-card__content {
padding: 18px;
}
.blog-card__meta {
gap: 10px;
font-size: 0.75rem;
margin-bottom: 12px;
}
.blog-card__title {
font-size: 1.1rem;
margin-bottom: 10px;
}
.blog-card__excerpt {
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 12px;
}
.blog-card__link {
font-size: 0.85rem;
}
/* Newsletter CTA Small Mobile */
.newsletter-cta {
padding: 35px 0;
}
.newsletter-cta__content {
gap: 20px;
}
.newsletter-cta__title {
font-size: 1.3rem;
line-height: 1.2;
}
.newsletter-cta__description {
font-size: 0.9rem;
}
.newsletter-cta__content .btn {
padding: 12px 20px;
font-size: 0.9rem;
}
/* Blog Post Small Mobile */
.blog-post__intro {
font-size: 1.125rem;
}
.blog-post__body p {
font-size: 1rem;
}
.blog-post__final-cta {
padding: 40px 25px;
}
.blog-post__cta-buttons {
flex-direction: column;
}
.blog-post__cta-buttons .btn {
width: 100%;
}
.blog-post__stats-grid {
grid-template-columns: 1fr;
}
/* New Blog Components Mobile */
.blog-post__step {
flex-direction: column;
padding: 20px;
gap: 15px;
align-items: center;
text-align: center;
}
.blog-post__step-number {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.blog-post__step-content {
width: 100%;
}
.blog-post__tool-card {
padding: 20px;
}
.blog-post__tool-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.blog-post__citation-types,
.blog-post__metrics-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.blog-post__metric-icon,
.blog-post__citation-icon {
width: 55px;
height: 55px;
font-size: 1.4rem;
}
.blog-post__dashboard-section {
padding: 20px;
}
.blog-post__dashboard-item {
padding: 15px;
}
.blog-post__key-takeaways {
padding: 20px;
}
.blog-post__key-takeaways h3 {
font-size: 1.25rem;
}
.blog-post__strategy-card {
padding: 20px;
}
/* Sidebar Widgets Mobile */
.blog-sidebar-widget__post {
padding: 12px;
}
.blog-sidebar-widget__post span {
font-size: 0.9rem;
}
.blog-sidebar-widget__share {
justify-content: center;
}
.blog-sidebar-widget__share-btn {
width: 44px;
height: 44px;
font-size: 1rem;
}
}
/* ==================== Free Audit Modal Styles ==================== */
.audit-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
overflow-y: auto;
animation: fadeIn 0.3s ease;
}
.audit-modal.active {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.audit-modal__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
}
.audit-modal__content {
position: relative;
background: white;
border-radius: 16px;
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.3s ease;
z-index: 10001;
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.audit-modal__close {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
border: none;
font-size: 1.5rem;
color: var(--text-color);
cursor: pointer;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.audit-modal__close:hover {
background: var(--bg-secondary);
color: var(--primary-color);
transform: rotate(90deg);
}
.audit-modal__header {
text-align: center;
margin-bottom: 30px;
}
.audit-modal__icon {
font-size: 3rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 15px;
}
.audit-modal__title {
font-size: 2rem;
font-weight: 700;
color: var(--title-color);
margin-bottom: 10px;
}
.audit-modal__subtitle {
font-size: 1rem;
color: var(--text-color);
line-height: 1.6;
}
.audit-form__group {
margin-bottom: 20px;
}
.audit-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.audit-form__label {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: var(--title-color);
margin-bottom: 8px;
}
.audit-form__label i {
color: var(--primary-color);
margin-right: 5px;
}
.audit-form__input,
.audit-form__textarea {
width: 100%;
padding: 12px 16px;
font-size: 1rem;
color: var(--text-color);
background: var(--bg-secondary);
border: 2px solid transparent;
border-radius: 8px;
transition: all 0.3s ease;
font-family: inherit;
}
.audit-form__input:focus,
.audit-form__textarea:focus {
outline: none;
border-color: var(--primary-color);
background: white;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.audit-form__textarea {
resize: vertical;
min-height: 100px;
}
.audit-form__submit {
margin-top: 10px;
}
.audit-form__note {
text-align: center;
font-size: 0.875rem;
color: var(--text-color-light);
margin-top: 15px;
}
.audit-form__note i {
color: #10b981;
margin-right: 5px;
}
/* Responsive */
@media screen and (max-width: 768px) {
.audit-modal__content {
padding: 30px 20px;
margin: 20px;
}
.audit-modal__title {
font-size: 1.5rem;
}
.audit-form__row {
grid-template-columns: 1fr;
gap: 0;
}
}
@media screen and (max-width: 480px) {
.audit-modal__content {
padding: 25px 15px;
}
.audit-modal__title {
font-size: 1.25rem;
}
.audit-modal__icon {
font-size: 2.5rem;
}
}
/* CTA Icon Styling */
.blog-sidebar-widget--cta .cta-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.blog-sidebar-widget--cta .cta-icon i {
font-size: 1.8rem;
color: white;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.blog-sidebar-widget--cta .btn i {
margin-right: 8px;
}
/* Blog Post Step Cards */
.blog-post__step {
display: flex;
gap: 20px;
margin-bottom: 30px;
padding: 25px;
background: var(--bg-secondary);
border-radius: 12px;
border-left: 4px solid var(--primary-color);
max-width: 100%;
box-sizing: border-box;
}
.blog-post__step-number {
flex-shrink: 0;
width: 60px;
height: 60px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
}
.blog-post__step-content h4 {
color: var(--text-dark);
margin-bottom: 12px;
font-size: 1.25rem;
font-weight: 700;
}
/* Tool Cards */
.blog-post__tool-card {
background: white;
border: 2px solid var(--border-color);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
transition: all 0.3s ease;
max-width: 100%;
box-sizing: border-box;
overflow-wrap: break-word;
word-wrap: break-word;
}
.blog-post__tool-card:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.blog-post__tool-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.blog-post__tool-header h4 {
color: var(--primary-color);
font-size: 1.35rem;
margin: 0;
}
.blog-post__tool-badge {
background: var(--gradient-primary);
color: white;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
}
.blog-post__tool-card p {
margin-bottom: 12px;
}
.blog-post__tool-card strong {
color: var(--text-dark);
}
/* Citation Types Grid */
.blog-post__citation-types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin: 30px 0;
}
.blog-post__citation-card {
background: var(--bg-secondary);
padding: 25px;
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
}
.blog-post__citation-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.blog-post__citation-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 1.5rem;
}
.blog-post__citation-card h4 {
color: var(--text-dark);
margin-bottom: 10px;
font-size: 1.15rem;
}
.blog-post__citation-card p {
margin-bottom: 8px;
font-size: 0.95rem;
}
.blog-post__citation-card strong {
color: var(--primary-color);
}
/* Metrics Grid */
.blog-post__metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.blog-post__metric-card {
background: white;
border: 2px solid var(--border-color);
border-radius: 12px;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
}
.blog-post__metric-card:hover {
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.blog-post__metric-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
font-size: 1.75rem;
}
.blog-post__metric-card h4 {
color: var(--text-dark);
margin-bottom: 10px;
font-size: 1.2rem;
}
.blog-post__metric-card p {
margin-bottom: 10px;
font-size: 0.95rem;
}
.blog-post__metric-card strong {
color: var(--primary-color);
font-weight: 600;
}
/* Strategy Cards */
.blog-post__strategy-card {
background: white;
border-left: 4px solid var(--primary-color);
padding: 25px;
margin-bottom: 25px;
border-radius: 8px;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.blog-post__strategy-card:hover {
box-shadow: var(--shadow-md);
transform: translateX(5px);
}
.blog-post__strategy-card h4 {
color: var(--text-dark);
margin-bottom: 15px;
font-size: 1.25rem;
display: flex;
align-items: center;
gap: 10px;
}
.blog-post__strategy-card h4 i {
color: var(--primary-color);
}
/* Dashboard Section */
.blog-post__dashboard-section {
background: var(--bg-secondary);
padding: 30px;
border-radius: 12px;
margin: 30px 0;
}
.blog-post__dashboard-section h4 {
color: var(--text-dark);
margin-bottom: 20px;
font-size: 1.3rem;
}
.blog-post__dashboard-item {
background: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 15px;
border-left: 3px solid var(--primary-color);
}
.blog-post__dashboard-item:last-child {
margin-bottom: 0;
}
.blog-post__dashboard-item strong {
color: var(--primary-color);
display: block;
margin-bottom: 8px;
font-size: 1.1rem;
}
.blog-post__dashboard-item p {
margin: 0;
color: var(--text-light);
}
/* Key Takeaways Box */
.blog-post__key-takeaways {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
border: 2px solid var(--primary-color);
border-radius: 12px;
padding: 30px;
margin: 40px 0;
}
.blog-post__key-takeaways h3 {
color: var(--primary-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
font-size: 1.5rem;
}
.blog-post__key-takeaways h3 i {
font-size: 1.75rem;
}
.blog-post__key-takeaways .blog-post__list {
margin: 0;
}
.blog-post__key-takeaways .blog-post__list li {
margin-bottom: 12px;
font-size: 1rem;
line-height: 1.7;
}
/* ============================================
ENHANCED MOBILE RESPONSIVENESS
============================================ */
/* Tablet & Small Desktop (max-width: 1024px) */
@media screen and (max-width: 1024px) {
.container {
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
/* Hero Section */
.hero__content {
max-width: 600px;
}
/* Services Grid */
.services__grid,
.portfolio__grid,
.benefits__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
/* Stats Grid */
.stats__grid {
grid-template-columns: repeat(2, 1fr);
}
/* CTA Form Section - Tablet */
/* CTA Form Section - Tablet */
.cta-form {
padding: 60px 0;
}
.cta-form__wrapper {
grid-template-columns: 1fr;
gap: 50px;
}
.cta-form__stats {
grid-template-columns: repeat(3, 1fr);
}
.cta-form__form-container {
position: relative;
top: 0;
padding: 35px 30px;
}
.cta-form__title {
font-size: 2rem;
}
.cta-form__form-container .ghl-form-container {
min-height: 700px;
padding: 0 !important;
}
.cta-form__form-container .ghl-form-container iframe {
min-height: 700px !important;
}
.cta-form__whatsapp {
display: inline-flex;
}
/* Google Map Section */
.google-map-section {
background: var(--bg-color);
padding: 60px 0;
}
.google-map-section .container {
max-width: 100%;
padding: 0;
}
.google-map-section .section__header {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.google-map-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
border-radius: 0;
overflow: hidden;
box-shadow: none;
height: 450px;
}
.google-map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Footer */
.footer__container {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
}
}
/* Mobile (max-width: 768px) */
@media screen and (max-width: 768px) {
/* Typography Adjustments */
h1, .hero__title {
font-size: 2rem;
line-height: 1.2;
}
h2, .section__title {
font-size: 1.75rem;
}
h3 {
font-size: 1.35rem;
}
p {
font-size: 0.95rem;
}
/* Container */
.container {
padding-left: var(--spacing-sm);
padding-right: var(--spacing-sm);
}
/* Section Spacing */
.section {
padding: var(--spacing-3xl) 0;
}
/* Hero Section */
.hero {
min-height: 70vh;
padding: var(--spacing-2xl) 0;
}
.hero__content {
text-align: center;
}
.hero__buttons {
flex-direction: column;
width: 100%;
}
.hero__buttons .button {
width: 100%;
justify-content: center;
}
/* Page Header */
.page-header {
padding: calc(var(--header-height) + 50px) 0 50px;
min-height: 40vh;
}
.page-header__title {
font-size: 2rem;
}
/* Hero Section Mobile */
.hero {
padding-top: calc(var(--header-height) + 50px);
padding-bottom: 50px;
min-height: 85vh;
}
/* About Section */
.about__container {
flex-direction: column;
gap: var(--spacing-xl);
}
.about__image,
.about__content {
flex: 1;
}
/* Services Grid */
.services__grid,
.portfolio__grid,
.industries__grid,
.benefits__grid,
.blog__grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
/* Service Card */
.service__card,
.portfolio__card,
.blog__card {
padding: var(--spacing-lg);
}
/* Stats Grid */
.stats__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
/* Testimonials */
.testimonial__card {
padding: var(--spacing-lg);
}
/* CTA Section */
.cta__buttons {
flex-direction: column;
gap: var(--spacing-md);
width: 100%;
}
.cta__buttons .button {
width: 100%;
justify-content: center;
}
/* CTA Form Section */
.cta-form {
padding: 50px 0;
}
.cta-form__wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.cta-form__form-container {
position: relative;
top: 0;
padding: 30px 20px;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
overflow: visible !important;
}
.cta-form__stats {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.cta-form__title {
font-size: 1.85rem;
line-height: 1.2;
}
.cta-form__description {
font-size: 1rem;
}
.cta-form__badge {
font-size: 0.75rem;
padding: 8px 16px;
}
.cta-form__benefit {
font-size: 0.95rem;
gap: 12px;
}
.cta-form__benefit i {
font-size: 1.2rem;
}
.cta-form__whatsapp {
display: flex;
width: 100%;
justify-content: center;
padding: 16px 24px;
gap: 12px;
}
.cta-form__whatsapp i {
font-size: 1.8rem;
}
.cta-form__whatsapp-label {
font-size: 0.8rem;
}
.cta-form__whatsapp-number {
font-size: 1rem;
}
.cta-form__stat {
padding: 12px 8px;
}
.cta-form__stat-number {
font-size: 1.5rem;
}
.cta-form__stat-label {
font-size: 0.75rem;
}
.cta-form__form-header h3 {
font-size: 1.5rem;
}
.cta-form__form-header p {
font-size: 0.9rem;
}
.cta-form__form-container .ghl-form-container {
min-height: 750px;
height: auto;
padding: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.cta-form__form-container .ghl-form-container iframe {
min-height: 750px !important;
height: auto !important;
display: block !important;
visibility: visible !important;
width: 100% !important;
}
.cta-form__trust {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
/* Contact Section */
.contact__container {
flex-direction: column;
gap: var(--spacing-xl);
}
.contact__info,
.contact__form {
flex: 1;
width: 100%;
}
/* Contact Form */
.contact__form {
padding: var(--spacing-xl) var(--spacing-lg);
}
/* Footer */
.footer__container {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
text-align: center;
}
.footer__list {
align-items: center;
}
.footer__social {
justify-content: center;
}
/* Blog Post Layout */
.blog-post__content {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.blog-post__sidebar {
order: 2;
}
.blog-post__body {
order: 1;
}
/* Tables */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
min-width: 600px;
}
/* Markets Grid */
.markets__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
/* FAQ */
.faq__item {
padding: var(--spacing-md);
}
/* Industries */
.industry__card {
padding: var(--spacing-lg);
}
}
/* Small Mobile (max-width: 480px) */
@media screen and (max-width: 480px) {
/* Typography */
h1, .hero__title {
font-size: 1.75rem;
}
h2, .section__title {
font-size: 1.5rem;
}
h3 {
font-size: 1.2rem;
}
p, .section__description {
font-size: 0.9rem;
}
/* Spacing */
.section {
padding: var(--spacing-2xl) 0;
}
/* Container */
.container {
padding-left: 15px;
padding-right: 15px;
}
/* Buttons */
.button {
padding: 12px 20px;
font-size: 0.9rem;
}
/* Hero */
.hero {
min-height: 60vh;
}
.hero__subtitle {
font-size: 0.95rem;
}
/* Page Header */
.page-header {
padding: var(--spacing-2xl) 0;
min-height: 35vh;
}
.page-header__title {
font-size: 1.75rem;
}
.page-header__description {
font-size: 0.9rem;
}
/* Stats */
.stats__grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.stat__number {
font-size: 2rem;
}
/* Service/Portfolio Cards */
.service__card,
.portfolio__card,
.blog__card {
padding: var(--spacing-md);
}
.service__icon,
.portfolio__icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
/* Contact Details */
.contact__detail {
flex-direction: column;
text-align: center;
gap: var(--spacing-xs);
}
.contact__detail i {
margin-right: 0;
margin-bottom: var(--spacing-xs);
}
/* Markets Grid */
.markets__grid {
grid-template-columns: 1fr;
}
.market__item {
padding: var(--spacing-md);
}
/* Breadcrumb */
.breadcrumb {
font-size: 0.85rem;
flex-wrap: wrap;
}
/* Blog Post Header */
.blog-post-header {
padding: calc(var(--header-height) + 50px) 0 40px;
min-height: 40vh;
}
.blog-post-header__title {
font-size: 1.75rem;
}
.blog-post-header__excerpt {
font-size: 0.9rem;
}
.blog-post-header__meta {
flex-wrap: wrap;
gap: var(--spacing-xs);
}
/* Blog Content */
.blog-post__body {
padding: 0;
}
.blog-post__list {
margin: 20px 0;
}
.blog-post__list li {
font-size: 1rem;
padding-left: 30px;
margin-bottom: 12px;
}
.blog-post__list > li::before {
width: 18px;
height: 18px;
top: 6px;
}
/* Sidebar Widgets */
.blog-sidebar-widget {
padding: var(--spacing-md);
}
.blog-sidebar-widget__title {
font-size: 1.1rem;
}
/* Footer */
.footer {
padding: var(--spacing-2xl) 0 var(--spacing-lg);
}
.footer__title {
font-size: 1.1rem;
}
.footer__description {
font-size: 0.85rem;
}
/* WhatsApp Float */
.whatsapp-float {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 9999 !important;
bottom: 20px;
left: 20px;
}
.whatsapp-float__link {
width: 50px;
height: 50px;
font-size: 1.5rem;
display: flex !important;
visibility: visible !important;
}
/* Scroll Up */
.scrollup {
right: 15px;
bottom: 15px;
width: 35px;
height: 35px;
font-size: 1rem;
}
/* Form Inputs */
.form__input,
.form__textarea {
font-size: 0.9rem;
padding: 12px 15px;
}
.form__label {
font-size: 0.9rem;
}
/* Audit Modal */
.audit-modal__content {
width: 95%;
max-height: 90vh;
padding: 20px 15px;
}
.audit-modal__title {
font-size: 1.2rem;
}
.audit-form__group {
margin-bottom: var(--spacing-md);
}
/* Portfolio Filter */
.portfolio__filters {
flex-wrap: wrap;
gap: var(--spacing-xs);
}
.portfolio__filter {
font-size: 0.85rem;
padding: 8px 15px;
}
/* Social Links */
.contact__social-links,
.footer__social {
gap: var(--spacing-sm);
}
.contact__social-link,
.footer__social-link {
width: 40px;
height: 40px;
font-size: 1rem;
}
/* CTA Form Mobile Fixes */
.cta-form__wrapper {
gap: 30px;
padding: 0 10px;
}
.cta-form__stats {
grid-template-columns: 1fr;
gap: 12px;
}
.cta-form__stat {
padding: 15px 10px;
}
.cta-form__stat-number {
font-size: 1.6rem;
}
.cta-form__stat-label {
font-size: 0.8rem;
}
.cta-form__title {
font-size: 1.65rem;
}
.cta-form__form-container {
padding: 25px 15px !important;
border-radius: 16px;
}
.cta-form__benefits {
margin-bottom: 30px;
}
.cta-form__benefit {
font-size: 0.9rem;
gap: 10px;
}
.cta-form__trust {
flex-direction: column;
gap: 12px;
padding-top: 15px;
}
}
/* Extra Small Mobile (max-width: 360px) */
@media screen and (max-width: 360px) {
h1, .hero__title {
font-size: 1.5rem;
}
h2, .section__title {
font-size: 1.35rem;
}
.button {
padding: 10px 18px;
font-size: 0.85rem;
}
.nav__logo-img,
.footer__logo-img {
max-height: 35px;
}
.service__icon,
.portfolio__icon {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
/* Blog Grid Extra Small */
.blog-grid {
padding: 35px 0;
}
.blog-grid__container {
gap: 18px;
margin-top: 18px;
}
.blog-card__image {
height: 160px;
}
.blog-card__content {
padding: 15px;
}
.blog-card__title {
font-size: 1rem;
}
.blog-card__excerpt {
font-size: 0.825rem;
}
/* Newsletter Extra Small */
.newsletter-cta {
padding: 30px 0;
}
.newsletter-cta__title {
font-size: 1.2rem;
}
.newsletter-cta__description {
font-size: 0.85rem;
}
/* Page Header */
.page-header__title {
font-size: 1.5rem;
}
.page-header__description {
font-size: 0.85rem;
}
.blog-post-header__title {
font-size: 1.5rem;
}
/* Step Cards Extra Small */
.blog-post__step-number {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.blog-sidebar-widget__share-btn {
width: 40px;
height: 40px;
font-size: 0.9rem;
}
/* CTA Form Extra Small */
.cta-form__stat-number {
font-size: 1.4rem;
}
.cta-form__stat-label {
font-size: 0.7rem;
}
.cta-form__title {
font-size: 1.5rem;
}
}
/* Landscape Mobile Orientation */
@media screen and (max-height: 500px) and (orientation: landscape) {
.hero {
min-height: 100vh;
}
.page-header {
min-height: 100vh;
padding: var(--spacing-xl) 0;
}
.nav__menu {
height: 100vh;
overflow-y: auto;
}
}
/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
/* Larger touch targets */
.button,
.nav__link,
.portfolio__filter,
.faq__question {
min-height: 44px;
padding: 12px 20px;
}
/* Remove hover effects on touch devices */
.button:hover,
.service__card:hover,
.portfolio__card:hover {
transform: none;
}
/* Better tap highlighting */
* {
-webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
}
/* Google Map Mobile */
.google-map-section {
padding: 40px 0;
}
.google-map-container {
width: 1900px;
height: 350px;
border-radius: var(--radius-lg);
}
}
/* Print Styles */
@media print {
.nav,
.whatsapp-float,
.scrollup,
.nav__toggle,
.nav__close,
.cta,
.audit-modal {
display: none !important;
}
.hero {
min-height: auto;
padding: 2rem 0;
}
.section {
padding: 1.5rem 0;
page-break-inside: avoid;
}
.footer {
page-break-before: always;
}
}
/* ============================================
LOCATION PAGE STYLES (Pakistan Page)
============================================ */
/* Location Hero Section */
.location-hero {
padding: calc(var(--header-height) + 80px) 0 80px;
position: relative;
overflow: hidden;
min-height: 95vh;
}
/* Background Slider */
.location-hero__slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.location-hero__slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 2s ease-in-out;
}
.location-hero__slide.active {
opacity: 1;
}
/* Overlay for better text readability */
.location-hero__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 249, 255, 0.90) 100%);
z-index: 1;
}
.location-hero__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 2;
}
.location-hero__content {
position: relative;
z-index: 2;
}
.location-hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
color: var(--primary-color);
padding: 10px 24px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 25px;
border: 1px solid rgba(102, 126, 234, 0.2);
}
.location-hero__badge i {
color: var(--primary-color);
font-size: 1rem;
}
.location-hero__title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.15;
color: var(--text-dark);
margin-bottom: 25px;
}
.location-hero__description {
font-size: 1.15rem;
line-height: 1.8;
color: var(--text-light);
margin-bottom: 35px;
}
.location-hero__features {
display: flex;
flex-direction: column;
gap: 18px;
}
.location-hero__feature {
display: flex;
align-items: center;
gap: 14px;
font-size: 1.05rem;
color: var(--text-dark);
font-weight: 500;
}
.location-hero__feature i {
color: #10b981;
font-size: 1.3rem;
flex-shrink: 0;
}
/* Location Hero Form */
.location-hero__form {
position: relative;
z-index: 2;
}
.location-hero__form-card {
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
overflow: hidden;
border: 1px solid rgba(102, 126, 234, 0.1);
}
.location-hero__form-header {
background: var(--gradient-primary);
color: white;
padding: 30px;
text-align: center;
}
.location-hero__form-header i {
font-size: 2.5rem;
margin-bottom: 15px;
display: block;
}
.location-hero__form-header h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
}
.location-hero__form-header p {
font-size: 0.95rem;
opacity: 0.95;
margin: 0;
}
.location-hero__form-card .hs-form-frame {
padding: 30px;
}
/* GHL Form Container Styles */
.ghl-form-container {
width: 100%;
min-height: 672px;
padding: 20px;
background: transparent;
display: block;
visibility: visible;
opacity: 1;
}
.ghl-form-container iframe {
width: 100%;
height: 100%;
min-height: 672px;
border: none;
border-radius: 3px;
display: block;
}
.contact__form .ghl-form-container {
padding: 0;
margin-top: 20px;
}
/* ==================== CTA FORM SECTION ==================== */
.cta-form {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.cta-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
}
.cta-form__wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
position: relative;
z-index: 1;
}
.cta-form__content {
color: white;
}
.cta-form__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.cta-form__badge i {
font-size: 1rem;
}
.cta-form__title {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 20px;
font-family: var(--font-heading);
color: white;
}
.cta-form__description {
font-size: 1.15rem;
line-height: 1.7;
margin-bottom: 35px;
opacity: 0.95;
}
.cta-form__benefits {
margin-bottom: 40px;
}
.cta-form__benefit {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
font-size: 1.05rem;
}
.cta-form__benefit i {
font-size: 1.3rem;
color: #4ade80;
flex-shrink: 0;
}
.cta-form__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 35px;
}
.cta-form__stat {
text-align: center;
padding: 20px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.cta-form__stat-number {
display: block;
font-size: 2rem;
font-weight: 800;
margin-bottom: 5px;
color: white;
font-family: var(--font-heading);
}
.cta-form__stat-label {
display: block;
font-size: 0.85rem;
opacity: 0.9;
}
.cta-form__contact {
margin-top: 30px;
}
.cta-form__whatsapp {
display: inline-flex;
align-items: center;
gap: 15px;
background: #25D366;
padding: 18px 30px;
border-radius: 50px;
text-decoration: none;
color: white;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}
.cta-form__whatsapp:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
}
.cta-form__whatsapp i {
font-size: 2rem;
}
.cta-form__whatsapp-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.cta-form__whatsapp-label {
font-size: 0.85rem;
opacity: 0.9;
}
.cta-form__whatsapp-number {
font-size: 1.1rem;
font-weight: 700;
}
.cta-form__form-container {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
position: sticky;
top: 100px;
}
.cta-form__form-header {
text-align: center;
margin-bottom: 30px;
}
.cta-form__form-header h3 {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 10px;
font-family: var(--font-heading);
}
.cta-form__form-header p {
color: var(--text-light);
font-size: 0.95rem;
}
.cta-form__form-container .ghl-form-container {
min-height: 672px;
margin-bottom: 20px;
padding: 0;
display: block !important;
visibility: visible !important;
}
.cta-form__form-container .ghl-form-container iframe {
display: block !important;
visibility: visible !important;
min-height: 672px;
}
.cta-form__trust {
display: flex;
justify-content: space-around;
padding-top: 20px;
border-top: 2px solid var(--bg-light);
}
.cta-form__trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--text-light);
}
.cta-form__trust-item i {
color: var(--primary-color);
font-size: 1rem;
}
.location-hero__form-footer {
padding: 20px 30px;
background: var(--bg-secondary);
text-align: center;
border-top: 1px solid var(--border-color);
}
.location-hero__form-footer p {
margin: 0;
font-size: 0.9rem;
color: var(--text-light);
}
.location-hero__form-footer i {
color: var(--primary-color);
margin-right: 8px;
}
.location-hero__form-footer a {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
}
.location-hero__form-footer a:hover {
text-decoration: underline;
}
/* Why Choose Section */
.why-choose {
background: white;
}
.why-choose__container {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 60px;
align-items: start;
}
.why-choose__content {
display: flex;
flex-direction: column;
gap: 30px;
}
.why-choose__item {
display: flex;
gap: 20px;
}
.why-choose__icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
color: var(--primary-color);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.why-choose__text h3 {
color: var(--text-dark);
font-size: 1.25rem;
margin-bottom: 10px;
font-weight: 700;
}
.why-choose__text p {
color: var(--text-light);
line-height: 1.7;
margin: 0;
}
.why-choose__image {
position: sticky;
top: calc(var(--header-height) + 40px);
}
.why-choose__stats {
background: var(--gradient-primary);
border-radius: 20px;
padding: 60px 50px;
display: flex;
flex-direction: column;
gap: 50px;
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.35);
position: relative;
overflow: hidden;
}
.why-choose__stats::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.why-choose__stat {
text-align: center;
color: white;
position: relative;
z-index: 1;
animation: fadeInUp 0.6s ease backwards;
}
.why-choose__stat:nth-child(1) {
animation-delay: 0.1s;
}
.why-choose__stat:nth-child(2) {
animation-delay: 0.2s;
}
.why-choose__stat:nth-child(3) {
animation-delay: 0.3s;
}
.why-choose__stat-number {
font-size: 4.5rem;
font-weight: 900;
margin-bottom: 12px;
display: block;
line-height: 1;
letter-spacing: -2px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.why-choose__stat-label {
font-size: 1.1rem;
opacity: 0.95;
font-weight: 500;
letter-spacing: 0.5px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Pakistan Cities Section */
.pakistan-cities {
background: var(--bg-secondary);
}
.pakistan-cities__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.pakistan-city__card {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.pakistan-city__card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-color);
}
.pakistan-city__icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
color: var(--primary-color);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 20px;
}
.pakistan-city__name {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 12px;
}
.pakistan-city__description {
color: var(--text-light);
line-height: 1.7;
margin-bottom: 15px;
}
.pakistan-city__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
font-size: 0.9rem;
}
.pakistan-city__link i {
font-size: 0.85rem;
}
/* Responsive Styles for Location Page */
@media screen and (max-width: 1024px) {
.location-hero {
padding: calc(var(--header-height) + 70px) 0 80px !important;
min-height: auto;
}
.location-hero__container {
grid-template-columns: 1fr;
gap: 50px;
}
.location-hero__title {
font-size: 2.8rem;
}
.location-hero__form {
position: static;
}
.why-choose__container {
grid-template-columns: 1fr;
gap: 40px;
}
.why-choose__image {
position: static;
}
.pakistan-cities__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
.location-hero {
padding: calc(var(--header-height) + 60px) 0 60px !important;
}
.location-hero__title {
font-size: 2.2rem;
}
.location-hero__description {
font-size: 1.05rem;
}
.location-hero__badge {
padding: 8px 20px;
font-size: 0.9rem;
}
.location-hero__features {
gap: 15px;
}
.location-hero__feature {
font-size: 1rem;
}
.location-hero__form-header {
padding: 25px 20px;
}
.location-hero__form-header i {
font-size: 2rem;
}
.location-hero__form-header h3 {
font-size: 1.25rem;
}
.location-hero__form-card .hs-form-frame {
padding: 25px 20px;
}
.ghl-form-container {
min-height: 700px;
height: 700px;
padding: 15px;
}
.why-choose__item {
flex-direction: column;
}
.why-choose__icon {
width: 55px;
height: 55px;
font-size: 1.35rem;
}
.why-choose__text h3 {
font-size: 1.15rem;
}
.why-choose__stats {
padding: 50px 40px;
gap: 40px;
border-radius: 16px;
}
.why-choose__stat-number {
font-size: 3.5rem;
}
.why-choose__stat-label {
font-size: 1rem;
}
.pakistan-cities__grid {
grid-template-columns: 1fr;
}
.pakistan-city__card {
padding: 25px;
}
.pakistan-city__icon {
width: 60px;
height: 60px;
font-size: 1.75rem;
}
.pakistan-city__name {
font-size: 1.3rem;
}
}
@media screen and (max-width: 480px) {
.location-hero__title {
font-size: 1.75rem;
}
.location-hero__description {
font-size: 0.95rem;
}
.location-hero__features {
gap: 12px;
}
.why-choose__stats {
padding: 40px 30px;
gap: 35px;
border-radius: 14px;
}
.why-choose__stat-number {
font-size: 3rem;
letter-spacing: -1px;
}
.why-choose__stat-label {
font-size: 0.95rem;
}
.location-hero__feature {
font-size: 0.9rem;
}
.location-hero__form-header h3 {
font-size: 1.1rem;
}
.location-hero__form-header p {
font-size: 0.85rem;
}
.location-hero__form-card .hs-form-frame {
padding: 20px 15px;
}
.ghl-form-container {
min-height: 750px;
height: 750px;
padding: 10px;
}
.contact__form .ghl-form-container {
padding: 0;
}
.location-hero__form-footer {
padding: 15px 20px;
}
.why-choose__icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.why-choose__text h3 {
font-size: 1.05rem;
}
.why-choose__stats {
grid-template-columns: 1fr;
padding: 25px 20px;
gap: 20px;
}
.why-choose__stat-number {
font-size: 2.25rem;
}
.why-choose__stat-label {
font-size: 0.875rem;
}
.pakistan-city__card {
padding: 20px;
}
.pakistan-city__icon {
width: 55px;
height: 55px;
font-size: 1.6rem;
margin-bottom: 15px;
}
.pakistan-city__name {
font-size: 1.2rem;
}
.pakistan-city__description {
font-size: 0.9rem;
}
}
/* ============================================
LOCATION CTA SECTION (Creative Design)
============================================ */
.location-cta {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%),
url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1920&q=80') center/cover no-repeat;
position: relative;
overflow: hidden;
padding: 100px 0;
}
.location-cta::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.location-cta::after {
content: '';
position: absolute;
bottom: -30%;
left: -5%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
border-radius: 50%;
animation: float 8s ease-in-out infinite;
}
.location-cta__container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 2;
}
.location-cta__content {
color: white;
}
.location-cta__badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
padding: 10px 24px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 25px;
border: 1px solid rgba(255, 255, 255, 0.4);
color: white;
}
.location-cta__badge i {
font-size: 1.1rem;
}
.location-cta__title {
font-size: 3rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 20px;
color: white;
text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.3);
}
.location-cta__description {
font-size: 1.125rem;
line-height: 1.8;
color: white;
opacity: 0.98;
margin-bottom: 35px;
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2);
}
.location-cta__features {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: 35px;
}
.location-cta__feature {
display: flex;
align-items: center;
gap: 12px;
font-size: 1rem;
font-weight: 500;
color: white;
}
.location-cta__feature i {
color: #10b981;
font-size: 1.25rem;
flex-shrink: 0;
background: white;
border-radius: 50%;
padding: 2px;
}
.location-cta__buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 40px;
}
.button--outline-white {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: white;
border: 2px solid white;
font-weight: 600;
}
.button--outline-white:hover {
background: white;
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.location-cta__trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding-top: 30px;
border-top: 2px solid rgba(255, 255, 255, 0.3);
}
.location-cta__trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
font-weight: 600;
color: white;
}
.location-cta__trust-item i {
color: #fbbf24;
font-size: 1.3rem;
}
.location-cta__illustration {
position: relative;
}
.location-cta__illustration svg {
width: 100%;
height: auto;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
}
/* Responsive for Location CTA */
@media screen and (max-width: 1024px) {
.location-cta__container {
grid-template-columns: 1fr;
gap: 60px;
}
.location-cta__illustration {
max-width: 500px;
margin: 0 auto;
}
.location-cta__trust {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
@media screen and (max-width: 768px) {
.location-cta {
padding: 60px 0;
}
.location-cta__title {
font-size: 2rem;
}
.location-cta__description {
font-size: 1rem;
}
.location-cta__buttons {
flex-direction: column;
}
.location-cta__buttons .button {
width: 100%;
justify-content: center;
}
.location-cta__trust {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
.location-cta__trust-item {
justify-content: center;
}
.location-cta__illustration {
max-width: 400px;
}
}
@media screen and (max-width: 480px) {
.location-cta__title {
font-size: 1.75rem;
}
.location-cta__description {
font-size: 0.95rem;
}
.location-cta__badge {
padding: 8px 20px;
font-size: 0.85rem;
}
.location-cta__feature {
font-size: 0.9rem;
}
.location-cta__trust {
grid-template-columns: 1fr;
gap: 15px;
}
.location-cta__illustration {
max-width: 100%;
}
}
/* ==================== EXTRA SMALL DEVICES (360px) ==================== */
@media screen and (max-width: 360px) {
/* Container adjustments for very small devices */
.container {
padding-left: 1rem;
padding-right: 1rem;
}
/* Hero and Page Header Spacing */
.hero {
padding-top: calc(var(--header-height) + 60px) !important;
padding-bottom: 40px;
min-height: 80vh;
}
.page-header {
padding: calc(var(--header-height) + 60px) 0 40px !important;
min-height: 35vh;
}
.page-header__title {
font-size: 1.75rem;
}
.page-header__description {
font-size: 0.9rem;
}
/* Technical SEO Pages - Very Small Devices */
.technical-seo-overview__title {
font-size: 1.5rem;
}
.technical-seo-overview__badge {
font-size: 0.6rem;
padding: 5px 12px;
letter-spacing: 1px;
}
.technical-stat-card {
padding: 25px 15px;
}
.technical-stat-card__icon {
width: 50px;
height: 50px;
}
.technical-stat-card__icon i {
font-size: 1.25rem;
}
.section__title-blue {
font-size: 1.5rem;
}
.technical-service-card {
padding: 15px;
}
.technical-service-card__icon {
width: 40px;
height: 40px;
}
.technical-service-card__icon i {
font-size: 1.25rem;
}
.technical-process-step__number {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.technical-benefit-card__icon {
width: 45px;
height: 45px;
}
.technical-benefit-card__icon i {
font-size: 1.1rem;
}
.tools__grid {
grid-template-columns: 1fr;
}
.page-header__title {
font-size: 1.75rem;
}
.page-header__description {
font-size: 0.9rem;
}
/* Button adjustments */
.button {
padding: 12px 24px;
font-size: 0.9rem;
}
/* CTA Section */
.cta__title {
font-size: 1.5rem;
}
.cta__description {
font-size: 0.9rem;
}
}
/* =============== ISLAMABAD AREAS SECTION =============== */
.islamabad-areas {
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.islamabad-areas::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(102, 126, 234, 0.08) 0%, transparent 70%);
border-radius: 50%;
z-index: 0;
}
.islamabad-areas .container {
position: relative;
z-index: 1;
}
.areas__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-top: 50px;
}
.area__card {
background: #ffffff;
border-radius: 20px;
padding: 35px 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border: 1px solid rgba(102, 126, 234, 0.1);
}
.area__card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.area__card:hover::before {
transform: scaleX(1);
}
.area__card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.15);
border-color: rgba(102, 126, 234, 0.3);
}
.area__icon {
width: 70px;
height: 70px;
border-radius: 18px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 2rem;
margin-bottom: 20px;
transition: all 0.4s ease;
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.25);
}
.area__card:hover .area__icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
}
.area__name {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 12px;
font-family: var(--heading-font);
transition: color 0.3s ease;
}
.area__card:hover .area__name {
color: #667eea;
}
.area__description {
font-size: 1rem;
line-height: 1.7;
color: #64748b;
margin: 0;
}
/* Responsive Design for Areas */
@media screen and (max-width: 1024px) {
.areas__grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.area__card {
padding: 30px 25px;
}
}
@media screen and (max-width: 768px) {
.areas__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.area__card {
padding: 30px 25px;
}
.area__icon {
width: 65px;
height: 65px;
font-size: 1.85rem;
}
.area__name {
font-size: 1.35rem;
}
.area__description {
font-size: 0.95rem;
}
}
@media screen and (max-width: 480px) {
.area__card {
padding: 25px 20px;
}
.area__icon {
width: 60px;
height: 60px;
font-size: 1.75rem;
margin-bottom: 18px;
}
.area__name {
font-size: 1.25rem;
margin-bottom: 10px;
}
.area__description {
font-size: 0.9rem;
line-height: 1.6;
}
}
/* =============== SEO PROCESS TIMELINE SECTION =============== */
.process {
background: #ffffff;
position: relative;
overflow: hidden;
}
.process::before {
content: '';
position: absolute;
top: -100px;
left: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
border-radius: 50%;
}
.process__timeline {
position: relative;
max-width: 1200px;
margin: 60px auto 0;
padding-left: 120px;
}
.process__timeline::before {
content: '';
position: absolute;
left: 50px;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
z-index: 0;
}
.process__step {
position: relative;
margin-bottom: 100px;
display: flex;
align-items: center;
gap: 0;
}
.process__step:nth-child(odd) {
flex-direction: row;
justify-content: flex-start;
}
.process__step:nth-child(even) {
flex-direction: row;
justify-content: flex-start;
}
.process__step:nth-child(odd) .process__content {
text-align: left;
margin-left: 0;
}
.process__step:nth-child(even) .process__content {
text-align: left;
margin-left: 0;
}
.process__number {
position: absolute;
left: 0px;
transform: none;
width: 90px;
height: 90px;
min-width: 90px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 800;
color: #ffffff;
font-family: var(--heading-font);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
z-index: 10;
transition: all 0.4s ease;
border: 5px solid white;
}
.process__step:hover .process__number {
transform: scale(1.1);
box-shadow: 0 15px 45px rgba(102, 126, 234, 0.6);
}
.process__number::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
opacity: 0.15;
z-index: -1;
animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.15;
}
50% {
transform: scale(1.25);
opacity: 0;
}
}
.process__content {
flex: 1;
max-width: 100%;
background: #ffffff;
padding: 35px 40px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(102, 126, 234, 0.1);
transition: all 0.4s ease;
position: relative;
margin-left: 140px;
}
.process__step:hover .process__content {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(102, 126, 234, 0.15);
border-color: rgba(102, 126, 234, 0.3);
}
.process__step:nth-child(odd) .process__content::before {
display: none;
}
.process__step:nth-child(even) .process__content::before {
display: none;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 15px 20px 15px 0;
border-color: transparent #ffffff transparent transparent;
filter: drop-shadow(-2px 0 3px rgba(0, 0, 0, 0.05));
}
.process__content:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(102, 126, 234, 0.15);
border-color: rgba(102, 126, 234, 0.3);
}
.process__title {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
font-family: var(--heading-font);
display: flex;
align-items: center;
gap: 12px;
}
.process__step:nth-child(odd) .process__title {
justify-content: flex-end;
flex-direction: row-reverse;
}
.process__step:nth-child(even) .process__title {
justify-content: flex-start;
}
.process__title::before {
content: '';
width: 40px;
height: 3px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.process__description {
font-size: 1rem;
line-height: 1.8;
color: #64748b;
margin: 0;
}
/* Tablet Responsive */
@media screen and (max-width: 1024px) {
.process__timeline {
padding-left: 100px;
}
.process__timeline::before {
left: 42px;
width: 3px;
}
.process__step {
flex-direction: row !important;
justify-content: flex-start !important;
margin-bottom: 70px;
}
.process__number {
position: absolute;
left: 0px;
transform: none;
width: 80px;
height: 80px;
min-width: 80px;
font-size: 1.75rem;
border: 4px solid white;
}
.process__step:hover .process__number {
transform: scale(1.05);
}
.process__content {
margin-left: 120px !important;
margin-right: 0 !important;
padding: 30px 30px;
max-width: 100%;
}
.process__step:nth-child(odd) .process__content,
.process__step:nth-child(even) .process__content {
text-align: left;
padding: 28px 25px;
}
.process__title {
font-size: 1.3rem;
}
.process__description {
font-size: 0.95rem;
}
}
/* Mobile Responsive */
@media screen and (max-width: 768px) {
.process__timeline {
padding-left: 80px;
}
.process__timeline::before {
left: 35px;
width: 3px;
}
.process__step {
margin-bottom: 60px;
}
.process__number {
left: -2px;
transform: none;
width: 70px;
height: 70px;
min-width: 70px;
font-size: 1.5rem;
border: 3px solid white;
}
.process__content {
margin-left: 100px !important;
margin-right: 0 !important;
padding: 25px 20px;
}
.process__title {
font-size: 1.2rem;
margin-bottom: 10px;
}
.process__description {
font-size: 0.9rem;
line-height: 1.6;
}
}
@media screen and (max-width: 480px) {
.process__timeline {
padding-left: 65px;
}
.process__timeline::before {
left: 28px;
width: 2px;
}
.process__step {
margin-bottom: 50px;
}
.process__number {
width: 55px;
height: 55px;
min-width: 55px;
font-size: 1.25rem;
border: 2px solid white;
left: 0.5px;
transform: none;
}
.process__content {
margin-left: 80px !important;
margin-right: 0 !important;
padding: 20px 15px;
}
.process__title {
font-size: 1.1rem;
margin-bottom: 8px;
}
.process__description {
font-size: 0.85rem;
line-height: 1.6;
}
}
/* ==================== BLOG CONSULTANT PAGE STYLES ==================== */
/* Consultant Cards */
.consultant-card {
background: white;
border-radius: 12px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.consultant-card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
transform: translateY(-5px);
}
.consultant-card--featured {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: 3px solid #f093fb;
position: relative;
overflow: hidden;
}
.consultant-card--featured::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite;
}
.consultant-card--featured * {
position: relative;
z-index: 1;
}
.consultant-card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
flex-wrap: wrap;
gap: 15px;
}
.consultant-card__rating {
display: flex;
align-items: center;
gap: 8px;
font-size: 1.2rem;
}
.consultant-card__rating i {
color: #ffd700;
}
.consultant-card__rating span {
font-weight: 600;
margin-left: 5px;
}
.consultant-card__badge {
background: #ffd700;
color: #1a202c;
padding: 8px 20px;
border-radius: 25px;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}
.consultant-card__title {
font-size: 1.8rem;
color: var(--text-dark);
margin-bottom: 15px;
font-family: var(--font-heading);
}
.consultant-card--featured .consultant-card__title {
color: white;
}
.consultant-card__description {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-color);
margin-bottom: 25px;
}
.consultant-card--featured .consultant-card__description {
color: rgba(255, 255, 255, 0.95);
}
.consultant-card__specialties h4,
.consultant-card__highlights h4,
.consultant-card__industries h4 {
font-size: 1.3rem;
margin-bottom: 15px;
color: var(--text-dark);
font-family: var(--font-heading);
}
.consultant-card--featured .consultant-card__specialties h4,
.consultant-card--featured .consultant-card__highlights h4,
.consultant-card--featured .consultant-card__industries h4 {
color: white;
}
.consultant-card__specialties ul {
list-style: none;
padding: 0;
}
.consultant-card__specialties li {
padding: 12px 0;
font-size: 1rem;
line-height: 1.7;
border-bottom: 1px solid var(--border-color);
}
.consultant-card--featured .consultant-card__specialties li {
border-bottom-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.95);
}
.consultant-card__specialties li:last-child {
border-bottom: none;
}
.consultant-card__specialties li i {
color: var(--success-color);
margin-right: 10px;
}
.consultant-card--featured .consultant-card__specialties li i {
color: #ffd700;
}
/* Highlights Grid */
.highlights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
margin-bottom: 30px;
}
.highlight-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
}
.highlight-item i {
font-size: 2rem;
color: #ffd700;
flex-shrink: 0;
}
.highlight-item strong {
display: block;
margin-bottom: 5px;
font-size: 1.1rem;
}
.highlight-item p {
margin: 0;
font-size: 0.95rem;
opacity: 0.9;
}
/* Industries Tags */
.industries-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 15px;
}
.industry-tag {
background: rgba(255, 255, 255, 0.15);
color: white;
padding: 10px 20px;
border-radius: 25px;
font-size: 0.95rem;
font-weight: 500;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Consultant CTA Buttons */
.consultant-card__cta {
display: flex;
gap: 15px;
margin-top: 30px;
flex-wrap: wrap;
}
.button {
padding: 15px 30px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
font-size: 1rem;
}
.button--primary {
background: var(--gradient-primary);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.button--primary:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.button--secondary {
background: white;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.button--secondary:hover {
background: var(--primary-color);
color: white;
}
.consultant-card--featured .button--secondary {
background: white;
color: var(--primary-color);
border: none;
}
/* Info Boxes */
.info-boxes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin: 40px 0;
}
.info-box {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.info-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.info-box i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 20px;
display: block;
}
.info-box h3 {
font-size: 1.4rem;
margin-bottom: 15px;
color: var(--text-dark);
font-family: var(--font-heading);
}
.info-box p {
font-size: 1rem;
line-height: 1.7;
color: var(--text-color);
margin: 0;
}
/* FAQ Section */
.faq-section {
margin: 50px 0;
}
.faq-item {
background: white;
border-radius: 10px;
padding: 25px;
margin-bottom: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.faq-item:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.faq-item h4 {
font-size: 1.3rem;
color: var(--text-dark);
margin-bottom: 15px;
font-family: var(--font-heading);
display: flex;
align-items: center;
gap: 12px;
}
.faq-item h4 i {
color: var(--primary-color);
font-size: 1.1rem;
}
.faq-item p {
font-size: 1rem;
line-height: 1.8;
color: var(--text-color);
margin: 0;
}
/* Share Section */
.share-section {
margin: 50px 0;
padding: 40px;
background: var(--bg-secondary);
border-radius: 12px;
text-align: center;
}
.share-section h3 {
font-size: 1.8rem;
margin-bottom: 25px;
color: var(--text-dark);
font-family: var(--font-heading);
}
.share-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.share-btn {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.2rem;
}
.share-btn:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.share-btn--facebook {
background: #1877f2;
}
.share-btn--twitter {
background: #1da1f2;
}
.share-btn--linkedin {
background: #0a66c2;
}
/* Consultant Number Badge */
.consultant-number {
display: inline-block;
width: 45px;
height: 45px;
background: var(--gradient-primary);
color: white;
border-radius: 50%;
text-align: center;
line-height: 45px;
font-weight: 700;
font-size: 1.3rem;
margin-right: 15px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
/* Blog Header Styles */
.blog-header {
padding: 40px 0 30px;
background: var(--bg-secondary);
}
.blog-header h1 {
font-size: 2.5rem;
color: var(--text-dark);
margin-bottom: 20px;
font-family: var(--font-heading);
}
.blog-meta {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
color: var(--text-light);
font-size: 0.95rem;
}
.blog-meta span {
display: flex;
align-items: center;
gap: 8px;
}
.blog-meta i {
color: var(--primary-color);
}
/* Featured Image */
.blog-featured-image {
margin: 40px 0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.blog-featured-image img {
width: 100%;
height: auto;
display: block;
}
/* Blog Content Layout */
.blog-post__content {
display: grid;
grid-template-columns: 1fr 350px;
gap: 50px;
margin: 50px 0;
width: 100%;
max-width: 1400px;
}
.blog-post__body {
min-width: 0;
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
}
/* Sidebar Widgets */
.blog-post__sidebar {
position: sticky;
top: 100px;
height: fit-content;
min-width: 320px;
max-width: 350px;
}
.sidebar-widget {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
}
.sidebar-widget h3 {
font-size: 1.3rem;
margin-bottom: 20px;
color: var(--text-dark);
font-family: var(--font-heading);
}
.sidebar-widget__title {
font-size: 1.2rem;
margin-bottom: 20px;
color: var(--text-dark);
font-family: var(--font-heading);
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-widget__title i {
color: var(--primary-color);
}
.sidebar-widget__toc {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-widget__toc li {
margin-bottom: 12px;
}
.sidebar-widget__toc a {
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
display: block;
padding: 8px 0;
padding-left: 15px;
border-left: 3px solid transparent;
}
.sidebar-widget__toc a:hover {
color: var(--primary-color);
border-left-color: var(--primary-color);
padding-left: 20px;
}
.sidebar-widget__share-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.sidebar-widget__share-btn {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.sidebar-widget__share-btn--facebook {
background: #1877f2;
}
.sidebar-widget__share-btn--twitter {
background: #1da1f2;
}
.sidebar-widget__share-btn--linkedin {
background: #0077b5;
}
.sidebar-widget__share-btn--whatsapp {
background: #25d366;
}
.sidebar-widget__share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.blog-sidebar-widget__cta {
text-align: center;
}
.blog-sidebar-widget__cta-text {
font-size: 1rem;
margin-bottom: 20px;
color: var(--text-color);
line-height: 1.6;
}
.blog-sidebar-widget__cta-btn {
display: inline-block;
padding: 12px 24px;
background: var(--gradient-primary);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.blog-sidebar-widget__cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.blog-sidebar-widget__related-posts {
list-style: none;
padding: 0;
margin: 0;
}
.blog-sidebar-widget__related-posts li {
margin-bottom: 15px;
}
.blog-sidebar-widget__related-posts a {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
padding: 10px;
border-radius: 8px;
}
.blog-sidebar-widget__related-posts a:hover {
background: var(--bg-secondary);
color: var(--primary-color);
}
.blog-sidebar-widget__related-posts i {
color: var(--primary-color);
font-size: 0.9rem;
margin-top: 3px;
margin-bottom: 12px;
}
.sidebar-widget__toc a {
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
display: block;
padding: 8px 0;
font-size: 0.95rem;
line-height: 1.5;
}
.sidebar-widget__toc a:hover {
color: var(--primary-color);
padding-left: 10px;
}
/* Blog Post Sidebar Widgets */
.blog-post__toc {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
}
.blog-post__toc-title {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 20px;
color: var(--text-dark);
font-family: var(--font-heading);
}
.blog-post__toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.blog-post__toc-list li {
margin-bottom: 12px;
}
.blog-post__toc-list a {
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
display: block;
padding: 8px 0 8px 15px;
border-left: 3px solid transparent;
font-size: 0.95rem;
}
.blog-post__toc-list a:hover {
color: var(--primary-color);
border-left-color: var(--primary-color);
padding-left: 20px;
}
/* Stats Box Widget */
.blog-post__stats-box {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
color: white;
}
.blog-post__stats-box h3 {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 25px;
color: white;
font-family: var(--font-heading);
}
.blog-post__stat-item {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.blog-post__stat-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.blog-post__stat-item i {
font-size: 1.8rem;
opacity: 0.9;
min-width: 30px;
}
.blog-post__stat-item strong {
display: block;
font-size: 2rem;
font-weight: 700;
margin-bottom: 5px;
color: white;
}
.blog-post__stat-item p {
font-size: 0.9rem;
margin: 0;
opacity: 0.95;
line-height: 1.4;
}
/* Related Posts Widget */
.blog-post__related {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 30px;
}
.blog-post__related h3 {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 20px;
color: var(--text-dark);
font-family: var(--font-heading);
}
.blog-post__related-item {
margin-bottom: 20px;
}
.blog-post__related-item:last-child {
margin-bottom: 0;
}
.blog-post__related-item a {
display: block;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 8px;
overflow: hidden;
}
.blog-post__related-item a:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.blog-post__related-item img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 10px;
}
.blog-post__related-item h4 {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-dark);
margin: 0;
line-height: 1.4;
transition: color 0.3s ease;
}
.blog-post__related-item a:hover h4 {
color: var(--primary-color);
}
/* Sidebar CTA Widget */
.blog-post__sidebar-cta {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
text-align: center;
color: white;
}
.blog-post__sidebar-cta h3 {
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 15px;
color: white;
font-family: var(--font-heading);
}
.blog-post__sidebar-cta p {
font-size: 0.95rem;
margin: 0 0 20px;
opacity: 0.95;
line-height: 1.6;
}
.btn--block {
width: 100%;
justify-content: center;
}
/* Responsive Styles */
@media screen and (max-width: 1024px) {
.blog-post__content {
grid-template-columns: 1fr;
gap: 40px;
}
.blog-post__sidebar {
position: relative;
top: 0;
}
.author-card {
text-align: center;
}
.author-card img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 15px;
border: 4px solid var(--primary-color);
}
.author-card h4 {
font-size: 1.2rem;
margin-bottom: 8px;
color: var(--text-dark);
}
.author-card p {
font-size: 0.95rem;
color: var(--text-light);
margin-bottom: 15px;
}
.author-social {
display: flex;
justify-content: center;
gap: 12px;
}
.author-social a {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
color: var(--text-color);
transition: all 0.3s ease;
}
.author-social a:hover {
background: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.related-posts {
list-style: none;
padding: 0;
}
.related-posts li {
margin-bottom: 15px;
}
.related-posts a {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
padding: 10px;
border-radius: 8px;
}
.related-posts a:hover {
background: var(--bg-secondary);
color: var(--primary-color);
padding-left: 15px;
}
.related-posts i {
color: var(--primary-color);
font-size: 0.9rem;
}
/* Table of Contents */
.table-of-contents {
background: var(--bg-secondary);
padding: 30px;
border-radius: 12px;
margin: 40px 0;
}
.table-of-contents h2 {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--text-dark);
font-family: var(--font-heading);
}
.table-of-contents ul {
list-style: none;
padding: 0;
}
.table-of-contents li {
margin-bottom: 12px;
}
.table-of-contents a {
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
display: block;
padding: 8px 0;
font-size: 1rem;
}
.table-of-contents a:hover {
color: var(--primary-color);
padding-left: 10px;
}
/* Content Section */
.content-section {
margin: 50px 0;
}
.content-section h2 {
font-size: 2rem;
color: var(--text-dark);
margin-bottom: 25px;
font-family: var(--font-heading);
padding-bottom: 15px;
border-bottom: 3px solid var(--primary-color);
}
.content-section h3 {
font-size: 1.6rem;
color: var(--text-dark);
margin: 30px 0 20px;
font-family: var(--font-heading);
}
.content-section h4 {
font-size: 1.3rem;
color: var(--text-dark);
margin: 25px 0 15px;
font-family: var(--font-heading);
}
.content-section p {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-color);
margin-bottom: 20px;
}
.content-section ul {
margin: 20px 0;
padding-left: 25px;
}
.content-section li {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-color);
margin-bottom: 12px;
}
/* Responsive Styles */
@media screen and (max-width: 1024px) {
.blog-post__content {
grid-template-columns: 1fr !important;
gap: 40px;
}
.blog-post__sidebar {
position: relative !important;
top: 0 !important;
}
.highlights-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
}
.info-boxes {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
}
@media screen and (max-width: 768px) {
.blog-post__content {
grid-template-columns: 1fr !important;
gap: 30px;
padding: 0 !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.blog-post {
overflow-x: hidden !important;
}
.blog-post .container {
padding: 0 20px !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.blog-post__sidebar {
position: static !important;
top: auto !important;
display: block !important;
grid-template-columns: 1fr !important;
}
.blog-post__body {
max-width: 100%;
overflow-x: hidden;
}
.sidebar-widget {
padding: 25px;
margin-bottom: 25px;
}
.sidebar-widget__title {
font-size: 1.1rem;
}
.sidebar-widget__toc a {
font-size: 0.9rem;
}
/* Blog Sidebar Widget Mobile Fixes */
.blog-sidebar-widget {
padding: 20px !important;
margin-bottom: 20px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.blog-sidebar-widget__title {
font-size: 1.1rem !important;
margin-bottom: 15px !important;
}
.blog-sidebar-widget__toc {
padding: 0 !important;
margin: 0 !important;
}
.blog-sidebar-widget__toc li {
margin-bottom: 10px !important;
padding-left: 0 !important;
}
.blog-sidebar-widget__toc a {
font-size: 0.9rem !important;
padding: 8px 0 !important;
display: block !important;
}
.blog-sidebar-widget--cta {
padding: 25px 20px !important;
}
.blog-sidebar-widget--cta .blog-sidebar-widget__title {
font-size: 1.3rem !important;
}
.blog-sidebar-widget--cta p {
font-size: 0.95rem !important;
margin-bottom: 15px !important;
}
.blog-sidebar-widget--cta .btn {
width: 100% !important;
padding: 12px 20px !important;
font-size: 0.95rem !important;
}
.blog-sidebar-widget__share {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
justify-content: center !important;
}
.blog-sidebar-widget__share-btn {
width: 45px !important;
height: 45px !important;
font-size: 1.1rem !important;
}
.blog-sidebar-widget__posts {
padding: 0 !important;
}
.blog-sidebar-widget__post {
padding: 12px 0 !important;
font-size: 0.9rem !important;
}
.blog-sidebar-widget__post i {
font-size: 0.9rem !important;
}
.blog-post-header {
padding: calc(var(--header-height) + 80px) 0 60px !important;
min-height: 400px;
}
.blog-post-header__title {
font-size: 2rem;
}
.blog-post-header__excerpt {
font-size: 1rem;
}
.blog-post-header__meta {
flex-wrap: wrap;
gap: 10px;
}
.blog-post__body h2 {
font-size: 1.6rem;
margin: 35px 0 20px;
}
.blog-post__body h3 {
font-size: 1.3rem;
}
.blog-post__body h4 {
font-size: 1.1rem;
}
.blog-post__body p {
font-size: 1rem;
}
.blog-post__tool-card {
padding: 20px;
}
.blog-post__step {
flex-direction: column;
padding: 20px;
}
.blog-post__step-number {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
.blog-header h1 {
font-size: 2rem;
}
.blog-meta {
font-size: 0.85rem;
}
.consultant-card {
padding: 20px;
}
.consultant-card__header {
flex-direction: column;
align-items: flex-start;
}
.consultant-card__title {
font-size: 1.5rem;
}
.consultant-card__description {
font-size: 1rem;
}
.highlights-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.highlight-item {
padding: 15px;
}
.highlight-item i {
font-size: 1.5rem;
}
.industries-tags {
gap: 8px;
}
.industry-tag {
padding: 8px 15px;
font-size: 0.85rem;
}
.consultant-card__cta {
flex-direction: column;
}
.button {
width: 100%;
justify-content: center;
padding: 12px 20px;
font-size: 0.95rem;
}
.info-boxes {
grid-template-columns: 1fr;
gap: 20px;
}
.info-box {
padding: 25px;
}
.info-box i {
font-size: 2rem;
}
.info-box h3 {
font-size: 1.2rem;
}
.faq-section {
margin: 40px 0;
}
.faq-item {
padding: 20px;
margin-bottom: 15px;
}
.faq-question {
font-size: 1.05rem;
}
.faq-answer {
font-size: 0.95rem;
}
.share-section {
padding: 30px 20px;
}
.share-section h3 {
font-size: 1.5rem;
}
.consultant-number {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 1.1rem;
margin-right: 10px;
}
.content-section h2 {
font-size: 1.6rem;
}
.content-section h3 {
font-size: 1.3rem;
}
.content-section h4 {
font-size: 1.1rem;
}
.content-section p,
.content-section li {
font-size: 1rem;
}
.table-of-contents {
padding: 20px;
}
.table-of-contents h2 {
font-size: 1.3rem;
}
.cta-box {
padding: 30px 20px;
margin: 40px 0;
}
.cta-box h3 {
font-size: 1.5rem;
}
.cta-box__buttons {
flex-direction: column;
gap: 12px;
}
.cta-box__buttons .button {
width: 100%;
}
}
@media screen and (max-width: 480px) {
html, body {
max-width: 100vw !important;
overflow-x: hidden !important;
}
.container {
padding: 0 15px !important;
max-width: 100% !important;
}
.blog-post .container {
padding: 0 15px !important;
}
.blog-post__content {
grid-template-columns: 1fr !important;
gap: 20px !important;
padding: 0 !important;
margin: 30px 0 !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.blog-post-header {
padding: calc(var(--header-height) + 60px) 0 40px !important;
min-height: 400px;
}
.blog-post-header__title {
font-size: 1.5rem;
line-height: 1.3;
}
.blog-post-header__excerpt {
font-size: 0.9rem;
}
.blog-post-header__meta {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.blog-post-header__badge,
.blog-post-header__date,
.blog-post-header__read-time {
font-size: 0.8rem;
}
.blog-post-header__author {
flex-direction: column;
text-align: center;
}
.blog-post-header__author-img {
width: 50px;
height: 50px;
}
.blog-post__body h2 {
font-size: 1.4rem;
margin: 30px 0 15px;
}
.blog-post__body h3 {
font-size: 1.2rem;
}
.blog-post__body h4 {
font-size: 1rem;
}
.blog-post__body p,
.blog-post__body li {
font-size: 0.95rem;
}
.blog-post__list {
margin: 15px 0;
}
.blog-post__list li {
font-size: 0.95rem;
padding-left: 28px;
margin-bottom: 10px;
line-height: 1.6;
}
.blog-post__list > li::before {
width: 16px;
height: 16px;
top: 4px;
}
.blog-post__intro {
font-size: 1rem;
}
.blog-post__tool-card {
padding: 15px;
margin-bottom: 20px;
}
.blog-post__step {
padding: 15px;
gap: 15px;
}
.blog-post__step-number {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.blog-post__step-content h3 {
font-size: 1.1rem;
}
.blog-header h1 {
font-size: 1.6rem;
}
.blog-meta {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.consultant-card {
padding: 15px;
margin-bottom: 30px;
}
.consultant-card__rating {
font-size: 1rem;
}
.consultant-card__badge {
padding: 6px 15px;
font-size: 0.8rem;
}
.consultant-card__title {
font-size: 1.3rem;
}
.consultant-card__description {
font-size: 0.95rem;
}
.highlight-item {
padding: 12px;
}
.highlight-item i {
font-size: 1.3rem;
}
.highlight-item strong {
font-size: 0.95rem;
}
.consultant-card__website {
font-size: 0.9rem;
}
.button {
padding: 10px 18px;
font-size: 0.9rem;
}
.info-box {
padding: 20px;
}
.info-box__icon {
width: 50px;
height: 50px;
}
.info-box i {
font-size: 1.5rem;
}
.info-box h3 {
font-size: 1.1rem;
}
.info-box p {
font-size: 0.9rem;
}
.faq-section {
margin: 30px 0;
}
.faq-item {
padding: 15px;
}
.faq-question {
font-size: 1rem;
padding-right: 30px;
}
.faq-question i {
font-size: 1rem;
}
.faq-answer {
font-size: 0.9rem;
padding-top: 12px;
}
.share-section {
padding: 25px 15px;
}
.share-section h3 {
font-size: 1.3rem;
}
.share-buttons {
flex-wrap: wrap;
}
.share-button {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.content-section {
margin: 30px 0;
}
.content-section h2 {
font-size: 1.4rem;
}
.content-section h3 {
font-size: 1.2rem;
}
.content-section h4 {
font-size: 1rem;
}
.content-section p,
.content-section li {
font-size: 0.95rem;
}
.table-of-contents {
padding: 15px;
}
.table-of-contents h2 {
font-size: 1.2rem;
}
.table-of-contents a {
font-size: 0.9rem;
}
.sidebar-widget {
padding: 20px;
}
.sidebar-widget h3 {
font-size: 1.1rem;
}
.sidebar-widget__toc a {
font-size: 0.85rem;
padding: 8px 0;
}
/* Blog Sidebar Widget Mobile 480px Fixes */
.blog-sidebar-widget {
padding: 18px !important;
margin-bottom: 18px !important;
}
.blog-sidebar-widget__title {
font-size: 1rem !important;
margin-bottom: 12px !important;
}
.blog-sidebar-widget__toc a {
font-size: 0.85rem !important;
padding: 6px 0 !important;
}
.blog-sidebar-widget--cta {
padding: 20px 15px !important;
}
.blog-sidebar-widget--cta .blog-sidebar-widget__title {
font-size: 1.2rem !important;
}
.blog-sidebar-widget--cta p {
font-size: 0.9rem !important;
}
.blog-sidebar-widget--cta .btn {
padding: 10px 16px !important;
font-size: 0.9rem !important;
}
.blog-sidebar-widget__share-btn {
width: 42px !important;
height: 42px !important;
font-size: 1rem !important;
}
.blog-sidebar-widget__post {
padding: 10px 0 !important;
font-size: 0.85rem !important;
}
.author-card img {
width: 80px;
height: 80px;
}
.author-card h4 {
font-size: 1.1rem;
}
.author-card p {
font-size: 0.85rem;
}
.cta-box {
padding: 25px 15px;
margin: 30px 0;
}
.cta-box h3 {
font-size: 1.3rem;
}
.cta-box p {
font-size: 0.9rem;
}
.breadcrumb {
font-size: 0.8rem;
}
}
.consultant-card__specialties h4,
.consultant-card__highlights h4,
.consultant-card__industries h4 {
font-size: 1.1rem;
}
.consultant-card__specialties li {
font-size: 0.95rem;
padding: 10px 0;
}
.highlight-item {
flex-direction: column;
align-items: center;
text-align: center;
padding: 15px;
}
.highlight-item i {
font-size: 1.8rem;
}
.highlight-item strong {
font-size: 1rem;
}
.highlight-item p {
font-size: 0.85rem;
}
.industry-tag {
padding: 6px 12px;
font-size: 0.8rem;
}
.button {
padding: 10px 15px;
font-size: 0.9rem;
}
.info-box {
padding: 20px;
}
.info-box i {
font-size: 1.8rem;
}
.info-box h3 {
font-size: 1.1rem;
}
.info-box p {
font-size: 0.95rem;
}
.faq-item {
padding: 15px;
}
.faq-item h4 {
font-size: 1rem;
flex-direction: column;
align-items: flex-start;
}
.faq-item p {
font-size: 0.95rem;
}
.share-section {
padding: 25px 15px;
}
.share-section h3 {
font-size: 1.3rem;
}
.share-btn {
width: 45px;
height: 45px;
font-size: 1rem;
}
.consultant-number {
width: 35px;
height: 35px;
line-height: 35px;
font-size: 1rem;
margin-right: 8px;
}
.content-section {
margin: 30px 0;
}
.content-section h2 {
font-size: 1.4rem;
}
.content-section h3 {
font-size: 1.2rem;
}
.content-section h4 {
font-size: 1rem;
}
.content-section p,
.content-section li {
font-size: 0.95rem;
}
.table-of-contents {
padding: 15px;
}
.table-of-contents h2 {
font-size: 1.2rem;
}
.table-of-contents a {
font-size: 0.9rem;
}
.sidebar-widget {
padding: 20px;
}
.sidebar-widget h3 {
font-size: 1.1rem;
}
.author-card img {
width: 80px;
height: 80px;
}
}
/* ==================== ISLAMABAD AREAS SECTION ==================== */
/* ==================== IMAGE LIGHTBOX ==================== */
.lightbox {
display: none;
position: fixed;
z-index: 10000;
padding-top: 60px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.95);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.lightbox__content {
margin: auto;
display: block;
max-width: 90%;
max-height: 85vh;
object-fit: contain;
animation: zoomIn 0.3s ease;
}
@keyframes zoomIn {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.lightbox__close {
position: absolute;
top: 20px;
right: 40px;
color: #fff;
font-size: 45px;
font-weight: 300;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10001;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.lightbox__close:hover,
.lightbox__close:focus {
color: var(--primary-color);
background: rgba(255, 255, 255, 0.2);
transform: rotate(90deg);
}
.lightbox__caption {
margin: 20px auto;
display: block;
max-width: 80%;
text-align: center;
color: #fff;
font-size: 1.1rem;
padding: 15px 25px;
background: rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
.zoomable-image {
cursor: zoom-in;
transition: transform 0.3s ease;
}
.portfolio__image--zoomable:hover .zoomable-image {
transform: scale(1.05);
}
@media screen and (max-width: 768px) {
.lightbox__content {
max-width: 95%;
max-height: 80vh;
}
.lightbox__close {
top: 10px;
right: 20px;
font-size: 35px;
width: 40px;
height: 40px;
}
.lightbox__caption {
font-size: 0.95rem;
padding: 10px 15px;
max-width: 90%;
}
}
/* ==================== APPOINTMENT PAGE STYLES ==================== */
/* Appointment Hero Section */
.appointment-hero {
padding: calc(var(--header-height) + 80px) 0 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
position: relative;
overflow: hidden;
}
.appointment-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.appointment-hero__content {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.appointment-hero__badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.2);
padding: 10px 24px;
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: 600;
margin-bottom: var(--spacing-lg);
backdrop-filter: blur(10px);
}
.appointment-hero__title {
font-size: var(--font-size-5xl);
margin-bottom: var(--spacing-lg);
line-height: 1.2;
}
.appointment-hero__title .highlight {
background: rgba(255, 255, 255, 0.95);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.appointment-hero__description {
font-size: var(--font-size-lg);
line-height: 1.8;
margin-bottom: var(--spacing-xl);
opacity: 0.95;
}
.appointment-hero__benefits {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.benefit-item {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.15);
padding: 12px 16px;
border-radius: var(--radius-md);
backdrop-filter: blur(10px);
transition: var(--transition-base);
}
.benefit-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
}
.benefit-item i {
font-size: var(--font-size-xl);
flex-shrink: 0;
}
.benefit-item span {
font-size: var(--font-size-sm);
font-weight: 600;
}
.appointment-hero__cta {
margin-top: var(--spacing-xl);
}
.button--large {
padding: 1.2rem 3rem;
font-size: var(--font-size-lg);
}
.appointment-hero__contact {
display: flex;
justify-content: center;
gap: var(--spacing-xl);
margin-top: var(--spacing-lg);
}
.contact-info-item {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--font-size-base);
}
.contact-info-item i {
font-size: var(--font-size-lg);
}
.contact-info-item a {
color: white;
transition: var(--transition-fast);
}
.contact-info-item a:hover {
opacity: 0.8;
}
/* Services Slider Section */
.services-slider {
background: var(--bg-color);
padding: 100px 0;
}
.servicesSwiper {
padding: 40px 10px 60px;
}
.service-slide-card {
background: white;
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
height: 100%;
display: flex;
flex-direction: column;
transition: var(--transition-base);
border: 2px solid transparent;
}
.service-slide-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
border-color: var(--primary-color);
}
.service-slide__icon {
width: 70px;
height: 70px;
background: var(--gradient-primary);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
}
.service-slide__icon i {
font-size: var(--font-size-2xl);
color: white;
}
.service-slide__title {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
color: var(--text-dark);
}
.service-slide__description {
color: var(--text-light);
line-height: 1.7;
margin-bottom: var(--spacing-md);
flex-grow: 1;
}
.service-slide__features {
list-style: none;
margin-bottom: var(--spacing-lg);
}
.service-slide__features li {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
color: var(--text-color);
font-size: var(--font-size-sm);
}
.service-slide__features i {
color: var(--success-color);
font-size: 0.875rem;
}
.service-slide__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--primary-color);
font-weight: 600;
transition: var(--transition-fast);
}
.service-slide__link:hover {
gap: 12px;
color: var(--primary-dark);
}
.swiper-button-next,
.swiper-button-prev {
color: var(--primary-color);
background: white;
width: 50px;
height: 50px;
border-radius: 50%;
box-shadow: var(--shadow-md);
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 20px;
}
.swiper-pagination-bullet {
background: var(--primary-color);
width: 12px;
height: 12px;
}
.swiper-pagination-bullet-active {
background: var(--primary-dark);
width: 30px;
border-radius: 6px;
}
/* Booking Section */
.booking {
background: var(--bg-secondary);
padding: 100px 0;
}
.booking__container {
max-width: 1000px;
margin: 0 auto;
background: white;
padding: var(--spacing-lg);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}
.calendly-inline-widget {
min-width: 320px;
height: 700px;
width: 100%;
}
/* Ensure Calendly iframe is responsive */
.calendly-inline-widget iframe {
width: 100%;
height: 700px;
}
.booking__info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.booking__info-card {
text-align: center;
padding: var(--spacing-lg);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: var(--transition-base);
}
.booking__info-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.booking__info-card i {
font-size: var(--font-size-3xl);
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
.booking__info-card h4 {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xs);
color: var(--text-dark);
}
.booking__info-card p {
color: var(--text-light);
font-size: var(--font-size-sm);
}
/* Portfolio Showcase */
.portfolio-showcase {
background: white;
padding: 100px 0;
}
.portfolio-showcase__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}
.showcase-card {
background: white;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: var(--transition-base);
}
.showcase-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.showcase-card__image {
position: relative;
height: 220px;
overflow: hidden;
}
.showcase-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-slow);
}
.showcase-card:hover .showcase-card__image img {
transform: scale(1.1);
}
.showcase-card__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(102, 126, 234, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition-base);
}
.showcase-card:hover .showcase-card__overlay {
opacity: 1;
}
.showcase-card__button {
padding: 0.75rem 1.5rem;
background: white;
color: var(--primary-color);
border-radius: var(--radius-full);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition-base);
}
.showcase-card__button:hover {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.showcase-card__content {
padding: var(--spacing-lg);
}
.showcase-card__category {
display: inline-block;
font-size: var(--font-size-xs);
font-weight: 600;
color: var(--primary-color);
background: rgba(102, 126, 234, 0.1);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-full);
margin-bottom: var(--spacing-sm);
}
.showcase-card__title {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-sm);
color: var(--text-dark);
}
.showcase-card__description {
color: var(--text-light);
line-height: 1.7;
margin-bottom: var(--spacing-md);
font-size: var(--font-size-sm);
}
.showcase-card__metrics {
display: flex;
gap: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-color);
}
.metric-item {
text-align: center;
flex: 1;
}
.metric-value {
display: block;
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--primary-color);
}
.metric-label {
font-size: var(--font-size-xs);
color: var(--text-light);
}
.portfolio-showcase__cta {
text-align: center;
margin-top: var(--spacing-2xl);
}
/* Testimonials Appointment Section */
.testimonials-appointment {
background: var(--bg-secondary);
padding: 100px 0;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}
.testimonial-card {
background: white;
padding: var(--spacing-xl);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-md);
transition: var(--transition-base);
}
.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.testimonial-card__rating {
margin-bottom: var(--spacing-md);
}
.testimonial-card__rating i {
color: #fbbf24;
font-size: var(--font-size-sm);
}
.testimonial-card__text {
color: var(--text-light);
line-height: 1.8;
margin-bottom: var(--spacing-lg);
font-style: italic;
}
.testimonial-card__author {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.testimonial-card__author img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-card__name {
font-size: var(--font-size-base);
margin-bottom: 0.25rem;
color: var(--text-dark);
}
.testimonial-card__position {
font-size: var(--font-size-sm);
color: var(--text-light);
}
/* Final CTA Section */
.final-cta {
background: var(--gradient-primary);
padding: 100px 0;
color: white;
}
.final-cta__container {
max-width: 900px;
margin: 0 auto;
}
.final-cta__content {
text-align: center;
}
.final-cta__title {
font-size: var(--font-size-4xl);
margin-bottom: var(--spacing-md);
color: white;
}
.final-cta__description {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xl);
opacity: 0.95;
line-height: 1.8;
}
.final-cta__buttons {
margin-bottom: var(--spacing-xl);
}
.final-cta__contact p {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-md);
opacity: 0.9;
}
.contact-methods {
display: flex;
justify-content: center;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.contact-method {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.15);
border-radius: var(--radius-full);
color: white;
font-weight: 600;
backdrop-filter: blur(10px);
transition: var(--transition-base);
}
.contact-method:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
}
.contact-method i {
font-size: var(--font-size-lg);
}
/* Responsive Design for Appointment Page */
@media screen and (max-width: 1024px) {
.appointment-hero__benefits {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.appointment-hero__title {
font-size: 2.25rem;
}
.benefit-item {
padding: 10px 14px;
font-size: 0.9rem;
}
.portfolio-showcase__grid,
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
.booking__info {
grid-template-columns: repeat(2, 1fr);
}
.calendly-inline-widget {
height: 750px;
}
}
@media screen and (max-width: 768px) {
.appointment-hero {
padding: calc(var(--header-height) + 40px) 0 40px;
}
.appointment-hero__title {
font-size: 1.75rem;
line-height: 1.3;
}
.appointment-hero__description {
font-size: 0.95rem;
line-height: 1.6;
}
.appointment-hero__badge {
font-size: 0.8rem;
padding: 8px 16px;
}
.appointment-hero__benefits {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.appointment-hero__contact {
flex-direction: column;
gap: var(--spacing-sm);
}
.benefit-item {
justify-content: flex-start;
padding: 10px 14px;
font-size: 0.85rem;
}
.benefit-item i {
font-size: 1.1rem;
}
.services-slider,
.booking,
.portfolio-showcase,
.testimonials-appointment,
.final-cta {
padding: 40px 0;
}
.button--large {
padding: 1rem 2rem;
font-size: 1rem;
}
.servicesSwiper {
padding: 20px 5px 50px;
}
.service-slide-card {
padding: var(--spacing-lg);
}
.service-slide__icon {
width: 60px;
height: 60px;
}
.service-slide__title {
font-size: 1.1rem;
}
.service-slide__description {
font-size: 0.9rem;
}
.portfolio-showcase__grid,
.testimonials-grid,
.booking__info {
grid-template-columns: 1fr;
}
.booking__container {
padding: var(--spacing-sm);
border-radius: var(--radius-lg);
}
.section__header {
margin-bottom: var(--spacing-lg);
}
.section__title {
font-size: 1.75rem;
}
.section__subtitle {
font-size: 0.85rem;
}
.section__description {
font-size: 0.9rem;
}
.calendly-inline-widget {
min-width: 100%;
height: 900px;
border-radius: var(--radius-md);
overflow: hidden;
}
.booking__info {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.booking__info-card {
padding: var(--spacing-md);
}
.booking__info-card h4 {
font-size: 1rem;
}
.booking__info-card p {
font-size: 0.85rem;
}
.showcase-card__title {
font-size: 1.1rem;
}
.showcase-card__description {
font-size: 0.85rem;
}
.testimonial-card {
padding: var(--spacing-lg);
}
.testimonial-card__text {
font-size: 0.9rem;
}
.final-cta__title {
font-size: 1.5rem;
}
.final-cta__description {
font-size: 0.95rem;
}
.final-cta__buttons .button--large {
width: 100%;
padding: 1rem 1.5rem;
font-size: 0.95rem;
}
.contact-methods {
flex-direction: column;
gap: var(--spacing-sm);
}
.contact-method {
width: 100%;
justify-content: center;
padding: 12px 20px;
font-size: 0.9rem;
}
.swiper-button-next,
.swiper-button-prev {
width: 40px;
height: 40px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 16px;
}
}