/* ===================================
Global Styles & Reset
=================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #0D4A5C;
--primary-dark: #083540;
--secondary-color: #11566B;
--accent-color: #EA7317;
--accent-light: #F58220;
--text-dark: #1a1a1a;
--text-medium: #4a4a4a;
--text-light: #737373;
--bg-light: #f8f9fa;
--bg-white: #ffffff;
--border-color: #e0e0e0;
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--text-dark);
background: var(--bg-white);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.navbar .container {
padding: 0 20px;
}
/* ===================================
Typography
=================================== */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
color: var(--text-dark);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
p {
margin-bottom: 1rem;
color: var(--text-medium);
}
a {
text-decoration: none;
color: var(--primary-color);
transition: color 0.3s ease;
}
a:hover {
color: var(--secondary-color);
}
/* ===================================
Navigation
=================================== */
.navbar {
background: var(--bg-white);
box-shadow: var(--shadow-sm);
position: relative;
z-index: 1000;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
}
.logo a {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
text-decoration: none;
display: flex;
align-items: center;
}
.logo img {
height: 90px;
width: auto;
transition: transform 0.3s ease;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.logo a:hover img {
transform: scale(1.08);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
.nav-menu {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-menu a {
color: var(--text-dark);
font-weight: 500;
padding: 0.5rem 0;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.nav-menu a:hover,
.nav-menu a.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.mobile-toggle {
display: none;
flex-direction: column;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.mobile-toggle span {
width: 25px;
height: 3px;
background: var(--text-dark);
margin: 3px 0;
transition: 0.3s;
}
/* Language Selector - Custom Dropdown */
.language-selector {
position: relative;
margin-left: 2rem;
display: flex;
align-items: center;
min-height: 40px;
z-index: 10001;
}
.language-dropdown-custom {
position: relative;
}
.language-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: white;
border: 2px solid var(--border-color);
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text-dark);
cursor: pointer;
transition: all 0.3s ease;
min-width: 130px;
justify-content: space-between;
}
.language-btn .language-flag {
width: 24px;
height: 18px;
flex-shrink: 0;
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
.language-btn:hover {
border-color: var(--accent-color);
box-shadow: 0 2px 8px rgba(234, 115, 23, 0.2);
transform: translateY(-1px);
}
.language-flag {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 24px;
height: 18px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 2px;
flex-shrink: 0;
}
.flag-icon {
display: inline-block;
width: 24px;
height: 18px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 2px;
flex-shrink: 0;
}
.flag-icon-gb {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-icon-se {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-icon-dk {
background-image: url('data:image/svg+xml;utf8,');
}
.flag-icon-no {
background-image: url('data:image/svg+xml;utf8,');
}
.language-text {
flex: 1;
text-align: left;
}
.language-arrow {
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.language-dropdown-custom.active .language-arrow {
transform: rotate(180deg);
}
.language-dropdown-menu {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: white;
border: 2px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 10002;
overflow: hidden;
}
.language-dropdown-custom.active .language-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.25rem;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid var(--bg-light);
}
.language-option .lang-flag {
width: 24px;
height: 18px;
text-align: center;
display: inline-block;
flex-shrink: 0;
}
.language-option:last-child {
border-bottom: none;
}
.language-option:hover {
background: var(--bg-light);
color: var(--accent-color);
}
.language-option.active {
background: rgba(234, 115, 23, 0.1);
color: var(--accent-color);
font-weight: 600;
}
.lang-flag {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 24px;
height: 18px;
text-align: center;
}
.lang-name {
font-size: 0.95rem;
font-weight: 500;
}
/* Hide Google Translate branding and style it to match our design */
.custom-google-translate {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
min-height: 40px;
pointer-events: auto !important;
z-index: 10001 !important;
}
/* Ensure Google Translate gadget is visible */
#google_translate_element {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
z-index: 10001 !important;
}
.goog-te-gadget {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
z-index: 10001 !important;
position: relative !important;
}
/* Hide Google branding and banner completely */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-simple .goog-te-menu-value span,
.goog-te-gadget-simple .goog-te-menu-value:before,
body > .skiptranslate {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
/* Hide the Google Translate banner that appears at top */
body {
top: 0 !important;
position: relative !important;
}
body > .goog-te-banner-frame {
display: none !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
top: -9999px !important;
}
/* Ensure body is visible even if Google Translate adds styles */
body.skiptranslate {
top: 0 !important;
position: relative !important;
}
/* Style the Google Translate select to match our design */
.goog-te-gadget-simple {
background: white !important;
border: 2px solid var(--border-color) !important;
border-radius: 8px !important;
padding: 0.5rem 0.75rem !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
color: var(--text-dark) !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
min-width: auto !important;
width: auto !important;
line-height: 1 !important;
visibility: visible !important;
opacity: 1 !important;
min-height: 40px !important;
pointer-events: auto !important;
z-index: 10001 !important;
position: relative !important;
user-select: none !important;
-webkit-user-select: none !important;
}
.goog-te-gadget-simple * {
pointer-events: auto !important;
cursor: pointer !important;
}
/* Add flag emojis to language names */
.goog-te-menu-value:not(:empty) {
display: inline-flex !important;
align-items: center !important;
gap: 0.5rem !important;
}
.goog-te-menu-value:not(:empty):before {
content: '🌐' !important;
font-size: 1.2rem !important;
display: inline-block !important;
}
.goog-te-gadget-simple:hover {
border-color: var(--accent-color) !important;
box-shadow: 0 2px 8px rgba(234, 115, 23, 0.2) !important;
transform: translateY(-1px) !important;
}
.goog-te-gadget-simple .goog-te-menu-value {
color: var(--text-dark) !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
pointer-events: auto !important;
cursor: pointer !important;
position: relative !important;
z-index: 10002 !important;
}
.goog-te-gadget-simple .goog-te-menu-value span {
display: none !important;
}
/* Make sure the menu value is clickable */
.goog-te-menu-value {
pointer-events: auto !important;
cursor: pointer !important;
user-select: none !important;
-webkit-user-select: none !important;
}
/* Ensure the entire gadget is clickable */
.goog-te-gadget-simple {
position: relative !important;
}
/* Make sure iframe doesn't block clicks */
.goog-te-menu-frame iframe {
pointer-events: none !important;
}
.goog-te-menu-frame {
pointer-events: auto !important;
}
/* Style the dropdown arrow */
.goog-te-gadget-simple .goog-te-menu-value:after {
content: '' !important;
display: inline-block !important;
width: 0 !important;
height: 0 !important;
border-left: 5px solid transparent !important;
border-right: 5px solid transparent !important;
border-top: 5px solid var(--text-medium) !important;
margin-left: 0.5rem !important;
transition: transform 0.3s ease !important;
}
.goog-te-gadget-simple:hover .goog-te-menu-value:after {
border-top-color: var(--accent-color) !important;
}
/* Style the language selection dropdown */
.goog-te-menu-frame {
border-radius: 12px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
border: none !important;
margin-top: 0.5rem !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
z-index: 10002 !important;
pointer-events: auto !important;
position: absolute !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
top: 100% !important;
left: 0 !important;
}
.goog-te-menu2 {
background: white !important;
border-radius: 12px !important;
padding: 0.5rem 0 !important;
border: none !important;
pointer-events: auto !important;
}
.goog-te-menu2-item {
padding: 0.875rem 1.25rem !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
color: var(--text-dark) !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
border: none !important;
background: white !important;
pointer-events: auto !important;
position: relative !important;
z-index: 10003 !important;
}
.goog-te-menu2-item:hover {
background: var(--bg-light) !important;
color: var(--accent-color) !important;
}
.goog-te-menu2-item-selected {
background: rgba(234, 115, 23, 0.1) !important;
color: var(--accent-color) !important;
font-weight: 600 !important;
}
/* Ensure dropdown is visible when opened */
.goog-te-menu-frame:not([style*="display: none"]) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Make sure the menu container doesn't hide the dropdown */
.goog-te-gadget {
overflow: visible !important;
}
.goog-te-gadget-simple {
overflow: visible !important;
}
#google_translate_element {
overflow: visible !important;
}
.language-selector {
overflow: visible !important;
}
/* Hide Google Translate footer */
.goog-te-ftab {
display: none !important;
}
/* Hide "Powered by Google" text */
.goog-te-gadget .goog-te-gadget-simple .goog-te-menu-value {
color: var(--text-dark) !important;
}
/* Hide Google logo and branding */
.goog-te-gadget-icon {
display: none !important;
}
/* Mobile responsive */
@media (max-width: 768px) {
.language-selector {
margin-left: 1rem;
}
.goog-te-gadget-simple {
padding: 0.4rem 0.6rem !important;
font-size: 0.85rem !important;
}
}
.language-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: white;
border: 2px solid var(--border-color);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
font-weight: 600;
}
.language-toggle:hover {
border-color: var(--accent-color);
box-shadow: 0 2px 8px rgba(234, 115, 23, 0.2);
transform: translateY(-1px);
}
.current-flag {
font-size: 1.4rem;
line-height: 1;
}
.language-toggle svg {
color: var(--text-medium);
transition: transform 0.3s ease;
}
.language-selector.active .language-toggle svg {
transform: rotate(180deg);
}
.language-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
min-width: 160px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
overflow: hidden;
}
.language-selector.active .language-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.lang-option {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.875rem 1.25rem;
background: white;
border: none;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.95rem;
font-weight: 500;
color: var(--text-dark);
}
.lang-option:hover {
background: var(--bg-light);
color: var(--accent-color);
}
.lang-option .flag {
font-size: 1.3rem;
}
.lang-option.active {
background: rgba(234, 115, 23, 0.1);
color: var(--accent-color);
font-weight: 600;
}
/* ===================================
Buttons
=================================== */
.btn {
display: inline-block;
padding: 0.875rem 2rem;
border-radius: 6px;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
border: none;
font-size: 1rem;
}
.btn-primary {
background: var(--accent-color);
color: white;
}
.btn-primary:hover {
background: var(--accent-light);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(234, 115, 23, 0.4);
}
.btn-secondary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-secondary:hover {
background: var(--primary-color);
color: white;
}
.hero-buttons .btn-secondary {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.hero-buttons .btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}
.btn-primary-light {
background: white;
color: var(--primary-color);
}
.btn-primary-light:hover {
background: var(--bg-light);
color: var(--primary-color);
transform: translateY(-2px);
}
/* ===================================
Hero Section
=================================== */
.hero {
position: relative;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: 8rem 0;
overflow: hidden;
}
.hero-premium {
padding: 10rem 0;
min-height: 95vh;
display: flex;
align-items: center;
position: relative;
}
.hero-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-overlay-premium {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(13, 74, 92, 0.95) 0%, rgba(17, 86, 107, 0.92) 100%);
z-index: 1;
}
.hero-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
z-index: 1;
opacity: 0.6;
}
.hero-premium .container {
position: relative;
z-index: 2;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 950px;
margin: 0 auto;
text-align: center;
padding: 2rem 0;
}
.hero-content-premium {
position: relative;
z-index: 2;
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 2rem 0;
animation: fadeInUp 1s ease-out;
}
.hero-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
background: var(--accent-color);
color: white;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1.5px;
border-radius: 25px;
margin-bottom: 1.5rem;
border: none;
text-transform: uppercase;
box-shadow: 0 4px 15px rgba(234, 115, 23, 0.3);
transition: all 0.3s ease;
}
.hero-badge:hover {
background: var(--accent-light);
box-shadow: 0 6px 20px rgba(234, 115, 23, 0.4);
transform: translateY(-2px);
}
.hero-features {
display: flex;
gap: 1.25rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2.5rem;
padding-top: 2.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-feature-badge {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
color: white;
font-size: 0.85rem;
font-weight: 600;
}
.hero-feature-badge:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.hero-feature-badge svg {
width: 18px;
height: 18px;
stroke: var(--accent-light);
flex-shrink: 0;
}
.hero-title {
font-size: 4.5rem;
margin-bottom: 2rem;
color: white;
font-weight: 800;
line-height: 1.1;
white-space: normal;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
letter-spacing: -1px;
}
.hero-content-premium .hero-title {
font-size: 4.5rem;
margin-bottom: 1.5rem;
}
.hero-subtitle {
font-size: 1.35rem;
margin-bottom: 3rem;
color: rgba(255, 255, 255, 0.95);
line-height: 1.8;
max-width: 850px;
margin-left: auto;
margin-right: auto;
font-weight: 400;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}
.hero-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 4rem;
}
.hero-buttons .btn {
min-width: 200px;
padding: 1rem 2.5rem;
font-size: 1.1rem;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding-top: 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
max-width: 900px;
margin: 0 auto;
}
.hero-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 2rem 1.5rem;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.hero-stat:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.hero-stat .stat-icon {
font-size: 3rem;
line-height: 1;
margin-bottom: 0.5rem;
}
.hero-stat .stat-text {
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
}
.hero-stat strong {
font-size: 2rem;
font-weight: 700;
color: white;
line-height: 1;
}
.hero-stat span {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
/* ===================================
Page Header
=================================== */
.page-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: 4rem 0;
text-align: center;
}
.page-header h1 {
color: white;
margin-bottom: 0.5rem;
}
.page-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
}
.about-header {
position: relative;
background-image: url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&h=400&fit=crop');
background-size: cover;
background-position: center;
padding: 6rem 0;
}
.header-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(26, 84, 144, 0.9) 0%, rgba(44, 122, 197, 0.85) 100%);
}
.about-header .container {
position: relative;
z-index: 1;
}
/* Premium About Header */
.about-header-premium {
position: relative;
background-image: url('images/train_02.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 5rem 0 4rem;
overflow: hidden;
}
/* Services page header */
.services-header {
background-image: url('images/train014.jpg');
}
/* Contact page header */
.contact-header {
background-image: url('images/train08.jpg');
}
.header-overlay-premium {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(15, 58, 102, 0.75) 0%, rgba(26, 84, 144, 0.7) 50%, rgba(44, 122, 197, 0.65) 100%);
}
.header-pattern {
display: none;
}
.header-content-premium {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
margin: 0 auto;
}
.header-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 30px;
color: white;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: 1.5rem;
animation: fadeInDown 0.8s ease;
}
.header-content-premium h1 {
font-size: 4rem;
font-weight: 700;
color: white;
margin-bottom: 0.75rem;
line-height: 1.1;
animation: fadeInUp 0.8s ease 0.2s both;
}
.header-content-premium p {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 2rem;
line-height: 1.6;
animation: fadeInUp 0.8s ease 0.4s both;
}
.header-features {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease 0.6s both;
}
.feature-badge {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
color: white;
font-weight: 500;
transition: all 0.3s ease;
}
.feature-badge:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.feature-badge svg {
width: 24px;
height: 24px;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===================================
Sections
=================================== */
section {
padding: 5rem 0;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-header h2 {
margin-bottom: 1rem;
}
.section-header p {
font-size: 1.1rem;
color: var(--text-light);
}
.section-header-premium {
text-align: center;
margin-bottom: 4rem;
}
.lifecycle-animation-section .section-header-premium {
margin-bottom: 2rem;
}
.section-badge {
display: inline-block;
padding: 0.5rem 1.5rem;
background: rgba(234, 115, 23, 0.1);
color: var(--accent-color);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
border-radius: 30px;
margin-bottom: 1rem;
}
.section-badge-light {
display: inline-block;
padding: 0.5rem 1.5rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: white;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
border-radius: 30px;
margin-bottom: 1rem;
}
.section-header-premium h2 {
font-size: 3rem;
margin-bottom: 1.5rem;
color: var(--text-dark);
font-weight: 700;
letter-spacing: -0.5px;
}
.section-header-premium p {
font-size: 1.2rem;
color: var(--text-medium);
max-width: 700px;
margin: 0 auto;
}
.testimonials-premium .section-header-premium h2 {
color: white;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}
.testimonials-premium .section-header-premium p {
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* ===================================
Interactive Train Section
=================================== */
.train-interactive-section {
background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-white) 100%);
padding: 7rem 0;
position: relative;
overflow: hidden;
}
.train-interactive-wrapper {
max-width: 1200px;
margin: 4rem auto 0;
position: relative;
}
.train-illustration {
position: relative;
width: 100%;
height: 500px;
background: linear-gradient(180deg, #f5f7fa 0%, #e8ecef 100%);
border-radius: 24px;
overflow: visible;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12);
padding: 4rem 2rem;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.train-body {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0;
padding-bottom: 60px;
}
.train-front {
width: 220px;
height: 200px;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border-radius: 25px 0 0 25px;
position: relative;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
animation: trainSlide 4s ease-in-out infinite;
z-index: 2;
}
.train-front::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
width: 120px;
height: 80px;
background: rgba(0, 0, 0, 0.7);
border-radius: 8px;
border: 2px solid rgba(255, 255, 255, 0.1);
}
.train-front::after {
content: '';
position: absolute;
bottom: 20px;
left: 20px;
width: 40px;
height: 40px;
background: #e74c3c;
border-radius: 50%;
box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
}
.train-carriage {
width: 200px;
height: 180px;
background: white;
border: 5px solid #e74c3c;
border-left: none;
position: relative;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
animation: trainSlide 4s ease-in-out infinite;
animation-delay: 0.1s;
z-index: 1;
overflow: visible;
}
.train-carriage:nth-child(3) {
animation-delay: 0.2s;
}
.train-carriage::before {
content: '';
position: absolute;
top: 30px;
left: 20px;
right: 20px;
height: 60px;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
background-image:
linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.1) 20%, rgba(0,0,0,0.1) 30%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.1) 80%, transparent 100%);
}
.train-carriage::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
background: #e74c3c;
}
/* Service Markers on Train */
.service-marker {
position: absolute;
border: 3px solid var(--accent-color);
background: rgba(234, 115, 23, 0.15);
border-radius: 8px;
pointer-events: auto;
z-index: 5;
animation: markerPulse 3s ease-in-out infinite;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
text-decoration: none;
cursor: pointer;
touch-action: manipulation;
-webkit-touch-callout: none;
user-select: none;
}
.service-marker:hover {
background: rgba(234, 115, 23, 0.3);
border-color: var(--accent-light);
box-shadow: 0 0 20px rgba(234, 115, 23, 0.5);
transform: scale(1.1);
}
/* Gangways marker - between carriages */
.marker-gangways {
left: -15px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 80px;
border-radius: 15px;
}
.marker-gangways-2 {
left: -15px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 80px;
border-radius: 15px;
}
/* Graffiti marker - on windows */
.marker-graffiti {
left: 20px;
top: 30px;
width: 140px;
height: 60px;
}
/* Hoses marker - undercarriage */
.marker-hoses {
left: 20px;
bottom: 20px;
width: 140px;
height: 30px;
}
/* Rubber marker - on front side */
.marker-rubber {
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 100px;
}
/* Windows marker - front windshield */
.marker-windows {
top: 20px;
left: 20px;
width: 120px;
height: 80px;
border-radius: 8px;
}
/* Snow guard marker - front bottom */
.marker-snowguard {
bottom: 20px;
left: 20px;
width: 100px;
height: 40px;
border-radius: 8px;
}
/* Technical Rubber marker - undercarriage */
.marker-technical {
left: 50%;
transform: translateX(-50%);
bottom: 15px;
width: 120px;
height: 25px;
border-radius: 12px;
}
@keyframes markerPulse {
0%, 100% {
opacity: 0.7;
transform: scale(1);
box-shadow: 0 0 0 0 rgba(234, 115, 23, 0.4);
}
50% {
opacity: 1;
transform: scale(1.03);
box-shadow: 0 0 15px rgba(234, 115, 23, 0.3);
}
}
.train-tracks {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
height: 12px;
background: repeating-linear-gradient(
90deg,
#34495e 0px,
#34495e 40px,
transparent 40px,
transparent 80px
);
background-size: 80px 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.train-tracks::before {
content: '';
position: absolute;
top: -4px;
left: 0;
right: 0;
height: 4px;
background: #2c3e50;
border-radius: 2px;
}
.train-tracks::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 4px;
background: #2c3e50;
border-radius: 2px;
}
.service-label {
position: absolute;
z-index: 10;
cursor: pointer;
animation: labelPulse 2s ease-in-out infinite;
transition: all 0.3s ease;
display: block;
text-decoration: none;
color: inherit;
touch-action: manipulation;
-webkit-touch-callout: none;
user-select: none;
}
.service-label:nth-child(2) { animation-delay: 0s; }
.service-label:nth-child(3) { animation-delay: 0.3s; }
.service-label:nth-child(4) { animation-delay: 0.6s; }
.service-label:nth-child(5) { animation-delay: 0.9s; }
.service-label:nth-child(6) { animation-delay: 1.2s; }
.service-label:nth-child(7) { animation-delay: 1.5s; }
.label-line {
position: absolute;
width: 3px;
height: 60px;
background: var(--accent-color);
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0.8;
}
.label-line::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: var(--accent-color);
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 0 0 2px var(--accent-color);
}
.label-circle {
background: white;
color: var(--accent-color);
padding: 0.75rem 1.5rem;
border-radius: 30px;
font-size: 0.9rem;
font-weight: 700;
white-space: nowrap;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
border: 3px solid var(--accent-color);
transition: all 0.3s ease;
position: relative;
}
.service-label:hover .label-circle {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(234, 115, 23, 0.5);
background: var(--accent-color);
color: white;
}
.service-label:hover .label-line {
opacity: 1;
height: 70px;
}
@keyframes trainSlide {
0%, 100% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(3px) translateY(-2px);
}
50% {
transform: translateX(5px) translateY(0);
}
75% {
transform: translateX(3px) translateY(2px);
}
}
@keyframes labelPulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.9;
}
}
/* ===================================
Services Overview
=================================== */
.services-overview {
background: linear-gradient(180deg, var(--bg-white) 0%, var(--bg-light) 100%);
padding: 7rem 0;
position: relative;
overflow: hidden;
}
.services-overview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(234, 115, 23, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(13, 74, 92, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
@media (max-width: 1024px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.service-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.service-card-premium {
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
border: 2px solid rgba(234, 115, 23, 0.08);
position: relative;
}
.service-card-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--accent-color), var(--accent-light));
transform: scaleX(0);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.service-card-premium:hover::before {
transform: scaleX(1);
}
.service-card-premium:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 30px 80px rgba(234, 115, 23, 0.3);
border-color: rgba(234, 115, 23, 0.3);
}
.service-image-wrapper {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
}
.service-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.service-card-premium:hover .service-image-wrapper img {
transform: scale(1.1);
}
.service-icon-overlay {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(234, 115, 23, 0.5);
transition: all 0.4s ease;
z-index: 2;
}
.service-card-premium:hover .service-icon-overlay {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 15px 40px rgba(234, 115, 23, 0.6);
}
.service-icon-overlay svg {
width: 32px;
height: 32px;
color: white;
stroke-width: 2.5;
}
.service-card-content {
padding: 2.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
background: white;
}
.service-card-content h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-dark);
font-weight: 700;
line-height: 1.3;
}
.service-card-content p {
margin-bottom: 1.5rem;
color: var(--text-medium);
line-height: 1.8;
flex-grow: 1;
font-size: 1.05rem;
}
.service-link-premium {
color: var(--accent-color);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
margin-top: auto;
}
.service-link-premium span {
transition: transform 0.3s ease;
}
.service-link-premium:hover {
gap: 0.75rem;
}
.service-link-premium:hover span {
transform: translateX(5px);
}
.service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.service-icon svg {
width: 32px;
height: 32px;
color: white;
}
.service-card h3 {
margin-bottom: 1rem;
color: var(--text-dark);
}
.service-card p {
margin-bottom: 1.5rem;
color: var(--text-medium);
}
.service-link {
color: var(--primary-color);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.service-link:hover {
gap: 0.75rem;
}
/* ===================================
Service Detail Pages
=================================== */
.service-detail {
padding: 4rem 0;
}
.service-detail.alt {
background: var(--bg-light);
}
.service-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.service-detail-grid.reverse {
direction: rtl;
}
.service-detail-grid.reverse > * {
direction: ltr;
}
.service-detail-content h2 {
margin-bottom: 1rem;
}
.service-intro {
font-size: 1.1rem;
margin-bottom: 2rem;
color: var(--text-medium);
}
.service-detail-content h3 {
margin-top: 2rem;
margin-bottom: 1rem;
font-size: 1.4rem;
}
.service-list {
list-style: none;
margin: 1.5rem 0;
}
.service-list li {
padding-left: 2rem;
position: relative;
margin-bottom: 1rem;
color: var(--text-medium);
}
.service-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: bold;
font-size: 1.2rem;
}
.service-highlight {
background: var(--bg-light);
padding: 1.5rem;
border-radius: 8px;
margin-top: 2rem;
border-left: 4px solid var(--accent-color);
}
.service-detail-image {
height: 100%;
}
.service-detail-img {
width: 100%;
height: 100%;
min-height: 400px;
object-fit: cover;
border-radius: 12px;
box-shadow: var(--shadow-lg);
}
.placeholder-image {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 12px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.placeholder-image svg {
width: 120px;
height: 120px;
color: white;
opacity: 0.3;
}
/* ===================================
Why Us Section
=================================== */
.why-us {
background: var(--bg-white);
}
.why-us-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.why-us-header-center {
text-align: center;
margin-bottom: 4rem;
}
.why-us-header-center h2 {
font-size: 3rem;
color: white;
margin-bottom: 1rem;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
}
.why-us-header-center p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
max-width: 600px;
margin: 0 auto;
}
.why-us-grid-premium {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.why-us-benefit-card {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
padding: 2.5rem;
border-radius: 20px;
text-align: center;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.why-us-benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-color), var(--accent-light));
transform: scaleX(0);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.why-us-benefit-card:hover::before {
transform: scaleX(1);
}
.why-us-benefit-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 60px rgba(234, 115, 23, 0.3);
border-color: rgba(234, 115, 23, 0.4);
}
.benefit-card-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 10px 30px rgba(234, 115, 23, 0.4);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.why-us-benefit-card:hover .benefit-card-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 15px 40px rgba(234, 115, 23, 0.5);
}
.benefit-card-icon svg {
width: 40px;
height: 40px;
color: white;
stroke-width: 2.5;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.why-us-benefit-card h3 {
font-size: 1.5rem;
color: var(--text-dark);
margin-bottom: 1rem;
font-weight: 700;
}
.why-us-benefit-card p {
color: var(--text-medium);
line-height: 1.7;
font-size: 1rem;
}
.why-us-stats-showcase {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.stat-showcase-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-showcase-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.4);
}
.stat-showcase-icon {
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.2);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: all 0.5s ease;
}
.stat-showcase-item:hover .stat-showcase-icon {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1) rotate(5deg);
}
.stat-showcase-icon svg {
width: 36px;
height: 36px;
color: white;
stroke-width: 2.5;
}
.stat-showcase-number {
font-size: 2.5rem;
font-weight: 800;
color: white;
margin-bottom: 0.75rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.stat-showcase-label {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.95);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.why-us-premium {
position: relative;
padding: 6rem 0;
overflow: hidden;
}
.why-us-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.why-us-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.why-us-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(13, 74, 92, 0.95) 0%, rgba(17, 86, 107, 0.92) 100%);
}
.why-us-premium .container {
position: relative;
z-index: 1;
}
.why-us-content-premium {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
padding: 3.5rem;
border-radius: 24px;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.why-us-content-premium h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
color: var(--text-dark);
}
.why-us-stats-premium {
display: flex;
align-items: center;
justify-content: center;
}
.stats-box-premium {
background: transparent;
backdrop-filter: none;
padding: 0;
border-radius: 0;
box-shadow: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
width: 100%;
border: none;
}
.stat-premium {
text-align: center;
padding: 3rem 2rem;
border-radius: 20px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(234, 115, 23, 0.1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 260px;
}
.stat-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-color), var(--accent-light));
transform: scaleX(0);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-premium::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(234, 115, 23, 0.03) 0%, rgba(234, 115, 23, 0.01) 100%);
opacity: 0;
transition: opacity 0.5s ease;
}
.stat-premium:hover::before {
transform: scaleX(1);
}
.stat-premium:hover::after {
opacity: 1;
}
.stat-premium:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.98) 100%);
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(234, 115, 23, 0.2);
border-color: rgba(234, 115, 23, 0.2);
}
.stat-icon-wrapper {
width: 72px;
height: 72px;
margin: 0 auto 2rem;
background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(234, 115, 23, 0.3);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
flex-shrink: 0;
}
.stat-icon-wrapper::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 18px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
filter: blur(8px);
}
.stat-premium:hover .stat-icon-wrapper::before {
opacity: 0.4;
}
.stat-icon-wrapper svg {
width: 36px;
height: 36px;
color: white;
transition: transform 0.5s ease;
stroke-width: 2.5;
}
.stat-premium:hover .stat-icon-wrapper {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 12px 36px rgba(234, 115, 23, 0.4);
}
.stat-premium:hover .stat-icon-wrapper svg {
transform: scale(1.08);
}
.stat-number-premium {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.75rem;
line-height: 1.2;
letter-spacing: -1px;
}
.stat-label-premium {
font-size: 0.9rem;
color: var(--text-medium);
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
line-height: 1.4;
max-width: 200px;
margin: 0 auto;
}
.why-us-content h2 {
margin-bottom: 2rem;
}
.benefits-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.benefit {
display: flex;
gap: 1.5rem;
padding: 1.5rem;
border-radius: 12px;
transition: all 0.3s ease;
}
.benefit:hover {
background: rgba(234, 115, 23, 0.05);
transform: translateX(5px);
}
.benefit-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
color: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.5rem;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(234, 115, 23, 0.3);
transition: all 0.3s ease;
}
.benefit:hover .benefit-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 18px rgba(234, 115, 23, 0.4);
}
.benefit h3 {
margin-bottom: 0.5rem;
font-size: 1.25rem;
}
.benefit p {
color: var(--text-medium);
}
.stats-box {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 3rem;
border-radius: 12px;
color: white;
display: flex;
flex-direction: column;
gap: 2rem;
}
.stat {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1rem;
opacity: 0.9;
}
/* ===================================
Clients Section
=================================== */
.clients {
background: var(--bg-light);
}
.clients-list {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
flex-wrap: wrap;
}
.client-name {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-medium);
padding: 1.5rem 2.5rem;
background: white;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
/* ===================================
Component Lifecycle Animation
=================================== */
.lifecycle-animation-section {
padding: 8rem 0;
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.lifecycle-animation-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(234, 115, 23, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.lifecycle-animation-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem 3rem 2rem;
}
.lifecycle-timeline {
position: relative;
margin: 4rem 0;
padding: 2rem 0;
}
.timeline-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--accent-color) 0%,
var(--accent-color) 30%,
#e0e0e0 30%,
#e0e0e0 50%,
var(--accent-color) 50%,
var(--accent-color) 100%
);
border-radius: 2px;
transform: translateY(-50%);
animation: timelineProgress 3s ease-in-out infinite;
}
@keyframes timelineProgress {
0% {
background: linear-gradient(90deg,
var(--accent-color) 0%,
var(--accent-color) 30%,
#e0e0e0 30%,
#e0e0e0 50%,
var(--accent-color) 50%,
var(--accent-color) 100%
);
}
50% {
background: linear-gradient(90deg,
var(--accent-color) 0%,
var(--accent-color) 50%,
var(--accent-color) 50%,
var(--accent-color) 100%
);
}
100% {
background: linear-gradient(90deg,
var(--accent-color) 0%,
var(--accent-color) 30%,
#e0e0e0 30%,
#e0e0e0 50%,
var(--accent-color) 50%,
var(--accent-color) 100%
);
}
}
.timeline-marker {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
.marker-dot {
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
border: 4px solid var(--accent-color);
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(234, 115, 23, 0.3);
animation: markerPulse 2s ease-in-out infinite;
position: relative;
}
.marker-dot::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid var(--accent-color);
animation: markerRipple 2s ease-in-out infinite;
}
@keyframes markerPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes markerRipple {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
.marker-start {
left: 10%;
}
.marker-wear {
left: 30%;
}
.marker-repair {
left: 50%;
}
.marker-extended {
left: 90%;
}
.wear-dot {
background: #ff6b6b;
border-color: #ff6b6b;
}
.repair-dot {
background: var(--accent-color);
border-color: var(--accent-color);
animation: repairPulse 1.5s ease-in-out infinite;
}
.repair-icon {
font-size: 1.5rem;
animation: repairRotate 2s linear infinite;
}
@keyframes repairPulse {
0%, 100% {
box-shadow: 0 4px 15px rgba(234, 115, 23, 0.3);
}
50% {
box-shadow: 0 4px 25px rgba(234, 115, 23, 0.6);
}
}
@keyframes repairRotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.extended-dot {
background: #51cf66;
border-color: #51cf66;
}
.marker-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-dark);
white-space: nowrap;
margin-top: 0.5rem;
}
.component-visualization {
display: flex;
align-items: center;
justify-content: center;
gap: 4rem;
margin: 4rem 0;
padding: 4rem 3rem;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 32px;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.12);
position: relative;
overflow: visible;
}
.component-visualization::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, var(--accent-color), #37b24d, var(--accent-color));
border-radius: 32px;
z-index: -1;
opacity: 0.1;
animation: borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.2; }
}
.component-before,
.component-after {
flex: 1;
text-align: center;
position: relative;
transition: all 0.3s ease;
}
.component-before {
animation: beforeFadeIn 1s ease-out;
}
.component-after {
animation: afterFadeIn 1s ease-out 0.5s both;
}
@keyframes beforeFadeIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes afterFadeIn {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.component-image {
position: relative;
}
.component-visual {
position: relative;
width: 280px;
height: 200px;
margin: 0 auto 2rem;
perspective: 1000px;
}
.component-part {
width: 100%;
height: 100%;
border-radius: 12px;
position: relative;
transition: all 0.5s ease;
overflow: hidden;
}
.part-worn {
background: linear-gradient(135deg, #8b4513 0%, #a0522d 30%, #654321 60%, #5a3a1f 100%);
border: 4px solid #5a3a1f;
animation: componentShake 2.5s ease-in-out infinite, componentFade 3s ease-in-out infinite;
box-shadow:
0 15px 40px rgba(101, 67, 33, 0.5),
inset 0 0 30px rgba(0, 0, 0, 0.3);
position: relative;
transform-style: preserve-3d;
}
@keyframes componentFade {
0%, 100% { filter: brightness(0.7) contrast(1.1); }
50% { filter: brightness(0.6) contrast(1.2); }
}
.part-worn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.15) 10px, rgba(0,0,0,0.15) 20px),
repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 20px);
opacity: 0.7;
animation: wearPattern 4s linear infinite;
}
@keyframes wearPattern {
0% { transform: translate(0, 0); }
100% { transform: translate(10px, 10px); }
}
.part-repaired {
background: linear-gradient(135deg, #2d5016 0%, #3d6b1f 30%, #4a7c2a 60%, #37b24d 100%);
border: 4px solid #37b24d;
animation: componentGlow 2s ease-in-out infinite, componentShine 3s ease-in-out infinite;
box-shadow:
0 15px 50px rgba(81, 207, 102, 0.4),
0 0 30px rgba(81, 207, 102, 0.3),
inset 0 0 40px rgba(255, 255, 255, 0.2);
position: relative;
transform-style: preserve-3d;
}
@keyframes componentShine {
0%, 100% { filter: brightness(1) saturate(1.2); }
50% { filter: brightness(1.1) saturate(1.3); }
}
.component-detail {
position: absolute;
background: rgba(0, 0, 0, 0.3);
border-radius: 2px;
}
.detail-crack {
width: 80px;
height: 4px;
top: 30%;
left: 20%;
transform: rotate(45deg);
animation: crackPulse 2s ease-in-out infinite;
background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(139, 0, 0, 0.8), rgba(0,0,0,0.6));
box-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}
.detail-wear {
width: 50px;
height: 50px;
top: 50%;
right: 25%;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(139, 69, 19, 0.4) 50%, transparent 70%);
animation: wearPulse 2.5s ease-in-out infinite;
border: 2px solid rgba(139, 69, 19, 0.6);
}
.detail-damage {
width: 35px;
height: 35px;
bottom: 20%;
left: 30%;
border-radius: 6px;
background: linear-gradient(135deg, rgba(139, 69, 19, 0.8), rgba(101, 67, 33, 0.9));
animation: damageShake 1.5s ease-in-out infinite;
box-shadow: 0 0 15px rgba(139, 69, 19, 0.6);
border: 2px solid rgba(101, 67, 33, 0.8);
}
.component-shine {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
animation: shine 2.5s ease-in-out infinite;
z-index: 2;
}
.component-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
border-radius: 50%;
background: radial-gradient(circle, rgba(81, 207, 102, 0.4) 0%, rgba(55, 178, 77, 0.2) 50%, transparent 70%);
animation: glowPulse 2s ease-in-out infinite;
z-index: 1;
}
.part-repaired::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
color: rgba(255, 255, 255, 0.3);
font-weight: 900;
z-index: 1;
animation: checkMark 3s ease-in-out infinite;
}
@keyframes checkMark {
0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.9); }
50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
}
@keyframes crackPulse {
0%, 100% {
opacity: 0.7;
transform: rotate(45deg) scale(1);
box-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}
50% {
opacity: 1;
transform: rotate(45deg) scale(1.15);
box-shadow: 0 0 20px rgba(139, 0, 0, 0.8);
}
}
@keyframes wearPulse {
0%, 100% {
opacity: 0.5;
transform: scale(1);
border-color: rgba(139, 69, 19, 0.6);
}
50% {
opacity: 0.8;
transform: scale(1.25);
border-color: rgba(139, 69, 19, 0.9);
}
}
@keyframes damageShake {
0%, 100% {
transform: translate(0, 0) rotate(0deg);
box-shadow: 0 0 15px rgba(139, 69, 19, 0.6);
}
25% {
transform: translate(-3px, -3px) rotate(-3deg);
box-shadow: 0 0 20px rgba(139, 69, 19, 0.8);
}
75% {
transform: translate(3px, 3px) rotate(3deg);
box-shadow: 0 0 20px rgba(139, 69, 19, 0.8);
}
}
@keyframes shine {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
@keyframes glowPulse {
0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes componentShake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-3px);
}
75% {
transform: translateX(3px);
}
}
@keyframes componentGlow {
0%, 100% {
box-shadow: 0 10px 30px rgba(81, 207, 102, 0.3);
}
50% {
box-shadow: 0 10px 40px rgba(81, 207, 102, 0.5);
}
}
.part-repaired::before {
content: '';
position: absolute;
top: 15%;
left: 15%;
right: 15%;
height: 70%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
border-radius: 12px;
box-shadow:
0 0 30px rgba(255, 255, 255, 0.6),
inset 0 0 20px rgba(255, 255, 255, 0.3);
animation: repairedShine 3s ease-in-out infinite;
}
@keyframes repairedShine {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.05);
}
}
.component-label {
font-size: 1.4rem;
font-weight: 800;
color: var(--text-dark);
margin-bottom: 0.75rem;
letter-spacing: -0.5px;
text-transform: uppercase;
font-size: 1.2rem;
}
.component-status {
font-size: 1rem;
font-weight: 700;
padding: 0.75rem 1.5rem;
border-radius: 30px;
display: inline-block;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.status-worn {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 71, 87, 0.2));
color: #ff4757;
border: 2px solid rgba(255, 71, 87, 0.3);
animation: statusPulse 2s ease-in-out infinite;
}
.status-repaired {
background: linear-gradient(135deg, rgba(81, 207, 102, 0.15), rgba(55, 178, 77, 0.2));
color: #37b24d;
border: 2px solid rgba(55, 178, 77, 0.3);
animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
50% { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
}
.component-arrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
position: relative;
padding: 2rem 1rem;
}
.component-arrow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
animation: arrowFlow 2s ease-in-out infinite;
}
@keyframes arrowFlow {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
.component-arrow svg {
width: 80px;
height: 80px;
color: var(--accent-color);
animation: arrowPulse 2s ease-in-out infinite, arrowMove 3s ease-in-out infinite;
filter: drop-shadow(0 4px 8px rgba(234, 115, 23, 0.3));
z-index: 1;
position: relative;
}
@keyframes arrowMove {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(15px); }
}
@keyframes arrowPulse {
0%, 100% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(10px);
opacity: 0.7;
}
}
.arrow-label {
font-size: 1rem;
font-weight: 700;
color: var(--accent-color);
white-space: nowrap;
background: rgba(234, 115, 23, 0.1);
padding: 0.75rem 1.5rem;
border-radius: 25px;
border: 2px solid rgba(234, 115, 23, 0.2);
letter-spacing: 0.5px;
z-index: 1;
position: relative;
animation: labelGlow 2s ease-in-out infinite;
}
@keyframes labelGlow {
0%, 100% { box-shadow: 0 0 10px rgba(234, 115, 23, 0.2); }
50% { box-shadow: 0 0 20px rgba(234, 115, 23, 0.4); }
}
.lifecycle-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 4rem;
}
.lifecycle-stat {
text-align: center;
padding: 2rem;
background: white;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.lifecycle-stat:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(234, 115, 23, 0.2);
}
.stat-icon {
font-size: 3rem;
margin-bottom: 1rem;
animation: iconBounce 2s ease-in-out infinite;
}
@keyframes iconBounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.stat-value {
font-size: 2.5rem;
font-weight: 800;
color: var(--accent-color);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1rem;
color: var(--text-medium);
font-weight: 600;
}
@media (max-width: 768px) {
.lifecycle-animation-section {
padding: 5rem 0;
}
.lifecycle-animation-wrapper {
padding: 2rem 1rem;
}
.component-visualization {
flex-direction: column;
gap: 1.5rem;
padding: 2rem 1rem;
margin: 2rem 0;
}
.component-visual {
width: 200px;
height: 150px;
margin: 0 auto 1.5rem;
}
.component-part {
width: 100%;
height: 100%;
}
.part-worn::before {
opacity: 0.5;
}
.part-repaired::after {
font-size: 3rem;
}
.component-arrow {
transform: rotate(90deg);
padding: 1rem 2rem;
gap: 1rem;
}
.component-arrow::before {
width: 60px;
height: 3px;
transform: translate(-50%, -50%) rotate(90deg);
}
.component-arrow svg {
width: 50px;
height: 50px;
transform: rotate(0deg);
}
.arrow-label {
font-size: 0.85rem;
padding: 0.6rem 1.2rem;
}
.component-label {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.component-status {
font-size: 0.85rem;
padding: 0.6rem 1rem;
}
.component-before,
.component-after {
animation: none;
}
/* Reduce animation complexity on mobile for better performance */
.part-worn {
animation: componentShake 2.5s ease-in-out infinite;
}
.part-repaired {
animation: componentGlow 2s ease-in-out infinite;
}
.component-shine,
.component-glow {
animation: none;
}
.part-repaired::after {
display: none;
}
.lifecycle-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.lifecycle-stat {
padding: 1.5rem;
}
.stat-icon {
font-size: 2.5rem;
}
.stat-value {
font-size: 2rem;
}
.stat-label {
font-size: 0.9rem;
}
.lifecycle-timeline {
margin: 2rem 0;
padding: 1.5rem 0;
overflow: visible;
}
.timeline-track {
height: 3px;
}
.timeline-marker {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.marker-start {
left: 5% !important;
}
.marker-wear {
left: 30% !important;
}
.marker-repair {
left: 50% !important;
}
.marker-extended {
left: 90% !important;
}
.marker-dot {
width: 45px;
height: 45px;
margin: 0 auto 0.75rem;
border-width: 3px;
}
.repair-icon {
font-size: 1.3rem;
}
.marker-label {
font-size: 0.7rem;
margin-top: 0.5rem;
white-space: normal;
line-height: 1.4;
max-width: 100px;
word-wrap: break-word;
hyphens: auto;
text-align: center;
padding: 0 5px;
}
}
/* Extra small screens - vertical timeline layout */
@media (max-width: 480px) {
.lifecycle-timeline {
padding: 2rem 0;
overflow-x: visible;
}
.timeline-track {
display: none;
}
.timeline-marker {
position: relative;
left: auto !important;
top: auto;
bottom: auto;
transform: none;
width: 100%;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.timeline-marker:last-child {
margin-bottom: 0;
}
.marker-dot {
width: 50px;
height: 50px;
margin-bottom: 0.75rem;
}
.repair-icon {
font-size: 1.5rem;
}
.marker-label {
font-size: 0.75rem;
max-width: 100%;
padding: 0 1rem;
margin-top: 0.5rem;
}
}
/* ===================================
Testimonials Section
=================================== */
.testimonials-premium {
position: relative;
padding: 8rem 0;
overflow: hidden;
}
.testimonials-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.testimonials-background img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.testimonials-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(13, 74, 92, 0.75) 0%, rgba(17, 86, 107, 0.7) 100%);
z-index: 1;
}
.testimonials-premium .container {
position: relative;
z-index: 2;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
margin-top: 4rem;
}
.testimonial-card {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
padding: 3rem;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.testimonial-card::before {
content: '"';
position: absolute;
top: -20px;
left: 20px;
font-size: 120px;
font-weight: 700;
color: rgba(234, 115, 23, 0.1);
line-height: 1;
font-family: Georgia, serif;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 80px rgba(234, 115, 23, 0.3);
border-color: rgba(234, 115, 23, 0.3);
}
.testimonial-rating {
display: flex;
gap: 0.25rem;
margin-bottom: 1.5rem;
}
.testimonial-rating svg {
width: 20px;
height: 20px;
color: var(--accent-color);
fill: var(--accent-color);
}
.testimonial-text {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-dark);
margin-bottom: 2rem;
font-style: italic;
position: relative;
z-index: 1;
font-weight: 500;
}
.testimonial-author {
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.author-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.author-role {
font-weight: 600;
color: var(--text-dark);
font-size: 1rem;
}
.author-company {
font-size: 0.9rem;
color: var(--text-medium);
font-weight: 500;
}
/* Premium Clients Section */
.clients-premium {
background: linear-gradient(180deg, var(--bg-light) 0%, var(--bg-white) 100%);
padding: 7rem 0;
position: relative;
}
.clients-premium::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 20%, rgba(13, 74, 92, 0.02) 0%, transparent 50%);
pointer-events: none;
}
.trust-indicators {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
margin-bottom: 3rem;
}
.trust-card {
background: white;
padding: 0;
border-radius: 16px;
text-align: center;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
border: 2px solid transparent;
overflow: hidden;
}
.trust-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.trust-image {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.trust-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.trust-card:hover .trust-image img {
transform: scale(1.1);
}
.trust-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: -35px auto 1.5rem;
box-shadow: 0 10px 25px rgba(234, 115, 23, 0.3);
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.trust-card:hover .trust-icon {
transform: scale(1.1) rotateY(180deg);
}
.trust-card h3,
.trust-card p {
padding: 0 2.5rem;
}
.trust-card h3 {
margin-bottom: 1rem;
}
.trust-card p {
padding-bottom: 2.5rem;
margin-bottom: 0;
}
.trust-icon svg {
width: 32px;
height: 32px;
color: white;
}
.trust-card h3 {
font-size: 1.4rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.trust-card p {
color: var(--text-medium);
line-height: 1.7;
margin-bottom: 0;
}
.certification-badges {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
padding: 2.5rem;
background: white;
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.cert-badge {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
background: var(--bg-light);
border-radius: 10px;
font-weight: 600;
color: var(--accent-color);
transition: all 0.3s ease;
}
.cert-badge:hover {
background: var(--accent-color);
color: white;
transform: scale(1.05);
}
.cert-badge svg {
width: 24px;
height: 24px;
}
.cert-badge:hover svg {
color: white;
}
/* ===================================
About Page
=================================== */
.about-content {
padding: 4rem 0;
}
.about-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: start;
}
.about-text h2 {
margin-bottom: 1.5rem;
}
.about-text h3 {
margin-top: 2rem;
margin-bottom: 1rem;
}
.about-text p {
margin-bottom: 1.5rem;
line-height: 1.8;
}
.about-image .placeholder-image {
height: 500px;
}
.about-main-image {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 12px;
box-shadow: var(--shadow-lg);
}
/* Premium About Content */
.about-content-premium {
padding: 6rem 0;
background: var(--bg-white);
}
.about-intro-box {
text-align: center;
max-width: 800px;
margin: 0 auto 4rem;
}
.section-label {
display: inline-block;
padding: 0.4rem 1.2rem;
background: rgba(234, 115, 23, 0.1);
color: var(--accent-color);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
border-radius: 20px;
margin-bottom: 1rem;
}
.section-label-light {
display: inline-block;
padding: 0.4rem 1.2rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: white;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 2px;
border-radius: 20px;
margin-bottom: 1rem;
}
.about-intro-box h2 {
font-size: 2.8rem;
margin-bottom: 1.5rem;
color: var(--text-dark);
}
.lead-text {
font-size: 1.2rem;
line-height: 1.8;
color: var(--text-medium);
}
.about-grid-premium {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.about-image-gallery {
position: relative;
}
.gallery-main {
position: relative;
margin-bottom: 1.5rem;
}
.gallery-img-main {
width: 100%;
height: 450px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.image-badge {
position: absolute;
bottom: 2rem;
right: 2rem;
background: white;
padding: 1.5rem 2rem;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
text-align: center;
}
.badge-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--accent-color);
line-height: 1;
margin-bottom: 0.25rem;
}
.badge-text {
display: block;
font-size: 0.85rem;
color: var(--text-medium);
font-weight: 500;
}
.gallery-secondary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.gallery-img-small {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
}
.gallery-img-small:hover {
transform: scale(1.05);
}
.about-text-premium {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.text-block {
display: flex;
gap: 1.5rem;
}
.icon-box {
width: 50px;
height: 50px;
min-width: 50px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(234, 115, 23, 0.3);
}
.icon-box svg {
width: 24px;
height: 24px;
color: white;
}
.text-block h3 {
font-size: 1.4rem;
margin-bottom: 0.75rem;
color: var(--text-dark);
}
.text-block p {
line-height: 1.8;
color: var(--text-medium);
}
.mission-box {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 2.5rem;
border-radius: 16px;
color: white;
box-shadow: 0 15px 40px rgba(26, 84, 144, 0.3);
}
.mission-box h4 {
color: white;
font-size: 1.3rem;
margin-bottom: 1rem;
}
.mission-box p {
color: rgba(255, 255, 255, 0.95);
line-height: 1.8;
margin-bottom: 0;
}
.skills-section {
background: var(--bg-light);
padding: 4rem 0;
}
.skills-section h2 {
text-align: center;
margin-bottom: 1rem;
}
.section-intro {
text-align: center;
max-width: 800px;
margin: 0 auto 3rem;
font-size: 1.1rem;
color: var(--text-medium);
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.skill-card {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
border: 1px solid transparent;
}
.skill-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-color);
}
.skill-card:hover .skill-icon {
transform: scale(1.1) rotate(5deg);
}
.skill-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
transition: all 0.3s ease;
}
.skill-icon svg {
width: 28px;
height: 28px;
color: white;
}
.skill-card h3 {
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
.values-section {
padding: 4rem 0;
}
.values-section h2 {
text-align: center;
margin-bottom: 3rem;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.value-card {
text-align: center;
padding: 2rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.value-card:hover {
background: var(--bg-light);
transform: translateY(-3px);
}
.value-card h3 {
color: var(--primary-color);
margin-bottom: 1rem;
font-size: 1.4rem;
}
/* Premium Values Section */
.values-section-premium {
position: relative;
padding: 6rem 0;
overflow: hidden;
}
.values-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.values-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.values-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(15, 58, 102, 0.96) 0%, rgba(26, 84, 144, 0.94) 100%);
}
.values-section-premium .container {
position: relative;
z-index: 1;
}
.values-header {
text-align: center;
margin-bottom: 4rem;
}
.values-header h2 {
color: white;
font-size: 2.8rem;
margin-bottom: 1rem;
}
.values-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
}
.values-grid-premium {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
}
.value-card-premium {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 2.5rem;
border-radius: 16px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.value-card-premium:hover {
background: white;
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.value-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 10px 30px rgba(234, 115, 23, 0.4);
transition: all 0.3s ease;
}
.value-card-premium:hover .value-icon {
transform: rotateY(360deg);
}
.value-icon svg {
width: 32px;
height: 32px;
color: white;
}
.value-card-premium h3 {
font-size: 1.5rem;
color: var(--accent-color);
margin-bottom: 1rem;
}
.value-card-premium p {
color: var(--text-medium);
line-height: 1.7;
margin-bottom: 0;
}
.experience-section {
background: var(--bg-light);
padding: 5rem 0;
}
.experience-section h2 {
text-align: center;
margin-bottom: 1rem;
}
.experience-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.experience-item {
background: white;
padding: 2rem;
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.experience-item h3 {
color: var(--primary-color);
margin-bottom: 1rem;
}
.experience-highlights-large {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}
.experience-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
}
.experience-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.experience-image {
width: 100%;
height: 240px;
overflow: hidden;
}
.experience-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.experience-card:hover .experience-image img {
transform: scale(1.05);
}
.experience-card-content {
padding: 2rem;
}
.experience-card-content h3 {
color: var(--primary-color);
margin-bottom: 1rem;
font-size: 1.4rem;
}
.experience-card-content p {
color: var(--text-medium);
line-height: 1.7;
}
.stats-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 4rem;
padding: 3rem;
background: white;
border-radius: 12px;
box-shadow: var(--shadow-md);
}
.stat-item {
text-align: center;
padding: 1rem;
}
.stat-item .stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 0.5rem;
}
.stat-item .stat-label {
font-size: 1rem;
color: var(--text-medium);
font-weight: 500;
}
.clients-showcase {
margin-top: 4rem;
text-align: center;
}
.clients-showcase h3 {
margin-bottom: 2rem;
}
.client-logos {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.client-item {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-medium);
padding: 1rem 2rem;
background: white;
border-radius: 8px;
box-shadow: var(--shadow-sm);
}
/* ===================================
Contact Page
=================================== */
.contact-section {
padding: 4rem 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
}
.contact-info h2 {
margin-bottom: 1rem;
}
.contact-info > p {
margin-bottom: 2rem;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-item {
display: flex;
gap: 1.5rem;
}
.contact-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--accent-color), var(--accent-light));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-icon svg {
width: 24px;
height: 24px;
color: white;
}
.contact-item h3 {
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
.contact-item p {
margin-bottom: 0;
}
.service-areas {
margin-top: 3rem;
padding: 2rem;
background: var(--bg-light);
border-radius: 12px;
}
.service-areas h3 {
margin-bottom: 1rem;
}
.service-areas ul {
list-style: none;
}
.service-areas li {
padding-left: 1.5rem;
position: relative;
margin-bottom: 0.5rem;
color: var(--text-medium);
}
.service-areas li::before {
content: "→";
position: absolute;
left: 0;
color: var(--primary-color);
}
.form-container {
background: var(--bg-light);
padding: 2.5rem;
border-radius: 12px;
}
.form-container h2 {
margin-bottom: 0.5rem;
}
.form-container > p {
margin-bottom: 2rem;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--text-dark);
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: 6px;
font-family: inherit;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
}
.form-group textarea {
resize: vertical;
}
.map-section {
background: var(--bg-light);
padding: 4rem 0;
}
.map-wrapper {
width: 100%;
height: 450px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.map-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
}
.map-placeholder {
height: 400px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
display: flex;
align-items: center;
justify-content: center;
}
.map-content {
text-align: center;
color: white;
}
.map-content svg {
width: 60px;
height: 60px;
margin-bottom: 1rem;
opacity: 0.8;
}
.map-content h3 {
color: white;
margin-bottom: 1.5rem;
}
/* ===================================
CTA Section
=================================== */
.cta {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: 7rem 0;
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('images/train09.jpg');
background-size: cover;
background-position: center;
opacity: 0.15;
z-index: 0;
}
.cta .container {
position: relative;
z-index: 1;
}
.cta-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.cta-content h2 {
color: white;
margin-bottom: 1rem;
}
.cta-content p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
margin-bottom: 2rem;
}
/* ===================================
Footer
=================================== */
.footer {
background: var(--text-dark);
color: rgba(255, 255, 255, 0.8);
padding: 3rem 0 1rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-col h3,
.footer-col h4 {
color: white;
margin-bottom: 1rem;
}
.footer-col p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.5rem;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 0.5rem;
}
.footer-col a {
color: rgba(255, 255, 255, 0.7);
transition: color 0.3s ease;
}
.footer-col a:hover {
color: white;
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.6);
}
/* ===================================
Responsive Design
=================================== */
@media (max-width: 968px) {
.service-detail-grid,
.why-us-grid,
.about-grid,
.contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.stats-box-premium {
grid-template-columns: 1fr;
}
.why-us-content-premium,
.stats-box-premium {
padding: 2rem;
}
.service-detail-grid.reverse {
direction: ltr;
}
.stats-box {
order: -1;
}
.hero-title {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
.experience-highlights-large {
grid-template-columns: 1fr;
}
.stats-showcase {
grid-template-columns: repeat(2, 1fr);
padding: 2rem;
}
.about-grid-premium {
grid-template-columns: 1fr;
gap: 3rem;
}
.header-content-premium h1 {
font-size: 2.5rem;
}
.values-grid-premium {
grid-template-columns: 1fr;
}
.about-intro-box h2 {
font-size: 2.2rem;
}
.values-header h2 {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background: white;
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: var(--shadow-md);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.mobile-toggle {
display: flex;
}
.language-selector {
margin-left: 1rem;
}
.language-toggle {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
}
.current-flag {
font-size: 1rem;
}
.language-dropdown {
right: 0;
left: auto;
}
.logo img {
height: 65px;
}
.hero {
padding: 4rem 0;
}
.hero-premium {
min-height: 75vh;
padding: 6rem 0;
}
.hero-title {
font-size: 2rem;
white-space: normal;
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.hero-buttons {
flex-direction: column;
margin-bottom: 3rem;
}
.hero-buttons .btn {
width: 100%;
max-width: 100%;
min-width: auto;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.skills-grid {
grid-template-columns: 1fr;
}
.clients-list {
gap: 1rem;
}
.client-name,
.client-item {
font-size: 1.2rem;
padding: 1rem 1.5rem;
}
.trust-indicators {
grid-template-columns: 1fr;
gap: 2rem;
}
.stats-box-premium {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0;
}
.stat-premium {
padding: 2.5rem 2rem;
min-height: 240px;
}
.stat-icon-wrapper {
width: 64px;
height: 64px;
margin-bottom: 1.5rem;
}
.stat-icon-wrapper svg {
width: 32px;
height: 32px;
}
.stat-number-premium {
font-size: 2.2rem;
}
.stat-label-premium {
font-size: 0.85rem;
}
.why-us-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.why-us-content-premium {
padding: 2.5rem 2rem;
}
.why-us-header-center h2 {
font-size: 2.2rem;
}
.why-us-header-center p {
font-size: 1.1rem;
}
.why-us-grid-premium {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.why-us-benefit-card {
padding: 2rem;
}
.why-us-stats-showcase {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.stat-showcase-item {
padding: 2rem 1.5rem;
}
.stat-showcase-number {
font-size: 2rem;
}
.train-interactive-section {
padding: 4rem 0;
}
.train-interactive-wrapper {
margin: 2rem auto 0;
}
.train-illustration {
height: 350px;
padding: 1.5rem 1rem;
overflow: hidden;
position: relative;
touch-action: manipulation;
}
.train-body {
padding-bottom: 40px;
gap: 0;
flex-wrap: nowrap;
justify-content: center;
}
.train-front {
width: 120px;
height: 110px;
border-radius: 20px 0 0 20px;
}
.train-front::before {
top: 15px;
left: 15px;
width: 80px;
height: 50px;
}
.train-front::after {
bottom: 15px;
left: 15px;
width: 30px;
height: 30px;
}
.train-carriage {
width: 110px;
height: 100px;
border-width: 3px;
}
.train-carriage::before {
top: 20px;
left: 15px;
right: 15px;
height: 40px;
}
.train-carriage::after {
height: 15px;
}
.train-tracks {
bottom: 30px;
height: 8px;
}
.label-circle {
font-size: 0.65rem;
padding: 0.5rem 0.9rem;
white-space: normal;
max-width: 120px;
line-height: 1.2;
}
.label-line {
height: 40px;
width: 2px;
}
.label-line::after {
width: 6px;
height: 6px;
}
.service-label {
font-size: 0.65rem;
transform: scale(0.85);
pointer-events: auto !important;
z-index: 15 !important;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(234, 115, 23, 0.3);
}
.service-label:active {
transform: scale(0.9);
}
/* Ensure links work on mobile */
.service-label,
.service-marker {
touch-action: manipulation;
-webkit-touch-callout: none;
user-select: none;
}
.service-label[style*="left: 8%"] {
left: 5% !important;
top: 45% !important;
}
.service-label[style*="left: 32%"] {
left: 25% !important;
top: 20% !important;
}
.service-label[style*="left: 38%"] {
left: 30% !important;
top: 70% !important;
}
.service-label[style*="left: 50%"] {
left: 45% !important;
top: 55% !important;
}
.service-label[style*="left: 72%"] {
left: 65% !important;
top: 35% !important;
}
.service-label[style*="left: 82%"] {
left: 75% !important;
top: 20% !important;
}
.service-label[style*="left: 88%"] {
left: 80% !important;
top: 75% !important;
}
.service-marker {
border-width: 2px;
pointer-events: auto !important;
z-index: 10 !important;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(234, 115, 23, 0.3);
}
.service-marker:active {
transform: scale(0.95);
}
.marker-gangways,
.marker-gangways-2 {
width: 18px;
height: 50px;
left: -10px;
}
.marker-graffiti {
width: 80px;
height: 40px;
left: 15px;
top: 25px;
}
.marker-hoses {
width: 80px;
height: 18px;
left: 15px;
bottom: 15px;
}
.marker-technical {
width: 90px;
height: 18px;
bottom: 12px;
}
.marker-rubber {
width: 40px;
height: 70px;
left: 15px;
}
.marker-windows {
width: 80px;
height: 55px;
top: 15px;
left: 15px;
}
.marker-snowguard {
width: 70px;
height: 25px;
bottom: 15px;
left: 15px;
}
/* Hide some labels on very small screens to prevent overlap */
.service-label[style*="left: 75%"] {
display: none;
}
.testimonials-premium {
padding: 5rem 0;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.testimonial-card {
padding: 2.5rem 2rem;
}
.testimonial-text {
font-size: 1rem;
}
.hero-title {
font-size: 2.5rem;
white-space: normal;
}
.hero-content-premium .hero-title {
font-size: 2.2rem;
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 2.5rem;
}
.hero-badge {
font-size: 0.7rem;
padding: 0.5rem 1.25rem;
margin-bottom: 1.25rem;
}
.hero-features {
flex-direction: column;
gap: 0.875rem;
margin-top: 2rem;
padding-top: 2rem;
}
.hero-feature-badge {
padding: 0.7rem 1.25rem;
font-size: 0.8rem;
}
.hero-feature-badge svg {
width: 16px;
height: 16px;
}
.hero-premium {
min-height: 85vh;
padding: 6rem 0;
}
.certification-badges {
gap: 1rem;
}
.cert-badge {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}
section {
padding: 3rem 0;
}
.stats-showcase {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.stat-item .stat-number {
font-size: 2rem;
}
.header-content-premium h1 {
font-size: 2rem;
}
.header-content-premium p {
font-size: 1.1rem;
}
.header-features {
gap: 1rem;
}
.feature-badge {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}
.about-header-premium {
padding: 4rem 0 3rem;
background-attachment: scroll;
}
.gallery-img-main {
height: 350px;
}
.gallery-img-small {
height: 150px;
}
.image-badge {
bottom: 1rem;
right: 1rem;
padding: 1rem 1.5rem;
}
.badge-number {
font-size: 2rem;
}
.text-block {
flex-direction: column;
gap: 1rem;
}
.about-intro-box h2 {
font-size: 1.8rem;
}
.lead-text {
font-size: 1.05rem;
}
}