/* CSS Variables */
:root {
/* Colors */
--primary-color: #2563eb;
--primary-dark: #1d4ed8;
--secondary-color: #f97316;
--secondary-dark: #ea580c;
--success-color: #22c55e;
--success-dark: #16a34a;
--dark-color: #1e293b;
--light-color: #f8fafc;
--gray-color: #64748b;
--white: #ffffff;
--black: #000000;
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
/* Border Radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Transitions */
--transition-fast: 0.15s ease-in-out;
--transition-normal: 0.3s ease-in-out;
--transition-slow: 0.5s ease-in-out;
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--dark-color);
background-color: var(--white);
overflow-x: hidden;
width: 100%;
max-width: 100vw;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--spacing-md);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }
p {
margin-bottom: var(--spacing-md);
}
a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-dark);
}
/* Utility Classes */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-xl);
width: 100%;
overflow-x: hidden;
}
.section {
padding: var(--spacing-3xl) 0;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.section--gray {
background-color: var(--light-color);
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.section__header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.section__title {
color: var(--dark-color);
margin-bottom: var(--spacing-md);
}
.section__description {
color: var(--gray-color);
font-size: var(--font-size-lg);
max-width: 600px;
margin: 0 auto;
}
.text--primary {
color: var(--primary-color);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.btn--primary {
background-color: var(--primary-color);
color: var(--white);
}
.btn--primary:hover {
background-color: var(--primary-dark);
color: var(--white);
}
.btn--success {
background-color: var(--success-color);
color: var(--white);
}
.btn--success:hover {
background-color: var(--success-dark);
color: var(--white);
}
.btn--outline {
background-color: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn--outline:hover {
background-color: var(--primary-color);
color: var(--white);
}
.btn--large {
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-size-lg);
}
/* Disclaimer Header */
/* Header */
.header {
background-color: transparent;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99999;
width: 100%;
max-width: 100vw;
height: 80px;
overflow: visible;
margin-top: 0;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-md) 0;
width: 100%;
max-width: 100%;
height: 100%;
overflow: visible;
}
.brand-logo {
display: flex;
align-items: center;
gap: 12px;
}
.brand-icon {
width: 50px;
height: 50px;
background: var(--primary-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.5rem;
transform: skew(-10deg);
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.brand-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--white);
text-transform: uppercase;
}
.brand-subtitle {
font-size: 0.875rem;
font-weight: 500;
color: var(--white);
opacity: 0.8;
text-transform: uppercase;
}
.nav__logo {
height: 40px;
width: auto;
max-width: 150px;
object-fit: contain;
}
.nav__menu {
display: flex;
align-items: center;
gap: var(--spacing-xl);
}
.nav__list {
display: flex;
list-style: none;
gap: var(--spacing-lg);
}
.nav__link {
color: #2563eb;
font-weight: 600;
font-size: 0.875rem !important;
line-height: 1.5 !important;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
text-transform: uppercase;
}
.nav__link:hover,
.nav__link.active {
color: var(--primary-color);
background-color: rgba(37, 99, 235, 0.1);
font-size: 1rem !important;
line-height: 1.5 !important;
}
/* Force consistent font-size for nav links across all pages */
header .nav__link,
.header .nav__link,
.nav .nav__link,
.nav__list .nav__link,
.nav__menu .nav__link,
.nav__item .nav__link,
a.nav__link {
font-size: 1rem !important;
line-height: 1.5 !important;
font-family: var(--font-family) !important;
}
/* Additional specificity for all pages */
body .nav__link,
html .nav__link,
* .nav__link {
font-size: 1rem !important;
line-height: 1.5 !important;
}
/* Maximum specificity for nav links */
html body .header .nav .nav__menu .nav__list .nav__item .nav__link,
html body .header .nav .nav__menu .nav__list .nav__item a.nav__link {
font-size: 1rem !important;
line-height: 1.5 !important;
font-family: var(--font-family) !important;
font-weight: 500 !important;
}
/* Force consistency across all pages */
.index .nav__link,
.hizmetler .nav__link,
.hakkimizda .nav__link,
.iletisim .nav__link,
.sss .nav__link {
font-size: 1rem !important;
line-height: 1.5 !important;
}
/* Ultimate specificity for nav links */
html body div#header-placeholder header.header nav.nav div.nav__menu ul.nav__list li.nav__item a.nav__link {
font-size: 1rem !important;
line-height: 1.5 !important;
font-family: var(--font-family) !important;
font-weight: 500 !important;
}
/* Force all nav links to be same size */
a[href*="index.html"].nav__link,
a[href*="hizmetler.html"].nav__link,
a[href*="hakkimizda.html"].nav__link,
a[href*="iletisim.html"].nav__link,
a[href*="sss.html"].nav__link {
font-size: 1rem !important;
line-height: 1.5 !important;
}
/* Final override for all nav links */
.nav__link,
.nav__link:visited,
.nav__link:hover,
.nav__link:active,
.nav__link:focus {
font-size: 1rem !important;
line-height: 1.5 !important;
font-family: var(--font-family) !important;
font-weight: 500 !important;
}
.nav__cta {
display: flex;
align-items: center;
}
.phone-call-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--primary-color);
color: var(--white);
padding: 12px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.3s ease;
}
.phone-call-btn:hover {
background: var(--primary-dark);
color: var(--white);
transform: translateY(-2px);
}
.phone-call-btn i {
font-size: 1rem;
}
.phone-call-btn span {
font-weight: 700;
font-size: 1rem;
}
.nav__brand {
display: flex;
align-items: center;
height: 100%;
}
.nav__brand-link {
display: flex;
align-items: center;
gap: var(--spacing-sm);
text-decoration: none;
height: 100%;
flex-direction: row;
}
.nav__brand-text-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.nav__brand-subtitle {
font-size: 11px;
font-weight: 400;
color: #6b7280;
line-height: 1;
white-space: nowrap;
letter-spacing: 0.3px;
}
.nav__brand-text {
color: #2563eb;
font-family: 'Poppins', sans-serif;
font-size: var(--font-size-lg);
font-weight: 700;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
letter-spacing: 0.5px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-smooth: always;
}
.nav__toggle {
display: none;
background: none;
border: none;
font-size: var(--font-size-xl);
color: #2563eb;
cursor: pointer;
padding: var(--spacing-sm);
z-index: 100001;
position: relative;
}
/* Hero Section */
.hero-section {
background: var(--dark-color);
padding: 0;
color: var(--white);
position: relative;
overflow: visible;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
padding: 40px 20px;
}
.hero-text {
max-width: 600px;
}
.hero-title {
font-size: 4rem;
font-weight: 800;
margin-bottom: 2rem;
line-height: 1.1;
display: flex;
flex-direction: column;
}
.hero-title--white {
color: var(--white);
}
.hero-title--red {
color: var(--primary-color);
}
.hero-subtitle {
font-size: 1.25rem;
margin-bottom: 2.5rem;
line-height: 1.6;
opacity: 0.95;
}
.hero-cta {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cta-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
font-size: 1.125rem;
transition: all 0.3s ease;
min-width: 200px;
}
.cta-btn--primary {
background: var(--primary-color);
color: var(--white);
border: none;
}
.cta-btn--primary:hover {
background: var(--primary-dark);
color: var(--white);
transform: translateY(-2px);
}
.cta-btn--secondary {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.cta-btn--secondary:hover {
background: var(--white);
color: var(--dark-color);
transform: translateY(-2px);
}
.cta-number {
font-size: 1.5rem;
font-weight: 800;
}
.cta-btn i {
font-size: 1.25rem;
}
.hero-image {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.hero-img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
.hero-image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(0, 0, 0, 0.4));
z-index: 1;
}
/* Responsive Hero Section */
@media (max-width: 1200px) {
.hero-content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
padding: 60px 0;
}
.hero-title {
font-size: 3rem;
}
.hero-subtitle {
font-size: 1.125rem;
}
.hero-cta {
align-items: center;
}
}
@media (max-width: 768px) {
.hero-section {
min-height: 80vh;
}
.hero-content {
padding: 80px 0 40px 0;
}
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 2rem;
}
.cta-btn {
min-width: 200px;
padding: 1.25rem 1.5rem;
}
.cta-number {
font-size: 1.25rem;
}
.hero-img {
height: 300px;
}
}
@media (max-width: 480px) {
.hero-content {
padding: 100px 0 40px 0;
}
.hero-title {
font-size: 2rem;
}
.cta-btn {
min-width: 180px;
padding: 1rem 1.25rem;
font-size: 1rem;
}
.cta-number {
font-size: 1.125rem;
}
.hero-img {
height: 250px;
}
}
/* Service Request Section */
.service-request {
background: var(--light-bg);
padding: 80px 0;
}
.service-request__content {
display: grid;
grid-template-columns: 1fr !important;
gap: 4rem;
align-items: center;
}
.service-request__title {
font-size: 2.5rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.service-request__subtitle {
font-size: 1.125rem;
color: var(--text-color);
margin-bottom: 2.5rem;
line-height: 1.6;
}
.service-request__phone {
text-align: center;
}
.service-phone-btn {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
background: var(--primary-color);
color: var(--white);
padding: 2rem 3rem;
border-radius: 20px;
text-decoration: none;
font-weight: 700;
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
transition: all 0.3s ease;
margin-bottom: 1rem;
min-width: 200px;
}
.service-phone-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(37, 99, 235, 0.4);
color: var(--white);
}
.service-phone-btn i {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.service-phone-number {
font-size: 2.5rem;
font-weight: 800;
line-height: 1;
}
.service-phone-text {
font-size: 1rem;
font-weight: 600;
opacity: 0.9;
}
.service-phone-label {
font-size: 1rem;
color: var(--text-color);
margin: 0;
font-weight: 600;
}
.service-request__features {
display: flex;
flex-direction: column;
gap: 2rem;
}
.feature-item {
display: flex;
align-items: center;
gap: 1.5rem;
background: var(--white);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.feature-icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.5rem;
flex-shrink: 0;
}
.feature-content {
flex: 1;
}
.feature-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 0.5rem;
}
.feature-subtitle {
font-size: 1rem;
color: var(--text-color);
margin: 0;
font-weight: 500;
}
/* Responsive Service Request */
@media (max-width: 1200px) {
.service-request__content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.service-request__title {
font-size: 2.25rem;
}
}
@media (max-width: 768px) {
.service-request {
padding: 60px 0;
}
.service-request__content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.service-request__title {
font-size: 1.75rem;
margin-bottom: 1rem;
}
.service-request__subtitle {
font-size: 1rem;
margin-bottom: 2rem;
line-height: 1.5;
}
.service-request__phone {
margin-bottom: 2rem;
}
.service-phone-btn {
padding: 1.25rem 2rem;
min-width: 160px;
width: 100%;
max-width: 280px;
}
.service-phone-number {
font-size: 1.5rem;
}
.service-phone-text {
font-size: 0.875rem;
}
.service-phone-label {
font-size: 0.875rem;
margin-top: 0.5rem;
}
.service-request__features {
gap: 1.5rem;
}
.feature-item {
flex-direction: row;
text-align: left;
gap: 1rem;
padding: 1rem;
}
.feature-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
min-width: 50px;
}
.feature-title {
font-size: 1rem;
}
.feature-subtitle {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.service-request {
padding: 40px 0;
}
.service-request__content {
gap: 1.5rem;
}
.service-request__title {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.service-request__subtitle {
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.service-request__phone {
margin-bottom: 1.5rem;
}
.service-phone-btn {
padding: 1rem 1.5rem;
min-width: 140px;
max-width: 250px;
}
.service-phone-number {
font-size: 1.25rem;
}
.service-phone-text {
font-size: 0.8rem;
}
.service-phone-label {
font-size: 0.8rem;
}
.service-request__features {
gap: 1rem;
}
.feature-item {
padding: 0.75rem;
gap: 0.75rem;
}
.feature-icon {
width: 40px;
height: 40px;
font-size: 1rem;
min-width: 40px;
}
.feature-title {
font-size: 0.9rem;
}
.feature-subtitle {
font-size: 0.8rem;
}
}
/* Customer Satisfaction Section */
.customer-satisfaction {
background: var(--white);
padding: 80px 0;
}
.customer-satisfaction__content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
align-items: center;
}
.customer-satisfaction__title {
font-size: 2.5rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.customer-satisfaction__subtitle {
font-size: 1.125rem;
color: var(--text-color);
margin-bottom: 2.5rem;
line-height: 1.6;
}
.customer-satisfaction__phone {
text-align: center;
}
.customer-phone-btn {
display: inline-flex;
align-items: center;
gap: 1rem;
background: var(--primary-color);
color: var(--white);
padding: 1.5rem 3rem;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
transition: all 0.3s ease;
margin-bottom: 1rem;
}
.customer-phone-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(37, 99, 235, 0.4);
color: var(--white);
}
.customer-phone-btn i {
font-size: 1.5rem;
}
.customer-phone-number {
font-size: 1.5rem;
font-weight: 800;
}
.customer-phone-label {
font-size: 1rem;
color: var(--text-color);
margin: 0;
font-weight: 600;
}
.customer-satisfaction__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.satisfaction-stat {
text-align: center;
padding: 2rem;
background: var(--light-bg);
border-radius: 15px;
transition: all 0.3s ease;
}
.satisfaction-stat:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.stat-number {
font-size: 3rem;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 1rem;
line-height: 1;
}
.stat-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 1rem;
}
.stat-subtitle {
font-size: 0.9rem;
color: var(--text-color);
line-height: 1.5;
margin: 0;
}
/* Responsive Customer Satisfaction */
@media (max-width: 1200px) {
.customer-satisfaction__content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.customer-satisfaction__title {
font-size: 2.25rem;
}
.customer-satisfaction__stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.customer-satisfaction {
padding: 60px 0;
}
.customer-satisfaction__title {
font-size: 2rem;
}
.customer-satisfaction__subtitle {
font-size: 1rem;
margin-bottom: 2rem;
}
.customer-phone-btn {
padding: 1.25rem 2.5rem;
}
.customer-phone-number {
font-size: 1.75rem;
}
.satisfaction-stat {
padding: 1.5rem;
}
.stat-number {
font-size: 2.5rem;
}
.stat-title {
font-size: 1.125rem;
}
}
@media (max-width: 480px) {
.customer-satisfaction__title {
font-size: 1.75rem;
}
.customer-phone-btn {
padding: 1rem 2rem;
}
.customer-phone-number {
font-size: 1.5rem;
}
.stat-number {
font-size: 2rem;
}
}
/* Product Groups Section */
.product-groups {
background: var(--light-bg);
padding: 80px 0;
}
.product-groups__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.product-group-card {
background: var(--white);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.product-group-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.product-group__image {
position: relative;
height: 200px;
overflow: hidden;
}
.product-group__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-group-card:hover .product-group__img {
transform: scale(1.05);
}
.product-group__content {
padding: 1.5rem;
text-align: center;
}
.product-group__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 1rem;
}
.product-group__link {
display: inline-block;
background: var(--primary-color);
color: var(--white);
padding: 0.75rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.product-group__link:hover {
background: var(--primary-dark);
transform: translateY(-2px);
color: var(--white);
}
/* Responsive Product Groups */
@media (max-width: 768px) {
.product-groups {
padding: 60px 0;
}
.product-groups__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.product-group__image {
height: 180px;
}
.product-group__content {
padding: 1.25rem;
}
.product-group__title {
font-size: 1.125rem;
}
}
/* Slider Controls */
.slider-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 var(--spacing-xl);
z-index: 3;
pointer-events: none;
}
.slider-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: var(--white);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-normal);
backdrop-filter: blur(10px);
pointer-events: auto;
}
.slider-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.slider-btn i {
font-size: var(--font-size-lg);
}
/* Slider Dots */
.slider-dots {
position: absolute;
bottom: var(--spacing-xl);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--spacing-sm);
z-index: 3;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all var(--transition-normal);
}
.dot.active {
background: var(--white);
transform: scale(1.2);
}
.dot:hover {
background: rgba(255, 255, 255, 0.8);
}
.hero-slider__container {
position: relative;
width: 100%;
height: 100%;
}
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
display: flex;
align-items: center;
}
.hero-slide.active {
opacity: 1;
visibility: visible;
}
/* Gradient Backgrounds */
.hero-slide[data-bg="gradient-1"] {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero-slide[data-bg="gradient-2"] {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.hero-slide[data-bg="gradient-3"] {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.hero-slide[data-bg="gradient-4"] {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.hero-slide__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3xl);
align-items: center;
width: 100%;
max-width: 100%;
position: relative;
z-index: 2;
overflow-x: hidden;
}
.hero-slide__badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: var(--white);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--radius-xl);
font-size: var(--font-size-sm);
font-weight: 600;
margin-bottom: var(--spacing-lg);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.hero-slide__title {
font-size: var(--font-size-5xl);
margin-bottom: var(--spacing-lg);
line-height: 1.1;
color: var(--white);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-slide__title .text--primary {
color: #ffd700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-slide__description {
font-size: var(--font-size-lg);
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--spacing-xl);
line-height: 1.6;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hero-slide__phone {
margin-bottom: var(--spacing-xl);
}
.hero-slide__phone-label {
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--spacing-xs);
}
.hero-slide__phone-number {
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--white);
text-decoration: none;
display: block;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-slide__buttons {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.hero-slide .btn--outline {
background-color: rgba(255, 255, 255, 0.1);
color: var(--white);
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.hero-slide .btn--outline:hover {
background-color: rgba(255, 255, 255, 0.2);
color: var(--white);
}
.hero-slide__image {
display: flex;
justify-content: center;
align-items: center;
}
.hero-slide__image-container {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
animation: float 6s ease-in-out infinite;
}
.hero-slide__img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.hero-slide__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 4rem;
border-radius: 50%;
transition: all var(--transition-normal);
}
.hero-slide__overlay:hover {
background: rgba(0, 0, 0, 0.6);
transform: scale(1.05);
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* Slider Controls */
.hero-slider__controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 var(--spacing-xl);
z-index: 3;
pointer-events: none;
}
.hero-slider__prev,
.hero-slider__next {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: var(--white);
font-size: var(--font-size-xl);
cursor: pointer;
transition: all var(--transition-fast);
pointer-events: all;
display: flex;
align-items: center;
justify-content: center;
}
.hero-slider__prev:hover,
.hero-slider__next:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* Slider Dots */
.hero-slider__dots {
position: absolute;
bottom: var(--spacing-xl);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--spacing-md);
z-index: 3;
}
.hero-slider__dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: none;
cursor: pointer;
transition: all var(--transition-fast);
}
.hero-slider__dot.active {
background: var(--white);
transform: scale(1.2);
}
.hero-slider__dot:hover {
background: rgba(255, 255, 255, 0.7);
}
/* Services Section */
.services__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.service-card--large {
background-color: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
display: flex;
flex-direction: column;
min-height: 400px;
}
.service-card--large:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-xl);
}
.service-card__image {
height: 200px;
position: relative;
overflow: hidden;
}
.service-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.service-card__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(249, 115, 22, 0.8));
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 3rem;
opacity: 0;
transition: opacity var(--transition-normal);
}
.service-card--large:hover .service-card__img {
transform: scale(1.1);
}
.service-card--large:hover .service-card__overlay {
opacity: 1;
}
.service-card__content {
padding: var(--spacing-xl);
flex: 1;
display: flex;
flex-direction: column;
}
.service-card__title {
color: var(--dark-color);
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.service-card__subtitle {
color: var(--primary-color);
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-md);
}
.service-card__description {
color: var(--gray-color);
margin-bottom: var(--spacing-lg);
flex: 1;
}
.service-card__link {
color: var(--primary-color);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
margin-top: auto;
padding: var(--spacing-sm) var(--spacing-md);
border: 2px solid var(--primary-color);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.service-card__link:hover {
background-color: var(--primary-color);
color: var(--white);
}
/* Stats Section */
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-xl);
max-width: 1000px;
margin: 0 auto;
justify-content: center;
align-items: center;
width: 100%;
}
/* Force center alignment for stats section */
.stats .container {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
max-width: 100% !important;
}
.stats .stats__grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--spacing-xl) !important;
max-width: 1000px !important;
margin: 0 auto !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
padding: 0 var(--spacing-xl) !important;
}
/* Additional force center */
section.stats {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
section.stats .container {
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.stat-card {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: transform var(--transition-normal);
}
.stat-card:hover {
transform: translateY(-5px);
}
.stat-card__number {
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--primary-color);
margin-bottom: var(--spacing-sm);
display: block;
}
.stat-card__label {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--dark-color);
margin-bottom: var(--spacing-sm);
}
.stat-card__description {
color: var(--gray-color);
font-size: var(--font-size-sm);
}
/* Why Choose Section */
.why-choose__content {
max-width: 1000px;
margin: 0 auto;
}
.why-choose__title {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-lg);
line-height: 1.2;
}
.why-choose__description {
font-size: var(--font-size-lg);
color: var(--gray-color);
margin-bottom: var(--spacing-2xl);
line-height: 1.6;
}
.why-choose__features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
}
.why-choose__feature {
background-color: var(--light-color);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
border-left: 4px solid var(--primary-color);
}
.why-choose__feature h3 {
color: var(--primary-color);
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
.why-choose__feature p {
color: var(--gray-color);
line-height: 1.6;
margin: 0;
}
/* Features Section */
.features__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
}
.feature {
text-align: center;
padding: var(--spacing-lg);
}
.feature__icon {
width: 60px;
height: 60px;
background-color: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
color: var(--white);
font-size: var(--font-size-xl);
}
.feature__title {
color: var(--dark-color);
margin-bottom: var(--spacing-md);
}
.feature__description {
color: var(--gray-color);
}
/* CTA Section */
.cta {
background: var(--primary-color);
color: var(--white);
text-align: center;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.cta__title {
color: var(--white);
margin-bottom: var(--spacing-md);
}
.cta__description {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xl);
}
.cta__buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
}
.cta .btn--outline {
color: var(--white);
border-color: var(--white);
}
.cta .btn--outline:hover {
background-color: var(--white);
color: var(--primary-color);
}
/* Footer */
.footer {
background-color: var(--dark-color);
color: var(--white);
padding: var(--spacing-3xl) 0 var(--spacing-lg);
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.footer__content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.footer__title {
color: var(--white);
margin-bottom: var(--spacing-md);
}
.footer__logo {
margin-bottom: var(--spacing-md);
}
.footer__brand-link {
text-decoration: none;
color: inherit;
}
.footer__brand-text-container {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.footer__brand-text {
color: var(--white);
font-family: 'Poppins', sans-serif;
font-size: 1.25rem;
font-weight: 700;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
letter-spacing: 0.5px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-smooth: always;
}
.footer__brand-subtitle {
font-size: 11px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
line-height: 1;
white-space: nowrap;
letter-spacing: 0.3px;
}
.footer__logo-img {
height: 40px;
width: auto;
max-width: 180px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.footer__subtitle {
color: var(--white);
margin-bottom: var(--spacing-md);
font-size: var(--font-size-lg);
}
.footer__description {
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--spacing-lg);
}
.footer__contact {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.footer__list {
list-style: none;
}
.footer__list li {
margin-bottom: var(--spacing-sm);
}
.footer__link {
color: rgba(255, 255, 255, 0.8);
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
transition: color var(--transition-fast);
}
.footer__link:hover {
color: var(--white);
}
.footer__bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--spacing-lg);
text-align: center;
}
.footer__disclaimer {
margin-bottom: var(--spacing-md);
}
.footer__disclaimer p {
color: rgba(255, 255, 255, 0.8);
font-size: var(--font-size-sm);
}
.footer__copyright p {
color: rgba(255, 255, 255, 0.6);
font-size: var(--font-size-sm);
margin: 0;
}
/* Page Header */
.page-header {
background: #F1F1F1 !important;
color: var(--white);
padding: var(--spacing-3xl) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.page-header__content {
position: relative;
z-index: 1;
}
.page-header__title {
font-size: var(--font-size-4xl);
margin-bottom: var(--spacing-md);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.page-header__description {
font-size: var(--font-size-lg);
opacity: 0.9;
max-width: 800px;
margin: 0 auto var(--spacing-xl);
line-height: 1.6;
}
.page-header__cta {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
.page-header--beyaz-esya {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.page-header--services {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.page-header__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3xl);
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.page-header__text {
text-align: left;
}
.page-header__image {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.page-header__img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform var(--transition-normal);
}
.page-header__image:hover .page-header__img {
transform: scale(1.05);
}
/* Service Overview */
.service-overview {
background-color: var(--light-color);
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}
.service-overview__content {
max-width: 1000px;
margin: 0 auto;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.service-overview h2 {
font-size: var(--font-size-3xl);
color: var(--dark-color);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.service-overview p {
font-size: var(--font-size-lg);
color: var(--gray-color);
line-height: 1.6;
margin-bottom: var(--spacing-2xl);
text-align: center;
}
.service-overview__features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.service-feature {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
display: flex;
gap: var(--spacing-lg);
align-items: flex-start;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.service-feature__icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-xl);
flex-shrink: 0;
}
.service-feature__content h3 {
color: var(--primary-color);
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
.service-feature__content p {
color: var(--gray-color);
line-height: 1.6;
margin-bottom: var(--spacing-md);
text-align: left;
}
.service-feature__link {
color: var(--primary-color);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
}
.service-feature__link:hover {
color: var(--primary-dark);
}
/* Appliance Services */
.appliance-services {
margin-top: var(--spacing-2xl);
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.appliance-service {
background-color: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-xl);
overflow: hidden;
width: 100%;
max-width: 100%;
}
.appliance-service__header {
background: var(--primary-color);
color: var(--white);
padding: var(--spacing-lg);
display: flex;
align-items: center;
gap: var(--spacing-md);
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.appliance-service__icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
}
.appliance-service__header h4 {
margin: 0;
font-size: var(--font-size-xl);
}
.appliance-service__image {
height: 200px;
overflow: hidden;
}
.appliance-service__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.appliance-service:hover .appliance-service__img {
transform: scale(1.05);
}
.appliance-service__content {
padding: var(--spacing-xl);
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.appliance-service__content p {
color: var(--gray-color);
line-height: 1.6;
margin-bottom: var(--spacing-md);
}
.appliance-service__list {
list-style: none;
padding: 0;
margin: var(--spacing-lg) 0 0 0;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.appliance-service__list li {
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--light-color);
position: relative;
padding-left: var(--spacing-lg);
}
.appliance-service__list li:before {
content: '✓';
position: absolute;
left: 0;
color: var(--success-color);
font-weight: bold;
}
.appliance-service__list li:last-child {
border-bottom: none;
}
/* Service Advantages */
.service-advantages {
margin-top: var(--spacing-2xl);
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.service-advantages h3 {
font-size: var(--font-size-2xl);
color: var(--dark-color);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.service-advantages p {
font-size: var(--font-size-lg);
color: var(--gray-color);
line-height: 1.6;
margin-bottom: var(--spacing-2xl);
text-align: center;
}
.advantages-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.advantage-item {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
display: flex;
gap: var(--spacing-lg);
align-items: flex-start;
transition: transform var(--transition-normal);
}
.advantage-item:hover {
transform: translateY(-5px);
}
.advantage-item__icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-xl);
flex-shrink: 0;
}
.advantage-item__content h4 {
color: var(--dark-color);
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-sm);
}
.advantage-item__content p {
color: var(--gray-color);
line-height: 1.6;
margin: 0;
text-align: left;
}
/* Gallery Section */
.gallery__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.gallery__item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform var(--transition-normal);
cursor: pointer;
}
.gallery__item:hover {
transform: translateY(-5px);
}
.gallery__img {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform var(--transition-normal);
}
.gallery__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-2xl);
opacity: 0;
transition: opacity var(--transition-normal);
}
.gallery__item:hover .gallery__overlay {
opacity: 1;
}
.gallery__item:hover .gallery__img {
transform: scale(1.1);
}
/* Service Card Detailed */
.service-card--detailed {
text-align: left;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
width: 100%;
max-width: 100%;
}
.service-card--detailed .service-card__image {
height: 200px;
position: relative;
overflow: hidden;
}
.service-card--detailed .service-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.service-card--detailed .service-card__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.8), rgba(249, 115, 22, 0.8));
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 3rem;
opacity: 0;
transition: opacity var(--transition-normal);
}
.service-card--detailed:hover .service-card__img {
transform: scale(1.1);
}
.service-card--detailed:hover .service-card__overlay {
opacity: 1;
}
.service-card--detailed .service-card__content {
padding: var(--spacing-xl);
flex: 1;
display: flex;
flex-direction: column;
}
.service-card__features {
list-style: none;
margin: var(--spacing-lg) 0;
}
.service-card__features li {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
color: var(--gray-color);
}
.service-card__features i {
color: var(--success-color);
font-size: var(--font-size-sm);
}
/* Process Steps */
.process__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
}
.process-step {
text-align: center;
padding: var(--spacing-lg);
}
.process-step__number {
width: 60px;
height: 60px;
background: var(--primary-color);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xl);
font-weight: 700;
margin: 0 auto var(--spacing-lg);
}
.process-step__title {
color: var(--dark-color);
margin-bottom: var(--spacing-md);
}
.process-step__description {
color: var(--gray-color);
}
/* Service Details */
.service-details__grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-3xl);
align-items: start;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.service-details__content h2 {
color: var(--dark-color);
margin-bottom: var(--spacing-lg);
}
.service-details__content h3 {
color: var(--dark-color);
margin: var(--spacing-xl) 0 var(--spacing-lg);
}
.service-details__content p {
color: var(--gray-color);
line-height: 1.7;
}
.service-details__sidebar {
position: sticky;
top: 100px;
}
.service-details__sidebar .service-card {
margin-bottom: var(--spacing-lg);
text-align: center;
}
/* Service List */
.service-list {
margin: var(--spacing-xl) 0;
}
.service-item {
display: flex;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
background-color: var(--light-color);
border-radius: var(--radius-lg);
}
.service-item__icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: var(--font-size-xl);
flex-shrink: 0;
}
.service-item__content h4 {
color: var(--dark-color);
margin-bottom: var(--spacing-sm);
}
.service-item__content p {
color: var(--gray-color);
margin: 0;
}
/* Problem Solutions */
.problem-solutions {
margin: var(--spacing-xl) 0;
}
.problem-solution {
background-color: var(--white);
border: 1px solid #e2e8f0;
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.problem-solution h4 {
color: var(--dark-color);
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.problem-solution h4 i {
color: var(--secondary-color);
}
.problem-solution p {
color: var(--gray-color);
margin: 0;
}
/* Brands */
.brands__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-lg);
}
.brand-item {
background-color: var(--white);
padding: var(--spacing-lg);
border-radius: var(--radius-lg);
text-align: center;
font-weight: 600;
color: var(--dark-color);
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast);
}
.brand-item:hover {
transform: translateY(-2px);
}
/* Maintenance Tips */
.maintenance-tips {
margin: var(--spacing-xl) 0;
}
.tip-item {
background-color: var(--light-color);
border-left: 4px solid var(--primary-color);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.tip-item h4 {
color: var(--dark-color);
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.tip-item h4 i {
color: var(--secondary-color);
}
.tip-item p {
color: var(--gray-color);
margin: 0;
}
/* About Page */
.about__grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-3xl);
align-items: start;
}
.about__content h2 {
color: var(--dark-color);
margin-bottom: var(--spacing-lg);
}
.about__content h3 {
color: var(--dark-color);
margin: var(--spacing-xl) 0 var(--spacing-lg);
}
.about__content p {
color: var(--gray-color);
line-height: 1.7;
margin-bottom: var(--spacing-lg);
}
.about__sidebar {
position: sticky;
top: 100px;
}
/* Stats Card */
.stats-card {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
}
.stats-card h3 {
color: var(--dark-color);
margin-bottom: var(--spacing-lg);
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
.stats .stat {
text-align: center;
}
.stats .stat__number {
display: block;
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--primary-color);
margin-bottom: var(--spacing-xs);
}
.stats .stat__label {
font-size: var(--font-size-sm);
color: var(--gray-color);
}
/* Values */
.values__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
}
.value-card {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: transform var(--transition-normal);
}
.value-card:hover {
transform: translateY(-5px);
}
.value-card__icon {
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
color: var(--white);
font-size: var(--font-size-2xl);
}
.value-card__title {
color: var(--dark-color);
margin-bottom: var(--spacing-md);
}
.value-card__description {
color: var(--gray-color);
}
/* Principles */
.principles__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
}
.principle {
display: flex;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
background-color: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.principle__number {
width: 50px;
height: 50px;
background: var(--primary-color);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
font-weight: 700;
flex-shrink: 0;
}
.principle__title {
color: var(--dark-color);
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-lg);
}
.principle__description {
color: var(--gray-color);
margin: 0;
}
/* Service Areas */
.service-areas__content h2 {
color: var(--dark-color);
margin-bottom: var(--spacing-lg);
text-align: center;
}
.service-areas__content p {
color: var(--gray-color);
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-3xl);
line-height: 1.7;
}
.areas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
}
.area-category {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.area-category h3 {
color: var(--dark-color);
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
font-size: var(--font-size-lg);
}
.area-category h3 i {
color: var(--primary-color);
}
.area-list {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.area-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
background-color: var(--light-color);
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.area-item:hover {
background-color: rgba(37, 99, 235, 0.1);
transform: translateX(5px);
}
.area-item.primary {
background: var(--primary-color);
color: var(--white);
}
.area-item.primary:hover {
background: var(--primary-color);
transform: translateX(5px);
}
.area-item i {
color: var(--success-color);
font-size: var(--font-size-sm);
}
.area-item.primary i {
color: var(--white);
}
.area-item span {
font-weight: 500;
}
/* Service Info */
.service-info__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
}
.info-card {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: transform var(--transition-normal);
}
.info-card:hover {
transform: translateY(-5px);
}
.info-card__icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
color: var(--white);
font-size: var(--font-size-xl);
}
.info-card__title {
color: var(--dark-color);
margin-bottom: var(--spacing-md);
}
.info-card__description {
color: var(--gray-color);
}
/* Map Section */
.map-container {
background-color: var(--light-color);
border-radius: var(--radius-lg);
padding: var(--spacing-3xl);
text-align: center;
}
.map-placeholder {
color: var(--gray-color);
}
.map-placeholder i {
font-size: 4rem;
color: var(--primary-color);
margin-bottom: var(--spacing-lg);
}
.map-placeholder h3 {
color: var(--dark-color);
margin-bottom: var(--spacing-md);
}
.map-placeholder p {
color: var(--gray-color);
margin-bottom: var(--spacing-xl);
}
.map-info {
display: flex;
justify-content: center;
gap: var(--spacing-xl);
flex-wrap: wrap;
}
.map-info__item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
color: var(--dark-color);
font-weight: 500;
}
.map-info__item i {
color: var(--primary-color);
}
/* Contact CTA */
.contact-cta {
background: var(--primary-color);
color: var(--white);
text-align: center;
}
.contact-cta__content h2 {
color: var(--white);
margin-bottom: var(--spacing-md);
}
.contact-cta__content p {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.contact-cta__buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
}
.contact-cta .btn--outline {
color: var(--white);
border-color: var(--white);
}
.contact-cta .btn--outline:hover {
background-color: var(--white);
color: var(--primary-color);
}
/* Contact Info */
.contact-info__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
}
.contact-card {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: transform var(--transition-normal);
}
.contact-card:hover {
transform: translateY(-5px);
}
.contact-card__icon {
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
color: var(--white);
font-size: var(--font-size-2xl);
}
.contact-card__title {
color: var(--dark-color);
margin-bottom: var(--spacing-md);
}
.contact-card__description {
color: var(--gray-color);
margin-bottom: var(--spacing-lg);
}
.contact-card__link {
color: var(--primary-color);
font-size: var(--font-size-lg);
font-weight: 600;
text-decoration: none;
transition: color var(--transition-fast);
}
.contact-card__link:hover {
color: var(--primary-dark);
}
.contact-card__address {
color: var(--gray-color);
font-style: normal;
line-height: 1.6;
}
.contact-card__hours {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.hours-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-sm);
background-color: var(--light-color);
border-radius: var(--radius-md);
}
.hours-day {
color: var(--dark-color);
font-weight: 500;
}
.hours-time {
color: var(--primary-color);
font-weight: 600;
}
/* Contact Methods */
.contact-methods__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
}
.method-card {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
text-align: center;
transition: transform var(--transition-normal);
}
.method-card:hover {
transform: translateY(-5px);
}
.method-card__icon {
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
color: var(--white);
font-size: var(--font-size-2xl);
}
.method-card__title {
color: var(--dark-color);
margin-bottom: var(--spacing-md);
}
.method-card__description {
color: var(--gray-color);
margin-bottom: var(--spacing-lg);
line-height: 1.6;
}
/* Emergency Contact */
.emergency-contact {
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: var(--white);
text-align: center;
}
.emergency-contact__icon {
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-lg);
color: var(--white);
font-size: 3rem;
}
.emergency-contact__title {
color: var(--white);
margin-bottom: var(--spacing-md);
}
.emergency-contact__description {
color: rgba(255, 255, 255, 0.9);
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Service Request */
.service-request__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-3xl);
align-items: start;
}
.request-info h3,
.request-cta h3 {
color: var(--dark-color);
margin-bottom: var(--spacing-lg);
}
.request-list {
list-style: none;
padding: 0;
}
.request-list li {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
color: var(--gray-color);
}
.request-list i {
color: var(--success-color);
font-size: var(--font-size-sm);
}
.request-cta {
background-color: var(--white);
padding: var(--spacing-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.request-cta p {
color: var(--gray-color);
margin-bottom: var(--spacing-lg);
line-height: 1.6;
}
.request-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
/* FAQ */
.faq__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-3xl);
}
.faq-category {
background-color: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.faq-category__title {
background: var(--primary-color);
color: var(--white);
padding: var(--spacing-lg) var(--spacing-xl);
margin: 0;
font-size: var(--font-size-xl);
}
.faq-item {
border-bottom: 1px solid #e2e8f0;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-item__question {
padding: var(--spacing-lg) var(--spacing-xl);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color var(--transition-fast);
}
.faq-item__question:hover {
background-color: var(--light-color);
}
.faq-item__question h3 {
color: var(--dark-color);
margin: 0;
font-size: var(--font-size-base);
font-weight: 600;
}
.faq-item__question i {
color: var(--primary-color);
transition: transform var(--transition-fast);
}
.faq-item.active .faq-item__question i {
transform: rotate(180deg);
}
.faq-item__answer {
padding: 0 var(--spacing-xl) var(--spacing-lg);
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-normal), padding var(--transition-normal);
}
.faq-item.active .faq-item__answer {
max-height: 200px;
padding: 0 var(--spacing-xl) var(--spacing-lg);
}
.faq-item__answer p {
color: var(--gray-color);
margin: 0;
line-height: 1.6;
}
/* FAQ CTA */
.faq-cta {
text-align: center;
}
.faq-cta__content h2 {
color: var(--dark-color);
margin-bottom: var(--spacing-md);
}
.faq-cta__content p {
color: var(--gray-color);
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-xl);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.faq-cta__buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
}
/* Phone Float Button */
.phone-float {
position: fixed;
bottom: 20px;
left: 20px;
min-width: 70px;
height: 70px;
background-color: var(--white);
color: var(--dark-color);
border-radius: 35px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 16px;
font-size: var(--font-size-2xl);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
z-index: 1000;
transition: all var(--transition-normal);
animation: phonePulse 2s infinite;
max-width: calc(100vw - 2rem);
border: 2px solid rgba(0, 0, 0, 0.1);
text-decoration: none;
}
.phone-float:hover {
background-color: var(--primary-color);
color: var(--white);
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(37, 99, 235, 0.3), 0 0 0 1px rgba(37, 99, 235, 0.1);
}
.phone-float i {
font-weight: 900;
}
.phone-float__number {
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap;
color: inherit;
}
@keyframes phonePulse {
0% {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(37, 99, 235, 0.4);
}
70% {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 15px rgba(37, 99, 235, 0);
}
100% {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(37, 99, 235, 0);
}
}
.cta-btn--primary {
margin: 10px;
background: var(--primary-color);
}
/* Responsive Design */
@media (min-width: 1400px) {
.container {
padding: 0 var(--spacing-3xl);
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.container {
padding: 0 var(--spacing-2xl);
}
}
@media (max-width: 1199px) and (min-width: 769px) {
.container {
padding: 0 var(--spacing-lg);
}
.header {
height: 70px;
}
.nav {
padding: var(--spacing-sm) 0;
}
body {
padding-top: 0;
}
.nav__menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
flex-direction: column;
padding: 80px 0 40px;
transition: all 0.3s ease;
z-index: 100000;
overflow-y: auto;
}
.nav__menu.active {
left: 0;
}
.nav__list {
flex-direction: column;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-2xl);
}
.nav__toggle {
display: block;
}
.nav__cta {
display: none;
}
.nav__link {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 500;
color: #1f2937;
text-align: left;
display: block;
padding: 20px 24px;
width: 100%;
border-radius: 12px;
background: transparent;
border: none;
transition: all 0.2s ease;
margin-bottom: 8px;
position: relative;
}
.nav__link:hover {
background: rgba(37, 99, 235, 0.08);
color: #2563eb;
}
.nav__link:last-child {
margin-bottom: 0;
}
}
@media (max-width: 768px) {
.header {
height: 60px;
}
.nav {
padding: var(--spacing-sm) 0;
}
body {
padding-top: 0;
}
.nav__menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
flex-direction: column;
padding: 70px 0 40px;
transition: all 0.3s ease;
z-index: 100000;
overflow-y: auto;
}
.nav__menu.active {
left: 0;
}
.nav__list {
flex-direction: column;
gap: 0;
margin: 0;
width: 100%;
padding: 0 20px;
}
.nav__toggle {
display: block;
}
.nav__cta {
display: block;
padding: 20px;
margin-top: 20px;
}
.phone-call-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: #2563eb;
color: white;
padding: 16px 24px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
font-size: 16px;
transition: all 0.2s ease;
width: 100%;
}
.phone-call-btn:hover {
background: #1d4ed8;
transform: translateY(-1px);
}
.phone-call-btn i {
font-size: 18px;
}
.nav__link {
font-family: 'Inter', sans-serif;
font-size: 18px;
font-weight: 500;
color: #1f2937;
text-align: left;
display: block;
padding: 20px 24px;
width: 100%;
border-radius: 12px;
background: transparent;
border: none;
transition: all 0.2s ease;
margin-bottom: 8px;
position: relative;
}
.nav__link:hover {
background: rgba(37, 99, 235, 0.08);
color: #2563eb;
}
.nav__link:last-child {
margin-bottom: 0;
}
.hero-image-slider {
height: 100vh;
min-height: 500px;
}
.slide-title {
font-size: var(--font-size-3xl);
}
.slide-subtitle {
font-size: var(--font-size-lg);
}
.slider-controls {
padding: 0 var(--spacing-md);
}
.slider-btn {
width: 40px;
height: 40px;
}
.slider-dots {
bottom: var(--spacing-lg);
}
.slide-title {
font-size: var(--font-size-2xl);
}
.slide-subtitle {
font-size: var(--font-size-md);
}
.slide-btn {
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-size-md);
}
.slider-controls {
padding: 0 var(--spacing-sm);
}
.slider-btn {
width: 35px;
height: 35px;
}
.slider-btn i {
font-size: var(--font-size-md);
}
.slider-dots {
bottom: var(--spacing-md);
}
.dot {
width: 10px;
height: 10px;
}
.hero-slide__title {
font-size: var(--font-size-3xl);
}
.hero-slide__buttons {
flex-direction: column;
align-items: center;
}
.hero-slide__phone-number {
font-size: var(--font-size-2xl);
}
.hero-slide__image-container {
width: 200px;
height: 200px;
}
.hero-slide__overlay {
font-size: 3rem;
}
.hero-slider__controls {
padding: 0 var(--spacing-md);
}
.hero-slider__prev,
.hero-slider__next {
width: 50px;
height: 50px;
font-size: var(--font-size-lg);
}
.cta__buttons {
flex-direction: column;
align-items: center;
}
.services__grid {
grid-template-columns: 1fr;
max-width: 100%;
overflow-x: hidden;
}
.features__grid {
grid-template-columns: 1fr;
}
.footer__content {
grid-template-columns: 1fr;
text-align: center;
}
.phone-float {
min-width: 60px;
height: 60px;
font-size: var(--font-size-xl);
left: 15px;
bottom: 15px;
max-width: calc(100vw - 30px);
padding: 0 12px;
gap: 6px;
}
.phone-float__number {
font-size: 0.8rem;
}
.page-header__cta {
flex-direction: column;
align-items: center;
}
.page-header__content {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
text-align: center;
}
.page-header__text {
text-align: center;
}
.page-header__img {
height: 250px;
}
.service-overview__features {
grid-template-columns: 1fr;
}
.service-feature {
flex-direction: column;
text-align: center;
}
.appliance-service__header {
flex-direction: column;
text-align: center;
gap: var(--spacing-sm);
}
.service-details__grid {
grid-template-columns: 1fr;
max-width: 100%;
overflow-x: hidden;
}
.advantages-grid {
grid-template-columns: 1fr;
max-width: 100%;
overflow-x: hidden;
}
.advantage-item {
flex-direction: column;
text-align: center;
}
.appliance-service {
max-width: 100%;
overflow-x: hidden;
}
.appliance-service__content {
padding: var(--spacing-lg);
}
.gallery__grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
max-width: 100%;
overflow-x: hidden;
}
/* Stats Section Responsive */
.stats__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--spacing-lg) !important;
max-width: 100% !important;
padding: 0 var(--spacing-md) !important;
}
.stat-card {
padding: var(--spacing-lg) !important;
}
.stat-card__number {
font-size: var(--font-size-3xl) !important;
}
.stat-card__label {
font-size: var(--font-size-lg) !important;
}
.stat-card__description {
font-size: var(--font-size-sm) !important;
}
.gallery__img {
height: 150px;
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--spacing-sm);
max-width: 100vw;
overflow-x: hidden;
}
.service-details__grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.appliance-service__content {
padding: var(--spacing-md);
}
/* Stats Section Mobile */
.stats__grid {
grid-template-columns: 1fr !important;
gap: var(--spacing-md) !important;
max-width: 100% !important;
padding: 0 var(--spacing-sm) !important;
}
.stat-card {
padding: var(--spacing-lg) !important;
margin: 0 !important;
}
.stat-card__number {
font-size: var(--font-size-3xl) !important;
}
.stat-card__label {
font-size: var(--font-size-base) !important;
}
.stat-card__description {
font-size: var(--font-size-xs) !important;
}
.appliance-service__header {
padding: var(--spacing-md);
}
.advantages-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.page-header__content {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.page-header__img {
height: 200px;
}
.service-card--detailed .service-card__image {
height: 150px;
}
.service-card--detailed .service-card__overlay {
font-size: 2rem;
}
.section {
padding: var(--spacing-xl) 0;
}
.hero__title {
font-size: var(--font-size-2xl);
}
.hero__image-placeholder {
width: 200px;
height: 200px;
font-size: 3rem;
}
}
/* Service Image Section */
.service-image {
background: var(--light-color);
}
.service-image__content {
text-align: center;
}
.service-image__img {
width: 100%;
max-width: 600px;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
object-fit: cover;
}
@media (max-width: 768px) {
.service-image__img {
max-width: 100%;
border-radius: var(--radius-md);
}
}
/* ULTIMATE STATS CENTER ALIGNMENT */
.stats .container,
section.stats .container,
.stats__grid {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0 auto !important;
width: 100% !important;
}
.stats__grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--spacing-xl) !important;
max-width: 1000px !important;
margin: 0 auto !important;
padding: 0 var(--spacing-xl) !important;
}
/* MOBILE FORCE OVERRIDE */
@media (max-width: 768px) {
.stats__grid,
.stats .stats__grid,
section.stats .stats__grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--spacing-md) !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 var(--spacing-sm) !important;
width: 100% !important;
}
.stat-card {
padding: var(--spacing-md) !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 480px) {
.stats__grid,
.stats .stats__grid,
section.stats .stats__grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--spacing-sm) !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 var(--spacing-xs) !important;
width: 100% !important;
}
.stat-card {
padding: var(--spacing-sm) !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* ULTIMATE MOBILE STATS OVERRIDE */
@media screen and (max-width: 768px) {
html body .stats .container .stats__grid,
html body section.stats .container .stats__grid,
html body .stats__grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(4, auto) !important;
gap: var(--spacing-md) !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 var(--spacing-sm) !important;
width: 100% !important;
overflow-x: hidden !important;
}
html body .stats .container .stats__grid .stat-card,
html body section.stats .container .stats__grid .stat-card,
html body .stats__grid .stat-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: var(--spacing-md) !important;
box-sizing: border-box !important;
}
}
/* ========================================
DROPDOWN MENU STYLES
======================================== */
/* Dropdown Container */
.nav__item--dropdown {
position: relative;
}
.nav__dropdown-icon {
margin-left: var(--spacing-xs);
font-size: 0.75rem;
transition: transform var(--transition-normal);
}
.nav__item--dropdown:hover .nav__dropdown-icon {
transform: rotate(180deg);
}
/* Dropdown Menu */
.nav__dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--transition-normal);
z-index: 99999;
padding: var(--spacing-sm) 0;
margin-top: var(--spacing-sm);
}
.nav__item--dropdown:hover .nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Dropdown Items */
.nav__dropdown-item {
list-style: none;
}
.nav__dropdown-link {
display: flex;
align-items: center;
padding: var(--spacing-md) var(--spacing-lg);
color: var(--dark-color);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: 500;
transition: all var(--transition-fast);
border-radius: 0;
}
.nav__dropdown-link:hover {
background-color: rgba(37, 99, 235, 0.1);
color: var(--primary-color);
transform: translateX(4px);
}
.nav__dropdown-link i {
margin-right: var(--spacing-md);
font-size: var(--font-size-base);
width: 16px;
text-align: center;
display: inline-block;
color: inherit;
}
/* Mobile Dropdown */
@media (max-width: 1199px) {
.nav__dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: transparent;
padding: 0;
margin: 0;
margin-left: var(--spacing-lg);
margin-top: var(--spacing-sm);
display: none;
}
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown.active .nav__dropdown {
display: block;
}
.nav__dropdown-link {
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-size-sm);
color: var(--gray-color);
}
.nav__dropdown-link:hover {
background-color: transparent;
color: var(--primary-color);
transform: none;
}
.nav__dropdown-link i {
margin-right: var(--spacing-sm);
font-size: var(--font-size-sm);
width: 14px;
text-align: center;
display: inline-block;
color: inherit;
}
.nav__dropdown-icon {
display: inline-block;
margin-left: 8px;
transition: transform 0.3s ease;
}
.nav__logo {
height: 35px;
max-width: 120px;
}
.nav__brand-text {
font-family: 'Poppins', sans-serif;
font-size: var(--font-size-base);
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.3px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-smooth: always;
}
.nav__brand-subtitle {
font-size: 10px;
letter-spacing: 0.2px;
}
.footer__logo-img {
height: 35px;
max-width: 150px;
}
.footer__brand-text {
font-size: 1rem;
letter-spacing: 0.3px;
}
.footer__brand-subtitle {
font-size: 10px;
letter-spacing: 0.2px;
}
/* Mobile dropdown active state */
.nav__item--dropdown.active .nav__dropdown {
display: block;
position: static;
background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
margin-top: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.nav__item--dropdown.active .nav__dropdown-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.nav__item--dropdown.active .nav__dropdown-item:last-child {
border-bottom: none;
}
}
/* LEGAL PAGES STYLES */
.legal-content {
padding: 80px 0;
background: var(--light-bg);
}
.legal-content__wrapper {
max-width: 800px;
margin: 0 auto;
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--spacing-3xl);
box-shadow: var(--shadow-md);
}
.legal-section {
margin-bottom: var(--spacing-3xl);
}
.legal-section:last-child {
margin-bottom: 0;
}
.legal-section h2 {
color: var(--primary-color);
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--primary-color);
}
.legal-section p {
color: var(--text-color);
line-height: 1.7;
margin-bottom: var(--spacing-md);
}
.legal-section ul {
margin: var(--spacing-md) 0;
padding-left: var(--spacing-xl);
}
.legal-section li {
color: var(--text-color);
line-height: 1.6;
margin-bottom: var(--spacing-sm);
}
.legal-section strong {
color: var(--dark-color);
font-weight: 600;
}
.contact-info {
background: var(--light-bg);
padding: var(--spacing-lg);
border-radius: var(--radius-md);
margin-top: var(--spacing-md);
}
.contact-info p {
margin-bottom: var(--spacing-sm);
color: var(--text-color);
}
.contact-info p:last-child {
margin-bottom: 0;
}
/* Legal Pages Responsive */
@media (max-width: 768px) {
.legal-content {
padding: 60px 0;
}
.legal-content__wrapper {
padding: var(--spacing-xl);
margin: 0 var(--spacing-md);
}
.legal-section h2 {
font-size: var(--font-size-lg);
}
.legal-section ul {
padding-left: var(--spacing-lg);
}
}
/* COMPANY INFO STYLES */
.company-info {
background: var(--light-bg);
padding: 80px 0;
}
.company-info__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.company-card {
background: var(--white);
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.company-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.company-card__icon {
width: 60px;
height: 60px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: var(--white);
font-size: 1.5rem;
}
.company-card__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--dark-color);
margin-bottom: 1rem;
}
.company-card__content {
color: var(--text-color);
line-height: 1.6;
font-size: 0.95rem;
}
.company-phone-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: color 0.3s ease;
}
.company-phone-link:hover {
color: var(--primary-dark);
}
@media (max-width: 768px) {
.company-info {
padding: 60px 0;
}
.company-info__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.company-card {
padding: 1.5rem;
}
.company-card__icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.company-card__title {
font-size: 1rem;
}
.company-card__content {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.company-info {
padding: 40px 0;
}
.company-card {
padding: 1.25rem;
}
.company-card__icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
/* COOKIE CONSENT STYLES */
.cookie-consent {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
z-index: 100000;
transform: translateY(100%);
transition: transform 0.3s ease;
padding: var(--spacing-lg);
}
.cookie-consent.show {
transform: translateY(0);
}
.cookie-consent__content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: var(--spacing-xl);
}
.cookie-consent__text {
flex: 1;
}
.cookie-consent__text h4 {
color: var(--primary-color);
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-xs);
}
.cookie-consent__text p {
color: var(--text-color);
font-size: var(--font-size-sm);
line-height: 1.5;
margin: 0;
}
.cookie-consent__actions {
display: flex;
gap: var(--spacing-sm);
flex-shrink: 0;
}
.cookie-btn {
padding: var(--spacing-sm) var(--spacing-lg);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.cookie-btn--accept {
background: var(--primary-color);
color: var(--white);
}
.cookie-btn--accept:hover {
background: #1d4ed8;
transform: translateY(-1px);
}
.cookie-btn--decline {
background: transparent;
color: var(--text-color);
border: 1px solid var(--border-color);
}
.cookie-btn--decline:hover {
background: var(--light-bg);
border-color: var(--primary-color);
}
.cookie-btn--settings {
background: var(--light-bg);
color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.cookie-btn--settings:hover {
background: var(--primary-color);
color: var(--white);
}
.cookie-btn--primary {
background: var(--primary-color);
color: var(--white);
padding: var(--spacing-md) var(--spacing-xl);
}
.cookie-btn--primary:hover {
background: #1d4ed8;
}
/* COOKIE MODAL */
.cookie-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
z-index: 100001;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
padding: var(--spacing-lg);
}
.cookie-modal.show {
opacity: 1;
visibility: visible;
}
.cookie-modal__content {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
max-width: 500px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
transform: scale(0.9);
transition: transform 0.3s ease;
}
.cookie-modal.show .cookie-modal__content {
transform: scale(1);
}
.cookie-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-xl);
border-bottom: 1px solid var(--border-color);
}
.cookie-modal__header h3 {
color: var(--primary-color);
font-size: var(--font-size-xl);
font-weight: 600;
margin: 0;
}
.cookie-modal__close {
background: none;
border: none;
font-size: 24px;
color: var(--text-color);
cursor: pointer;
padding: var(--spacing-xs);
line-height: 1;
transition: color 0.2s ease;
}
.cookie-modal__close:hover {
color: var(--primary-color);
}
.cookie-modal__body {
padding: var(--spacing-xl);
}
.cookie-category {
margin-bottom: var(--spacing-xl);
}
.cookie-category:last-child {
margin-bottom: 0;
}
.cookie-category__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-sm);
}
.cookie-category__header h4 {
color: var(--dark-color);
font-size: var(--font-size-md);
font-weight: 600;
margin: 0;
}
.cookie-category p {
color: var(--text-color);
font-size: var(--font-size-sm);
line-height: 1.5;
margin: 0;
}
/* COOKIE TOGGLE */
.cookie-toggle {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.cookie-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.cookie-toggle__slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.3s;
border-radius: 24px;
}
.cookie-toggle__slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.3s;
border-radius: 50%;
}
.cookie-toggle input:checked + .cookie-toggle__slider {
background-color: var(--primary-color);
}
.cookie-toggle input:checked + .cookie-toggle__slider:before {
transform: translateX(26px);
}
.cookie-toggle input:disabled + .cookie-toggle__slider {
background-color: var(--primary-color);
opacity: 0.6;
cursor: not-allowed;
}
.cookie-modal__footer {
display: flex;
gap: var(--spacing-sm);
padding: var(--spacing-xl);
border-top: 1px solid var(--border-color);
justify-content: flex-end;
}
/* COOKIE CONSENT RESPONSIVE */
@media (max-width: 768px) {
.cookie-consent {
padding: var(--spacing-md);
}
.cookie-consent__content {
flex-direction: column;
gap: var(--spacing-md);
text-align: center;
}
.cookie-consent__actions {
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
.cookie-btn {
flex: 1;
min-width: 100px;
}
.cookie-modal {
padding: var(--spacing-md);
}
.cookie-modal__content {
max-height: 90vh;
}
.cookie-modal__header,
.cookie-modal__body,
.cookie-modal__footer {
padding: var(--spacing-lg);
}
.cookie-modal__footer {
flex-direction: column;
}
.cookie-category__header {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
}
}
/* ====================================
Regions Page Styles
==================================== */
.regions-section {
padding: var(--spacing-4xl) 0;
background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
min-height: 80vh;
}
.regions-container {
background: white;
border-radius: 16px;
padding: var(--spacing-3xl);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
max-width: 1400px;
margin: 0 auto;
}
.regions-header {
text-align: center;
margin-bottom: var(--spacing-3xl);
}
.regions-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-dark);
margin-bottom: var(--spacing-md);
}
.regions-subtitle {
font-size: 1.125rem;
color: var(--color-text-light);
font-weight: 400;
}
.regions-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: var(--spacing-sm);
margin-top: var(--spacing-2xl);
}
.region-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-md) var(--spacing-lg);
background: white;
border: 1px solid var(--color-border-light);
border-radius: 8px;
text-decoration: none;
color: var(--color-dark);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.region-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.05), transparent);
transition: left 0.5s ease;
}
.region-item:hover::before {
left: 100%;
}
.region-item:hover {
transform: translateY(-3px) scale(1.02);
border-color: var(--color-primary);
background: rgba(37, 99, 235, 0.02);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}
.region-icon {
color: var(--color-primary);
font-size: 0.875rem;
transition: transform 0.3s ease;
}
.region-item:hover .region-icon {
transform: rotate(360deg) scale(1.2);
}
.region-name {
font-size: 0.95rem;
font-weight: 500;
white-space: nowrap;
}
.regions-cta {
text-align: center;
margin-top: var(--spacing-2xl);
}
.regions-cta .btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
}
/* Tablet Styles */
@media (max-width: 1024px) {
.regions-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
}
.regions-container {
padding: var(--spacing-2xl);
}
.regions-title {
font-size: 2rem;
}
}
/* Mobile Styles */
@media (max-width: 768px) {
.regions-section {
padding: var(--spacing-2xl) 0;
}
.regions-container {
padding: var(--spacing-xl);
border-radius: 12px;
}
.regions-header {
margin-bottom: var(--spacing-xl);
}
.regions-title {
font-size: 1.75rem;
}
.regions-subtitle {
font-size: 1rem;
}
.regions-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm);
}
.region-item {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.875rem;
}
.region-name {
font-size: 0.875rem;
}
.region-icon {
font-size: 0.75rem;
}
}
@media (max-width: 480px) {
.regions-grid {
grid-template-columns: 1fr;
}
.region-item {
justify-content: center;
}
}