/* ===== GLOBAL STYLES ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #0d2b5c; /* Darker blue for better contrast */
--secondary-color: #1a4189; /* Darker secondary blue */
--accent-color: #ffcc00; /* Slightly adjusted gold for better visibility */
--text-dark: #222222; /* Darker text for better readability */
--text-light: #555555; /* Darker light text for better contrast */
--white: #ffffff;
--light-gray: #f5f7fa; /* Slightly adjusted for better contrast */
--border-color: #d8dde4; /* Darker border for better visibility */
--shadow: 0 5px 15px rgba(0,0,0,0.15); /* Increased shadow opacity */
--shadow-hover: 0 10px 30px rgba(0,0,0,0.2); /* Increased hover shadow */
--transition: all 0.3s ease;
--error: #d32f2f; /* Red for errors */
--success: #2e7d32; /* Green for success */
--warning: #f57c00; /* Orange for warnings */
--info: #0288d1; /* Blue for information */
/* Enhanced Typography Variables */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
--font-size-6xl: 3.75rem; /* 60px */
/* Line Heights */
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* Spacing Scale */
--space-xs: 0.25rem; /* 4px */
--space-sm: 0.5rem; /* 8px */
--space-md: 1rem; /* 16px */
--space-lg: 1.5rem; /* 24px */
--space-xl: 2rem; /* 32px */
--space-2xl: 2.5rem; /* 40px */
--space-3xl: 3rem; /* 48px */
--space-4xl: 4rem; /* 64px */
--space-5xl: 5rem; /* 80px */
--space-6xl: 6rem; /* 96px */
/* Section Spacing */
--section-padding-sm: 4rem 0;
--section-padding-md: 6rem 0;
--section-padding-lg: 8rem 0;
/* Container Widths */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
}
body {
font-family: var(--font-primary);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--text-dark);
background-color: var(--white);
overflow-x: hidden;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--space-xl);
}
@media (max-width: 768px) {
.container {
padding: 0 var(--space-lg);
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--space-md);
}
}
/* ===== ENHANCED TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: var(--line-height-tight);
margin-bottom: var(--space-lg);
color: var(--text-dark);
letter-spacing: -0.025em;
}
h1 {
font-size: var(--font-size-6xl);
line-height: var(--line-height-tight);
margin-bottom: var(--space-2xl);
font-weight: 800;
}
h2 {
font-size: var(--font-size-5xl);
line-height: var(--line-height-snug);
margin-bottom: var(--space-xl);
font-weight: 700;
}
h3 {
font-size: var(--font-size-4xl);
line-height: var(--line-height-snug);
margin-bottom: var(--space-lg);
font-weight: 600;
}
h4 {
font-size: var(--font-size-3xl);
line-height: var(--line-height-normal);
margin-bottom: var(--space-md);
font-weight: 600;
}
h5 {
font-size: var(--font-size-2xl);
line-height: var(--line-height-normal);
margin-bottom: var(--space-md);
font-weight: 500;
}
h6 {
font-size: var(--font-size-xl);
line-height: var(--line-height-normal);
margin-bottom: var(--space-sm);
font-weight: 500;
}
/* Responsive Typography */
@media (max-width: 768px) {
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }
}
@media (max-width: 480px) {
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); }
}
/* Paragraph and Text Styles */
p {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-lg);
color: var(--text-light);
}
.text-large {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
}
.text-small {
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
}
.text-xs {
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
}
/* Text Colors */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-dark { color: var(--text-dark); }
.text-light { color: var(--text-light); }
/* Font Weights */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
/* Section Spacing Utilities */
.section {
padding: var(--section-padding-md);
}
.section-sm {
padding: var(--section-padding-sm);
}
.section-lg {
padding: var(--section-padding-lg);
}
/* Margin and Padding Utilities */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
.px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
/* ===== PAGE-WIDE ANIMATIONS ===== */
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Page load animation */
body {
animation: pageLoad 0.8s ease-out;
}
@keyframes pageLoad {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Scroll-triggered fade-in animation */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered animations for lists and grids */
.stagger-animation > * {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.stagger-animation.visible > * {
opacity: 1;
transform: translateY(0);
}
.stagger-animation.visible > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-animation.visible > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-animation.visible > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-animation.visible > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-animation.visible > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-animation.visible > *:nth-child(6) { transition-delay: 0.6s; }
/* Parallax effect for hero sections */
.parallax {
transform: translateZ(0);
will-change: transform;
}
/* Smooth hover transitions for interactive elements */
.smooth-hover {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.smooth-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
/* Scale animation on hover */
.scale-hover {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scale-hover:hover {
transform: scale(1.05);
}
/* Floating animation */
.float {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
/* Pulse animation */
.pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
/* Slide in from left */
.slide-in-left {
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-left.visible {
opacity: 1;
transform: translateX(0);
}
/* Slide in from right */
.slide-in-right {
opacity: 0;
transform: translateX(50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-right.visible {
opacity: 1;
transform: translateX(0);
}
/* Rotate in animation */
.rotate-in {
opacity: 0;
transform: rotate(-10deg) scale(0.9);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.rotate-in.visible {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* Loading spinner */
.spinner {
width: 40px;
height: 40px;
border: 4px solid var(--light-gray);
border-top: 4px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Progress bar animation */
.progress-bar {
width: 100%;
height: 4px;
background: var(--light-gray);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
animation: progress 2s ease-in-out;
}
@keyframes progress {
0% { width: 0%; }
100% { width: 100%; }
}
/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.parallax {
transform: none !important;
}
}
/* ===== BUTTONS ===== */
.btn {
display: inline-block;
padding: 14px 32px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: none;
cursor: pointer;
font-size: 1rem;
text-align: center;
position: relative;
overflow: hidden;
z-index: 1;
}
/* Button with ripple effect */
.btn-ripple {
position: relative;
overflow: hidden;
}
.btn-ripple::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, 0.7);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%, -50%);
transform-origin: 50% 50%;
}
.btn-ripple:focus:not(:active)::after,
.btn-ripple:active::after {
animation: ripple 1s ease-out;
}
@keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 0.5;
}
20% {
transform: scale(25, 25);
opacity: 0.5;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
/* Floating action button */
.btn-floating {
width: 56px;
height: 56px;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.btn-floating:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.btn-primary {
background: var(--accent-color);
color: var(--primary-color);
font-weight: 700;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.1);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
background: #ffd633; /* Slightly darker on hover */
}
.btn-primary:focus {
outline: 3px solid rgba(255, 204, 0, 0.5);
outline-offset: 2px;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.15);
color: var(--white);
border: 2px solid var(--white);
font-weight: 600;
backdrop-filter: blur(5px);
}
.btn-secondary:hover {
background: var(--white);
color: var(--primary-color);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
transform: translateY(-3px);
}
.btn-secondary:focus {
outline: 3px solid rgba(255, 255, 255, 0.5);
outline-offset: 2px;
}
.btn-outline {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
font-weight: 600;
}
.btn-outline:hover {
background: var(--primary-color);
color: var(--white);
box-shadow: 0 4px 12px rgba(13, 43, 92, 0.2);
}
.btn-outline:focus {
outline: 3px solid rgba(13, 43, 92, 0.3);
outline-offset: 2px;
}
/* ===== HEADER & NAVIGATION ===== */
.top-bar {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--white);
padding: 8px 0;
font-size: 14px;
}
.top-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.contact-info {
display: flex;
gap: 20px;
}
.contact-info i {
margin-right: 5px;
color: var(--accent-color);
}
.social-links a {
color: var(--white);
margin-left: 15px;
text-decoration: none;
transition: var(--transition);
}
.social-links a:hover {
color: var(--accent-color);
}
header {
background: var(--white);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1000;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo img {
height: 60px;
border-radius: 8px;
}
.logo-text h1 {
font-size: 24px;
color: #dc3545;
margin-bottom: 5px;
}
.logo-text p {
font-size: 14px;
color: var(--white);
font-weight: 500;
margin: 0;
}
/* Navigation */
nav {
display: flex;
gap: 30px;
}
nav a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
padding: 10px 15px;
border-radius: 5px;
transition: var(--transition);
position: relative;
}
nav a:hover {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--white);
}
/* Dropdown Menu */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background: linear-gradient(145deg, var(--white), #f8f9fa);
min-width: 220px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 15px rgba(0, 0, 0, 0.1);
z-index: 1000;
border-radius: 12px;
top: calc(100% + 8px);
left: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
overflow: hidden;
pointer-events: none;
}
.dropdown-content::before {
content: '';
position: absolute;
top: -8px;
left: 20px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid var(--white);
filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));
}
.dropdown-content a {
color: var(--text-dark);
padding: 14px 20px;
text-decoration: none;
display: block;
border-radius: 0;
position: relative;
transition: all 0.2s ease;
font-weight: 500;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.dropdown-content a:last-child {
border-bottom: none;
}
.dropdown-content a::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 3px;
background: var(--accent-color);
transform: scaleY(0);
transition: transform 0.2s ease;
}
.dropdown-content a:hover {
background: linear-gradient(90deg, rgba(13, 43, 92, 0.05), transparent);
color: var(--primary-color);
padding-left: 25px;
}
.dropdown-content a:hover::before {
transform: scaleY(1);
}
.dropdown:hover .dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Dropdown toggle arrow animation */
.dropdown > a i {
transition: transform 0.3s ease;
}
.dropdown:hover > a i {
transform: rotate(180deg);
}
.mobile-menu {
display: none;
font-size: 24px;
cursor: pointer;
z-index: 1002;
position: relative;
padding: 10px;
background: rgba(0,0,0,0.1);
border-radius: 4px;
transition: background 0.2s ease;
}
.mobile-menu:hover {
background: rgba(0,0,0,0.2);
}
.mobile-nav {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100vh;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
z-index: 1000;
padding: 80px 20px 40px;
transition: right 0.3s ease-in-out;
box-shadow: -5px 0 15px rgba(0,0,0,0.1);
overflow-y: auto;
}
.mobile-nav.active {
right: 0;
}
.mobile-nav a {
display: block;
color: var(--white);
text-decoration: none;
padding: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
font-weight: 500;
transition: var(--transition);
}
.mobile-nav a:hover {
background: rgba(255,255,255,0.1);
padding-left: 20px;
}
.mobile-nav .dropdown-content {
position: static;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
display: none;
min-width: auto;
padding: 8px 0;
margin: 8px 15px;
border-radius: 8px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
max-height: 0;
}
to {
opacity: 1;
transform: translateY(0);
max-height: 200px;
}
}
.mobile-nav .dropdown-content a {
border-bottom: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.9);
padding: 12px 20px;
margin: 0;
position: relative;
transition: all 0.2s ease;
font-weight: 400;
}
.mobile-nav .dropdown-content a:last-child {
border-bottom: none;
}
.mobile-nav .dropdown-content a::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 3px;
background: var(--accent-color);
transform: scaleY(0);
transition: transform 0.2s ease;
}
.mobile-nav .dropdown-content a:hover {
background: rgba(255, 255, 255, 0.15);
color: var(--accent-color);
padding-left: 25px;
}
.mobile-nav .dropdown-content a:hover::before {
transform: scaleY(1);
}
.mobile-nav .dropdown-toggle {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
overflow: hidden;
}
.mobile-nav .dropdown-toggle::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 0;
background: var(--accent-color);
transition: width 0.3s ease;
}
.mobile-nav .dropdown-toggle.active::after {
width: 100%;
}
.mobile-nav .dropdown-toggle i {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 14px;
}
.mobile-nav .dropdown-toggle.active i {
transform: rotate(180deg);
color: var(--accent-color);
}
.mobile-nav-close {
position: absolute;
top: 20px;
right: 20px;
color: var(--white);
font-size: 24px;
cursor: pointer;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.overlay.active {
opacity: 1;
visibility: visible;
}
/* ===== HERO BANNER SLIDER ===== */
.hero {
position: relative;
height: 100vh;
overflow: hidden;
color: var(--white);
text-align: center;
min-height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
background: linear-gradient(135deg, #0a1a2e 0%, #16213e 25%, #1e3c72 50%, #2a5298 75%, #3a6ac8 100%);
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 20%, rgba(255, 204, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(26, 65, 137, 0.2) 0%, transparent 50%),
linear-gradient(45deg, rgba(13, 43, 92, 0.1) 0%, rgba(58, 106, 200, 0.1) 100%);
z-index: 1;
animation: gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.hero-slider {
position: relative;
width: 100%;
height: 100%;
z-index: 2;
}
.hero-slides {
position: relative;
width: 100%;
height: 100%;
}
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);
transform: scale(1.08) translateY(20px);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hero-slide.active {
opacity: 1;
transform: scale(1) translateY(0);
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
overflow: hidden;
}
.hero-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
filter: brightness(0.6) contrast(1.1) saturate(1.2);
transition: transform 12s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-slide.active .hero-image {
transform: scale(1.08);
}
.hero-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse at top left, rgba(255, 204, 0, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at bottom right, rgba(58, 106, 200, 0.2) 0%, transparent 60%),
linear-gradient(135deg,
rgba(10, 26, 46, 0.95) 0%,
rgba(22, 33, 62, 0.9) 25%,
rgba(30, 60, 114, 0.85) 50%,
rgba(42, 82, 152, 0.8) 75%,
rgba(58, 106, 200, 0.75) 100%);
z-index: -1;
animation: overlayPulse 6s ease-in-out infinite alternate;
}
@keyframes overlayPulse {
0% { opacity: 0.9; }
100% { opacity: 1; }
}
.hero-gradient-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(255, 204, 0, 0.12) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(30, 60, 114, 0.15) 0%, transparent 50%),
linear-gradient(45deg,
rgba(10, 26, 46, 0.98) 0%,
rgba(22, 33, 62, 0.95) 30%,
rgba(30, 60, 114, 0.92) 60%,
rgba(58, 106, 200, 0.88) 100%);
animation: gradientFlow 10s ease-in-out infinite;
}
@keyframes gradientFlow {
0%, 100% { transform: translateX(0) translateY(0); }
25% { transform: translateX(-2px) translateY(-1px); }
50% { transform: translateX(1px) translateY(2px); }
75% { transform: translateX(2px) translateY(-1px); }
}
/* Banner Slider Container */
.banner-slider {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.banner-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.banner-slide.active {
opacity: 1;
}
.banner-slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.9) contrast(1.1);
transition: transform 8s ease-out;
z-index: 1;
}
.banner-slide.active img {
transform: scale(1.05);
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(10, 26, 46, 0.3) 0%,
rgba(30, 60, 114, 0.2) 50%,
rgba(58, 106, 200, 0.1) 100%
);
z-index: 2;
}
.hero-content {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 3;
background: rgba(0, 0, 0, 0.3);
padding: 60px 50px;
border-radius: 24px;
backdrop-filter: blur(20px) saturate(180%);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.15);
animation: heroContentEntrance 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
transform: translateY(30px);
opacity: 0;
}
@keyframes heroContentEntrance {
0% {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
60% {
opacity: 0.8;
transform: translateY(-5px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4.5rem);
margin-bottom: 30px;
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.8),
0 4px 8px rgba(0, 0, 0, 0.6),
0 8px 16px rgba(0, 0, 0, 0.4);
font-weight: 900;
color: var(--white);
letter-spacing: -1px;
line-height: 1.1;
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 50%, #e6f3ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: textGlow 3s ease-in-out infinite alternate;
}
@keyframes textGlow {
0% {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}
100% {
filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}
}
.hero p {
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
margin-bottom: 40px;
opacity: 0.95;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.8),
0 2px 4px rgba(0, 0, 0, 0.6);
line-height: 1.7;
color: rgba(255, 255, 255, 0.95);
max-width: 85%;
margin-left: auto;
margin-right: auto;
font-weight: 400;
letter-spacing: 0.3px;
}
.cta-buttons {
display: flex;
gap: 25px;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
animation: buttonsSlideUp 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}
@keyframes buttonsSlideUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.cta-buttons .btn {
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.4),
0 4px 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-buttons .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s;
}
.cta-buttons .btn:hover::before {
left: 100%;
}
.cta-buttons .btn:hover {
transform: translateY(-5px) scale(1.05);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.5),
0 8px 15px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Banner Navigation */
.banner-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 24px;
padding: 15px 20px;
cursor: pointer;
border-radius: 50%;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
z-index: 4;
}
.banner-nav:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.1);
}
.banner-nav.prev {
left: 30px;
}
.banner-nav.next {
right: 30px;
}
/* Banner Dots */
.banner-dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 4;
}
.banner-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.banner-dot.active {
background: white;
transform: scale(1.2);
border-color: rgba(255, 255, 255, 0.3);
}
/* Auto-play Progress Bar */
.banner-progress {
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, #ffcc00, #3a6ac8);
z-index: 4;
transform-origin: left;
animation: progressBar 5s linear infinite;
}
@keyframes progressBar {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
.banner-progress.paused {
animation-play-state: paused;
}
/* Hero Content Minimal for Second Slide */
.hero-slide-content {
position: relative;
z-index: 5;
max-width: 600px;
background: rgba(0, 0, 0, 0.7);
padding: 40px;
border-radius: 15px;
backdrop-filter: blur(15px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
transform: translateY(0);
transition: transform 0.5s ease, box-shadow 0.5s ease;
margin: 0 auto;
}
.hero-content-minimal {
background: transparent;
padding: 20px;
backdrop-filter: none;
}
.btn-large {
padding: 20px 50px;
font-size: 1.4rem;
font-weight: 700;
}
/* Hero Navigation */
.hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.3);
width: 65px;
height: 65px;
border-radius: 50%;
color: var(--white);
font-size: 22px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
backdrop-filter: blur(15px) saturate(180%);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.4),
0 4px 10px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
opacity: 0.7;
}
.hero-nav:hover {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
transform: translateY(-50%) scale(1.15);
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.5),
0 6px 15px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
opacity: 1;
border-color: rgba(255, 255, 255, 0.6);
}
.hero-nav:active {
transform: translateY(-50%) scale(1.05);
}
/* Staggered Animations */
.slide-up {
animation: slideUpFade 1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.slide-up.stagger-1 {
animation-delay: 0.2s;
}
.slide-up.stagger-2 {
animation-delay: 0.4s;
}
@keyframes slideUpFade {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.hero-prev {
left: 40px;
}
.hero-next {
right: 40px;
}
/* Hero Dots */
.hero-dots {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 10;
padding: 15px 25px;
background: rgba(0, 0, 0, 0.25);
border-radius: 50px;
backdrop-filter: blur(15px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.hero-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 2px solid transparent;
}
.hero-dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: var(--white);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.hero-dot.active {
background: var(--accent-color);
transform: scale(1.4);
box-shadow:
0 0 20px rgba(255, 204, 0, 0.7),
0 4px 12px rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.4);
}
.hero-dot.active::before {
width: 8px;
height: 8px;
}
.hero-dot:hover {
background: rgba(255, 204, 0, 0.7);
transform: scale(1.2);
box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}
/* Hero Gradient Background for Second Slide */
.hero-gradient-bg {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
position: absolute;
top: 0;
left: 0;
opacity: 0.9;
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite;
box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.2);
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
25% { background-position: 50% 100%; }
50% { background-position: 100% 50%; }
75% { background-position: 50% 0%; }
100% { background-position: 0% 50%; }
}
/* ===== INDUSTRY EXCELLENCE SECTION ===== */
.industry-excellence {
background: linear-gradient(135deg, var(--light-gray), #f0f4f8);
position: relative;
overflow: hidden;
}
.industry-excellence::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 300px;
height: 300px;
background: linear-gradient(135deg, var(--accent-color), #ffed4e);
border-radius: 50%;
opacity: 0.1;
z-index: 0;
}
.section-badge {
display: inline-block;
background: linear-gradient(135deg, var(--accent-color), #ffed4e);
color: var(--primary-color);
padding: 8px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
}
.excellence-slider {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 30px 0;
background: linear-gradient(to bottom, rgba(245, 245, 245, 0.05), rgba(245, 245, 245, 0));
border-radius: 30px;
}
.excellence-slider::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent 50%);
border-radius: 40px;
z-index: -1;
}
.excellence-container {
position: relative;
height: 500px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.05);
}
.excellence-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateX(100px) scale(0.95);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
filter: blur(5px);
}
.excellence-slide.active {
opacity: 1;
transform: translateX(0) scale(1);
filter: blur(0);
animation: slideAppear 0.8s forwards;
}
@keyframes slideAppear {
0% {
opacity: 0;
transform: translateX(50px) scale(0.95);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
.excellence-card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
transition: var(--transition);
border: 1px solid rgba(255, 215, 0, 0.1);
backdrop-filter: blur(5px);
}
.excellence-card:hover {
transform: translateY(-10px) rotate(1deg);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 215, 0, 0.3);
}
.card-icon {
position: absolute;
top: 20px;
right: 20px;
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--accent-color), #ffed4e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: var(--primary-color);
z-index: 2;
box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
animation: pulse 2s infinite;
transition: all 0.4s ease;
}
.excellence-card:hover .card-icon {
transform: scale(1.1) rotate(-10deg);
box-shadow: 0 15px 30px rgba(255, 215, 0, 0.5);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
}
70% {
box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
}
}
.card-image {
position: relative;
height: 250px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.excellence-card:hover .card-image img {
transform: scale(1.1);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(30, 60, 114, 0.7), rgba(42, 82, 152, 0.7));
opacity: 0.8;
transition: all 0.5s ease;
}
.excellence-card:hover .image-overlay {
background: linear-gradient(135deg, rgba(30, 60, 114, 0.5), rgba(42, 82, 152, 0.5));
opacity: 0.6;
}
.card-content {
padding: 30px;
flex: 1;
display: flex;
flex-direction: column;
}
.card-content h3 {
color: var(--primary-color);
font-size: 1.8rem;
margin-bottom: 15px;
font-weight: 700;
position: relative;
display: inline-block;
}
.card-content h3::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-color), transparent);
transition: width 0.5s ease;
}
.excellence-card:hover .card-content h3::after {
width: 100%;
}
.card-content p {
color: var(--white);
line-height: 1.6;
margin-bottom: 20px;
flex: 1;
}
.card-features {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.feature-tag {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--white);
padding: 8px 18px;
border-radius: 25px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
margin: 3px;
}
.feature-tag::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
opacity: 0;
transform: scale(0.5);
transition: all 0.5s ease;
}
.excellence-card:hover .feature-tag {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.excellence-card:hover .feature-tag::before {
opacity: 1;
transform: scale(1);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
transform: scale(0.5) rotate(0deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2) rotate(360deg);
opacity: 0;
}
}
/* Excellence Navigation */
.excellence-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(135deg, var(--white), #f5f5f5);
border: 2px solid rgba(255, 215, 0, 0.2);
width: 65px;
height: 65px;
border-radius: 50%;
color: var(--primary-color);
font-size: 22px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 0 15px rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.excellence-nav::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--accent-color), #ffed4e);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
border-radius: 50%;
}
.excellence-nav:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 15px 40px rgba(30, 60, 114, 0.3);
border-color: var(--accent-color);
}
.excellence-nav:hover::before {
opacity: 0.2;
}
.excellence-nav:active {
transform: translateY(-50%) scale(0.95);
}
.excellence-prev {
left: -30px;
}
.excellence-next {
right: -30px;
}
/* Excellence Dots */
.excellence-dots {
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 10;
}
.excellence-dot {
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(30, 60, 114, 0.3);
cursor: pointer;
transition: var(--transition);
position: relative;
border: 2px solid transparent;
}
.excellence-dot.active {
background: var(--accent-color);
transform: scale(1.2);
border: 2px solid var(--white);
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.excellence-dot:hover {
background: var(--primary-color);
transform: scale(1.1);
border: 2px solid rgba(255, 255, 255, 0.5);
}
.excellence-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid var(--accent-color);
opacity: 0;
transition: all 0.3s ease;
}
.excellence-dot.active::after {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
animation: ripple 1.5s infinite;
}
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
/* Card Placeholder Background */
.card-placeholder-bg {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
position: relative;
overflow: hidden;
}
.card-placeholder-bg::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
opacity: 0.3;
animation: rotate 15s linear infinite;
}
.card-placeholder-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: 100px 100px;
opacity: 0.1;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* ===== SECTIONS ===== */
.section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 60px;
}
.section-title h2 {
color: var(--primary-color);
margin-bottom: 15px;
}
.section-title p {
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
color: var(--white);
}
/* ===== STATS SECTION ===== */
.stat-item {
background: var(--white);
padding: 40px 30px;
border-radius: 20px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.1),
0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(255, 215, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(0);
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--accent-color), #ffed4e);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.stat-item::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 204, 0, 0.05) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.stat-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 10px 25px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(255, 204, 0, 0.2);
border-color: rgba(255, 204, 0, 0.3);
}
.stat-item:hover::before {
transform: scaleX(1);
}
.stat-item:hover::after {
opacity: 1;
}
.stat-number {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 900;
color: var(--primary-color);
margin-bottom: 15px;
position: relative;
z-index: 2;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: block;
}
.stat-item:hover .stat-number {
transform: scale(1.1);
filter: drop-shadow(0 4px 8px rgba(30, 60, 114, 0.3));
}
.stat-label {
font-size: 1.1rem;
color: var(--text-gray);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
z-index: 2;
transition: color 0.3s ease;
}
.stat-item:hover .stat-label {
color: var(--primary-color);
}
/* Animated Counter Effect */
@keyframes countUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.8);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.stat-number.animate {
animation: countUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Staggered Animation for Stats */
.stat-item:nth-child(1) {
animation-delay: 0.1s;
}
.stat-item:nth-child(2) {
animation-delay: 0.2s;
}
.stat-item:nth-child(3) {
animation-delay: 0.3s;
}
.stat-item:nth-child(4) {
animation-delay: 0.4s;
}
/* ===== ABOUT SECTION ===== */
.about-section {
padding: 6rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.about-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.about-text .section-title {
text-align: left;
margin-bottom: 2rem;
}
.about-description {
margin-bottom: 3rem;
}
.about-description p {
font-size: 1.1rem;
line-height: 1.8;
color: var(--text-color);
margin-bottom: 1.5rem;
}
.about-features {
margin-bottom: 3rem;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--white);
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.feature-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transition: left 0.4s ease;
}
.feature-item:hover::before {
left: 0;
}
.feature-item:hover {
transform: translateX(8px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: rgba(30, 60, 114, 0.2);
}
.feature-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.2rem;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.feature-item:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.feature-content h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 0.5rem;
}
.feature-content p {
font-size: 0.95rem;
color: var(--text-color);
line-height: 1.6;
margin: 0;
}
.about-cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.about-visual {
position: relative;
}
.about-image-container {
position: relative;
margin-bottom: 2rem;
}
.about-image.main-image {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
transition: transform 0.4s ease;
}
.about-image.main-image:hover {
transform: scale(1.02);
}
.floating-card {
position: absolute;
bottom: -20px;
right: -20px;
background: var(--white);
padding: 1.5rem;
border-radius: 16px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
animation: floatCard 3s ease-in-out infinite;
}
.floating-card .card-content {
display: flex;
align-items: center;
gap: 1rem;
}
.floating-card .card-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1rem;
}
.floating-card .card-text h5 {
font-size: 1.1rem;
font-weight: 600;
color: var(--heading-color);
margin: 0 0 0.25rem 0;
}
.floating-card .card-text p {
font-size: 0.85rem;
color: var(--text-color);
margin: 0;
}
.about-gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.gallery-item {
position: relative;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: translateY(-5px);
}
.gallery-image {
width: 100%;
height: 150px;
object-fit: cover;
transition: transform 0.4s ease;
}
.gallery-item:hover .gallery-image {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: var(--white);
padding: 1rem;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-overlay {
transform: translateY(0);
}
.gallery-overlay span {
font-size: 0.9rem;
font-weight: 500;
}
@keyframes floatCard {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Responsive Design for About Section */
@media (max-width: 768px) {
.about-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-visual {
order: -1;
}
.floating-card {
position: static;
margin-top: 1rem;
}
.about-cta {
justify-content: center;
}
.feature-item {
padding: 1rem;
}
.about-gallery {
grid-template-columns: 1fr;
}
}
/* ===== SERVICES SECTION ===== */
.services-section {
padding: 6rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(30, 60, 114, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 204, 0, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
position: relative;
z-index: 1;
}
.service-card {
background: var(--white);
border-radius: 20px;
padding: 2.5rem;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(30, 60, 114, 0.2);
}
.service-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(30, 60, 114, 0.95), rgba(255, 204, 0, 0.95));
opacity: 0;
transition: opacity 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.service-card:hover .service-overlay {
opacity: 1;
}
.service-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2rem;
margin-bottom: 1.5rem;
position: relative;
z-index: 3;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
}
.service-card:hover .service-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 15px 35px rgba(30, 60, 114, 0.4);
}
.service-content {
position: relative;
z-index: 3;
}
.service-content h3 {
font-size: 1.4rem;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 1rem;
transition: color 0.3s ease;
}
.service-card:hover .service-content h3 {
color: var(--white);
}
.service-content p {
font-size: 1rem;
line-height: 1.6;
color: var(--text-color);
margin-bottom: 1.5rem;
transition: color 0.3s ease;
}
.service-card:hover .service-content p {
color: rgba(255, 255, 255, 0.9);
}
.service-features {
list-style: none;
padding: 0;
margin-bottom: 2rem;
}
.service-features li {
padding: 0.5rem 0;
color: var(--text-color);
font-size: 0.9rem;
position: relative;
padding-left: 1.5rem;
transition: color 0.3s ease;
}
.service-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: bold;
transition: color 0.3s ease;
}
.service-card:hover .service-features li {
color: rgba(255, 255, 255, 0.9);
}
.service-card:hover .service-features li::before {
color: var(--white);
}
.service-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
position: relative;
}
.service-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
}
.service-link:hover::after {
width: 100%;
}
.service-card:hover .service-link {
color: var(--white);
}
.service-card:hover .service-link::after {
background: var(--white);
}
.service-link i {
transition: transform 0.3s ease;
}
.service-link:hover i {
transform: translateX(5px);
}
.services-cta {
text-align: center;
margin-top: 3rem;
}
.btn-large {
padding: 1rem 2.5rem;
font-size: 1.1rem;
font-weight: 600;
}
/* Service Card Staggered Animation */
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
/* Responsive Design for Services */
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.service-card {
padding: 2rem;
}
.service-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
/* ===== CARDS ===== */
.card {
background: var(--white);
border-radius: 15px;
box-shadow: var(--shadow);
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
position: relative;
border: 1px solid var(--border-color);
}
.card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.card:hover .card-img img {
transform: scale(1.05);
}
.card-img {
height: 220px; /* Increased height */
background: linear-gradient(135deg, var(--light-gray), var(--border-color));
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.card-img img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.card-content {
padding: 25px;
}
/* Modern Card Variations */
.card-glass {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.card-accent {
position: relative;
}
.card-accent::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--accent-color);
}
.card-hover-reveal {
position: relative;
overflow: hidden;
}
.card-hover-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
color: var(--white);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.card-hover-reveal:hover .card-hover-content {
transform: translateY(0);
}
.card-content h3 {
color: var(--primary-color);
margin-bottom: 15px;
}
/* ===== GRID LAYOUTS ===== */
.grid {
display: grid;
gap: 30px;
}
.grid-2 {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.grid-4 {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* ===== SLIDER/CAROUSEL ===== */
.slider {
position: relative;
overflow: hidden;
border-radius: 15px;
}
.slider-container {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
position: relative;
}
.slide img {
width: 100%;
height: 400px;
object-fit: cover;
}
.slide-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: var(--white);
padding: 30px;
}
.slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.9);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
transition: var(--transition);
}
.slider-nav:hover {
background: var(--white);
}
.slider-prev {
left: 20px;
}
.slider-next {
right: 20px;
}
/* ===== ACCORDION ===== */
.accordion {
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
}
.accordion-item {
border-bottom: 1px solid var(--border-color);
}
.accordion-header {
background: var(--light-gray);
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--transition);
}
.accordion-header:hover {
background: var(--border-color);
}
.accordion-header h3 {
margin: 0;
color: var(--primary-color);
}
.accordion-content {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content.active {
padding: 20px;
max-height: 500px;
}
/* ===== FORMS ===== */
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: var(--text-dark);
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 1rem;
transition: var(--transition);
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
/* ===== FOOTER ===== */
footer {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), #0a1f45);
color: var(--white);
padding: 60px 0 20px;
position: relative;
overflow: hidden;
}
.footer-logo {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
position: relative;
z-index: 1;
}
.footer-logo img {
height: 80px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 255, 255, 0.1);
padding: 5px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(5px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.footer-logo img:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.footer-tagline {
margin-top: 10px;
font-size: 1.1rem;
font-weight: 500;
color: var(--accent-color);
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-color), #ffed4e, var(--accent-color));
z-index: 1;
}
footer::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.1;
z-index: 0;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 50px;
margin-bottom: 50px;
position: relative;
z-index: 1;
padding: 20px 10px;
border-radius: 10px;
background: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.footer-section h3 {
color: var(--accent-color);
position: relative;
padding-bottom: 15px;
margin-bottom: 25px;
font-size: 1.4rem;
letter-spacing: 0.5px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--accent-color), transparent);
border-radius: 3px;
transition: width 0.3s ease;
}
.footer-section:hover h3::after {
width: 100px;
}
.footer-section p {
color: #ddd;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
transition: transform 0.3s ease;
}
.footer-section p:hover {
transform: translateX(5px);
}
.footer-section p i {
color: var(--accent-color);
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
padding: 8px;
transition: all 0.3s ease;
}
.footer-section p:hover i {
transform: scale(1.2);
background: rgba(255, 204, 0, 0.2);
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 10px;
}
.footer-section ul {
list-style: none;
padding-left: 5px;
}
.footer-section ul li {
margin-bottom: 12px;
position: relative;
padding-left: 20px;
transition: transform 0.3s ease;
}
.footer-section ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent-color);
opacity: 0.7;
transition: all 0.3s ease;
}
.footer-section ul li:hover {
transform: translateX(5px);
}
.footer-section ul li:hover::before {
opacity: 1;
transform: translateX(3px);
}
.footer-section ul li a {
color: #ddd;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
display: inline-block;
}
.footer-section ul li a::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background: var(--accent-color);
transition: width 0.3s ease;
}
.footer-section ul li a:hover {
color: var(--accent-color);
}
.footer-section ul li a:hover::after {
width: 100%;
}
.social-icons {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
color: var(--white);
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-icons a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: var(--accent-color);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.4s ease, height 0.4s ease;
z-index: -1;
}
.social-icons a:hover {
color: var(--primary-color);
transform: translateY(-5px) scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.social-icons a:hover::before {
width: 150%;
height: 150%;
}
.social-icons a i {
position: relative;
z-index: 1;
transition: transform 0.3s ease;
}
.social-icons a:hover i {
transform: scale(1.2);
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 204, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 204, 0, 0);
}
}
.social-icons a:active {
animation: pulse 0.8s;
transform: scale(0.95);
}
.footer-bottom {
text-align: center;
padding: 25px 0 10px;
position: relative;
color: #ddd;
margin-top: 20px;
z-index: 1;
}
.footer-bottom::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}
.footer-bottom p {
margin-bottom: 10px;
font-size: 0.95rem;
opacity: 0.9;
transition: opacity 0.3s ease;
}
.footer-bottom p:hover {
opacity: 1;
}
.footer-bottom a {
color: var(--accent-color);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
padding: 0 5px;
}
.footer-bottom a::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background: var(--accent-color);
transition: width 0.3s ease;
}
.footer-bottom a:hover {
color: #fff;
}
.footer-bottom a:hover::after {
width: 100%;
}
/* ===== UTILITIES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 0.6s ease-in;
}
.animate-fade-up {
animation: fadeInUp 0.6s ease-out;
}
/* Footer animations */
@keyframes floatUp {
0% { transform: translateY(0); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
@keyframes glow {
0% { text-shadow: 0 0 5px rgba(255, 204, 0, 0.5); }
50% { text-shadow: 0 0 20px rgba(255, 204, 0, 0.8); }
100% { text-shadow: 0 0 5px rgba(255, 204, 0, 0.5); }
}
.footer-section {
animation: fadeInUp 0.8s ease-out;
animation-fill-mode: both;
}
.footer-section:nth-child(1) { animation-delay: 0.1s; }
.footer-section:nth-child(2) { animation-delay: 0.2s; }
.footer-section:nth-child(3) { animation-delay: 0.3s; }
.footer-section:nth-child(4) { animation-delay: 0.4s; }
.footer-logo img {
animation: floatUp 6s ease-in-out infinite;
}
.footer-tagline {
animation: glow 3s ease-in-out infinite;
}
/* Additional Modern Animations */
.slide-up {
animation: slideUp 0.8s ease-out forwards;
opacity: 0;
}
.hero-slide.active .hero-slide-content {
animation: fadeInScale 0.8s forwards;
}
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideUp {
from { transform: translateY(30px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.slide-in-left {
animation: slideInLeft 0.8s ease-out forwards;
opacity: 0;
}
@keyframes slideInLeft {
from { transform: translateX(-50px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.slide-in-right {
animation: slideInRight 0.8s ease-out forwards;
opacity: 0;
}
@keyframes slideInRight {
from { transform: translateX(50px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.bounce {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-20px); }
60% { transform: translateY(-10px); }
}
/* Staggered Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.3s; }
.stagger-3 { animation-delay: 0.5s; }
.stagger-4 { animation-delay: 0.7s; }
.stagger-5 { animation-delay: 0.9s; }
/* Hero slide staggered animations */
.hero-slide h1.slide-up { animation-delay: 0.2s; }
.hero-slide p.slide-up { animation-delay: 0.4s; }
.hero-slide .cta-buttons { animation-delay: 0.6s; opacity: 0; animation: slideUp 0.8s ease-out 0.6s forwards; }
/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 1200px) {
.container {
max-width: 960px;
}
h1 { font-size: 3rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.6rem; }
}
@media (max-width: 992px) {
.container {
max-width: 720px;
}
nav {
display: none;
}
.mobile-menu {
display: block;
}
.hero h1 {
font-size: 2.8rem;
}
.hero p {
font-size: 1.1rem;
}
.section-title h2 {
font-size: 2rem;
}
.cta-buttons {
flex-direction: column;
gap: 15px;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 300px;
}
.hero-content {
padding: 30px 20px;
}
}
@media (max-width: 768px) {
.top-bar-content {
flex-direction: column;
gap: 10px;
}
.contact-info {
flex-direction: column;
gap: 5px;
}
.header-content {
flex-direction: column;
text-align: center;
padding: 15px 0;
}
.logo {
margin-bottom: 15px;
justify-content: center;
}
.mobile-menu {
position: absolute;
top: 20px;
right: 20px;
z-index: 1002;
}
.hero h1 {
font-size: 2.2rem;
}
.hero p {
font-size: 1rem;
}
.hero-nav {
width: 40px;
height: 40px;
font-size: 16px;
}
.hero-prev {
left: 10px;
}
.hero-next {
right: 10px;
}
.section {
padding: 40px 0;
}
.section-title {
margin-bottom: 30px;
}
.section-title h2 {
font-size: 1.8rem;
}
.excellence-card {
padding: 20px;
}
.excellence-card h3 {
font-size: 1.4rem;
}
}
@media (max-width: 576px) {
.hero-content {
padding: 20px 15px;
}
.hero h1 {
font-size: 1.8rem;
margin-bottom: 15px;
}
.hero p {
font-size: 0.9rem;
margin-bottom: 20px;
}
.btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.section-title h2 {
font-size: 1.6rem;
}
.section-badge {
font-size: 0.8rem;
padding: 5px 10px;
}
}
nav {
display: none;
}
.mobile-menu {
display: block;
}
.hero-content {
padding: 30px 20px;
margin: 20px;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.grid-2,
.grid-3,
.grid-4 {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
.hero {
padding: 80px 0;
}
.hero h1 {
font-size: 2rem;
}
.section {
padding: 60px 0;
}
}
/* ===== LOADING STATES ===== */
.loading {
opacity: 0.6;
pointer-events: none;
}
.spinner {
border: 3px solid var(--border-color);
border-top: 3px solid var(--primary-color);
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== INDUSTRIES SECTION ===== */
.industries-section {
padding: 6rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.industries-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(30, 60, 114, 0.03) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(255, 204, 0, 0.03) 0%, transparent 50%);
pointer-events: none;
}
.industry-item {
background: var(--white);
border-radius: 20px;
padding: 2.5rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
cursor: pointer;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.industry-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.industry-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(30, 60, 114, 0.95), rgba(255, 204, 0, 0.95));
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.industry-item:hover::before {
transform: scaleX(1);
}
.industry-item:hover::after {
opacity: 1;
}
.industry-item:hover {
transform: translateY(-15px) scale(1.02);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(30, 60, 114, 0.2);
}
.industry-icon {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2.5rem;
margin-bottom: 2rem;
position: relative;
z-index: 2;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 30px rgba(30, 60, 114, 0.3);
}
.industry-item:hover .industry-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 20px 40px rgba(30, 60, 114, 0.4);
background: linear-gradient(135deg, var(--white), #f0f8ff);
color: var(--primary-color);
}
.industry-item h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 1rem;
position: relative;
z-index: 2;
transition: color 0.3s ease;
}
.industry-item:hover h3 {
color: var(--white);
}
.industry-item p {
font-size: 1rem;
line-height: 1.6;
color: var(--text-color);
margin: 0;
position: relative;
z-index: 2;
transition: color 0.3s ease;
flex-grow: 1;
display: flex;
align-items: center;
}
.industry-item:hover p {
color: rgba(255, 255, 255, 0.9);
}
/* Industry Item Staggered Animation */
.industry-item:nth-child(1) { animation-delay: 0.1s; }
.industry-item:nth-child(2) { animation-delay: 0.2s; }
.industry-item:nth-child(3) { animation-delay: 0.3s; }
.industry-item:nth-child(4) { animation-delay: 0.4s; }
/* Pulse animation for industry icons */
@keyframes industryPulse {
0% {
box-shadow: 0 10px 30px rgba(30, 60, 114, 0.3);
}
50% {
box-shadow: 0 15px 40px rgba(30, 60, 114, 0.5);
}
100% {
box-shadow: 0 10px 30px rgba(30, 60, 114, 0.3);
}
}
.industry-icon {
animation: industryPulse 3s ease-in-out infinite;
}
.industry-item:hover .industry-icon {
animation: none;
}
/* Responsive Design for Industries */
@media (max-width: 768px) {
.industry-item {
padding: 2rem 1.5rem;
}
.industry-icon {
width: 80px;
height: 80px;
font-size: 2rem;
margin-bottom: 1.5rem;
}
.industry-item h3 {
font-size: 1.3rem;
}
.industry-item p {
font-size: 0.95rem;
}
}
/* ===== ACCESSIBILITY ===== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--primary-color);
color: white;
padding: 10px 15px;
z-index: 1100;
text-decoration: none;
font-weight: 600;
border-radius: 0 0 4px 0;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 0;
outline: 3px solid var(--accent-color);
}
/* High contrast text helpers */
.text-contrast-high {
color: var(--text-dark);
font-weight: 600;
}
.text-on-dark {
color: var(--white);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Focus styles for better accessibility */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
outline: 3px solid rgba(26, 65, 137, 0.4);
outline-offset: 2px;
}
/* Form accessibility improvements */
input, select, textarea {
font-size: 16px; /* Prevents zoom on iOS */
padding: 12px;
border: 2px solid var(--border-color);
border-radius: 6px;
transition: border-color 0.2s ease;
}
input:focus, select:focus, textarea:focus {
border-color: var(--primary-color);
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--text-dark);
}
/* Error states for form elements */
.form-error {
border-color: var(--error) !important;
}
.error-message {
color: var(--error);
font-size: 14px;
margin-top: 5px;
font-weight: 500;
}
/* ===== PRINT STYLES ===== */
@media print {
.no-print {
display: none !important;
}
body {
font-size: 12pt;
line-height: 1.4;
}
.hero {
background: none !important;
color: var(--text-dark) !important;
}
}
/* ===== ADDITIONAL STYLES FOR NEW PAGES ===== */
/* ===== BREADCRUMB ===== */
.breadcrumb {
background: var(--light-gray);
padding: 15px 0;
border-bottom: 1px solid var(--border-color);
}
.breadcrumb a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}
.breadcrumb a:hover {
color: var(--secondary-color);
}
.breadcrumb span {
color: var(--text-light);
margin: 0 10px;
}
/* ===== PAGE HEADER ===== */
.page-header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--white);
padding: 80px 0;
text-align: center;
}
.page-header h1 {
font-size: 3rem;
margin-bottom: 15px;
}
.page-header p {
font-size: 1.2rem;
opacity: 0.9;
color: var(--white);
}
/* ===== SERVICES PAGE STYLES ===== */
.services-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.service-highlight {
text-align: center;
padding: 30px;
background: var(--white);
border-radius: 15px;
box-shadow: var(--shadow);
transition: var(--transition);
}
.service-highlight:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.highlight-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--accent-color), #ffed4e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 2rem;
color: var(--primary-color);
}
.service-content h3 {
color: var(--primary-color);
margin-bottom: 20px;
}
.service-features,
.service-applications {
margin: 20px 0;
}
.service-features h4,
.service-applications h4 {
color: var(--primary-color);
margin-bottom: 10px;
}
.service-features ul,
.service-applications ul {
list-style: none;
padding-left: 0;
}
.service-features li,
.service-applications li {
padding: 5px 0;
border-bottom: 1px solid var(--border-color);
}
.service-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 15px;
}
.finishing-services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.finishing-item {
background: var(--white);
padding: 30px;
border-radius: 15px;
box-shadow: var(--shadow);
text-align: center;
}
.finishing-icon {
width: 60px;
height: 60px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.5rem;
color: var(--primary-color);
}
.process-flow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 40px;
}
.process-step {
text-align: center;
position: relative;
}
.step-number {
width: 60px;
height: 60px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
/* ===== PRODUCTS PAGE STYLES ===== */
.product-filters {
text-align: center;
margin-bottom: 40px;
}
.filter-buttons {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
.filter-btn {
padding: 10px 20px;
border: 2px solid var(--primary-color);
background: transparent;
color: var(--primary-color);
border-radius: 25px;
cursor: pointer;
transition: var(--transition);
font-weight: 500;
}
.filter-btn:hover,
.filter-btn.active {
background: var(--primary-color);
color: var(--white);
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.product-item {
background: var(--white);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.product-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.product-image {
position: relative;
height: 250px;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(30, 60, 114, 0.9);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition);
}
.product-item:hover .product-overlay {
opacity: 1;
}
.product-info {
padding: 25px;
}
.product-category {
color: var(--accent-color);
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
margin-bottom: 10px;
}
.product-specs {
display: flex;
gap: 20px;
margin: 15px 0;
font-size: 0.9rem;
}
.materials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.material-card {
background: var(--white);
padding: 30px;
border-radius: 15px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
}
.material-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.material-icon {
width: 70px;
height: 70px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.8rem;
color: var(--primary-color);
}
.material-properties,
.material-applications {
text-align: left;
margin-top: 20px;
}
.material-properties h4,
.material-applications h4 {
color: var(--primary-color);
margin-bottom: 10px;
}
.quality-standards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.standard-item {
text-align: center;
padding: 30px;
}
.standard-icon {
width: 60px;
height: 60px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.5rem;
color: var(--primary-color);
}
/* ===== CASE STUDIES PAGE STYLES ===== */
.search-filter-section {
display: flex;
gap: 30px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
}
.search-box {
position: relative;
min-width: 300px;
}
.search-input {
width: 100%;
padding: 12px 50px 12px 15px;
border: 2px solid var(--border-color);
border-radius: 25px;
font-size: 1rem;
transition: var(--transition);
}
.search-input:focus {
border-color: var(--primary-color);
outline: none;
}
.search-btn {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: var(--primary-color);
color: var(--white);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
}
.search-btn:hover {
background: var(--secondary-color);
}
.filter-select {
padding: 12px 20px;
border: 2px solid var(--border-color);
border-radius: 25px;
background: var(--white);
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
}
.filter-select:focus {
border-color: var(--primary-color);
outline: none;
}
.case-studies-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
}
.case-study-card {
background: var(--white);
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.case-study-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.case-study-image {
position: relative;
height: 250px;
width: 100%;
overflow: hidden;
}
.case-study-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.case-study-category {
position: absolute;
top: 15px;
left: 15px;
background: var(--accent-color);
color: var(--primary-color);
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.case-study-content {
padding: 25px;
}
.case-study-meta {
display: flex;
gap: 20px;
margin: 15px 0;
font-size: 0.9rem;
color: var(--text-light);
flex-wrap: wrap;
}
.case-study-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.case-study-highlights {
margin: 20px 0;
}
.case-study-highlights h4 {
color: var(--primary-color);
margin-bottom: 10px;
}
.case-study-highlights ul {
list-style: none;
padding-left: 0;
}
.case-study-highlights li {
padding: 5px 0;
border-bottom: 1px solid var(--border-color);
position: relative;
padding-left: 20px;
}
.case-study-highlights li:before {
content: "✓";
position: absolute;
left: 0;
color: var(--accent-color);
font-weight: bold;
}
.case-study-actions {
display: flex;
gap: 15px;
margin-top: 20px;
flex-wrap: wrap;
}
.success-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.metric-card {
text-align: center;
padding: 30px;
}
.metric-icon {
width: 60px;
height: 60px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.5rem;
color: var(--primary-color);
}
.metric-number {
font-size: 2.5rem;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 10px;
}
.pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 40px;
}
.pagination-btn {
width: 40px;
height: 40px;
border: 2px solid var(--border-color);
background: var(--white);
color: var(--text-dark);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.pagination-btn:hover,
.pagination-btn.active {
background: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
}
/* ===== CONTACT PAGE STYLES ===== */
.contact-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.contact-info-card {
background: var(--white);
padding: 30px;
border-radius: 15px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
}
.contact-info-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.contact-icon {
width: 70px;
height: 70px;
background: var(--accent-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 1.8rem;
color: var(--primary-color);
}
.contact-form-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 50px;
align-items: start;
}
.form-intro {
background: var(--white);
padding: 30px;
border-radius: 15px;
box-shadow: var(--shadow);
}
.form-benefits h4 {
color: var(--primary-color);
margin: 20px 0 15px;
}
.form-benefits ul {
list-style: none;
padding-left: 0;
}
.form-benefits li {
padding: 8px 0;
display: flex;
align-items: center;
gap: 10px;
}
.form-benefits i {
color: var(--accent-color);
}
.contact-form {
background: var(--white);
padding: 40px;
border-radius: 15px;
box-shadow: var(--shadow);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(--text-dark);
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 2px solid var(--border-color);
border-radius: 8px;
font-size: 1rem;
transition: var(--transition);
}
.form-control:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}
.checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 0.9rem;
}
.checkbox-label input[type="checkbox"] {
margin-top: 3px;
}
.btn-submit {
width: 100%;
padding: 15px;
font-size: 1.1rem;
margin-top: 20px;
}
.map-container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: start;
}
.map-frame {
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow);
}
.map-info {
background: var(--white);
padding: 30px;
border-radius: 15px;
box-shadow: var(--shadow);
}
.facility-highlights h4,
.transportation-info h4 {
color: var(--primary-color);
margin: 20px 0 15px;
}
.facility-highlights ul {
list-style: none;
padding-left: 0;
}
.facility-highlights li {
padding: 8px 0;
display: flex;
align-items: center;
gap: 10px;
}
.facility-highlights i {
color: var(--accent-color);
width: 20px;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--white);
border-radius: 8px;
margin-bottom: 15px;
box-shadow: var(--shadow);
overflow: hidden;
}
.faq-question {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--light-gray);
transition: var(--transition);
}
.faq-question:hover {
background: var(--border-color);
}
.faq-question h3 {
margin: 0;
font-size: 1.1rem;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 20px;
}
.faq-answer p {
padding: 20px 0;
margin: 0;
color: var(--white);
}
/* ===== MODAL STYLES ===== */
.modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: var(--white);
margin: 5% auto;
padding: 0;
border-radius: 15px;
width: 90%;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
position: relative;
}
.close {
color: var(--text-light);
float: right;
font-size: 28px;
font-weight: bold;
position: absolute;
right: 20px;
top: 15px;
cursor: pointer;
z-index: 1;
}
.close:hover {
color: var(--text-dark);
}
.product-modal,
.case-study-modal {
padding: 30px;
}
.product-modal-header,
.case-study-modal-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid var(--border-color);
}
.product-modal-body,
.case-study-modal-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.product-modal-image img,
.case-study-modal-image img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 10px;
}
.specs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 15px;
}
.spec-item {
padding: 10px;
background: var(--light-gray);
border-radius: 5px;
font-size: 0.9rem;
}
.product-modal-actions,
.case-study-actions {
grid-column: 1 / -1;
display: flex;
gap: 15px;
justify-content: center;
margin-top: 30px;
}
/* ===== SUCCESS MESSAGE STYLES ===== */
.success-message {
margin-top: 20px;
}
.alert {
padding: 20px;
border-radius: 8px;
text-align: center;
}
.alert-success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.alert i {
font-size: 2rem;
margin-bottom: 15px;
display: block;
}
/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
.contact-form-container {
grid-template-columns: 1fr;
gap: 30px;
}
.map-container {
grid-template-columns: 1fr;
gap: 30px;
}
.product-modal-body,
.case-study-modal-body {
grid-template-columns: 1fr;
gap: 20px;
}
.form-row {
grid-template-columns: 1fr;
gap: 0;
}
.search-filter-section {
flex-direction: column;
gap: 20px;
}
.search-box {
min-width: 100%;
}
.case-studies-grid {
grid-template-columns: 1fr;
}
.products-grid {
grid-template-columns: 1fr;
}
.services-overview {
grid-template-columns: 1fr;
}
.finishing-services {
grid-template-columns: 1fr;
}
.process-flow {
grid-template-columns: 1fr;
}
.materials-grid {
grid-template-columns: 1fr;
}
.quality-standards {
grid-template-columns: 1fr;
}
.contact-overview {
grid-template-columns: 1fr;
}
.success-metrics {
grid-template-columns: 1fr;
}
.sitemap-container {
grid-template-columns: 1fr;
}
.quick-nav {
grid-template-columns: 1fr;
}
}
/* ===== TESTIMONIALS SECTION ===== */
.testimonials-section {
padding: 6rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(30, 60, 114, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 204, 0, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.testimonials-slider {
position: relative;
max-width: 900px;
margin: 0 auto;
overflow: hidden;
border-radius: 25px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}
.testimonials-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.testimonial-slide {
min-width: 100%;
opacity: 0;
transform: scale(0.95);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-slide.active {
opacity: 1;
transform: scale(1);
}
.testimonial-card {
background: var(--white);
padding: 3rem 2.5rem;
text-align: center;
position: relative;
min-height: 400px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 25px;
overflow: hidden;
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
}
.testimonial-quote {
position: relative;
margin-bottom: 2rem;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.quote-icon {
font-size: 3rem;
color: var(--accent-color);
opacity: 0.3;
margin-bottom: 1.5rem;
position: absolute;
top: -1rem;
left: 50%;
transform: translateX(-50%);
}
.testimonial-quote p {
font-size: 1.3rem;
line-height: 1.8;
color: var(--text-color);
font-style: italic;
margin: 0;
position: relative;
z-index: 1;
padding-top: 2rem;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin: 2rem 0;
padding: 1.5rem 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.author-avatar {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.8rem;
box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
position: relative;
overflow: hidden;
}
.author-avatar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.testimonial-card:hover .author-avatar::before {
transform: translateX(100%);
}
.author-info {
text-align: left;
}
.author-info h4 {
font-size: 1.3rem;
font-weight: 700;
color: var(--heading-color);
margin: 0 0 0.5rem 0;
}
.author-info span {
display: block;
color: var(--text-light);
font-size: 0.95rem;
margin-bottom: 0.3rem;
}
.author-info .company {
color: var(--primary-color);
font-weight: 600;
font-size: 1rem;
}
.testimonial-rating {
display: flex;
justify-content: center;
gap: 0.3rem;
margin-top: 1rem;
}
.testimonial-rating i {
color: var(--accent-color);
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.testimonial-card:hover .testimonial-rating i {
transform: scale(1.1);
}
/* Navigation Controls */
.testimonial-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.95);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.2rem;
color: var(--primary-color);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
backdrop-filter: blur(10px);
}
.testimonial-nav:hover {
background: var(--primary-color);
color: var(--white);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 12px 35px rgba(30, 60, 114, 0.3);
}
.testimonial-prev {
left: -25px;
}
.testimonial-next {
right: -25px;
}
/* Dots Indicator */
.testimonial-dots {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2rem;
position: relative;
z-index: 5;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--primary-color);
background: transparent;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.dot::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: var(--primary-color);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.dot:hover::before,
.dot.active::before {
width: 100%;
height: 100%;
}
.dot.active {
background: var(--primary-color);
transform: scale(1.3);
box-shadow: 0 4px 15px rgba(30, 60, 114, 0.4);
}
/* Auto-play indicator */
.dot.active::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 2px solid var(--accent-color);
border-radius: 50%;
animation: testimonialProgress 5s linear infinite;
}
@keyframes testimonialProgress {
0% {
transform: rotate(0deg);
border-color: var(--accent-color);
}
100% {
transform: rotate(360deg);
border-color: var(--primary-color);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.testimonials-section {
padding: 4rem 0;
}
.testimonials-slider {
margin: 0 1rem;
border-radius: 20px;
}
.testimonial-card {
padding: 2rem 1.5rem;
min-height: 350px;
}
.testimonial-quote p {
font-size: 1.1rem;
line-height: 1.6;
}
.author-avatar {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.author-info h4 {
font-size: 1.1rem;
}
.author-info span {
font-size: 0.9rem;
}
.testimonial-nav {
width: 45px;
height: 45px;
font-size: 1rem;
}
.testimonial-prev {
left: -22px;
}
.testimonial-next {
right: -22px;
}
.quote-icon {
font-size: 2.5rem;
}
}
@media (max-width: 480px) {
.testimonial-card {
padding: 1.5rem 1rem;
min-height: 320px;
}
.testimonial-author {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.author-info {
text-align: center;
}
.testimonial-nav {
display: none;
}
.testimonial-dots {
margin-top: 1.5rem;
}
}
/* ===== SITEMAP PAGE STYLES ===== */
.sitemap-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 40px;
}
.sitemap-section {
background: var(--white);
padding: 30px;
border-radius: 15px;
box-shadow: var(--shadow);
}
.sitemap-section h3 {
color: var(--primary-color);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 1.3rem;
}
.sitemap-section h3 i {
color: var(--accent-color);
}
.sitemap-links {
display: flex;
flex-direction: column;
gap: 15px;
}
.sitemap-link {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px;
background: var(--light-gray);
border-radius: 8px;
text-decoration: none;
color: var(--text-dark);
transition: var(--transition);
border: 2px solid transparent;
}
.sitemap-link:hover {
background: var(--white);
border-color: var(--accent-color);
transform: translateX(5px);
}
.sitemap-link.main-page {
background: linear-gradient(135deg, var(--light-gray), #e8f4fd);
border-left: 4px solid var(--primary-color);
}
.sitemap-link.active {
background: var(--accent-color);
color: var(--primary-color);
border-color: var(--primary-color);
}
.sitemap-link.external {
background: linear-gradient(135deg, var(--light-gray), #fff3cd);
border-left: 4px solid var(--accent-color);
}
.sitemap-link i {
color: var(--primary-color);
font-size: 1.2rem;
margin-top: 2px;
min-width: 20px;
}
.sitemap-link span {
font-weight: 600;
font-size: 1.1rem;
margin-bottom: 5px;
display: block;
}
.sitemap-link small {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.4;
}
.quick-nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.quick-nav-category {
background: var(--white);
padding: 25px;
border-radius: 15px;
box-shadow: var(--shadow);
}
.quick-nav-category h3 {
color: var(--primary-color);
margin-bottom: 20px;
font-size: 1.2rem;
text-align: center;
}
.quick-nav-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.quick-nav-links a {
color: var(--text-dark);
text-decoration: none;
padding: 8px 0;
border-bottom: 1px solid var(--border-color);
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.quick-nav-links a:before {
content: "→";
color: var(--accent-color);
font-weight: bold;
}
.quick-nav-links a:hover {
color: var(--primary-color);
padding-left: 5px;
}