/* RO Service Muzaffarpur - Custom CSS */
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f8f9fa;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* General Styles */
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #17a2b8;
--light-color: #f8f9fa;
--dark-color: #343a40;
--water-blue: #00a8cc;
--water-dark: #0066cc;
}
/* Modern Header Styles - New Design */
.modern-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
backdrop-filter: blur(15px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modern-header .navbar {
padding: 0.8rem 0;
background: transparent !important;
}
.modern-header .navbar-brand {
font-size: 1.6rem;
font-weight: 800;
color: #fff !important;
display: flex !important;
align-items: center !important;
transition: transform 0.3s ease;
visibility: visible !important;
}
.modern-header .navbar-brand:hover {
transform: scale(1.05);
}
.brand-logo {
display: flex !important;
align-items: center !important;
gap: 0.8rem !important;
visibility: visible !important;
}
.logo-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #667eea;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
animation: logoFloat 3s ease-in-out infinite;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
.brand-text {
display: flex !important;
flex-direction: column !important;
line-height: 1.1 !important;
visibility: visible !important;
}
.brand-name {
font-size: 1.2rem;
font-weight: 800;
color: #fff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
display: block !important;
visibility: visible !important;
}
.brand-location {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
display: block !important;
visibility: visible !important;
}
.modern-header .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.95) !important;
font-weight: 600;
padding: 0.6rem 1.2rem !important;
border-radius: 30px;
margin: 0 0.3rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
overflow: hidden;
font-size: 0.95rem;
cursor: pointer !important;
pointer-events: auto !important;
z-index: 1001 !important;
}
.modern-header .navbar-nav .nav-link.dropdown-toggle {
cursor: pointer !important;
pointer-events: auto !important;
z-index: 1001 !important;
position: relative !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
}
.modern-header .navbar-nav .nav-link.dropdown-toggle:hover {
background: rgba(255, 255, 255, 0.2) !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}
.modern-header .navbar-nav .nav-link.dropdown-toggle::after {
content: '' !important;
border: none !important;
margin-left: 0 !important;
}
.modern-header .navbar-nav .nav-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.modern-header .navbar-nav .nav-link:hover::before {
width: 100px;
height: 100px;
}
.modern-header .navbar-nav .nav-link:hover,
.modern-header .navbar-nav .nav-link.active {
color: #fff !important;
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.modern-header .dropdown-menu {
background: rgba(102, 126, 234, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 15px !important;
backdrop-filter: blur(20px) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
animation: dropdownSlide 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
margin-top: 0.5rem !important;
z-index: 1002 !important;
position: absolute !important;
min-width: 200px !important;
padding: 0.5rem 0 !important;
}
.modern-header .dropdown-menu.show {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) scale(1) !important;
}
.modern-header .dropdown-menu:not(.show) {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) scale(0.95) !important;
}
@keyframes dropdownSlide {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modern-header .dropdown-item {
color: rgba(255, 255, 255, 0.95);
padding: 0.8rem 1.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
font-weight: 500;
border-radius: 10px;
margin: 0.2rem 0.5rem;
}
.modern-header .dropdown-item::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.modern-header .dropdown-item:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
transform: translateX(8px);
}
.modern-header .dropdown-item:hover::before {
left: 100%;
}
.navbar-actions {
display: flex;
align-items: center;
gap: 1.2rem;
}
.contact-info {
display: flex;
align-items: center;
}
.contact-phone {
display: flex;
align-items: center;
gap: 0.5rem;
color: #fff !important;
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 25px;
background: rgba(255, 255, 255, 0.15);
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-phone:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
color: #fff !important;
}
.cart-container {
position: relative;
}
.cart-link {
color: #fff !important;
font-size: 1.3rem;
position: relative;
padding: 0.6rem 1.1rem;
border-radius: 30px;
background: rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.cart-link:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.cart-count {
position: absolute;
top: -6px;
right: -6px;
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
color: #fff;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
animation: cartPulse 2s infinite;
box-shadow: 0 4px 10px rgba(255, 107, 107, 0.4);
}
@keyframes cartPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.btn-book-service {
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%) !important;
border: none !important;
color: #fff !important;
padding: 0.6rem 1.8rem !important;
border-radius: 30px !important;
font-weight: 700 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4) !important;
position: relative;
overflow: hidden;
font-size: 0.95rem;
}
.btn-book-service::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.btn-book-service:hover::before {
left: 100%;
}
.btn-book-service:hover {
transform: translateY(-3px) !important;
box-shadow: 0 10px 25px rgba(255, 107, 107, 0.5) !important;
}
.modern-header.scrolled {
background: rgba(102, 126, 234, 0.98);
backdrop-filter: blur(20px);
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
/* Mobile Responsive Header - New Design */
@media (max-width: 991.98px) {
.modern-header .navbar-nav {
background: rgba(102, 126, 234, 0.98);
border-radius: 15px;
padding: 1.2rem;
margin-top: 1rem;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.modern-header .navbar-nav .nav-link {
margin: 0.3rem 0;
padding: 0.8rem 1.2rem !important;
border-radius: 25px;
font-size: 1rem;
}
.modern-header .dropdown-menu {
background: rgba(102, 126, 234, 0.98);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
margin: 0.5rem 0;
}
.navbar-actions {
margin-top: 1.5rem;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
}
.contact-phone {
font-size: 0.85rem;
padding: 0.6rem 1.2rem;
}
.cart-link {
padding: 0.6rem 1.2rem;
font-size: 1.2rem;
}
.btn-book-service {
padding: 0.7rem 2rem !important;
font-size: 1rem;
}
.brand-text .brand-name {
font-size: 1.1rem;
}
.brand-text .brand-location {
font-size: 0.75rem;
}
.logo-icon {
width: 45px;
height: 45px;
font-size: 1.2rem;
}
}
@media (max-width: 576px) {
.modern-header .navbar-brand {
font-size: 1.2rem;
display: flex !important;
align-items: center !important;
visibility: visible !important;
}
.brand-logo {
display: flex !important;
align-items: center !important;
gap: 0.8rem !important;
visibility: visible !important;
}
.logo-icon {
width: 45px;
height: 45px;
font-size: 1.3rem;
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}
.brand-text {
display: flex !important;
flex-direction: column !important;
line-height: 1.1 !important;
visibility: visible !important;
}
.brand-text .brand-name {
font-size: 0.95rem;
font-weight: 700;
color: #fff !important;
display: block !important;
visibility: visible !important;
}
.brand-text .brand-location {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.9) !important;
display: block !important;
visibility: visible !important;
}
.navbar-actions {
flex-direction: column;
gap: 0.8rem;
align-items: stretch;
}
.contact-phone {
justify-content: center;
width: 100%;
}
.cart-link {
align-self: center;
padding: 0.6rem 1.5rem;
}
.btn-book-service {
width: 100%;
text-align: center;
padding: 0.8rem 1.5rem !important;
}
.modern-header .navbar-nav .nav-link {
padding: 0.7rem 1rem !important;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.modern-header .navbar-brand {
font-size: 1rem;
display: flex !important;
align-items: center !important;
visibility: visible !important;
}
.brand-logo {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
visibility: visible !important;
}
.logo-icon {
width: 30px;
height: 30px;
font-size: 0.9rem;
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
}
.brand-text {
display: flex !important;
flex-direction: column !important;
line-height: 1.1 !important;
visibility: visible !important;
}
.brand-text .brand-name {
font-size: 0.85rem;
font-weight: 700;
color: #fff !important;
display: block !important;
visibility: visible !important;
}
.brand-text .brand-location {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.9) !important;
display: block !important;
visibility: visible !important;
}
.contact-phone span {
display: none;
}
.contact-phone {
padding: 0.6rem 0.8rem;
justify-content: center;
}
.modern-header .navbar-nav {
padding: 1rem;
}
}
/* Products Showcase Styles */
.products-showcase {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.products-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
/* Modern Product Cards */
.product-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
height: 100%;
border: 1px solid rgba(0,0,0,0.05);
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.product-image-wrapper {
position: relative;
overflow: hidden;
}
.product-image {
position: relative;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-card:hover .product-image img {
transform: scale(1.1);
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.product-card:hover .product-overlay {
opacity: 1;
}
.overlay-content {
color: white;
text-align: center;
}
.product-badge {
position: absolute;
top: 15px;
left: 15px;
padding: 8px 15px;
border-radius: 25px;
font-size: 0.8rem;
font-weight: 600;
z-index: 3;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.product-discount {
position: absolute;
top: 15px;
right: 15px;
background: #dc3545;
color: white;
padding: 8px 12px;
border-radius: 25px;
font-size: 0.8rem;
font-weight: 600;
z-index: 3;
box-shadow: 0 2px 10px rgba(220,53,69,0.3);
}
.product-info {
padding: 20px;
}
.product-category {
color: #6c757d;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.product-title {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
}
.product-features {
margin-bottom: 1rem;
}
.product-features .badge {
font-size: 0.7rem;
margin-right: 0.3rem;
padding: 0.2rem 0.5rem;
}
.product-price {
margin-bottom: 1rem;
}
.current-price {
font-size: 1.3rem;
font-weight: bold;
color: var(--primary-color);
margin-right: 0.5rem;
}
.original-price {
font-size: 1rem;
color: #999;
text-decoration: line-through;
}
.product-actions {
display: flex;
gap: 0.5rem;
}
.product-actions .btn {
flex: 1;
font-size: 0.9rem;
}
/* Professional Footer Styles - Updated */
.professional-footer {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: #fff;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
.professional-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}
.footer-top {
padding: 60px 0 30px;
position: relative;
margin: 0;
}
.footer-bottom {
background: rgba(0, 0, 0, 0.3);
padding: 20px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin: 0;
position: relative;
}
.footer-brand {
margin-bottom: 2rem;
}
.brand-logo-footer {
display: flex;
align-items: center;
margin-bottom: 1.5rem;
}
.logo-icon-footer {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0066cc 0%, #00a8cc 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.8rem;
color: white;
box-shadow: 0 5px 15px rgba(0,102,204,0.3);
}
.brand-text-footer {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.brand-name-footer {
font-size: 1.6rem;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.brand-location-footer {
font-size: 1rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}
.footer-description {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.contact-quick {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 1.5rem;
}
.contact-quick .contact-item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
}
.contact-quick .contact-item i {
color: #ffd700;
font-size: 1rem;
width: 20px;
text-align: center;
}
.social-media {
margin-top: 2rem;
}
.social-title {
font-size: 1rem;
font-weight: 600;
color: white;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.social-links {
display: flex;
gap: 0.8rem;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1rem;
}
.social-link.facebook {
background: #1877f2;
}
.social-link.whatsapp {
background: #25d366;
}
.social-link.instagram {
background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
}
.social-link.youtube {
background: #ff0000;
}
.social-link.twitter {
background: #1da1f2;
}
.social-link:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.footer-links {
margin-bottom: 2rem;
}
.footer-title {
font-size: 1.2rem;
font-weight: 600;
color: white;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, #0066cc, #00a8cc);
border-radius: 2px;
}
.footer-nav {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav li {
margin-bottom: 0.8rem;
}
.footer-nav a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-nav a:hover {
color: white;
transform: translateX(5px);
}
.footer-nav i {
font-size: 0.8rem;
transition: transform 0.3s ease;
}
.footer-nav a:hover i {
transform: translateX(3px);
}
.footer-contact {
margin-bottom: 2rem;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.contact-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 1rem;
flex-shrink: 0;
}
.contact-text h6 {
font-size: 0.9rem;
font-weight: 600;
color: white;
margin-bottom: 0.3rem;
}
.contact-text p {
color: rgba(255, 255, 255, 0.7);
margin: 0;
line-height: 1.4;
}
.contact-text a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
}
.contact-text a:hover {
color: white;
}
.copyright {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.copyright i {
color: #ff4757;
}
.footer-bottom-links {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
}
.footer-bottom-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
font-size: 0.9rem;
}
.footer-bottom-links a:hover {
color: white;
}
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #0066cc 0%, #00a8cc 100%);
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
box-shadow: 0 5px 15px rgba(0,102,204,0.3);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,102,204,0.4);
}
/* Cart Sidebar Styles */
.cart-container {
position: relative;
}
.cart-link {
color: white !important;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 25px;
transition: all 0.3s ease;
position: relative;
}
.cart-link:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: #ff4757;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: bold;
min-width: 20px;
}
.cart-sidebar {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100vh;
background: white;
box-shadow: -5px 0 20px rgba(0,0,0,0.2);
transition: right 0.3s ease;
z-index: 1050;
display: flex;
flex-direction: column;
}
.cart-sidebar.show {
right: 0;
}
.cart-header {
padding: 1.5rem;
background: linear-gradient(135deg, #0066cc 0%, #00a8cc 100%);
color: white;
display: flex;
justify-content: between;
align-items: center;
}
.cart-header h4 {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
}
.close-cart {
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
transition: transform 0.3s ease;
}
.close-cart:hover {
transform: rotate(90deg);
}
.cart-body {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
}
.empty-cart {
text-align: center;
padding: 3rem 1rem;
color: #999;
}
.empty-cart i {
margin-bottom: 1rem;
opacity: 0.5;
}
.cart-item {
display: flex;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #eee;
gap: 1rem;
}
.cart-item img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
}
.cart-item-info {
flex: 1;
}
.cart-item-title {
font-weight: 600;
margin-bottom: 0.25rem;
color: #333;
}
.cart-item-price {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 0.25rem;
}
.cart-item-quantity {
display: flex;
align-items: center;
gap: 0.5rem;
}
.quantity-btn {
width: 25px;
height: 25px;
border: 1px solid #ddd;
background: white;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.quantity-btn:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.quantity-input {
width: 50px;
text-align: center;
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.25rem;
}
.cart-item-remove {
background: #ff4757;
color: white;
border: none;
border-radius: 4px;
padding: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.cart-item-remove:hover {
background: #ff3838;
}
.cart-footer {
padding: 1.5rem;
background: #f8f9fa;
border-top: 1px solid #eee;
}
.cart-total {
display: flex;
justify-content: between;
align-items: center;
margin-bottom: 1rem;
}
.cart-total h5 {
margin: 0;
color: #333;
}
.cart-total span {
color: var(--primary-color);
font-weight: bold;
font-size: 1.2rem;
}
.cart-actions {
display: flex;
gap: 0.5rem;
}
.cart-actions .btn {
flex: 1;
}
/* Product Modal Styles */
.modal-content {
border-radius: 15px;
overflow: hidden;
}
.modal-header {
background: linear-gradient(135deg, #0066cc 0%, #00a8cc 100%);
color: white;
border: none;
}
.modal-title {
color: white;
font-weight: 600;
}
.btn-close {
color: white;
opacity: 0.8;
}
.btn-close:hover {
opacity: 1;
}
.modal-body {
padding: 2rem;
}
.product-detail-container {
display: flex;
gap: 2rem;
}
.product-detail-image {
flex: 1;
max-width: 300px;
}
.product-detail-image img {
width: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-detail-info {
flex: 2;
}
.product-detail-title {
font-size: 1.5rem;
font-weight: bold;
color: #333;
margin-bottom: 1rem;
}
.product-detail-price {
font-size: 1.8rem;
color: var(--primary-color);
font-weight: bold;
margin-bottom: 1rem;
}
.product-detail-description {
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.product-detail-features {
list-style: none;
padding: 0;
margin-bottom: 1.5rem;
}
.product-detail-features li {
padding: 0.5rem 0;
color: #666;
border-bottom: 1px solid #eee;
}
.product-detail-features i {
color: var(--primary-color);
margin-right: 0.5rem;
}
.product-detail-actions {
display: flex;
gap: 1rem;
}
/* Responsive Cart */
@media (max-width: 768px) {
.cart-sidebar {
width: 100%;
right: -100%;
}
.product-detail-container {
flex-direction: column;
}
.product-detail-image {
max-width: 100%;
}
}
/* Cart Icon in Header */
.cart-container {
position: relative;
}
.cart-link {
color: var(--primary-color) !important;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 25px;
transition: all 0.3s ease;
position: relative;
}
.cart-link:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: #ff4757;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: bold;
min-width: 20px;
}
/* Notification Styles */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
padding: 1rem 1.5rem;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 0.5rem;
z-index: 9999;
transform: translateX(400px);
transition: transform 0.3s ease;
min-width: 250px;
}
.notification.show {
transform: translateX(0);
}
.notification-success {
border-left: 4px solid #28a745;
color: #28a745;
}
.notification-error {
border-left: 4px solid #dc3545;
color: #dc3545;
}
.notification-info {
border-left: 4px solid #17a2b8;
color: #17a2b8;
}
.animate-bounce {
animation: bounce 1s ease-in-out;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* Product Detail Modal Styles */
.product-detail-container {
display: flex;
gap: 2rem;
}
.product-detail-image {
flex: 1;
max-width: 300px;
}
.product-detail-image img {
width: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-detail-info {
flex: 2;
}
.product-detail-title {
font-size: 1.5rem;
font-weight: bold;
color: #333;
margin-bottom: 1rem;
}
.product-detail-price {
font-size: 1.8rem;
color: var(--primary-color);
font-weight: bold;
margin-bottom: 1rem;
}
.product-detail-description {
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.product-detail-features {
list-style: none;
padding: 0;
margin-bottom: 1.5rem;
}
.product-detail-features li {
padding: 0.5rem 0;
color: #666;
border-bottom: 1px solid #eee;
}
.product-detail-features i {
color: var(--primary-color);
margin-right: 0.5rem;
}
.product-detail-actions {
display: flex;
gap: 1rem;
}
/* Checkout Modal Styles */
.checkout-modal {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
max-width: 600px;
margin: 0 auto;
z-index: 10000;
}
.checkout-modal .card {
border: none;
}
.checkout-modal .card-header {
background: var(--primary-color);
color: white;
border: none;
}
.checkout-modal .card-title {
color: white;
font-weight: 600;
}
.checkout-modal .card-body {
padding: 2rem;
}
.checkout-modal .btn {
min-width: 120px;
}
/* Button Hover Effects */
.btn-hover-glow {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-hover-glow:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.btn-hover-glow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-hover-glow:hover::before {
width: 300px;
height: 300px;
}
/* Product Card Hover Effects */
.product-card {
transition: all 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.product-card .btn {
transition: all 0.3s ease;
}
.product-card .btn:hover {
transform: scale(1.05);
}
/* Enhanced Hero Section */
.hero-section.enhanced {
position: relative;
background: linear-gradient(135deg, #0066cc 0%, #00a8cc 50%, #007bff 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
margin-top: 76px;
min-height: 100vh;
padding: 80px 0;
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
z-index: 2;
}
.hero-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') repeat;
animation: float 20s infinite linear;
z-index: 3;
}
.hero-waves {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url('data:image/svg+xml,') no-repeat;
background-size: cover;
z-index: 4;
}
.hero-section .container {
position: relative;
z-index: 10;
}
.hero-section .row {
align-items: center;
min-height: 60vh;
}
/* Enhanced Badge */
.badge-container {
display: inline-block;
position: relative;
}
.badge-rating {
display: block;
font-size: 0.75rem;
margin-top: 4px;
opacity: 0.8;
}
/* Enhanced Title */
.hero-title h1 {
line-height: 1.1;
margin-bottom: 0.2rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero-title .text-warning {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero-title .text-primary {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
/* Highlight Text */
.highlight {
background: linear-gradient(45deg, #ffd700, #ffed4e);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
padding: 0 2px;
}
/* Modern Buttons */
.btn-modern {
position: relative;
overflow: hidden;
border-radius: 50px;
padding: 12px 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn-modern:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.btn-modern .btn-ripple {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-modern:active .btn-ripple {
width: 300px;
height: 300px;
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}
.feature-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.feature-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
flex-shrink: 0;
}
.feature-text h6 {
margin: 0;
font-size: 0.9rem;
font-weight: 600;
color: white;
}
.feature-text small {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
}
/* Modern Image Container */
.image-container-modern {
position: relative;
perspective: 1000px;
}
.image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.image-wrapper:hover {
transform: rotateY(5deg) scale(1.02);
}
.hero-main-image {
border-radius: 20px;
transition: transform 0.3s ease;
}
.image-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(0, 123, 255, 0.4) 0%, transparent 70%);
border-radius: 20px;
opacity: 0.6;
animation: imageGlow 3s ease-in-out infinite;
}
@keyframes imageGlow {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.6;
}
}
/* Floating Elements */
.floating-elements {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.floating-element {
position: absolute;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
min-width: 120px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
}
.floating-element:hover {
transform: scale(1.05) translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.element-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.element-text strong {
display: block;
font-size: 0.9rem;
color: #333;
margin-bottom: 2px;
}
.element-text small {
font-size: 0.75rem;
color: #666;
}
.floating-1 {
top: 10%;
left: -10%;
animation: floatElement1 4s ease-in-out infinite;
}
.floating-2 {
top: 60%;
right: -10%;
animation: floatElement2 4s ease-in-out infinite 1s;
}
.floating-3 {
bottom: 20%;
left: -5%;
animation: floatElement3 4s ease-in-out infinite 2s;
}
.floating-4 {
top: 30%;
right: -5%;
animation: floatElement4 4s ease-in-out infinite 3s;
}
@keyframes floatElement1 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(2deg); }
}
@keyframes floatElement2 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-15px) rotate(-2deg); }
}
@keyframes floatElement3 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes floatElement4 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(-1deg); }
}
/* Pulse Ring */
.pulse-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: pulseRing 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes pulseRing {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0;
}
}
@keyframes float {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-100px) translateY(-100px); }
}
/* Animated Background Elements */
.hero-bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.water-drop {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: waterDropFloat 6s ease-in-out infinite;
}
.water-drop-1 {
width: 80px;
height: 80px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.water-drop-2 {
width: 60px;
height: 60px;
top: 20%;
right: 15%;
animation-delay: 1s;
}
.water-drop-3 {
width: 100px;
height: 100px;
bottom: 20%;
left: 20%;
animation-delay: 2s;
}
.water-drop-4 {
width: 40px;
height: 40px;
top: 50%;
right: 30%;
animation-delay: 3s;
}
.water-drop-5 {
width: 70px;
height: 70px;
bottom: 10%;
right: 10%;
animation-delay: 4s;
}
@keyframes waterDropFloat {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.3;
}
50% {
transform: translateY(-20px) scale(1.1);
opacity: 0.6;
}
}
/* Enhanced Hero Content */
.hero-content {
position: relative;
z-index: 10;
opacity: 1 !important;
visibility: visible !important;
}
.hero-section .row {
align-items: center;
min-height: 60vh;
}
.typewriter-text {
position: relative;
overflow: hidden;
border-right: 3px solid #ffd700;
white-space: nowrap;
animation: typewriter 3s steps(40, end), blink-caret 0.75s step-end infinite;
}
@keyframes typewriter {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: #ffd700; }
}
.highlight-text {
background: linear-gradient(45deg, #ffd700, #ffed4e);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 600;
}
/* Enhanced Buttons */
.pulse-animation {
position: relative;
overflow: hidden;
}
.pulse-animation::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0% {
width: 0;
height: 0;
opacity: 1;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}
.btn-shine {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shine 3s ease-in-out infinite;
}
@keyframes shine {
0% { left: -100%; }
20%, 100% { left: 100%; }
}
/* Enhanced Feature Boxes */
.feature-box {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.feature-box:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.feature-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 1.2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* Enhanced 3D Image Container */
.enhanced-3d {
position: relative;
perspective: 1000px;
}
.image-glow {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
animation: imageGlow 3s ease-in-out infinite;
}
@keyframes imageGlow {
0%, 100% {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
50% {
box-shadow: 0 20px 60px rgba(0, 123, 255, 0.4);
}
}
.hero-main-image {
border-radius: 20px;
transition: transform 0.3s ease;
}
.enhanced-3d:hover .hero-main-image {
transform: rotateY(5deg) scale(1.02);
}
/* Enhanced Floating Cards */
.enhanced-cards .floating-card {
position: absolute;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
min-width: 120px;
transition: all 0.3s ease;
}
.enhanced-cards .floating-card:hover {
transform: scale(1.1) translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.enhanced-cards .floating-card i {
font-size: 1.5rem;
margin-bottom: 5px;
display: block;
}
.enhanced-cards .floating-card span {
font-weight: 600;
color: #333;
display: block;
margin-bottom: 3px;
}
.enhanced-cards .floating-card small {
color: #666;
font-size: 0.75rem;
}
.floating-card-1 {
top: 10%;
left: -10%;
animation: floatCard1 4s ease-in-out infinite;
}
.floating-card-2 {
top: 60%;
right: -10%;
animation: floatCard2 4s ease-in-out infinite 1s;
}
.floating-card-3 {
bottom: 20%;
left: -5%;
animation: floatCard3 4s ease-in-out infinite 2s;
}
.floating-card-4 {
top: 30%;
right: -5%;
animation: floatCard4 4s ease-in-out infinite 3s;
}
@keyframes floatCard1 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(2deg); }
}
@keyframes floatCard2 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-15px) rotate(-2deg); }
}
@keyframes floatCard3 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes floatCard4 {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(-1deg); }
}
/* Pulse Ring Animation */
.pulse-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: pulseRing 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes pulseRing {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 0;
}
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-particles {
position: absolute;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') repeat;
animation: float 20s infinite linear;
z-index: 1;
}
.hero-waves {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: url('data:image/svg+xml,') repeat-x;
background-size: 1200px 100px;
animation: wave 10s linear infinite;
z-index: 2;
}
@keyframes float {
0%, 100% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-20px) translateX(20px); }
}
@keyframes wave {
0% { background-position-x: 0; }
100% { background-position-x: 1200px; }
}
.hero-content {
position: relative;
z-index: 10;
}
.hero-content h1 {
color: white;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero-content p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.2rem;
}
.hero-badge {
display: inline-block;
}
.hero-features {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.feature-icon-small {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.image-container-3d {
position: relative;
perspective: 1000px;
}
.hero-main-image {
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
.image-container-3d:hover .hero-main-image {
transform: rotateY(10deg) scale(1.05);
}
.floating-cards {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.floating-card {
position: absolute;
background: white;
border-radius: 10px;
padding: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
animation: floatCard 3s ease-in-out infinite;
z-index: 5;
}
.floating-card-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.floating-card-2 {
top: 60%;
right: 10%;
animation-delay: 1s;
}
.floating-card-3 {
bottom: 20%;
left: 20%;
animation-delay: 2s;
}
@keyframes floatCard {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(5deg); }
}
.hero-stats {
background: rgba(0, 0, 0, 0.3);
padding: 2rem 0;
position: relative;
z-index: 10;
}
.stat-item {
text-align: center;
color: white;
}
.stat-item h3 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.stat-item p {
font-size: 1rem;
margin: 0;
opacity: 0.8;
}
.counter {
display: inline-block;
}
/* Service Cards - Modern */
.service-card-modern {
transition: all 0.3s ease;
border-radius: 15px;
overflow: hidden;
background: white;
position: relative;
}
.service-card-modern:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.service-card-header {
position: relative;
padding: 2rem 1rem 1rem;
text-align: center;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.service-icon-wrapper {
position: relative;
z-index: 2;
}
.service-number {
position: absolute;
top: 10px;
right: 10px;
background: var(--primary-color);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.8rem;
}
.service-features {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.service-features li {
padding: 0.25rem 0;
font-size: 0.85rem;
color: #666;
}
.service-features i {
margin-right: 0.5rem;
}
.btn-hover-glow {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-hover-glow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: all 0.5s ease;
z-index: 0;
}
.btn-hover-glow:hover::before {
width: 300px;
height: 300px;
}
.btn-hover-glow:hover {
transform: translateY(-2px);
z-index: 1;
}
/* Feature Cards Modern */
.feature-card-modern {
background: white;
border-radius: 15px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.feature-card-modern:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.feature-icon-wrapper {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.feature-number {
font-size: 2rem;
font-weight: bold;
color: var(--primary-color);
margin-bottom: 0.5rem;
}
.feature-label {
font-size: 0.9rem;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Testimonials Modern */
.testimonial-card-modern {
background: white;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.testimonial-card-modern:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.testimonial-header {
position: relative;
padding: 1.5rem 1rem 1rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
display: flex;
justify-content: space-between;
align-items: center;
}
.quote-icon {
font-size: 1.5rem;
color: var(--primary-color);
opacity: 0.5;
}
.rating {
color: #ffc107;
}
/* Gradient Backgrounds */
.bg-gradient-light {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.bg-gradient {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate__animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animate__delay-1s {
animation-delay: 0.1s;
}
.animate__delay-2s {
animation-delay: 0.2s;
}
.animate__delay-3s {
animation-delay: 0.3s;
}
.animate__delay-4s {
animation-delay: 0.4s;
}
.animate__delay-5s {
animation-delay: 0.5s;
}
.animate__fadeInUp {
animation-name: fadeInUp;
}
.animate__fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate__fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Service Cards */
.service-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 15px;
overflow: hidden;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.service-icon {
width: 80px;
height: 80px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--water-blue), var(--water-dark));
color: white;
}
.service-icon i {
color: white;
}
/* Feature Icons */
.feature-icon {
width: 100px;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
transition: transform 0.3s ease;
}
.feature-icon:hover {
transform: scale(1.1);
}
/* Testimonial Cards */
.testimonial-card {
border-radius: 15px;
transition: transform 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
}
.rating {
color: #ffc107;
}
.rating i {
font-size: 1.2rem;
}
/* Button Styles */
.btn-primary {
background: linear-gradient(135deg, var(--water-blue), var(--water-dark));
border: none;
border-radius: 25px;
padding: 10px 25px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
}
.btn-outline-primary {
border-radius: 25px;
padding: 10px 25px;
font-weight: 600;
border-color: var(--water-blue);
color: var(--water-blue);
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
background: var(--water-blue);
border-color: var(--water-blue);
transform: translateY(-2px);
}
/* Form Styles */
.form-control {
border-radius: 10px;
border: 2px solid #e9ecef;
padding: 12px 15px;
transition: border-color 0.3s ease;
}
.form-control:focus {
border-color: var(--water-blue);
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.form-label {
font-weight: 600;
color: var(--dark-color);
margin-bottom: 8px;
}
/* Card Styles */
.card {
border-radius: 15px;
border: none;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.card:hover {
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
/* Footer Styles */
footer {
background: linear-gradient(135deg, #1e3c72, #2a5298);
}
footer a {
transition: color 0.3s ease;
}
footer a:hover {
color: var(--water-blue) !important;
}
.social-links a {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(--water-blue);
transform: translateY(-3px);
}
/* Booking Form Styles */
.booking-form {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.booking-steps {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.step {
flex: 1;
text-align: center;
position: relative;
}
.step::after {
content: '';
position: absolute;
top: 20px;
left: 50%;
width: 100%;
height: 2px;
background: #e9ecef;
z-index: -1;
}
.step:last-child::after {
display: none;
}
.step.active .step-number {
background: var(--water-blue);
color: white;
}
.step.completed .step-number {
background: var(--success-color);
color: white;
}
.step-number {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background: #e9ecef;
margin: 0 auto 10px;
font-weight: bold;
}
/* Product Cards */
.product-card {
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease;
height: 100%;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.product-image {
height: 200px;
object-fit: cover;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.product-badge {
position: absolute;
top: 10px;
right: 10px;
background: var(--danger-color);
color: white;
padding: 5px 10px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: bold;
}
/* Admin Panel Styles */
.admin-sidebar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: white;
}
.admin-sidebar .nav-link {
color: rgba(255, 255, 255, 0.8);
padding: 12px 20px;
border-radius: 8px;
margin: 5px 0;
transition: all 0.3s ease;
}
.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.admin-content {
background: #f8f9fa;
min-height: 100vh;
}
.stats-card {
background: white;
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.stats-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.stats-icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
/* Responsive Styles */
@media (max-width: 1200px) {
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content .display-3 {
font-size: 2.2rem;
}
}
@media (max-width: 992px) {
.hero-section {
padding: 70px 0;
min-height: auto;
}
.hero-section .row {
min-height: auto;
}
.hero-content h1 {
font-size: 2.2rem;
}
.hero-content .display-3 {
font-size: 2rem;
}
.hero-content .lead {
font-size: 1.1rem;
}
.hero-image {
text-align: center;
margin-top: 30px;
}
.hero-image img {
max-height: 350px;
object-fit: cover;
}
}
@media (max-width: 768px) {
.hero-section.enhanced {
padding: 40px 0;
min-height: auto;
text-align: center;
}
.hero-section .row {
min-height: auto;
align-items: flex-start;
}
.hero-section .container {
padding: 0 15px;
}
.hero-content {
text-align: center;
margin-bottom: 30px;
}
.hero-title {
margin-bottom: 20px;
}
.hero-title h1 {
font-size: 1.6rem;
line-height: 1.2;
margin-bottom: 8px;
}
.hero-title .display-3 {
font-size: 1.4rem;
line-height: 1.2;
margin-bottom: 8px;
}
.hero-content .lead {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 25px;
}
.hero-badge .badge {
font-size: 0.75rem;
padding: 6px 12px;
margin-bottom: 15px;
}
.badge-rating {
font-size: 0.65rem;
display: block;
margin-top: 4px;
}
.btn-modern {
padding: 14px 20px;
font-size: 0.9rem;
margin-bottom: 12px;
width: 100%;
border-radius: 25px;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.action-buttons .btn-modern {
width: 100%;
}
.features-grid {
grid-template-columns: 1fr;
gap: 12px;
margin-top: 25px;
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
.feature-item {
padding: 15px;
text-align: center;
flex-direction: column;
align-items: center;
gap: 10px;
}
.feature-icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
margin: 0;
}
.feature-text h6 {
font-size: 0.85rem;
margin-bottom: 2px;
}
.feature-text small {
font-size: 0.7rem;
display: block;
}
.hero-image {
text-align: center;
margin-top: 20px;
order: 2;
}
.hero-main-image {
max-height: 250px;
object-fit: cover;
border-radius: 15px;
}
.image-container-modern {
margin-top: 20px;
}
.floating-elements {
display: none;
}
.pulse-ring {
display: none;
}
.hero-background {
opacity: 0.8;
}
.hero-overlay {
background: rgba(0, 0, 0, 0.2);
}
.hero-particles {
opacity: 0.3;
}
.hero-waves {
height: 60px;
}
.service-card {
margin-bottom: 20px;
}
.product-card {
margin-bottom: 20px;
}
.testimonial-card {
margin-bottom: 20px;
}
.feature-card {
margin-bottom: 20px;
}
.hero-stats .row {
text-align: center;
}
.hero-stats .col-3 {
margin-bottom: 20px;
}
.navbar-brand .brand-text {
display: none;
}
.cart-container {
margin-left: auto;
margin-right: 15px;
}
}
@media (max-width: 576px) {
.hero-section.enhanced {
padding: 30px 0;
min-height: auto;
text-align: center;
}
.hero-section .row {
min-height: auto;
align-items: flex-start;
}
.hero-section .container {
padding: 0 10px;
}
.hero-content {
text-align: center;
margin-bottom: 25px;
}
.hero-title {
margin-bottom: 15px;
}
.hero-title h1 {
font-size: 1.4rem;
line-height: 1.1;
margin-bottom: 6px;
}
.hero-title .display-3 {
font-size: 1.2rem;
line-height: 1.1;
margin-bottom: 6px;
}
.hero-content .lead {
font-size: 0.85rem;
line-height: 1.4;
margin-bottom: 20px;
}
.hero-badge .badge {
font-size: 0.7rem;
padding: 5px 10px;
margin-bottom: 12px;
}
.badge-rating {
font-size: 0.6rem;
display: block;
margin-top: 3px;
}
.btn-modern {
padding: 12px 18px;
font-size: 0.85rem;
margin-bottom: 10px;
width: 100%;
border-radius: 20px;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 280px;
margin: 0 auto;
}
.action-buttons .btn-modern {
width: 100%;
}
.features-grid {
grid-template-columns: 1fr;
gap: 10px;
margin-top: 20px;
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
.feature-item {
padding: 12px;
text-align: center;
flex-direction: column;
align-items: center;
gap: 8px;
}
.feature-icon {
width: 40px;
height: 40px;
font-size: 1rem;
margin: 0;
}
.feature-text h6 {
font-size: 0.8rem;
margin-bottom: 2px;
}
.feature-text small {
font-size: 0.65rem;
display: block;
}
.hero-image {
text-align: center;
margin-top: 15px;
order: 2;
}
.hero-main-image {
max-height: 200px;
object-fit: cover;
border-radius: 12px;
}
.image-container-modern {
margin-top: 15px;
}
.floating-elements {
display: none;
}
.pulse-ring {
display: none;
}
.hero-background {
opacity: 0.7;
}
.hero-overlay {
background: rgba(0, 0, 0, 0.15);
}
.hero-particles {
opacity: 0.2;
}
.hero-waves {
height: 50px;
}
.hero-stats .row {
text-align: center;
}
.hero-stats .col-3 {
margin-bottom: 15px;
flex: 0 0 100%;
max-width: 100%;
}
.hero-stats h3 {
font-size: 1.3rem;
}
.hero-stats p {
font-size: 0.85rem;
}
.service-card,
.testimonial-card {
margin-bottom: 20px;
}
.product-card {
margin-bottom: 20px;
}
.product-image img {
height: 180px;
object-fit: cover;
}
.product-title {
font-size: 0.95rem;
}
.product-price {
font-size: 0.85rem;
}
.product-actions .btn {
font-size: 0.75rem;
padding: 5px 10px;
margin-bottom: 5px;
}
.navbar-brand .brand-logo {
font-size: 1.1rem;
}
.navbar-brand .brand-text {
display: none;
}
.cart-container {
position: fixed;
top: 80px;
right: 15px;
z-index: 1001;
}
.btn-book-service {
display: none;
}
.feature-card {
margin-bottom: 20px;
padding: 15px 12px;
}
.feature-card h5 {
font-size: 0.95rem;
}
.feature-card p {
font-size: 0.85rem;
}
.testimonial-card {
padding: 15px 12px;
}
.testimonial-card p {
font-size: 0.85rem;
}
.testimonial-author h6 {
font-size: 0.85rem;
}
.footer .row {
text-align: center;
}
.footer h5 {
font-size: 0.95rem;
margin-bottom: 12px;
}
.footer ul li {
margin-bottom: 6px;
}
.footer ul li a {
font-size: 0.85rem;
}
.contact-cta .display-5 {
font-size: 1.6rem;
}
.contact-cta .lead {
font-size: 0.95rem;
}
.contact-cta .btn {
font-size: 0.85rem;
padding: 8px 14px;
margin-bottom: 8px;
}
.booking-steps {
flex-direction: column;
}
.step::after {
display: none;
}
}
/* Modern Hero Section Styles */
.modern-hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin-top: 76px;
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 2;
}
.hero-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
z-index: 3;
}
.hero-content {
position: relative;
z-index: 10;
color: #fff;
}
.hero-badges {
display: flex;
gap: 12px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.hero-badge {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 8px 16px;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
}
.hero-badge:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.hero-badge i {
color: #ffd700;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.title-main {
display: block;
color: #fff;
}
.title-accent {
display: block;
color: #ffd700;
font-size: 3rem;
}
.hero-rating {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.stars {
display: flex;
gap: 5px;
}
.stars i {
color: #ffd700;
font-size: 1.2rem;
}
.rating-text {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
font-weight: 500;
}
.hero-description {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 35px;
color: rgba(255, 255, 255, 0.9);
max-width: 500px;
}
.highlight {
color: #ffd700;
font-weight: 600;
}
.hero-buttons {
display: flex;
gap: 20px;
margin-bottom: 40px;
}
.hero-buttons .btn {
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.btn-primary {
background: #ffd700;
color: #1a1a2e;
border-color: #ffd700;
}
.btn-primary:hover {
background: #fff;
color: #1a1a2e;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
}
.btn-outline {
background: transparent;
color: #fff;
border-color: #fff;
}
.btn-outline:hover {
background: #fff;
color: #667eea;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}
.hero-features {
display: flex;
gap: 30px;
margin-top: 30px;
}
.feature {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
transition: all 0.3s ease;
}
.hero-stats {
display: flex;
gap: 30px;
margin-top: 30px;
flex-wrap: wrap;
justify-content: center;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 20px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
transition: all 0.3s ease;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-5px);
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: #ffd700;
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
text-align: center;
}
.feature:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px);
}
.feature i {
font-size: 1.5rem;
color: #ffd700;
}
.feature span {
font-size: 0.9rem;
font-weight: 500;
color: #fff;
}
.hero-image {
position: relative;
z-index: 10;
}
.image-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-img {
max-width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
animation: float 6s ease-in-out infinite;
}
.floating-cards {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.floating-card {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 15px;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: float 4s ease-in-out infinite;
}
.card-1 {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.card-2 {
top: 20%;
right: 15%;
animation-delay: 1s;
}
.card-3 {
bottom: 20%;
left: 5%;
animation-delay: 2s;
}
.card-4 {
bottom: 10%;
right: 10%;
animation-delay: 3s;
}
.floating-card i {
font-size: 1.5rem;
color: #667eea;
margin-bottom: 5px;
}
.floating-card span {
font-size: 0.85rem;
font-weight: 600;
color: #333;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Mobile Responsive Hero */
@media (max-width: 768px) {
.modern-hero {
min-height: auto;
padding: 100px 0 80px;
margin-top: 76px;
}
.hero-content {
text-align: center;
order: 2;
margin-bottom: 30px;
}
.hero-badges {
justify-content: center;
margin-bottom: 25px;
}
.hero-title {
font-size: 2.5rem;
margin-bottom: 15px;
}
.title-accent {
font-size: 2.2rem;
}
.hero-rating {
justify-content: center;
margin-bottom: 20px;
}
.hero-description {
font-size: 1.1rem;
margin-bottom: 30px;
max-width: 100%;
}
.hero-buttons {
flex-direction: column;
gap: 15px;
justify-content: center;
margin-bottom: 30px;
}
.hero-buttons .btn {
width: 250px;
justify-content: center;
}
.hero-features {
justify-content: center;
gap: 20px;
margin-top: 25px;
}
.feature {
padding: 12px 20px;
}
.hero-image {
order: 1;
margin-bottom: 30px;
}
.hero-img {
max-width: 80%;
}
.floating-cards {
display: none;
}
}
@media (max-width: 576px) {
.modern-hero {
padding: 80px 0 60px;
}
.hero-title {
font-size: 2rem;
margin-bottom: 12px;
}
.title-accent {
font-size: 1.8rem;
}
.hero-description {
font-size: 1rem;
margin-bottom: 25px;
}
.hero-buttons .btn {
width: 200px;
padding: 12px 20px;
font-size: 1rem;
}
.hero-features {
gap: 15px;
}
.feature {
padding: 10px 15px;
}
.feature i {
font-size: 1.2rem;
}
.feature span {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 1.8rem;
}
.title-accent {
font-size: 1.6rem;
}
.hero-badges {
gap: 8px;
}
.hero-badge {
padding: 6px 12px;
font-size: 0.75rem;
}
.hero-buttons .btn {
width: 180px;
padding: 10px 18px;
font-size: 0.9rem;
}
}
/* Modern Booking Page Styles */
.booking-hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin-top: 76px;
padding: 80px 0;
overflow: hidden;
}
.booking-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.booking-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 2;
}
.booking-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
z-index: 3;
}
.booking-container {
position: relative;
z-index: 10;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
padding: 50px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.booking-header {
margin-bottom: 40px;
}
.booking-title {
font-size: 3rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.booking-subtitle {
font-size: 1.2rem;
color: #666;
margin-bottom: 0;
}
.success-message {
display: flex;
align-items: center;
gap: 12px;
background: #d4edda;
color: #155724;
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 25px;
border: 1px solid #c3e6cb;
}
.success-message i {
font-size: 1.2rem;
color: #28a745;
}
.error-message {
display: flex;
align-items: center;
gap: 12px;
background: #f8d7da;
color: #721c24;
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 25px;
border: 1px solid #f5c6cb;
}
.error-message i {
font-size: 1.2rem;
color: #dc3545;
}
.section-title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #667eea;
}
.section-title i {
color: #667eea;
font-size: 1.3rem;
}
.service-selection {
margin-bottom: 40px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.service-card {
display: flex;
align-items: center;
gap: 20px;
padding: 25px;
background: #fff;
border: 2px solid #e9ecef;
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.1), transparent);
transition: left 0.5s ease;
}
.service-card:hover::before {
left: 100%;
}
.service-card:hover {
border-color: #667eea;
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}
.service-card.active {
border-color: #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}
.service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
flex-shrink: 0;
}
.service-info h3 {
font-size: 1.2rem;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 8px;
}
.service-info p {
color: #666;
font-size: 0.9rem;
margin-bottom: 10px;
line-height: 1.4;
}
.service-price {
display: flex;
flex-direction: column;
gap: 2px;
}
.price-label {
font-size: 0.8rem;
color: #999;
font-weight: 500;
}
.price-value {
font-size: 1.1rem;
font-weight: 700;
color: #667eea;
}
.simple-form {
margin-bottom: 40px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 8px;
font-size: 0.95rem;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background: #fff;
}
.form-control:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
.form-control::placeholder {
color: #999;
}
.form-actions {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 40px;
}
.form-actions .btn {
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
border: 2px solid transparent;
min-width: 200px;
justify-content: center;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border-color: #667eea;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.btn-outline {
background: transparent;
color: #667eea;
border-color: #667eea;
}
.btn-outline:hover {
background: #667eea;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
/* Booking Page Responsive */
@media (max-width: 768px) {
.booking-hero {
padding: 60px 0;
min-height: auto;
}
.booking-container {
padding: 30px 20px;
}
.booking-title {
font-size: 2.2rem;
margin-bottom: 10px;
}
.booking-subtitle {
font-size: 1rem;
}
.services-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.service-card {
padding: 20px;
flex-direction: column;
text-align: center;
}
.service-icon {
margin-bottom: 15px;
}
.form-row {
grid-template-columns: 1fr;
gap: 15px;
}
.form-actions {
flex-direction: column;
gap: 15px;
}
.form-actions .btn {
width: 100%;
}
}
@media (max-width: 576px) {
.booking-hero {
padding: 40px 0;
}
.booking-container {
padding: 25px 15px;
}
.booking-title {
font-size: 1.8rem;
}
.section-title {
font-size: 1.3rem;
}
.service-card {
padding: 15px;
}
.service-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.service-info h3 {
font-size: 1.1rem;
}
.service-info p {
font-size: 0.85rem;
}
.form-control {
padding: 10px 12px;
font-size: 0.95rem;
}
.form-actions .btn {
padding: 12px 20px;
font-size: 1rem;
}
}
/* About Page Styles */
.about-hero {
min-height: 60vh;
position: relative;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
margin-top: 76px;
overflow: hidden;
}
.about-hero .hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.about-hero .hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 2;
}
.about-hero .hero-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
z-index: 3;
}
.about-hero .hero-content {
position: relative;
z-index: 10;
color: #fff;
}
.about-hero .hero-badges {
display: flex;
gap: 12px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.about-hero .hero-badge {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 8px 16px;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
}
.about-hero .hero-badge:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.about-hero .hero-badge i {
color: #ffd700;
}
.about-hero .hero-title {
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.about-hero .hero-subtitle {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 35px;
color: rgba(255, 255, 255, 0.9);
max-width: 500px;
}
.about-hero .hero-buttons {
display: flex;
gap: 20px;
margin-bottom: 40px;
}
.about-hero .hero-buttons .btn {
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.about-hero .btn-light {
background: #fff;
color: #667eea;
border-color: #fff;
}
.about-hero .btn-light:hover {
background: transparent;
color: #fff;
border-color: #fff;
transform: translateY(-3px);
}
.about-hero .btn-outline {
background: transparent;
color: #fff;
border-color: #fff;
}
.about-hero .btn-outline:hover {
background: #fff;
color: #667eea;
transform: translateY(-3px);
}
.about-hero .hero-image {
position: relative;
z-index: 10;
}
.about-hero .image-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.about-hero .image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
border-radius: 15px;
pointer-events: none;
}
.story-section {
padding: 80px 0;
background: #f8f9fa;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.section-subtitle {
font-size: 1.1rem;
color: #666;
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 20px 0;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 100%;
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.timeline-item {
display: flex;
justify-content: flex-end;
padding-right: 30px;
position: relative;
margin: 50px 0;
width: 50%;
}
.timeline-item:nth-child(even) {
align-self: flex-end;
justify-content: flex-start;
padding-left: 30px;
padding-right: 0;
margin-left: 50%;
}
.timeline-item::before {
content: '';
position: absolute;
top: 0;
right: -8px;
width: 16px;
height: 16px;
background: #fff;
border: 3px solid #667eea;
border-radius: 50%;
z-index: 1;
}
.timeline-item:nth-child(even)::before {
left: -8px;
right: auto;
}
.timeline-item.current::before {
background: #667eea;
border-color: #764ba2;
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}
.timeline-year {
font-size: 1.5rem;
font-weight: 700;
color: #667eea;
margin-bottom: 10px;
}
.timeline-content {
background: #fff;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.timeline-content h4 {
font-size: 1.3rem;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 10px;
}
.timeline-content p {
color: #666;
margin: 0;
line-height: 1.6;
}
.mission-vision-section {
padding: 80px 0;
background: #fff;
}
.feature-card {
background: #fff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
height: 100%;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.05), transparent);
transition: left 0.5s ease;
}
.feature-card:hover::before {
left: 100%;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(102, 126, 234, 0.2);
border-color: #667eea;
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 2rem;
margin-bottom: 25px;
transition: all 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.feature-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 20px;
}
.feature-card p {
color: #666;
line-height: 1.6;
margin-bottom: 25px;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
color: #333;
font-weight: 500;
}
.feature-list li::before {
content: '✓';
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border-radius: 50%;
font-size: 0.8rem;
font-weight: 700;
flex-shrink: 0;
}
/* About Page Responsive */
@media (max-width: 768px) {
.about-hero {
min-height: auto;
padding: 80px 0 60px;
}
.about-hero .hero-title {
font-size: 2.2rem;
margin-bottom: 15px;
}
.about-hero .hero-subtitle {
font-size: 1.1rem;
margin-bottom: 30px;
}
.about-hero .hero-buttons {
flex-direction: column;
gap: 15px;
}
.timeline::before {
left: 30px;
}
.timeline-item {
width: 100%;
padding-left: 60px;
padding-right: 0;
margin-left: 0;
}
.timeline-item:nth-child(even) {
margin-left: 0;
padding-left: 60px;
}
.timeline-item::before {
left: 22px;
right: auto;
}
.timeline-item:nth-child(even)::before {
left: 22px;
}
.section-title {
font-size: 2rem;
}
.feature-card {
padding: 30px 20px;
}
.feature-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
margin-bottom: 20px;
}
}
@media (max-width: 576px) {
.about-hero {
padding: 60px 0 40px;
}
.about-hero .hero-title {
font-size: 1.8rem;
}
.about-hero .hero-subtitle {
font-size: 1rem;
}
.section-title {
font-size: 1.8rem;
}
.section-subtitle {
font-size: 1rem;
}
.timeline-item {
margin: 30px 0;
}
.timeline-content {
padding: 20px;
}
.timeline-content h4 {
font-size: 1.1rem;
}
.feature-card {
padding: 25px 15px;
}
.feature-card h3 {
font-size: 1.3rem;
}
}
/* Simple Booking Page Styles */
.simple-booking {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 80px 0 60px;
position: relative;
overflow: hidden;
}
.booking-header {
position: relative;
z-index: 10;
}
.booking-content {
color: #fff;
}
.booking-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.booking-subtitle {
font-size: 1.2rem;
margin-bottom: 40px;
color: rgba(255, 255, 255, 0.9);
}
.quick-contact {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 30px;
}
.contact-item {
display: flex;
align-items: center;
gap: 15px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 20px;
transition: all 0.3s ease;
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.contact-item i {
font-size: 2rem;
color: #ffd700;
width: 50px;
text-align: center;
}
.contact-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 5px;
}
.contact-value {
font-size: 1.1rem;
font-weight: 600;
color: #fff;
}
.booking-image {
text-align: center;
}
.booking-image img {
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
max-width: 100%;
height: auto;
}
.quick-booking {
padding: 80px 0;
background: #f8f9fa;
}
.booking-form-container {
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 40px;
border: 1px solid #e9ecef;
}
.form-header {
text-align: center;
margin-bottom: 30px;
}
.form-header h2 {
font-size: 2rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 10px;
}
.form-header p {
color: #666;
font-size: 1rem;
margin: 0;
}
.success-alert, .error-alert {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 25px;
font-weight: 500;
}
.success-alert {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.success-alert i {
font-size: 1.2rem;
color: #28a745;
}
.error-alert {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.error-alert i {
font-size: 1.2rem;
color: #dc3545;
}
.quick-form {
display: flex;
flex-direction: column;
gap: 25px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-weight: 600;
color: #1a1a2e;
margin-bottom: 8px;
font-size: 0.95rem;
}
.form-input {
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background: #fff;
}
.form-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
.form-input::placeholder {
color: #999;
}
.form-actions {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 30px;
}
.btn-book {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
padding: 15px 30px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
min-width: 150px;
justify-content: center;
}
.btn-book:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.btn-call {
background: transparent;
color: #667eea;
border: 2px solid #667eea;
padding: 15px 30px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
min-width: 150px;
justify-content: center;
}
.btn-call:hover {
background: #667eea;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}
.why-choose {
padding: 80px 0;
background: #fff;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}
.feature-item {
text-align: center;
padding: 30px 20px;
background: #f8f9fa;
border-radius: 15px;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.feature-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
border-color: #667eea;
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: #fff;
font-size: 2rem;
}
.feature-item h3 {
font-size: 1.3rem;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 10px;
}
.feature-item p {
color: #666;
margin: 0;
line-height: 1.5;
}
/* Simple Booking Responsive */
@media (max-width: 768px) {
.simple-booking {
padding: 60px 0 40px;
}
.booking-title {
font-size: 2.2rem;
margin-bottom: 15px;
}
.booking-subtitle {
font-size: 1.1rem;
margin-bottom: 30px;
}
.quick-contact {
gap: 15px;
margin-bottom: 20px;
}
.contact-item {
padding: 15px;
}
.contact-item i {
width: 40px;
font-size: 1.5rem;
}
.booking-form-container {
padding: 30px 20px;
}
.form-header h2 {
font-size: 1.8rem;
}
.form-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.form-actions {
flex-direction: column;
gap: 10px;
}
.btn-book, .btn-call {
width: 100%;
}
.features-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 576px) {
.simple-booking {
padding: 40px 0 30px;
}
.booking-title {
font-size: 1.8rem;
}
.booking-subtitle {
font-size: 1rem;
}
.booking-form-container {
padding: 25px 15px;
}
.form-header h2 {
font-size: 1.6rem;
}
.feature-item {
padding: 25px 15px;
}
.feature-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
margin: 0 auto 15px;
}
.feature-item h3 {
font-size: 1.2rem;
}
}
/* Attractive Booking Form Styles */
.attractive-form {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(102, 126, 234, 0.1);
position: relative;
overflow: hidden;
}
.attractive-form::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.7; }
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
margin-bottom: 25px;
}
.form-group {
position: relative;
}
.form-label {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 10px;
font-size: 0.95rem;
position: relative;
z-index: 10;
}
.form-label i {
width: 20px;
text-align: center;
color: #667eea;
font-size: 1rem;
}
.form-control {
width: 100%;
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: #fff;
position: relative;
z-index: 10;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.form-control:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25), 0 5px 15px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
.form-control::placeholder {
color: #999;
font-style: italic;
}
.form-hint {
display: block;
margin-top: 5px;
font-size: 0.85rem;
color: #666;
font-style: italic;
}
.custom-select {
position: relative;
z-index: 10;
}
.custom-select .form-control {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 45px;
cursor: pointer;
}
.select-arrow {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #667eea;
font-size: 0.9rem;
pointer-events: none;
z-index: 11;
transition: all 0.3s ease;
}
.custom-select:hover .select-arrow {
color: #764ba2;
transform: translateY(-50%) rotate(180deg);
}
.form-actions {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 35px;
position: relative;
z-index: 10;
}
.btn-submit {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border: none;
padding: 18px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
min-width: 200px;
justify-content: center;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.btn-submit::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.5s ease;
}
.btn-submit:hover::before {
left: 100%;
}
.btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}
.btn-submit:active {
transform: translateY(-1px);
}
.btn-call-now {
background: #fff;
color: #667eea;
border: 2px solid #667eea;
padding: 18px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
min-width: 200px;
justify-content: center;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
.btn-call-now:hover {
background: #667eea;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
border-color: #764ba2;
}
.btn-call-now:active {
transform: translateY(-1px);
}
/* Enhanced Success/Error Alerts */
.success-alert, .error-alert {
display: flex;
align-items: center;
gap: 15px;
padding: 20px 25px;
border-radius: 15px;
margin-bottom: 30px;
font-weight: 500;
font-size: 1rem;
position: relative;
z-index: 10;
animation: slideIn 0.5s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.success-alert {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
color: #155724;
border: 1px solid #b8dabc;
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.2);
}
.success-alert i {
font-size: 1.3rem;
color: #28a745;
animation: checkmark 0.5s ease;
}
@keyframes checkmark {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.error-alert {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
color: #721c24;
border: 1px solid #f1b0b7;
box-shadow: 0 5px 15px rgba(220, 53, 69, 0.2);
}
.error-alert i {
font-size: 1.3rem;
color: #dc3545;
animation: shake 0.5s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Attractive Form Responsive */
@media (max-width: 768px) {
.attractive-form {
padding: 30px 20px;
margin: 0 10px;
}
.form-row {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 20px;
}
.form-label {
font-size: 0.9rem;
}
.form-control {
padding: 12px 15px;
font-size: 0.95rem;
}
.form-actions {
flex-direction: column;
gap: 15px;
}
.btn-submit, .btn-call-now {
width: 100%;
min-width: auto;
padding: 15px 25px;
font-size: 1rem;
}
}
@media (max-width: 576px) {
.attractive-form {
padding: 25px 15px;
}
.form-row {
gap: 15px;
margin-bottom: 15px;
}
.form-control {
padding: 10px 12px;
font-size: 0.9rem;
}
.btn-submit, .btn-call-now {
padding: 12px 20px;
font-size: 0.95rem;
}
.success-alert, .error-alert {
padding: 15px 20px;
font-size: 0.9rem;
}
}
/* Blue Star Services Section */
.blue-star-services {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 50%, #1a1a2e 100%);
overflow: hidden;
}
.services-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 123, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 86, 179, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.05) 0%, transparent 70%);
z-index: 1;
}
.services-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 123, 255, 0.02) 0%, rgba(0, 86, 179, 0.02) 100%);
z-index: 2;
}
.blue-star-services .container {
position: relative;
z-index: 10;
}
.services-title {
font-size: 3rem;
font-weight: 800;
color: #fff;
margin-bottom: 15px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
}
.services-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
border-radius: 2px;
}
.services-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-item {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 0;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
position: relative;
border: 1px solid rgba(0, 123, 255, 0.2);
}
.service-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
z-index: 1;
}
.service-item:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 123, 255, 0.3);
border-color: #007bff;
}
.service-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
padding: 30px 25px;
text-align: center;
position: relative;
overflow: hidden;
}
.service-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(30px, -30px) rotate(120deg); }
66% { transform: translate(-20px, 20px) rotate(240deg); }
}
.service-icon-wrapper {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.service-item:hover .service-icon-wrapper {
transform: scale(1.1) rotate(5deg);
background: rgba(255, 255, 255, 0.3);
}
.service-icon-wrapper i {
font-size: 2rem;
color: #fff;
}
.service-header h3 {
color: #fff;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
position: relative;
z-index: 2;
}
.service-content {
padding: 30px 25px;
}
.service-content p {
color: #333;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.service-features {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.service-features li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
color: #555;
font-size: 0.95rem;
font-weight: 500;
}
.service-features i {
color: #007bff;
font-size: 1rem;
flex-shrink: 0;
}
.service-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
text-decoration: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
position: relative;
overflow: hidden;
}
.service-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.5s ease;
}
.service-btn:hover::before {
left: 100%;
}
.service-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
color: #fff;
}
/* Blue Star Services Responsive */
@media (max-width: 768px) {
.blue-star-services {
padding: 60px 0;
}
.services-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.services-subtitle {
font-size: 1.1rem;
}
.services-grid {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
.service-header {
padding: 25px 20px;
}
.service-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.service-icon-wrapper i {
font-size: 1.8rem;
}
.service-header h3 {
font-size: 1.3rem;
}
.service-content {
padding: 25px 20px;
}
}
@media (max-width: 576px) {
.blue-star-services {
padding: 40px 0;
}
.services-title {
font-size: 1.8rem;
}
.services-subtitle {
font-size: 1rem;
}
.services-grid {
gap: 20px;
margin-top: 30px;
}
.service-header {
padding: 20px 15px;
}
.service-icon-wrapper {
width: 60px;
height: 60px;
}
.service-icon-wrapper i {
font-size: 1.5rem;
}
.service-header h3 {
font-size: 1.2rem;
}
.service-content {
padding: 20px 15px;
}
.service-content p {
font-size: 0.95rem;
}
.service-features li {
font-size: 0.9rem;
}
.service-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* RO Services Section */
.ro-services-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 50%, #1a1a2e 100%);
overflow: hidden;
}
.ro-services-section .services-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
z-index: 1;
}
.ro-services-section .services-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
z-index: 2;
}
.ro-services-section .container {
position: relative;
z-index: 10;
}
.ro-services-section .services-title {
font-size: 3rem;
font-weight: 800;
color: #fff;
margin-bottom: 15px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
}
.ro-services-section .services-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.ro-services-section .services-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.ro-services-section .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.ro-services-section .service-item {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 0;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
position: relative;
border: 1px solid rgba(102, 126, 234, 0.2);
}
.ro-services-section .service-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
z-index: 1;
}
.ro-services-section .service-item:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(102, 126, 234, 0.3);
border-color: #667eea;
}
.ro-services-section .service-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px 25px;
text-align: center;
position: relative;
overflow: hidden;
}
.ro-services-section .service-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}
.ro-services-section .service-icon-wrapper {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.ro-services-section .service-item:hover .service-icon-wrapper {
transform: scale(1.1) rotate(5deg);
background: rgba(255, 255, 255, 0.3);
}
.ro-services-section .service-icon-wrapper i {
font-size: 2rem;
color: #fff;
}
.ro-services-section .service-header h3 {
color: #fff;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
position: relative;
z-index: 2;
}
.ro-services-section .service-content {
padding: 30px 25px;
}
.ro-services-section .service-content p {
color: #333;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.ro-services-section .service-features {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.ro-services-section .service-features li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
color: #555;
font-size: 0.95rem;
font-weight: 500;
}
.ro-services-section .service-features i {
color: #667eea;
font-size: 1rem;
flex-shrink: 0;
}
.ro-services-section .service-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
text-decoration: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.ro-services-section .service-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.5s ease;
}
.ro-services-section .service-btn:hover::before {
left: 100%;
}
.ro-services-section .service-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
color: #fff;
}
/* RO Services Responsive */
@media (max-width: 768px) {
.ro-services-section {
padding: 60px 0;
}
.ro-services-section .services-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.ro-services-section .services-subtitle {
font-size: 1.1rem;
}
.ro-services-section .services-grid {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
.ro-services-section .service-header {
padding: 25px 20px;
}
.ro-services-section .service-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.ro-services-section .service-icon-wrapper i {
font-size: 1.8rem;
}
.ro-services-section .service-header h3 {
font-size: 1.3rem;
}
.ro-services-section .service-content {
padding: 25px 20px;
}
}
@media (max-width: 576px) {
.ro-services-section {
padding: 40px 0;
}
.ro-services-section .services-title {
font-size: 1.8rem;
}
.ro-services-section .services-subtitle {
font-size: 1rem;
}
.ro-services-section .services-grid {
gap: 20px;
margin-top: 30px;
}
.ro-services-section .service-header {
padding: 20px 15px;
}
.ro-services-section .service-icon-wrapper {
width: 60px;
height: 60px;
}
.ro-services-section .service-icon-wrapper i {
font-size: 1.5rem;
}
.ro-services-section .service-header h3 {
font-size: 1.2rem;
}
.ro-services-section .service-content {
padding: 20px 15px;
}
.ro-services-section .service-content p {
font-size: 0.95rem;
}
.ro-services-section .service-features li {
font-size: 0.9rem;
}
.ro-services-section .service-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* Kent Services Section */
.kent-services-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 50%, #1a1a2e 100%);
overflow: hidden;
}
.kent-services-section .services-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 69, 0, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 165, 0, 0.05) 0%, transparent 70%);
z-index: 1;
}
.kent-services-section .services-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 140, 0, 0.02) 0%, rgba(255, 69, 0, 0.02) 100%);
z-index: 2;
}
.kent-services-section .container {
position: relative;
z-index: 10;
}
.kent-services-section .services-title {
font-size: 3rem;
font-weight: 800;
color: #fff;
margin-bottom: 15px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
}
.kent-services-section .services-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #ff8c00 0%, #ff4500 100%);
border-radius: 2px;
}
.kent-services-section .services-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.kent-services-section .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.kent-services-section .service-item {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 0;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
position: relative;
border: 1px solid rgba(255, 140, 0, 0.2);
}
.kent-services-section .service-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #ff8c00 0%, #ff4500 100%);
z-index: 1;
}
.kent-services-section .service-item:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(255, 140, 0, 0.3);
border-color: #ff8c00;
}
.kent-services-section .service-header {
background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
padding: 30px 25px;
text-align: center;
position: relative;
overflow: hidden;
}
.kent-services-section .service-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}
.kent-services-section .service-icon-wrapper {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.kent-services-section .service-item:hover .service-icon-wrapper {
transform: scale(1.1) rotate(5deg);
background: rgba(255, 255, 255, 0.3);
}
.kent-services-section .service-icon-wrapper i {
font-size: 2rem;
color: #fff;
}
.kent-services-section .service-header h3 {
color: #fff;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
position: relative;
z-index: 2;
}
.kent-services-section .service-content {
padding: 30px 25px;
}
.kent-services-section .service-content p {
color: #333;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.kent-services-section .service-features {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.kent-services-section .service-features li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
color: #555;
font-size: 0.95rem;
font-weight: 500;
}
.kent-services-section .service-features i {
color: #ff8c00;
font-size: 1rem;
flex-shrink: 0;
}
.kent-services-section .service-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
color: #fff;
text-decoration: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 140, 0, 0.3);
position: relative;
overflow: hidden;
}
.kent-services-section .service-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.5s ease;
}
.kent-services-section .service-btn:hover::before {
left: 100%;
}
.kent-services-section .service-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 140, 0, 0.4);
color: #fff;
}
/* Kent Services Responsive */
@media (max-width: 768px) {
.kent-services-section {
padding: 60px 0;
}
.kent-services-section .services-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.kent-services-section .services-subtitle {
font-size: 1.1rem;
}
.kent-services-section .services-grid {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
.kent-services-section .service-header {
padding: 25px 20px;
}
.kent-services-section .service-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.kent-services-section .service-icon-wrapper i {
font-size: 1.8rem;
}
.kent-services-section .service-header h3 {
font-size: 1.3rem;
}
.kent-services-section .service-content {
padding: 25px 20px;
}
}
@media (max-width: 576px) {
.kent-services-section {
padding: 40px 0;
}
.kent-services-section .services-title {
font-size: 1.8rem;
}
.kent-services-section .services-subtitle {
font-size: 1rem;
}
.kent-services-section .services-grid {
gap: 20px;
margin-top: 30px;
}
.kent-services-section .service-header {
padding: 20px 15px;
}
.kent-services-section .service-icon-wrapper {
width: 60px;
height: 60px;
}
.kent-services-section .service-icon-wrapper i {
font-size: 1.5rem;
}
.kent-services-section .service-header h3 {
font-size: 1.2rem;
}
.kent-services-section .service-content {
padding: 20px 15px;
}
.kent-services-section .service-content p {
font-size: 0.95rem;
}
.kent-services-section .service-features li {
font-size: 0.9rem;
}
.kent-services-section .service-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* Station Road Services Section */
.station-road-services-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 50%, #1a1a2e 100%);
overflow: hidden;
}
.station-road-services-section .services-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 123, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 86, 179, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.05) 0%, transparent 70%);
z-index: 1;
}
.station-road-services-section .services-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 123, 255, 0.02) 0%, rgba(0, 86, 179, 0.02) 100%);
z-index: 2;
}
.station-road-services-section .container {
position: relative;
z-index: 10;
}
.station-road-services-section .services-title {
font-size: 3rem;
font-weight: 800;
color: #fff;
margin-bottom: 15px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
}
.station-road-services-section .services-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
border-radius: 2px;
}
.station-road-services-section .services-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.station-road-services-section .services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.station-road-services-section .service-item {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 0;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
position: relative;
border: 1px solid rgba(0, 123, 255, 0.2);
}
.station-road-services-section .service-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
z-index: 1;
}
.station-road-services-section .service-item:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 123, 255, 0.3);
border-color: #007bff;
}
.station-road-services-section .service-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
padding: 30px 25px;
text-align: center;
position: relative;
overflow: hidden;
}
.station-road-services-section .service-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}
.station-road-services-section .service-icon-wrapper {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.station-road-services-section .service-item:hover .service-icon-wrapper {
transform: scale(1.1) rotate(5deg);
background: rgba(255, 255, 255, 0.3);
}
.station-road-services-section .service-icon-wrapper i {
font-size: 2rem;
color: #fff;
}
.station-road-services-section .service-header h3 {
color: #fff;
font-size: 1.4rem;
font-weight: 700;
margin: 0;
position: relative;
z-index: 2;
}
.station-road-services-section .service-content {
padding: 30px 25px;
}
.station-road-services-section .service-content p {
color: #333;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.station-road-services-section .service-features {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.station-road-services-section .service-features li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
color: #555;
font-size: 0.95rem;
font-weight: 500;
}
.station-road-services-section .service-features i {
color: #007bff;
font-size: 1rem;
flex-shrink: 0;
}
.station-road-services-section .service-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
text-decoration: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
position: relative;
overflow: hidden;
}
.station-road-services-section .service-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.5s ease;
}
.station-road-services-section .service-btn:hover::before {
left: 100%;
}
.station-road-services-section .service-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
color: #fff;
}
/* Station Road Services Responsive */
@media (max-width: 768px) {
.station-road-services-section {
padding: 60px 0;
}
.station-road-services-section .services-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.station-road-services-section .services-subtitle {
font-size: 1.1rem;
}
.station-road-services-section .services-grid {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
.station-road-services-section .service-header {
padding: 25px 20px;
}
.station-road-services-section .service-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.station-road-services-section .service-icon-wrapper i {
font-size: 1.8rem;
}
.station-road-services-section .service-header h3 {
font-size: 1.3rem;
}
.station-road-services-section .service-content {
padding: 25px 20px;
}
}
@media (max-width: 576px) {
.station-road-services-section {
padding: 40px 0;
}
.station-road-services-section .services-title {
font-size: 1.8rem;
}
.station-road-services-section .services-subtitle {
font-size: 1rem;
}
.station-road-services-section .services-grid {
gap: 20px;
margin-top: 30px;
}
.station-road-services-section .service-header {
padding: 20px 15px;
}
.station-road-services-section .service-icon-wrapper {
width: 60px;
height: 60px;
}
.station-road-services-section .service-icon-wrapper i {
font-size: 1.5rem;
}
.station-road-services-section .service-header h3 {
font-size: 1.2rem;
}
.station-road-services-section .service-content {
padding: 20px 15px;
}
.station-road-services-section .service-content p {
font-size: 0.95rem;
}
.station-road-services-section .service-features li {
font-size: 0.9rem;
}
.station-road-services-section .service-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* Why Choose Us Section */
.why-choose-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
overflow: hidden;
}
.choose-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 86, 179, 0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.03) 0%, transparent 70%);
z-index: 1;
}
.choose-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 123, 255, 0.01) 0%, rgba(0, 86, 179, 0.01) 100%);
z-index: 2;
}
.why-choose-section .container {
position: relative;
z-index: 10;
}
.choose-title {
font-size: 3rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
display: inline-block;
}
.choose-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
border-radius: 2px;
}
.choose-subtitle {
font-size: 1.2rem;
color: #6c757d;
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
.feature-item {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
position: relative;
border: 2px solid transparent;
overflow: hidden;
}
.feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.feature-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 123, 255, 0.2);
border-color: rgba(0, 123, 255, 0.2);
}
.feature-item:hover::before {
transform: scaleX(1);
}
.feature-icon-wrapper {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}
.feature-item:hover .feature-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
}
.feature-icon-wrapper i {
font-size: 2rem;
color: #fff;
}
.feature-content h3 {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
}
.feature-content p {
color: #6c757d;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.feature-stats {
display: flex;
align-items: center;
gap: 15px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}
.stat-number {
font-size: 2rem;
font-weight: 800;
color: #007bff;
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Why Choose Us Responsive */
@media (max-width: 768px) {
.why-choose-section {
padding: 60px 0;
}
.choose-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.choose-subtitle {
font-size: 1.1rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
.feature-item {
padding: 25px 20px;
}
.feature-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.feature-icon-wrapper i {
font-size: 1.8rem;
}
.feature-content h3 {
font-size: 1.3rem;
}
.stat-number {
font-size: 1.8rem;
}
.stat-label {
font-size: 0.85rem;
}
}
@media (max-width: 576px) {
.why-choose-section {
padding: 40px 0;
}
.choose-title {
font-size: 1.8rem;
}
.choose-subtitle {
font-size: 1rem;
}
.features-grid {
gap: 20px;
margin-top: 30px;
}
.feature-item {
padding: 20px 15px;
}
.feature-icon-wrapper {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.feature-icon-wrapper i {
font-size: 1.5rem;
}
.feature-content h3 {
font-size: 1.2rem;
}
.feature-content p {
font-size: 0.95rem;
}
.stat-number {
font-size: 1.5rem;
}
.stat-label {
font-size: 0.8rem;
}
}
/* Enhanced Service Areas Section */
.service-areas-enhanced {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 50%, #1a1a2e 100%);
overflow: hidden;
}
.areas-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
z-index: 1;
}
.areas-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
z-index: 2;
}
.service-areas-enhanced .container {
position: relative;
z-index: 10;
}
.areas-title {
font-size: 3rem;
font-weight: 800;
color: #fff;
margin-bottom: 15px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
}
.areas-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.areas-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.areas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.area-item {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
position: relative;
border: 1px solid rgba(102, 126, 234, 0.2);
overflow: hidden;
}
.area-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
z-index: 1;
}
.area-item:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(102, 126, 234, 0.3);
border-color: #667eea;
}
.area-icon-wrapper {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.area-item:hover .area-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.area-icon-wrapper i {
font-size: 2rem;
color: #fff;
}
.area-content h3 {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
}
.area-content p {
color: #6c757d;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.area-features {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 25px;
}
.area-feature {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: #667eea;
font-weight: 500;
}
.area-feature i {
font-size: 0.8rem;
}
.area-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
text-decoration: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.area-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.5s ease;
}
.area-btn:hover::before {
left: 100%;
}
.area-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
color: #fff;
}
.view-all-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
text-decoration: none;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.view-all-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.5s ease;
}
.view-all-btn:hover::before {
left: 100%;
}
.view-all-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
color: #fff;
}
/* Enhanced Brand Services Section */
.brand-services-enhanced {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
overflow: hidden;
}
.brands-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 69, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 123, 255, 0.03) 0%, transparent 70%);
z-index: 1;
}
.brands-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 140, 0, 0.01) 0%, rgba(255, 69, 0, 0.01) 100%);
z-index: 2;
}
.brand-services-enhanced .container {
position: relative;
z-index: 10;
}
.brands-title {
font-size: 3rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
display: inline-block;
}
.brands-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #ff8c00 0%, #ff4500 100%);
border-radius: 2px;
}
.brands-subtitle {
font-size: 1.2rem;
color: #6c757d;
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.brands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-top: 50px;
}
.brand-item {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
position: relative;
border: 2px solid transparent;
overflow: hidden;
}
.brand-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.brand-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.brand-item:hover::before {
transform: scaleX(1);
}
.brand-icon-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.brand-icon-wrapper.kent {
background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
}
.brand-icon-wrapper.aquaguard {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.brand-icon-wrapper.pureit {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}
.brand-icon-wrapper.livpure {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}
.brand-icon-wrapper.bluestar {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}
.brand-icon-wrapper.allbrands {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}
.brand-item:hover .brand-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.brand-icon-wrapper i {
font-size: 2rem;
color: #fff;
}
.brand-content h3 {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
}
.brand-content p {
color: #6c757d;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.brand-stats {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 10px 15px;
border-radius: 10px;
margin-bottom: 20px;
text-align: center;
}
.stat {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a2e;
}
.brand-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 100%);
color: #fff;
text-decoration: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.brand-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.5s ease;
}
.brand-btn:hover::before {
left: 100%;
}
.brand-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
color: #fff;
}
.view-all-brands-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 100%);
color: #fff;
text-decoration: none;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.view-all-brands-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.5s ease;
}
.view-all-brands-btn:hover::before {
left: 100%;
}
.view-all-brands-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
color: #fff;
}
/* Enhanced Sections Responsive */
@media (max-width: 768px) {
.service-areas-enhanced {
padding: 60px 0;
}
.areas-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.areas-subtitle {
font-size: 1.1rem;
}
.areas-grid {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
.area-item {
padding: 25px 20px;
}
.area-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.area-icon-wrapper i {
font-size: 1.8rem;
}
.area-content h3 {
font-size: 1.3rem;
}
.brand-services-enhanced {
padding: 60px 0;
}
.brands-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.brands-subtitle {
font-size: 1.1rem;
}
.brands-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}
.brand-item {
padding: 25px 20px;
}
.brand-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.brand-icon-wrapper i {
font-size: 1.8rem;
}
.brand-content h3 {
font-size: 1.3rem;
}
}
@media (max-width: 576px) {
.service-areas-enhanced {
padding: 40px 0;
}
.areas-title {
font-size: 1.8rem;
}
.areas-subtitle {
font-size: 1rem;
}
.areas-grid {
gap: 20px;
margin-top: 30px;
}
.area-item {
padding: 20px 15px;
}
.area-icon-wrapper {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.area-icon-wrapper i {
font-size: 1.5rem;
}
.area-content h3 {
font-size: 1.2rem;
}
.brand-services-enhanced {
padding: 40px 0;
}
.brands-title {
font-size: 1.8rem;
}
.brands-subtitle {
font-size: 1rem;
}
.brands-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 30px;
}
.brand-item {
padding: 20px 15px;
}
.brand-icon-wrapper {
width: 60px;
height: 60px;
margin-bottom: 15px;
}
.brand-icon-wrapper i {
font-size: 1.5rem;
}
.brand-content h3 {
font-size: 1.2rem;
}
}
}
/* Services Page Styles */
/* Services Hero Section */
.services-hero-section {
padding: 100px 0 80px 0;
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 50%, #1a1a2e 100%);
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
z-index: 2;
}
.services-hero-section .container {
position: relative;
z-index: 10;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
}
.hero-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100px;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
line-height: 1.6;
}
.hero-actions {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.hero-btn-primary {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
text-decoration: none;
padding: 15px 35px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.hero-btn-primary::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.5s ease;
}
.hero-btn-primary:hover::before {
left: 100%;
}
.hero-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
color: #fff;
}
.hero-btn-secondary {
display: inline-flex;
align-items: center;
gap: 12px;
background: transparent;
color: #fff;
text-decoration: none;
padding: 15px 35px;
border: 2px solid #fff;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
}
.hero-btn-secondary:hover {
background: #fff;
color: #1a1a2e;
transform: translateY(-3px);
}
.hero-image {
text-align: center;
}
.hero-image img {
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
max-width: 100%;
height: auto;
}
/* Services Main Section */
.services-main-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
overflow: hidden;
}
.services-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 86, 179, 0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.03) 0%, transparent 70%);
z-index: 1;
}
.services-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 123, 255, 0.01) 0%, rgba(0, 86, 179, 0.01) 100%);
z-index: 2;
}
.services-main-section .container {
position: relative;
z-index: 10;
}
.services-title {
font-size: 3rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
display: inline-block;
}
.services-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
border-radius: 2px;
}
.services-subtitle {
font-size: 1.2rem;
color: #6c757d;
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-item {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
position: relative;
border: 2px solid transparent;
}
.service-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.service-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 123, 255, 0.2);
}
.service-item:hover::before {
transform: scaleX(1);
}
.service-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
padding: 30px;
text-align: center;
position: relative;
overflow: hidden;
}
.service-header::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}
.service-icon-wrapper {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.service-item:hover .service-icon-wrapper {
transform: scale(1.1) rotate(5deg);
background: rgba(255, 255, 255, 0.3);
}
.service-icon-wrapper i {
font-size: 2rem;
color: #fff;
}
.service-header h3 {
color: #fff;
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 15px 0;
position: relative;
z-index: 2;
}
.service-price {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
padding: 8px 15px;
display: inline-block;
position: relative;
z-index: 2;
}
.price-amount {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
display: block;
}
.price-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
display: block;
margin-top: 2px;
}
.service-content {
padding: 30px;
}
.service-content p {
color: #6c757d;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 20px;
}
.service-features {
margin-bottom: 25px;
}
.service-feature {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
color: #555;
font-size: 0.9rem;
font-weight: 500;
}
.service-feature i {
color: #007bff;
font-size: 0.9rem;
flex-shrink: 0;
}
.service-actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.service-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
text-decoration: none;
padding: 12px 25px;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
position: relative;
overflow: hidden;
flex: 1;
justify-content: center;
}
.service-btn-primary::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.5s ease;
}
.service-btn-primary:hover::before {
left: 100%;
}
.service-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
color: #fff;
}
.service-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #007bff;
text-decoration: none;
padding: 12px 25px;
border: 2px solid #007bff;
border-radius: 50px;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
flex: 1;
justify-content: center;
}
.service-btn-secondary:hover {
background: #007bff;
color: #fff;
transform: translateY(-2px);
}
/* Process Section */
.process-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 50%, #1a1a2e 100%);
overflow: hidden;
}
.process-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
z-index: 1;
}
.process-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
z-index: 2;
}
.process-section .container {
position: relative;
z-index: 10;
}
.process-title {
font-size: 3rem;
font-weight: 800;
color: #fff;
margin-bottom: 15px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
}
.process-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.process-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
}
.process-item {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 30px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
transition: all 0.4s ease;
position: relative;
border: 1px solid rgba(102, 126, 234, 0.2);
}
.process-item:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(102, 126, 234, 0.3);
border-color: #667eea;
}
.process-icon-wrapper {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.process-item:hover .process-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.process-icon-wrapper i {
font-size: 2.5rem;
color: #fff;
}
.process-number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
font-size: 0.9rem;
}
.process-content h3 {
font-size: 1.4rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
}
.process-content p {
color: #6c757d;
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
/* Brands Section */
.brands-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
overflow: hidden;
}
.brands-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 140, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 69, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 123, 255, 0.03) 0%, transparent 70%);
z-index: 1;
}
.brands-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 140, 0, 0.01) 0%, rgba(255, 69, 0, 0.01) 100%);
z-index: 2;
}
.brands-section .container {
position: relative;
z-index: 10;
}
.brands-title {
font-size: 3rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
display: inline-block;
}
.brands-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #ff8c00 0%, #ff4500 100%);
border-radius: 2px;
}
.brands-subtitle {
font-size: 1.2rem;
color: #6c757d;
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.brands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
margin-top: 50px;
}
.brand-item {
background: #fff;
border-radius: 20px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
position: relative;
border: 2px solid transparent;
overflow: hidden;
}
.brand-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.brand-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.brand-item:hover::before {
transform: scaleX(1);
}
.brand-icon-wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.brand-icon-wrapper.kent {
background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
}
.brand-icon-wrapper.aquaguard {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.brand-icon-wrapper.pureit {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}
.brand-icon-wrapper.livpure {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}
.brand-icon-wrapper.bluestar {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}
.brand-icon-wrapper.eureka {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}
.brand-icon-wrapper.whirlpool {
background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}
.brand-icon-wrapper.others {
background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
}
.brand-item:hover .brand-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.brand-icon-wrapper i {
font-size: 2rem;
color: #fff;
}
.brand-item h3 {
font-size: 1.2rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 10px;
}
.brand-item p {
color: #6c757d;
font-size: 0.9rem;
margin: 0;
}
/* Services Page Responsive */
@media (max-width: 768px) {
.services-hero-section {
padding: 80px 0 60px 0;
}
.hero-title {
font-size: 2.5rem;
margin-bottom: 15px;
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 25px;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.services-main-section {
padding: 60px 0;
}
.services-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.services-subtitle {
font-size: 1.1rem;
}
.services-grid {
grid-template-columns: 1fr;
gap: 25px;
margin-top: 40px;
}
.service-header {
padding: 25px;
}
.service-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.service-icon-wrapper i {
font-size: 1.8rem;
}
.service-header h3 {
font-size: 1.3rem;
}
.service-content {
padding: 25px;
}
.process-section {
padding: 60px 0;
}
.process-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.process-subtitle {
font-size: 1.1rem;
}
.process-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 40px;
}
.process-icon-wrapper {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.process-icon-wrapper i {
font-size: 2rem;
}
.process-content h3 {
font-size: 1.3rem;
}
.brands-section {
padding: 60px 0;
}
.brands-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.brands-subtitle {
font-size: 1.1rem;
}
.brands-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
margin-top: 40px;
}
.brand-item {
padding: 25px 15px;
}
.brand-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.brand-icon-wrapper i {
font-size: 1.8rem;
}
.brand-item h3 {
font-size: 1.1rem;
}
}
@media (max-width: 576px) {
.services-hero-section {
padding: 60px 0 40px 0;
}
.hero-title {
font-size: 2rem;
margin-bottom: 10px;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 20px;
}
.services-main-section {
padding: 40px 0;
}
.services-title {
font-size: 1.8rem;
}
.services-subtitle {
font-size: 1rem;
}
.services-grid {
gap: 20px;
margin-top: 30px;
}
.service-header {
padding: 20px;
}
.service-icon-wrapper {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
.service-icon-wrapper i {
font-size: 1.5rem;
}
.service-header h3 {
font-size: 1.2rem;
}
.service-content {
padding: 20px;
}
.service-actions {
flex-direction: column;
}
.process-section {
padding: 40px 0;
}
.process-title {
font-size: 1.8rem;
}
.process-subtitle {
font-size: 1rem;
}
.process-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 30px;
}
.process-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.process-icon-wrapper i {
font-size: 1.8rem;
}
.process-content h3 {
font-size: 1.2rem;
}
.brands-section {
padding: 40px 0;
}
.brands-title {
font-size: 1.8rem;
}
.brands-subtitle {
font-size: 1rem;
}
.brands-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-top: 30px;
}
.brand-item {
padding: 20px 15px;
}
.brand-icon-wrapper {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
.brand-icon-wrapper i {
font-size: 1.5rem;
}
.brand-item h3 {
font-size: 1rem;
}
}
/* Featured Products Section */
.featured-products-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
overflow: hidden;
}
.products-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 86, 179, 0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.03) 0%, transparent 70%);
z-index: 1;
}
.products-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 123, 255, 0.01) 0%, rgba(0, 86, 179, 0.01) 100%);
z-index: 2;
}
.featured-products-section .container {
position: relative;
z-index: 10;
}
.products-title {
font-size: 3rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
display: inline-block;
}
.products-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
border-radius: 2px;
}
.products-subtitle {
font-size: 1.2rem;
color: #6c757d;
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 50px;
}
.product-item {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
position: relative;
border: 2px solid transparent;
}
.product-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.product-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 123, 255, 0.2);
}
.product-item:hover::before {
transform: scaleX(1);
}
.product-header {
position: relative;
}
.product-image-wrapper {
position: relative;
overflow: hidden;
height: 250px;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-item:hover .product-image {
transform: scale(1.05);
}
.product-badges {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
display: flex;
justify-content: space-between;
align-items: flex-start;
z-index: 2;
}
.product-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #fff;
display: inline-block;
margin-bottom: 5px;
}
.product-badge.bestseller {
background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
}
.product-badge.popular {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.product-badge.new {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}
.product-badge.hotdeal {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}
.product-discount {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
padding: 6px 10px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
color: #fff;
display: inline-block;
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.product-item:hover .product-overlay {
opacity: 1;
}
.quick-view-btn {
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #007bff;
transition: all 0.3s ease;
cursor: pointer;
}
.quick-view-btn:hover {
background: #fff;
transform: scale(1.1);
color: #0056b3;
}
.product-brand {
background: #f8f9fa;
padding: 10px 15px;
text-align: center;
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
}
.product-brand.kent {
color: #ff8c00;
}
.product-brand.aquaguard {
color: #28a745;
}
.product-brand.pureit {
color: #007bff;
}
.product-brand.livpure {
color: #ffc107;
}
.product-content {
padding: 25px;
}
.product-content h3 {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
line-height: 1.3;
}
.product-rating {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.stars {
display: flex;
gap: 2px;
}
.stars i {
font-size: 0.9rem;
color: #ffc107;
}
.rating-text {
font-size: 0.85rem;
color: #6c757d;
font-weight: 500;
}
.product-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.feature-tag {
background: #e9ecef;
color: #495057;
padding: 4px 10px;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.product-price {
margin-bottom: 20px;
}
.price-info {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 5px;
}
.current-price {
font-size: 1.5rem;
font-weight: 800;
color: #007bff;
}
.original-price {
font-size: 1rem;
color: #6c757d;
text-decoration: line-through;
}
.saving-text {
font-size: 0.85rem;
color: #28a745;
font-weight: 600;
display: block;
}
.product-actions {
display: flex;
gap: 10px;
}
.action-btn {
flex: 1;
padding: 12px 15px;
border: none;
border-radius: 10px;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
}
.action-btn.secondary {
background: #f8f9fa;
color: #007bff;
border: 2px solid #007bff;
}
.action-btn.secondary:hover {
background: #007bff;
color: #fff;
transform: translateY(-2px);
}
.action-btn.primary {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}
.action-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
}
.view-all-products-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
text-decoration: none;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3);
position: relative;
overflow: hidden;
}
.view-all-products-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.5s ease;
}
.view-all-products-btn:hover::before {
left: 100%;
}
.view-all-products-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 123, 255, 0.4);
color: #fff;
}
/* Featured Products Responsive */
@media (max-width: 768px) {
.featured-products-section {
padding: 60px 0;
}
.products-title {
font-size: 2.2rem;
margin-bottom: 12px;
}
.products-subtitle {
font-size: 1.1rem;
}
.products-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 40px;
}
.product-image-wrapper {
height: 200px;
}
.product-content {
padding: 20px;
}
.product-content h3 {
font-size: 1.2rem;
}
.current-price {
font-size: 1.3rem;
}
.action-btn {
padding: 10px 12px;
font-size: 0.9rem;
}
}
/* Floating Cart Button */
.floating-cart {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 10px 25px rgba(0, 123, 255, 0.4);
transition: all 0.3s ease;
z-index: 9998;
animation: float 3s ease-in-out infinite;
}
.floating-cart:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 15px 35px rgba(0, 123, 255, 0.5);
}
.cart-count {
position: absolute;
top: -5px;
right: -5px;
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: #fff;
border-radius: 50%;
width: 24px;
height: 24px;
display: none;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
border: 2px solid #fff;
animation: pulse 2s ease-in-out infinite;
}
/* Enhanced Cart Modal Styles */
.cart-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #e9ecef;
}
.cart-item:last-child {
border-bottom: none;
}
.cart-item-info h6 {
font-size: 1rem;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 5px;
}
.cart-item-info small {
color: #6c757d;
font-size: 0.85rem;
}
.cart-item-actions {
display: flex;
align-items: center;
gap: 8px;
}
.cart-item-actions .btn {
padding: 5px 10px;
font-size: 0.8rem;
border-radius: 5px;
min-width: 35px;
}
.cart-item-actions span {
font-weight: 600;
color: #1a1a2e;
min-width: 20px;
text-align: center;
}
/* Notification Styles */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: #fff;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 10px;
z-index: 10000;
transform: translateX(400px);
transition: all 0.3s ease;
min-width: 250px;
}
.notification.show {
transform: translateX(0);
}
.notification-success {
border-left: 4px solid #28a745;
}
.notification-success i {
color: #28a745;
}
.notification-error {
border-left: 4px solid #dc3545;
}
.notification-error i {
color: #dc3545;
}
.notification-warning {
border-left: 4px solid #ffc107;
}
.notification-warning i {
color: #ffc107;
}
.notification-info {
border-left: 4px solid #007bff;
}
.notification-info i {
color: #007bff;
}
/* Animations */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* Search and Filter Bar */
.search-filter-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 40px;
padding: 20px;
background: #fff;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
flex-wrap: wrap;
}
.search-section {
flex: 1;
min-width: 250px;
}
.search-box {
position: relative;
display: flex;
align-items: center;
background: #f8f9fa;
border-radius: 10px;
padding: 12px 15px;
transition: all 0.3s ease;
}
.search-box:hover {
background: #e9ecef;
}
.search-box i {
color: #6c757d;
margin-right: 10px;
font-size: 1rem;
}
.search-box input {
border: none;
background: none;
outline: none;
flex: 1;
font-size: 0.95rem;
color: #1a1a2e;
}
.search-box input::placeholder {
color: #6c757d;
}
.filter-section {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.sort-dropdown select {
padding: 10px 15px;
border: 2px solid #e9ecef;
border-radius: 8px;
background: #fff;
font-size: 0.9rem;
color: #1a1a2e;
cursor: pointer;
transition: all 0.3s ease;
}
.sort-dropdown select:hover {
border-color: #007bff;
}
.sort-dropdown select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.view-toggle {
display: flex;
gap: 5px;
background: #f8f9fa;
padding: 5px;
border-radius: 8px;
}
.view-btn {
padding: 8px 12px;
border: none;
background: transparent;
color: #6c757d;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.view-btn:hover {
background: #e9ecef;
color: #1a1a2e;
}
.view-btn.active {
background: #007bff;
color: #fff;
}
.wishlist-toggle {
position: relative;
}
.wishlist-btn {
padding: 10px 15px;
border: 2px solid #e9ecef;
background: #fff;
color: #6c757d;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
font-size: 0.9rem;
}
.wishlist-btn:hover {
border-color: #dc3545;
color: #dc3545;
background: #fff5f5;
}
.wishlist-count {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: #fff;
border-radius: 50%;
width: 20px;
height: 20px;
display: none;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
border: 2px solid #fff;
animation: pulse 2s ease-in-out infinite;
}
/* Enhanced Product Overlay */
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
.product-item:hover .product-overlay {
opacity: 1;
}
.product-overlay .wishlist-btn {
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: #dc3545;
transition: all 0.3s ease;
cursor: pointer;
}
.product-overlay .wishlist-btn:hover {
background: #fff;
transform: scale(1.1);
color: #dc3545;
}
.product-overlay .wishlist-btn.active {
background: #dc3545;
color: #fff;
}
/* List View Styles */
.products-grid.list-view {
display: flex;
flex-direction: column;
gap: 20px;
}
.products-grid.list-view .product-item {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
}
.products-grid.list-view .product-header {
width: 200px;
flex-shrink: 0;
}
.products-grid.list-view .product-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.products-grid.list-view .product-image-wrapper {
height: 150px;
}
.products-grid.list-view .product-actions {
flex-direction: column;
gap: 10px;
min-width: 200px;
}
/* Wishlist Modal Styles */
.wishlist-container {
max-height: 400px;
overflow-y: auto;
}
.wishlist-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #e9ecef;
}
.wishlist-item:last-child {
border-bottom: none;
}
.wishlist-item-info h6 {
font-size: 1rem;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 5px;
}
.wishlist-item-actions {
display: flex;
gap: 10px;
}
.wishlist-footer {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
display: flex;
justify-content: center;
gap: 15px;
}
/* Enhanced No Results Message */
.no-products {
text-align: center;
padding: 60px 20px;
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
grid-column: 1 / -1;
}
.no-products-icon {
font-size: 4rem;
color: #6c757d;
margin-bottom: 20px;
}
.no-products h3 {
font-size: 1.5rem;
color: #1a1a2e;
margin-bottom: 10px;
}
.no-products p {
color: #6c757d;
margin-bottom: 20px;
}
/* Responsive Search Bar */
@media (max-width: 768px) {
.search-filter-bar {
flex-direction: column;
gap: 15px;
}
.search-section {
width: 100%;
}
.filter-section {
width: 100%;
justify-content: space-between;
}
.sort-dropdown {
flex: 1;
}
.sort-dropdown select {
width: 100%;
}
}
@media (max-width: 576px) {
.search-filter-bar {
padding: 15px;
}
.filter-section {
flex-direction: column;
gap: 10px;
}
.view-toggle {
justify-content: center;
}
.wishlist-toggle {
align-self: center;
}
.products-grid.list-view .product-item {
flex-direction: column;
text-align: center;
}
.products-grid.list-view .product-header {
width: 100%;
}
.products-grid.list-view .product-actions {
width: 100%;
flex-direction: row;
}
}
/* Products Hero Section - Enhanced */
.products-hero-section {
padding: 120px 0 80px 0;
position: relative;
background: linear-gradient(135deg, #1a1a2e 0%, #2d3561 50%, #1a1a2e 100%);
overflow: hidden;
min-height: 500px;
display: flex;
align-items: center;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
z-index: 1;
animation: heroBackground 20s ease-in-out infinite;
}
@keyframes heroBackground {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
z-index: 2;
}
.products-hero-section .container {
position: relative;
z-index: 10;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
animation: fadeInUp 1s ease-out;
}
.hero-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100px;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
animation: slideIn 1.2s ease-out;
}
.hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
line-height: 1.6;
animation: fadeInUp 1.2s ease-out;
}
.hero-actions {
display: flex;
gap: 20px;
flex-wrap: wrap;
animation: fadeInUp 1.4s ease-out;
}
.hero-btn-primary {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
text-decoration: none;
padding: 15px 35px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
animation: bounceIn 1.6s ease-out;
}
.hero-btn-primary::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.5s ease;
}
.hero-btn-primary:hover::before {
left: 100%;
}
.hero-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
color: #fff;
}
.hero-btn-secondary {
display: inline-flex;
align-items: center;
gap: 12px;
background: transparent;
color: #fff;
text-decoration: none;
padding: 15px 35px;
border: 2px solid #fff;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
transition: all 0.3s ease;
animation: bounceIn 1.8s ease-out;
}
.hero-btn-secondary:hover {
background: #fff;
color: #1a1a2e;
transform: translateY(-3px);
}
.hero-image {
text-align: center;
font-size: 5rem;
color: rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
height: 200px;
animation: float 3s ease-in-out infinite;
}
.hero-image i {
animation: rotate 4s linear infinite;
}
/* Breadcrumb Styles */
.breadcrumb {
background: rgba(255, 255, 255, 0.1);
padding: 10px 15px;
border-radius: 10px;
margin-bottom: 20px;
animation: fadeInUp 0.8s ease-out;
}
.breadcrumb-item {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.breadcrumb-item a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-item a:hover {
color: #667eea;
}
.breadcrumb-item.active {
color: rgba(255, 255, 255, 0.9);
}
/* Hero Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
width: 0;
}
to {
width: 100px;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
25% {
transform: translateY(-10px) rotate(5deg);
}
75% {
transform: translateY(-5px) rotate(-5deg);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (max-width: 576px) {
.featured-products-section {
padding: 40px 0;
}
.products-title {
font-size: 1.8rem;
}
.products-subtitle {
font-size: 1rem;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 30px;
}
.product-image-wrapper {
height: 180px;
}
.product-content {
padding: 15px;
}
.product-content h3 {
font-size: 1.1rem;
}
.product-actions {
flex-direction: column;
}
.action-btn {
padding: 12px 15px;
font-size: 0.9rem;
}
.view-all-products-btn {
padding: 12px 30px;
font-size: 1rem;
}
}
.hero-features {
justify-content: center;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.hero-features .feature-item {
flex: 0 0 45%;
margin-bottom: 1rem;
padding: 0.5rem;
}
.hero-image {
text-align: center;
margin-top: 2rem;
order: -1;
}
.floating-elements {
display: none;
}
.hero-main-image {
max-width: 85%;
margin: 0 auto;
height: auto;
}
.image-container-modern {
position: relative;
margin-bottom: 2rem;
}
}
@media (max-width: 576px) {
.hero-section {
padding: 40px 0;
}
.hero-title {
font-size: 1.8rem;
}
.hero-subtitle {
font-size: 0.95rem;
}
.hero-features .feature-item {
flex: 0 0 100%;
text-align: center;
}
.hero-buttons .btn {
padding: 0.8rem 1.2rem;
font-size: 1rem;
}
.hero-main-image {
max-width: 90%;
}
}
/* Professional Footer Styles */
.professional-footer {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: #fff;
position: relative;
overflow: hidden;
}
.professional-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}
.footer-top {
padding: 80px 0 40px;
position: relative;
}
.footer-brand {
margin-bottom: 30px;
}
.brand-logo-footer {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.logo-icon-footer {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #fff;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
animation: logoFloat 3s ease-in-out infinite;
}
.brand-text-footer {
display: flex;
flex-direction: column;
}
.brand-name-footer {
font-size: 1.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 2px;
}
.brand-location-footer {
font-size: 0.9rem;
color: #667eea;
font-weight: 500;
}
.footer-description {
color: #b8c1ec;
line-height: 1.6;
margin-bottom: 25px;
font-size: 0.95rem;
}
.social-media {
display: flex;
gap: 12px;
}
.social-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.social-icon:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
color: #fff;
}
.footer-links {
margin-bottom: 30px;
}
.footer-title {
color: #fff;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.footer-nav {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav li {
margin-bottom: 12px;
}
.footer-nav a {
color: #b8c1ec;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.footer-nav a:hover {
color: #667eea;
transform: translateX(5px);
}
.footer-nav i {
font-size: 0.8rem;
transition: transform 0.3s ease;
}
.footer-nav a:hover i {
transform: translateX(3px);
}
.footer-contact {
margin-bottom: 30px;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 15px;
}
.contact-icon {
width: 35px;
height: 35px;
background: rgba(102, 126, 234, 0.2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #667eea;
font-size: 0.9rem;
flex-shrink: 0;
}
.contact-text h6 {
color: #fff;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 2px;
}
.contact-text p {
color: #b8c1ec;
font-size: 0.85rem;
margin: 0;
line-height: 1.4;
}
.footer-bottom {
background: rgba(0, 0, 0, 0.3);
padding: 25px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-copyright p {
color: #b8c1ec;
margin: 0;
font-size: 0.9rem;
}
.footer-bottom-links {
display: flex;
gap: 20px;
justify-content: flex-end;
flex-wrap: wrap;
}
.footer-bottom-links a {
color: #b8c1ec;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
position: relative;
}
.footer-bottom-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #667eea;
transition: width 0.3s ease;
}
.footer-bottom-links a:hover {
color: #667eea;
}
.footer-bottom-links a:hover::after {
width: 100%;
}
/* Footer Responsive */
@media (max-width: 768px) {
.footer-top {
padding: 60px 0 30px;
}
.brand-logo-footer {
justify-content: center;
text-align: center;
}
.footer-description {
text-align: center;
}
.social-media {
justify-content: center;
}
.footer-links,
.footer-contact {
text-align: center;
margin-bottom: 30px;
}
.footer-title::after {
left: 50%;
transform: translateX(-50%);
}
.footer-nav a {
justify-content: center;
}
.contact-item {
justify-content: center;
text-align: left;
}
.footer-bottom-links {
justify-content: center;
margin-top: 15px;
}
}
@media (max-width: 576px) {
.footer-top {
padding: 40px 0 20px;
}
.logo-icon-footer {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
.brand-name-footer {
font-size: 1.3rem;
}
.footer-bottom {
padding: 20px 0;
}
.footer-bottom-links {
flex-direction: column;
gap: 10px;
align-items: center;
}
}
/* Remove extra space after footer */
.professional-footer {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
html {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
@media (max-width: 480px) {
.hero-title {
font-size: 1.6rem;
}
.hero-subtitle {
font-size: 0.9rem;
}
.hero-buttons .btn {
padding: 0.7rem 1rem;
font-size: 0.95rem;
}
}
/* Extra Small Mobile Devices */
@media (max-width: 400px) {
.hero-section {
padding: 30px 0;
}
.hero-content h1 {
font-size: 1.3rem;
}
.hero-content .display-3 {
font-size: 1.1rem;
}
.hero-content .lead {
font-size: 0.85rem;
}
.hero-badge .badge {
font-size: 0.7rem;
padding: 4px 8px;
}
.btn {
font-size: 0.85rem;
padding: 8px 12px;
}
.btn-lg {
font-size: 0.9rem;
padding: 10px 16px;
}
.hero-stats .col-3 {
flex: 0 0 100%;
max-width: 100%;
}
.product-image img {
height: 180px;
}
.product-actions .btn {
font-size: 0.75rem;
padding: 5px 10px;
}
.service-card {
padding: 20px 15px;
}
.service-card h4 {
font-size: 1.1rem;
}
.service-card p {
font-size: 0.85rem;
}
}
/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
.btn:hover {
transform: none;
}
.product-card:hover {
transform: none;
}
.service-card:hover {
transform: none;
}
.testimonial-card:hover {
transform: none;
}
.feature-card:hover {
transform: none;
}
/* Increase touch target sizes */
.btn {
min-height: 44px;
min-width: 44px;
}
.nav-link {
min-height: 44px;
display: flex;
align-items: center;
}
.cart-link {
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* Landscape orientation fixes */
@media (max-width: 768px) and (orientation: landscape) {
.hero-section {
padding: 30px 0;
min-height: auto;
}
.hero-section .row {
min-height: auto;
}
.hero-content {
margin-bottom: 20px;
}
.hero-image {
margin-top: 0;
}
.hero-image img {
max-height: 250px;
}
}
/* Loading Animation */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Alert Styles */
.alert {
border-radius: 10px;
border: none;
padding: 15px 20px;
}
.alert-success {
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
color: #155724;
}
.alert-danger {
background: linear-gradient(135deg, #fccb90 0%, #ff9a9e 100%);
color: #721c24;
}
/* Table Styles */
.table {
border-radius: 10px;
overflow: hidden;
}
.table thead th {
background: linear-gradient(135deg, var(--water-blue), var(--water-dark));
color: white;
border: none;
font-weight: 600;
}
.table tbody tr:hover {
background: rgba(0, 123, 255, 0.05);
}
/* Status Badges */
.status-badge {
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
}
.status-pending {
background: #fff3cd;
color: #856404;
}
.status-assigned {
background: #cce5ff;
color: #004085;
}
.status-in-progress {
background: #d1ecf1;
color: #0c5460;
}
.status-completed {
background: #d4edda;
color: #155724;
}
.status-cancelled {
background: #f8d7da;
color: #721c24;
}
/* Animation Classes */
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in-left {
animation: slideInLeft 0.5s ease-out;
}
@keyframes slideInLeft {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-in-right {
animation: slideInRight 0.5s ease-out;
}
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* Enhanced Category Filter Section */
.category-filter-section {
padding: 80px 0;
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
overflow: hidden;
}
.filter-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 123, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 86, 179, 0.08) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.05) 0%, transparent 70%);
z-index: 1;
animation: filterBackground 15s ease-in-out infinite;
}
@keyframes filterBackground {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.filter-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 123, 255, 0.02) 0%, rgba(0, 86, 179, 0.02) 100%);
z-index: 2;
}
.category-filter-section .container {
position: relative;
z-index: 10;
}
.filter-title {
font-size: 3rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
position: relative;
display: inline-block;
animation: fadeInUp 1s ease-out;
}
.filter-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
border-radius: 2px;
animation: slideIn 1.2s ease-out;
}
.filter-subtitle {
font-size: 1.2rem;
color: #6c757d;
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
animation: fadeInUp 1.2s ease-out;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 50px;
}
.category-item {
background: #fff;
border-radius: 20px;
padding: 0;
text-align: center;
text-decoration: none;
color: #1a1a2e;
transition: all 0.4s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.category-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.category-item:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 123, 255, 0.25);
border-color: #007bff;
}
.category-item.active {
border-color: #007bff;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
transform: translateY(-5px);
}
.category-item.active::before {
transform: scaleX(1);
}
.category-icon-wrapper {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
transition: all 0.4s ease;
position: relative;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
border: 3px solid rgba(255, 255, 255, 0.2);
}
.category-item:hover .category-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.category-icon-wrapper i {
font-size: 2.5rem;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.category-badge {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 5px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 60px;
animation: fadeInUp 1.5s ease-out;
}
.badge-count {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
display: block;
line-height: 1;
}
.badge-label {
font-size: 0.7rem;
color: #fff;
display: block;
line-height: 1;
opacity: 0.9;
}
.category-content {
padding: 25px 20px;
text-align: center;
}
.category-content h3 {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 10px;
transition: color 0.3s ease;
}
.category-item.active h3 {
color: #fff;
}
.category-content p {
font-size: 1rem;
color: #6c757d;
margin-bottom: 15px;
line-height: 1.5;
transition: color 0.3s ease;
}
.category-item.active p {
color: rgba(255, 255, 255, 0.9);
}
.category-stats {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 15px;
animation: fadeInUp 1.8s ease-out;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 10px 15px;
border-radius: 10px;
transition: all 0.3s ease;
}
.stat-item i {
font-size: 1.2rem;
color: #007bff;
margin-bottom: 5px;
}
.stat-number {
font-size: 1.4rem;
font-weight: 800;
color: #1a1a2e;
display: block;
}
.stat-label {
font-size: 0.8rem;
color: #6c757d;
display: block;
margin-top: 2px;
}
/* Category Icon Specific Colors */
.category-icon-wrapper {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}
.category-item:nth-child(2) .category-icon-wrapper {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.category-item:nth-child(3) .category-icon-wrapper {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}
.category-item:nth-child(4) .category-icon-wrapper {
background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
}
.category-item:nth-child(5) .category-icon-wrapper {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}
.category-item:nth-child(6) .category-icon-wrapper {
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}
/* Enhanced Hover Effects */
.category-item:hover .category-badge {
background: rgba(255, 255, 255, 0.95);
transform: scale(1.05);
}
.category-item:hover .stat-item {
background: rgba(0, 123, 255, 0.1);
transform: translateY(-2px);
}
/* Enhanced Why Buy From Us Section */
.why-buy-section {
padding: 100px 0;
position: relative;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
overflow: hidden;
}
.why-buy-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 123, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 86, 179, 0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.03) 0%, transparent 70%);
z-index: 1;
animation: whyBuyBackground 20s ease-in-out infinite;
}
@keyframes whyBuyBackground {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.why-buy-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 123, 255, 0.01) 0%, rgba(0, 86, 179, 0.01) 100%);
z-index: 2;
}
.why-buy-section .container {
position: relative;
z-index: 10;
}
.why-buy-title {
font-size: 3.5rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
position: relative;
display: inline-block;
animation: fadeInUp 1s ease-out;
}
.why-buy-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
border-radius: 2px;
animation: slideIn 1.2s ease-out;
}
.why-buy-subtitle {
font-size: 1.3rem;
color: #6c757d;
margin-bottom: 0;
max-width: 600px;
margin: 0 auto;
animation: fadeInUp 1.2s ease-out;
}
.why-buy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 60px;
}
.why-buy-item {
background: #fff;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
border: 2px solid transparent;
}
.why-buy-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.why-buy-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 123, 255, 0.2);
border-color: #007bff;
}
.why-buy-item:hover::before {
transform: scaleX(1);
}
.why-buy-icon-wrapper {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
position: relative;
transition: all 0.4s ease;
box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3);
}
.why-buy-item:hover .why-buy-icon-wrapper {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 15px 35px rgba(0, 123, 255, 0.4);
}
.why-buy-icon-wrapper i {
font-size: 2.5rem;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
z-index: 2;
position: relative;
}
.icon-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: iconGlow 2s ease-in-out infinite;
}
@keyframes iconGlow {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.1);
}
}
.why-buy-item h3 {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
transition: color 0.3s ease;
}
.why-buy-item p {
font-size: 1rem;
color: #6c757d;
margin-bottom: 20px;
line-height: 1.6;
transition: color 0.3s ease;
}
.why-buy-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: #fff;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
animation: fadeInUp 1.8s ease-out;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
.why-buy-badge i {
font-size: 0.9rem;
}
/* Trust Indicators */
.trust-indicators {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 80px;
padding: 40px;
background: rgba(255, 255, 255, 0.8);
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
animation: fadeInUp 2s ease-out;
}
.trust-item {
text-align: center;
transition: transform 0.3s ease;
}
.trust-item:hover {
transform: translateY(-5px);
}
.trust-number {
font-size: 3rem;
font-weight: 800;
color: #007bff;
display: block;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
}
.trust-label {
font-size: 1rem;
color: #6c757d;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Responsive Design */
@media (max-width: 992px) {
.why-buy-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.trust-indicators {
gap: 40px;
padding: 30px;
}
.trust-number {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.why-buy-section {
padding: 80px 0;
}
.why-buy-title {
font-size: 2.5rem;
margin-bottom: 15px;
}
.why-buy-subtitle {
font-size: 1.1rem;
}
.why-buy-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 40px;
}
.why-buy-item {
padding: 30px 20px;
}
.why-buy-icon-wrapper {
width: 80px;
height: 80px;
margin-bottom: 20px;
}
.why-buy-icon-wrapper i {
font-size: 2rem;
}
.why-buy-item h3 {
font-size: 1.3rem;
}
.trust-indicators {
flex-wrap: wrap;
gap: 30px;
padding: 25px;
}
.trust-number {
font-size: 2rem;
}
}
@media (max-width: 576px) {
.why-buy-section {
padding: 60px 0;
}
.why-buy-title {
font-size: 2rem;
}
.why-buy-subtitle {
font-size: 1rem;
}
.why-buy-grid {
margin-top: 30px;
}
.why-buy-item {
padding: 25px 15px;
}
.why-buy-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 15px;
}
.why-buy-icon-wrapper i {
font-size: 1.8rem;
}
.why-buy-item h3 {
font-size: 1.2rem;
}
.trust-indicators {
gap: 20px;
padding: 20px;
}
.trust-number {
font-size: 1.8rem;
}
.trust-label {
font-size: 0.9rem;
}
}
/* Enhanced Footer Styles */
.enhanced-footer {
position: relative;
background: #1a1a2e;
color: #fff;
overflow: hidden;
}
.footer-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 123, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(0, 86, 179, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 150, 255, 0.05) 0%, transparent 70%);
z-index: 1;
animation: footerBackground 25s ease-in-out infinite;
}
@keyframes footerBackground {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.footer-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(26, 26, 46, 0.95) 0%, rgba(0, 86, 179, 0.95) 100%);
z-index: 2;
}
.footer-top {
position: relative;
z-index: 10;
padding: 80px 0 40px;
}
.footer-bottom {
position: relative;
z-index: 10;
background: rgba(0, 0, 0, 0.3);
padding: 30px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Enhanced Brand Section */
.footer-brand {
margin-bottom: 30px;
}
.brand-logo-footer {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.logo-icon-footer {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
position: relative;
box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
transition: all 0.3s ease;
}
.logo-icon-footer:hover {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 30px rgba(0, 123, 255, 0.4);
}
.logo-icon-footer i {
font-size: 1.8rem;
color: #fff;
z-index: 2;
position: relative;
}
.logo-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
border-radius: 50%;
animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.1);
}
}
.brand-text-footer {
display: flex;
flex-direction: column;
}
.brand-name-footer {
font-size: 1.8rem;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
}
.brand-location-footer {
font-size: 1rem;
color: #007bff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-description {
color: #b8c1cc;
line-height: 1.6;
margin-bottom: 25px;
font-size: 0.95rem;
}
/* Enhanced Contact Section */
.contact-quick {
margin-bottom: 25px;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 15px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
}
.contact-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}
.contact-icon i {
font-size: 1rem;
color: #fff;
}
.contact-info {
display: flex;
flex-direction: column;
}
.contact-label {
font-size: 0.8rem;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 2px;
}
.contact-value {
font-size: 0.95rem;
color: #fff;
font-weight: 600;
}
/* Enhanced Social Media */
.social-media {
margin-top: 30px;
}
.social-title {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.social-icons {
display: flex;
gap: 15px;
}
.social-icon {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.social-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
transform: scale(0);
transition: transform 0.3s ease;
border-radius: 50%;
}
.social-icon:hover::before {
transform: scale(1);
}
.social-icon:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
border-color: #007bff;
}
.social-icon i {
font-size: 1.2rem;
z-index: 2;
position: relative;
}
/* Enhanced Footer Links */
.footer-links {
margin-bottom: 30px;
}
.footer-title {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 10px;
}
.footer-title i {
font-size: 1rem;
color: #007bff;
}
.footer-nav {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav li {
margin-bottom: 12px;
}
.footer-nav li a {
color: #b8c1cc;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.footer-nav li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.footer-nav li a i {
font-size: 0.8rem;
color: #007bff;
transition: all 0.3s ease;
}
.footer-nav li a:hover i {
color: #fff;
}
/* Enhanced Contact Info */
.footer-contact {
margin-bottom: 30px;
}
.contact-info {
list-style: none;
padding: 0;
margin: 0;
}
.contact-info .contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
padding: 0;
background: none;
border: none;
}
.contact-info .contact-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}
.contact-info .contact-icon i {
font-size: 1rem;
color: #fff;
}
.contact-text h6 {
font-size: 0.9rem;
font-weight: 700;
color: #007bff;
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-text p {
font-size: 0.9rem;
color: #b8c1cc;
margin: 0;
line-height: 1.4;
}
/* Enhanced Footer Bottom */
.footer-copyright {
text-align: left;
}
.footer-copyright p {
color: #b8c1cc;
margin: 0;
font-size: 0.9rem;
}
.footer-tagline {
color: #007bff !important;
font-style: italic;
margin-top: 5px !important;
}
.footer-bottom-links {
text-align: right;
display: flex;
justify-content: flex-end;
gap: 20px;
flex-wrap: wrap;
}
.footer-link {
color: #b8c1cc;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
position: relative;
}
.footer-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease;
}
.footer-link:hover {
color: #007bff;
}
.footer-link:hover::after {
width: 100%;
}
/* Responsive Design */
@media (max-width: 992px) {
.footer-top {
padding: 60px 0 30px;
}
.brand-logo-footer {
margin-bottom: 15px;
}
.brand-name-footer {
font-size: 1.5rem;
}
.footer-bottom-links {
justify-content: center;
margin-top: 15px;
}
}
@media (max-width: 768px) {
.footer-top {
padding: 40px 0 20px;
}
.footer-brand {
margin-bottom: 30px;
text-align: center;
}
.brand-logo-footer {
justify-content: center;
margin-bottom: 15px;
}
.contact-quick {
margin-bottom: 20px;
}
.social-icons {
justify-content: center;
}
.footer-links {
text-align: center;
margin-bottom: 25px;
}
.footer-title {
justify-content: center;
}
.footer-contact {
text-align: center;
}
.contact-info .contact-item {
justify-content: center;
}
.footer-copyright {
text-align: center;
}
.footer-bottom-links {
justify-content: center;
margin-top: 15px;
}
}
@media (max-width: 576px) {
.footer-top {
padding: 30px 0 15px;
}
.brand-logo-footer {
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
.logo-icon-footer {
margin-right: 0;
margin-bottom: 10px;
}
.brand-name-footer {
font-size: 1.3rem;
}
.footer-description {
font-size: 0.9rem;
}
.contact-item {
padding: 12px;
}
.social-icons {
gap: 10px;
}
.social-icon {
width: 40px;
height: 40px;
}
.social-icon i {
font-size: 1rem;
}
.footer-bottom-links {
gap: 15px;
flex-direction: column;
align-items: center;
}
}
/* E-commerce Cart Modal Styles */
.cart-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
animation: fadeIn 0.3s ease;
}
.cart-modal-content {
position: relative;
background: #fff;
margin: 50px auto;
width: 90%;
max-width: 800px;
max-height: 80vh;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideInUp 0.3s ease;
}
.cart-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-header h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
}
.close-btn {
background: none;
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
transition: transform 0.3s ease;
}
.close-btn:hover {
transform: rotate(90deg);
}
.cart-body {
padding: 30px;
max-height: 400px;
overflow-y: auto;
}
.cart-item {
display: flex;
align-items: center;
padding: 20px;
border: 1px solid #e9ecef;
border-radius: 10px;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.cart-item:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.cart-item-image {
width: 80px;
height: 80px;
margin-right: 20px;
flex-shrink: 0;
}
.cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.cart-item-details {
flex: 1;
margin-right: 20px;
}
.cart-item-details h6 {
margin: 0 0 5px 0;
font-size: 1.1rem;
font-weight: 600;
color: #1a1a2e;
}
.cart-item-details p {
margin: 0 0 10px 0;
color: #6c757d;
font-size: 0.9rem;
}
.cart-item-price {
font-size: 1.1rem;
font-weight: 700;
color: #007bff;
}
.cart-item-quantity {
display: flex;
align-items: center;
gap: 10px;
margin-right: 20px;
}
.quantity-btn {
width: 30px;
height: 30px;
border: 1px solid #dee2e6;
background: #fff;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
}
.quantity-btn:hover {
background: #007bff;
color: #fff;
border-color: #007bff;
}
.quantity {
font-weight: 600;
min-width: 30px;
text-align: center;
}
.cart-item-total {
font-size: 1.2rem;
font-weight: 700;
color: #28a745;
margin-right: 20px;
min-width: 100px;
text-align: right;
}
.remove-btn {
background: #dc3545;
color: #fff;
border: none;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.remove-btn:hover {
background: #c82333;
transform: scale(1.1);
}
.cart-footer {
background: #f8f9fa;
padding: 20px 30px;
border-top: 1px solid #e9ecef;
}
.cart-total {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.cart-total span {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a2e;
}
.cart-actions {
display: flex;
gap: 15px;
justify-content: flex-end;
}
.cart-actions .btn {
padding: 12px 30px;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.empty-cart {
text-align: center;
padding: 60px 20px;
color: #6c757d;
}
.empty-cart p {
font-size: 1.2rem;
margin: 0;
}
/* Floating Cart Button */
.floating-cart {
position: fixed;
bottom: 30px;
right: 30px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
transition: all 0.3s ease;
z-index: 1000;
}
.floating-cart:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 123, 255, 0.4);
}
.floating-cart i {
font-size: 1.5rem;
}
.cart-count {
position: absolute;
top: -5px;
right: -5px;
background: #dc3545;
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
/* Notifications */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: #fff;
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
z-index: 10000;
transform: translateX(400px);
transition: transform 0.3s ease;
max-width: 350px;
}
.notification.show {
transform: translateX(0);
}
.notification.success {
border-left: 4px solid #28a745;
}
.notification.error {
border-left: 4px solid #dc3545;
}
.notification.info {
border-left: 4px solid #007bff;
}
.notification-content {
display: flex;
align-items: center;
gap: 10px;
}
.notification i {
font-size: 1.2rem;
}
.notification.success i {
color: #28a745;
}
.notification.error i {
color: #dc3545;
}
.notification.info i {
color: #007bff;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.animate-bounce {
animation: bounce 1s ease;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* Product Details Modal */
.product-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
animation: fadeIn 0.3s ease;
}
.product-modal-content {
position: relative;
background: #fff;
margin: 50px auto;
width: 90%;
max-width: 900px;
max-height: 80vh;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideInUp 0.3s ease;
}
.product-detail-container {
display: flex;
flex-wrap: wrap;
}
.product-detail-image {
flex: 1;
min-width: 300px;
padding: 30px;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
}
.product-detail-image img {
max-width: 100%;
max-height: 400px;
border-radius: 10px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.product-detail-info {
flex: 1;
min-width: 300px;
padding: 30px;
}
.product-detail-title {
font-size: 2rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
}
.product-detail-price {
font-size: 2.5rem;
font-weight: 800;
color: #007bff;
margin-bottom: 20px;
}
.product-detail-description {
font-size: 1.1rem;
color: #6c757d;
line-height: 1.6;
margin-bottom: 25px;
}
.product-detail-features {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.product-detail-features li {
padding: 8px 0;
font-size: 1rem;
color: #1a1a2e;
border-bottom: 1px solid #e9ecef;
}
.product-detail-features li:last-child {
border-bottom: none;
}
.product-detail-features i {
color: #28a745;
margin-right: 10px;
}
.product-detail-actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.product-detail-actions .btn {
padding: 12px 30px;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
flex: 1;
min-width: 150px;
}
/* Responsive Cart */
@media (max-width: 768px) {
.cart-modal-content {
width: 95%;
margin: 20px auto;
max-height: 90vh;
}
.cart-body {
padding: 20px;
max-height: 300px;
}
.cart-item {
flex-direction: column;
align-items: flex-start;
padding: 15px;
}
.cart-item-image {
margin-right: 0;
margin-bottom: 15px;
width: 100%;
height: 150px;
}
.cart-item-details {
margin-right: 0;
margin-bottom: 15px;
width: 100%;
}
.cart-item-quantity {
margin-right: 0;
margin-bottom: 15px;
}
.cart-item-total {
margin-right: 0;
margin-bottom: 15px;
text-align: left;
}
.cart-actions {
flex-direction: column;
}
.floating-cart {
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
}
.floating-cart i {
font-size: 1.2rem;
}
.notification {
right: 10px;
left: 10px;
max-width: none;
}
.product-modal-content {
width: 95%;
margin: 20px auto;
max-height: 90vh;
}
.product-detail-container {
flex-direction: column;
}
.product-detail-image {
min-width: 100%;
padding: 20px;
}
.product-detail-info {
min-width: 100%;
padding: 20px;
}
.product-detail-title {
font-size: 1.5rem;
}
.product-detail-price {
font-size: 2rem;
}
.product-detail-actions {
flex-direction: column;
}
.product-detail-actions .btn {
min-width: 100%;
}
}
/* Enhanced Contact Page Styles */
/* Hero Section */
.contact-hero-section {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
animation: heroBackground 20s ease-in-out infinite;
}
@keyframes heroBackground {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0, 123, 255, 0.9) 0%, rgba(0, 86, 179, 0.9) 100%);
}
.hero-breadcrumb {
background: rgba(255, 255, 255, 0.1);
padding: 10px 15px;
border-radius: 30px;
display: inline-flex;
backdrop-filter: blur(10px);
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
animation: titleSlideIn 1s ease-out;
}
@keyframes titleSlideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
line-height: 1.6;
animation: subtitleSlideIn 1s ease-out 0.2s both;
}
@keyframes subtitleSlideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-stats {
display: flex;
gap: 40px;
margin-bottom: 40px;
animation: statsSlideIn 1s ease-out 0.4s both;
}
@keyframes statsSlideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
display: block;
margin-bottom: 5px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.stat-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-actions {
display: flex;
gap: 20px;
animation: actionsSlideIn 1s ease-out 0.6s both;
}
@keyframes actionsSlideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.btn-hero-primary {
background: #fff;
color: #007bff;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.btn-hero-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
color: #0056b3;
}
.btn-hero-secondary {
background: transparent;
color: #fff;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
border: 2px solid #fff;
transition: all 0.3s ease;
}
.btn-hero-secondary:hover {
background: #fff;
color: #007bff;
transform: translateY(-3px);
}
.hero-image-container {
position: relative;
z-index: 2;
}
.hero-image-wrapper {
position: relative;
display: inline-block;
}
.hero-image {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: imageFloat 3s ease-in-out infinite;
}
@keyframes imageFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.hero-image-glow {
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
border-radius: 30px;
animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
/* Contact Information Section */
.contact-info-section {
padding: 80px 0;
background: #f8f9fa;
}
.section-header {
margin-bottom: 60px;
}
.section-title {
font-size: 2.5rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 15px;
}
.section-subtitle {
font-size: 1.2rem;
color: #6c757d;
margin-bottom: 0;
}
.contact-card-enhanced {
background: #fff;
border-radius: 20px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
height: 100%;
}
.contact-card-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #007bff, #0056b3);
}
.contact-card-enhanced:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.contact-icon-wrapper {
margin-bottom: 25px;
}
.contact-icon-bg {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 15px;
position: relative;
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
transition: all 0.3s ease;
}
.contact-card-enhanced:hover .contact-icon-bg {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 35px rgba(0, 123, 255, 0.4);
}
.contact-icon-bg i {
font-size: 2rem;
color: #fff;
z-index: 2;
position: relative;
}
.icon-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: iconGlow 3s ease-in-out infinite;
}
@keyframes iconGlow {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.2);
}
}
.contact-title {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 15px;
}
.contact-description {
color: #6c757d;
margin-bottom: 25px;
line-height: 1.6;
}
.contact-action {
margin-bottom: 20px;
}
.contact-link {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
padding: 12px 25px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}
.contact-link:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
color: #fff;
}
.contact-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(0, 123, 255, 0.1);
color: #007bff;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
}
.contact-badge i {
font-size: 0.8rem;
}
/* Contact Form Section */
.contact-form-section {
padding: 80px 0;
background: #fff;
}
.contact-form-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.form-header {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
padding: 40px;
text-align: center;
color: #fff;
}
.form-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 10px;
}
.form-subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 0;
}
.contact-form-enhanced {
padding: 40px;
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 25px;
}
.form-group {
flex: 1;
}
.form-group.full-width {
width: 100%;
}
.form-label-enhanced {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 10px;
font-size: 0.95rem;
}
.form-label-enhanced i {
color: #007bff;
font-size: 0.9rem;
}
.form-control-enhanced {
width: 100%;
padding: 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background: #f8f9fa;
}
.form-control-enhanced:focus {
outline: none;
border-color: #007bff;
background: #fff;
box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
}
.form-control-enhanced::placeholder {
color: #adb5bd;
}
.form-feedback {
color: #dc3545;
font-size: 0.875rem;
margin-top: 5px;
display: none;
}
.form-control-enhanced:invalid ~ .form-feedback {
display: block;
}
.form-actions {
margin-top: 30px;
}
.btn-submit-enhanced {
width: 100%;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #fff;
padding: 18px;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
position: relative;
overflow: hidden;
}
.btn-submit-enhanced:hover {
transform: translateY(-2px);
box-shadow: 0 12px 35px rgba(0, 123, 255, 0.4);
}
.btn-submit-enhanced:active {
transform: translateY(0);
}
/* Enhanced Alerts */
.alert-success-enhanced,
.alert-error-enhanced {
background: #fff;
border-radius: 15px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 15px;
position: relative;
animation: alertSlideIn 0.3s ease-out;
}
@keyframes alertSlideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.alert-success-enhanced {
border-left: 5px solid #28a745;
}
.alert-error-enhanced {
border-left: 5px solid #dc3545;
}
.alert-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.alert-success-enhanced .alert-icon {
background: rgba(40, 167, 69, 0.1);
color: #28a745;
}
.alert-error-enhanced .alert-icon {
background: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
.alert-icon i {
font-size: 1.5rem;
}
.alert-content h5 {
margin: 0 0 5px 0;
font-weight: 700;
color: #1a1a2e;
}
.alert-content p {
margin: 0;
color: #6c757d;
}
.alert-close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
font-size: 1.5rem;
color: #adb5bd;
cursor: pointer;
transition: color 0.3s ease;
}
.alert-close:hover {
color: #6c757d;
}
/* Service Center Card */
.service-center-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.center-header {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
padding: 40px;
text-align: center;
color: #fff;
}
.center-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 10px;
}
.center-subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 0;
}
.contact-info-enhanced {
padding: 40px;
}
.info-item {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #e9ecef;
}
.info-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.info-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}
.info-icon i {
font-size: 1.2rem;
color: #fff;
z-index: 2;
position: relative;
}
.icon-pulse {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(40, 167, 69, 0.2);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.2);
}
}
.info-content h6 {
font-size: 1.1rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 8px;
}
.info-content p {
color: #6c757d;
margin-bottom: 10px;
line-height: 1.5;
}
.info-link {
color: #28a745;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.info-link:hover {
color: #20c997;
}
.info-badge {
display: inline-block;
background: rgba(40, 167, 69, 0.1);
color: #28a745;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.hours-status {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
animation: statusPulse 2s ease-in-out infinite;
}
.status-dot.open {
background: #28a745;
}
@keyframes statusPulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.status-text {
font-size: 0.9rem;
color: #28a745;
font-weight: 600;
}
/* Enhanced Map */
.map-container-enhanced {
padding: 0 40px 40px;
}
.map-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.map-title {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.map-link {
color: #28a745;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.map-link:hover {
color: #20c997;
}
.map-wrapper {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.map-iframe {
width: 100%;
height: 300px;
border: none;
}
/* Service Areas Section */
.service-areas-section {
padding: 80px 0;
background: #f8f9fa;
}
.service-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-bottom: 60px;
}
.service-stats .stat-item {
display: flex;
align-items: center;
gap: 15px;
text-align: left;
}
.service-stats .stat-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}
.service-stats .stat-icon i {
font-size: 1.5rem;
color: #fff;
}
.service-stats .stat-number {
font-size: 2rem;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 5px;
}
.service-stats .stat-label {
font-size: 0.9rem;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 1px;
}
.service-area-card {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.service-area-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.area-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
}
.area-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
}
.area-icon i {
font-size: 1.5rem;
color: #fff;
z-index: 2;
position: relative;
}
.area-title {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.area-badge {
background: rgba(0, 123, 255, 0.1);
color: #007bff;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-left: auto;
}
.area-locations {
display: flex;
flex-direction: column;
gap: 12px;
}
.location-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
background: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease;
}
.location-item:hover {
background: rgba(0, 123, 255, 0.05);
transform: translateX(5px);
}
.location-item i {
color: #28a745;
font-size: 1rem;
}
.location-item span {
color: #1a1a2e;
font-weight: 500;
}
.cta-section {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
border-radius: 20px;
padding: 40px;
color: #fff;
box-shadow: 0 10px 40px rgba(0, 123, 255, 0.3);
}
.cta-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 10px;
}
.cta-subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 25px;
}
.btn-cta-primary {
background: #fff;
color: #007bff;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.btn-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
color: #0056b3;
}
/* Responsive Design */
@media (max-width: 992px) {
.hero-title {
font-size: 2.5rem;
}
.hero-stats {
gap: 30px;
}
.service-stats {
gap: 40px;
flex-wrap: wrap;
}
.form-row {
flex-direction: column;
gap: 20px;
}
}
@media (max-width: 768px) {
.contact-hero-section {
min-height: 500px;
}
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.hero-stats {
flex-direction: column;
gap: 20px;
align-items: center;
}
.hero-actions {
flex-direction: column;
gap: 15px;
}
.section-title {
font-size: 2rem;
}
.contact-card-enhanced {
padding: 30px 20px;
}
.form-header,
.center-header {
padding: 30px 20px;
}
.contact-form-enhanced,
.contact-info-enhanced,
.map-container-enhanced {
padding: 30px 20px;
}
.service-stats {
flex-direction: column;
gap: 20px;
align-items: center;
}
.service-stats .stat-item {
text-align: center;
}
.cta-section {
padding: 30px 20px;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 1.8rem;
}
.hero-subtitle {
font-size: 1rem;
}
.stat-number {
font-size: 2rem;
}
.section-title {
font-size: 1.8rem;
}
.contact-card-enhanced {
padding: 25px 15px;
}
.form-header,
.center-header {
padding: 25px 15px;
}
.contact-form-enhanced,
.contact-info-enhanced,
.map-container-enhanced {
padding: 25px 15px;
}
.service-area-card {
padding: 25px 15px;
}
.cta-section {
padding: 25px 15px;
}
}
/* Enhanced AMC Plans Page Styles */
/* AMC Hero Section */
.amc-hero-section {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}
.amc-hero-section .hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
animation: heroBackground 20s ease-in-out infinite;
}
.amc-hero-section .hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(40, 167, 69, 0.9) 0%, rgba(32, 201, 151, 0.9) 100%);
}
.amc-hero-section .hero-content {
position: relative;
z-index: 2;
}
.amc-hero-section .hero-title {
font-size: 3.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
animation: titleSlideIn 1s ease-out;
}
.amc-hero-section .hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
line-height: 1.6;
animation: subtitleSlideIn 1s ease-out 0.2s both;
}
.amc-hero-section .hero-stats {
display: flex;
gap: 40px;
margin-bottom: 40px;
animation: statsSlideIn 1s ease-out 0.4s both;
}
.amc-hero-section .hero-actions {
display: flex;
gap: 20px;
animation: actionsSlideIn 1s ease-out 0.6s both;
}
.amc-hero-section .btn-hero-primary {
background: #fff;
color: #28a745;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.amc-hero-section .btn-hero-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
color: #20c997;
}
.amc-hero-section .btn-hero-secondary {
background: transparent;
color: #fff;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
border: 2px solid #fff;
transition: all 0.3s ease;
}
.amc-hero-section .btn-hero-secondary:hover {
background: #fff;
color: #28a745;
transform: translateY(-3px);
}
.amc-hero-section .hero-image-container {
position: relative;
z-index: 2;
}
.amc-hero-section .hero-image-wrapper {
position: relative;
display: inline-block;
}
.amc-hero-section .hero-image {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: imageFloat 3s ease-in-out infinite;
}
.amc-hero-section .hero-image-glow {
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
border-radius: 50%;
z-index: -1;
}
.amc-hero-section .hero-badge {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 25px;
margin-bottom: 20px;
font-size: 0.9rem;
color: #fff;
animation: badgeFloat 3s ease-in-out infinite;
}
.amc-hero-section .hero-features {
display: flex;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.amc-hero-section .feature-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
}
.amc-hero-section .feature-item i {
color: #4ade80;
font-size: 1.1rem;
}
.amc-hero-section .hero-price-badge {
position: absolute;
top: -15px;
right: -15px;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
color: white;
padding: 15px 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(238, 90, 36, 0.4);
animation: priceBadgeFloat 3s ease-in-out infinite;
z-index: 3;
}
.amc-hero-section .hero-price-badge .price-text {
display: block;
font-size: 0.8rem;
opacity: 0.9;
margin-bottom: 5px;
}
.amc-hero-section .hero-price-badge .price-amount {
display: block;
font-size: 1.2rem;
font-weight: 700;
}
@keyframes badgeFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes priceBadgeFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(2deg); }
}
/* AMC Benefits Section */
.amc-benefits-section {
padding: 80px 0;
background: #f8f9fa;
}
/* AMC Plans Section */
.amc-plans-section {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.section-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.plan-toggle {
display: inline-flex;
background: white;
border-radius: 25px;
padding: 4px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
margin-top: 20px;
}
.toggle-btn {
padding: 10px 20px;
border: none;
background: transparent;
border-radius: 20px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
color: #6c757d;
}
.toggle-btn.active {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
box-shadow: 0 2px 10px rgba(40, 167, 69, 0.3);
}
.plan-card-enhanced {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.plan-card-enhanced:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.plan-card-enhanced.popular-plan {
border: 2px solid #28a745;
transform: scale(1.05);
}
.popular-badge {
position: absolute;
top: -10px;
right: 20px;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 4px 15px rgba(238, 90, 36, 0.4);
z-index: 2;
}
.plan-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.plan-header {
text-align: center;
margin-bottom: 30px;
}
.plan-name {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.plan-description {
color: #6c757d;
font-size: 0.95rem;
line-height: 1.6;
}
.plan-price {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 15px;
}
.price-amount {
margin-bottom: 10px;
}
.currency {
font-size: 1.5rem;
color: #28a745;
font-weight: 600;
}
.price {
font-size: 3rem;
font-weight: 800;
color: #2c3e50;
}
.period {
font-size: 1rem;
color: #6c757d;
font-weight: 500;
}
.price-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.services-count {
background: #e3f2fd;
color: #1976d2;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
.price-savings {
background: #e8f5e8;
color: #28a745;
padding: 4px 12px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
.plan-features {
flex-grow: 1;
margin-bottom: 30px;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f1f3f4;
}
.feature-item:last-child {
border-bottom: none;
}
.feature-icon {
width: 24px;
height: 24px;
background: #28a745;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8rem;
margin-right: 15px;
flex-shrink: 0;
}
.feature-text {
color: #495057;
font-size: 0.9rem;
line-height: 1.5;
}
.plan-action {
text-align: center;
}
.btn-plan-select {
width: 100%;
padding: 15px 30px;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
margin-bottom: 15px;
}
.btn-plan-select:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}
.plan-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #6c757d;
font-size: 0.85rem;
}
.plan-trust i {
color: #28a745;
}
.plan-guarantee {
text-align: center;
margin-top: 50px;
padding: 30px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}
.guarantee-content {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.guarantee-content i {
font-size: 2.5rem;
color: #28a745;
}
.guarantee-content h4 {
color: #2c3e50;
margin-bottom: 5px;
}
.guarantee-content p {
color: #6c757d;
margin: 0;
}
/* AMC CTA Section */
.amc-cta-section {
position: relative;
padding: 100px 0;
overflow: hidden;
}
.cta-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
z-index: 1;
}
.cta-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../images/cta-pattern.png') center/cover;
opacity: 0.1;
z-index: 2;
}
.amc-cta-section .container {
position: relative;
z-index: 3;
}
.cta-badge {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 25px;
margin-bottom: 20px;
font-size: 0.9rem;
color: #fff;
animation: badgePulse 2s ease-in-out infinite;
}
.cta-title {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
line-height: 1.2;
}
.cta-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
line-height: 1.6;
}
.cta-features {
display: flex;
gap: 20px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.cta-feature {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: 20px;
backdrop-filter: blur(5px);
}
.cta-feature i {
color: #4ade80;
font-size: 1.1rem;
}
.cta-stats {
display: flex;
gap: 40px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.cta-stats .stat-item {
text-align: center;
}
.cta-stats .stat-number {
font-size: 2rem;
font-weight: 700;
color: #fff;
display: block;
margin-bottom: 5px;
}
.cta-stats .stat-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 1px;
}
.cta-phone {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
gap: 20px;
}
.phone-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
animation: phoneRing 1.5s ease-in-out infinite;
}
.phone-info h3 {
color: #fff;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
}
.phone-number {
font-size: 1.8rem;
font-weight: 800;
color: #4ade80;
margin-bottom: 5px;
}
.phone-desc {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
margin: 0;
}
.cta-buttons {
display: flex;
gap: 15px;
margin-bottom: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-cta-primary {
background: #fff;
color: #28a745;
padding: 15px 30px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.btn-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
color: #20c997;
}
.btn-cta-secondary {
background: transparent;
color: #fff;
padding: 15px 30px;
border: 2px solid #fff;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
}
.btn-cta-secondary:hover {
background: #fff;
color: #28a745;
transform: translateY(-3px);
}
.cta-urgency {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #fff;
font-size: 0.9rem;
background: rgba(255, 107, 107, 0.2);
padding: 10px 20px;
border-radius: 20px;
backdrop-filter: blur(5px);
animation: urgencyPulse 2s ease-in-out infinite;
}
.cta-urgency i {
color: #ff6b6b;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes phoneRing {
0%, 100% { transform: rotate(0deg); }
10%, 30% { transform: rotate(-10deg); }
20%, 40% { transform: rotate(10deg); }
}
@keyframes urgencyPulse {
0%, 100% {
transform: scale(1);
background: rgba(255, 107, 107, 0.2);
}
50% {
transform: scale(1.05);
background: rgba(255, 107, 107, 0.3);
}
}
/* AMC Testimonials Section */
.amc-testimonials-section {
position: relative;
padding: 100px 0;
overflow: hidden;
}
.testimonials-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
z-index: 1;
}
.testimonials-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../images/testimonials-pattern.png') center/cover;
opacity: 0.05;
z-index: 2;
}
.amc-testimonials-section .container {
position: relative;
z-index: 3;
}
.testimonials-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}
.testimonial-stats {
display: flex;
justify-content: center;
gap: 60px;
margin-bottom: 60px;
flex-wrap: wrap;
}
.testimonial-stats .stat-item {
text-align: center;
}
.testimonial-stats .stat-number {
font-size: 2.5rem;
font-weight: 800;
color: #28a745;
display: block;
margin-bottom: 5px;
}
.testimonial-stats .stat-label {
font-size: 0.9rem;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.testimonial-stats .rating-stars {
margin-top: 10px;
color: #ffc107;
font-size: 0.9rem;
}
.testimonial-card-enhanced {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
height: 100%;
position: relative;
overflow: hidden;
border: 2px solid transparent;
}
.testimonial-card-enhanced:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
border-color: #28a745;
}
.testimonial-card-enhanced.featured {
border-color: #ffc107;
transform: scale(1.05);
}
.featured-badge {
position: absolute;
top: -10px;
right: 20px;
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
z-index: 2;
display: flex;
align-items: center;
gap: 5px;
}
.testimonial-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.rating-stars {
color: #ffc107;
font-size: 1rem;
}
.plan-badge {
padding: 6px 12px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.plan-badge.standard {
background: #e3f2fd;
color: #1976d2;
}
.plan-badge.premium {
background: #fff3e0;
color: #f57c00;
}
.plan-badge.commercial {
background: #f3e5f5;
color: #7b1fa2;
}
.plan-badge.basic {
background: #e8f5e8;
color: #28a745;
}
.testimonial-content {
margin-bottom: 25px;
}
.testimonial-text {
font-size: 1rem;
line-height: 1.6;
color: #495057;
font-style: italic;
margin-bottom: 15px;
}
.testimonial-highlight {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
width: fit-content;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 3px solid #f1f3f4;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info {
flex-grow: 1;
}
.author-name {
font-size: 1.1rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 5px;
}
.author-location {
font-size: 0.9rem;
color: #6c757d;
margin-bottom: 3px;
}
.author-date {
font-size: 0.85rem;
color: #868e96;
margin: 0;
}
.testimonials-cta {
text-align: center;
margin-top: 60px;
padding: 40px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.cta-content h3 {
font-size: 1.8rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.cta-content p {
font-size: 1.1rem;
color: #6c757d;
margin-bottom: 25px;
}
.btn-testimonials-cta {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
padding: 15px 30px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
}
.btn-testimonials-cta:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(40, 167, 69, 0.4);
color: white;
}
/* Responsive Design */
@media (max-width: 768px) {
.testimonial-stats {
gap: 30px;
}
.testimonial-stats .stat-number {
font-size: 2rem;
}
.testimonial-card-enhanced.featured {
transform: scale(1);
}
.testimonials-cta {
padding: 30px 20px;
}
.cta-content h3 {
font-size: 1.5rem;
}
}
/* AMC Booking Section */
.amc-booking-section {
position: relative;
padding: 100px 0;
overflow: hidden;
}
.booking-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
z-index: 1;
}
.booking-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../images/booking-pattern.png') center/cover;
opacity: 0.1;
z-index: 2;
}
.amc-booking-section .container {
position: relative;
z-index: 3;
}
.booking-form-card {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
position: relative;
overflow: hidden;
}
.booking-form-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
animation: gradientMove 3s ease-in-out infinite;
}
.form-header {
text-align: center;
margin-bottom: 40px;
}
.form-badge {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.85rem;
color: #fff;
margin-bottom: 15px;
font-weight: 600;
}
.form-title {
font-size: 2rem;
font-weight: 800;
color: #2c3e50;
margin-bottom: 10px;
}
.form-subtitle {
font-size: 1rem;
color: #6c757d;
margin-bottom: 0;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.form-group {
position: relative;
}
.form-group.full-width {
grid-column: span 2;
}
.form-label-enhanced {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-weight: 600;
color: #495057;
margin-bottom: 8px;
}
.form-label-enhanced i {
color: #667eea;
font-size: 1rem;
}
.form-control-enhanced {
width: 100%;
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 0.95rem;
transition: all 0.3s ease;
background: #f8f9fa;
}
.form-control-enhanced:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-control-enhanced::placeholder {
color: #adb5bd;
}
.form-actions {
margin-top: 30px;
text-align: center;
}
.btn-submit-enhanced {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 40px;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.btn-submit-enhanced:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}
.form-features {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
flex-wrap: wrap;
}
.feature-item {
display: flex;
align-items: center;
gap: 8px;
color: #6c757d;
font-size: 0.9rem;
font-weight: 500;
}
.feature-item i {
color: #28a745;
font-size: 1rem;
}
.alert-success-enhanced {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border: 1px solid #c3e6cb;
border-radius: 10px;
padding: 15px 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
animation: slideInDown 0.5s ease-out;
}
.alert-error-enhanced {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
border: 1px solid #f5c6cb;
border-radius: 10px;
padding: 15px 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
animation: slideInDown 0.5s ease-out;
}
.alert-icon {
font-size: 1.5rem;
color: #28a745;
}
.alert-error-enhanced .alert-icon {
color: #dc3545;
}
.alert-content h5 {
margin: 0 0 5px 0;
font-weight: 600;
}
.alert-content p {
margin: 0;
font-size: 0.9rem;
}
.alert-close {
background: none;
border: none;
font-size: 1.2rem;
color: #6c757d;
cursor: pointer;
margin-left: auto;
}
@keyframes gradientMove {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
@keyframes slideInDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.form-grid {
grid-template-columns: 1fr;
}
.form-group.full-width {
grid-column: span 1;
}
.booking-form-card {
padding: 30px 20px;
}
.form-title {
font-size: 1.5rem;
}
.form-features {
flex-direction: column;
gap: 15px;
align-items: center;
}
.btn-submit-enhanced {
padding: 12px 30px;
font-size: 1rem;
}
}
/* Commercial RO Page Styles */
.commercial-hero-section {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}
.commercial-hero-section .hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
animation: heroBackground 20s ease-in-out infinite;
}
.commercial-hero-section .hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(30, 60, 114, 0.9) 0%, rgba(42, 82, 152, 0.9) 100%);
}
.commercial-hero-section .hero-content {
position: relative;
z-index: 2;
}
.commercial-hero-section .hero-badge {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 25px;
margin-bottom: 20px;
font-size: 0.9rem;
color: #fff;
animation: badgeFloat 3s ease-in-out infinite;
}
.commercial-hero-section .hero-title {
font-size: 3.5rem;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
line-height: 1.2;
animation: titleSlideIn 1s ease-out;
}
.commercial-hero-section .hero-subtitle {
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
line-height: 1.6;
animation: subtitleSlideIn 1s ease-out 0.2s both;
}
.commercial-hero-section .hero-features {
display: flex;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.commercial-hero-section .feature-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
}
.commercial-hero-section .feature-item i {
color: #4ade80;
font-size: 1.1rem;
}
.commercial-hero-section .hero-stats {
display: flex;
gap: 40px;
margin-bottom: 40px;
animation: statsSlideIn 1s ease-out 0.4s both;
}
.commercial-hero-section .hero-actions {
display: flex;
gap: 20px;
animation: actionsSlideIn 1s ease-out 0.6s both;
}
.commercial-hero-section .btn-hero-primary {
background: #fff;
color: #1e3c72;
padding: 15px 30px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.commercial-hero-section .btn-hero-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
color: #2a5298;
}
.commercial-hero-section .btn-hero-secondary {
background: transparent;
color: #fff;
padding: 15px 30px;
border: 2px solid #fff;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
}
.commercial-hero-section .btn-hero-secondary:hover {
background: #fff;
color: #1e3c72;
transform: translateY(-3px);
}
.commercial-hero-section .hero-image-container {
position: relative;
z-index: 2;
}
.commercial-hero-section .hero-image-wrapper {
position: relative;
display: inline-block;
}
.commercial-hero-section .hero-image {
width: 100%;
max-width: 400px;
height: auto;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: imageFloat 3s ease-in-out infinite;
}
.commercial-hero-section .hero-image-glow {
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
border-radius: 50%;
z-index: -1;
}
.commercial-hero-section .hero-price-badge {
position: absolute;
top: -15px;
right: -15px;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
color: white;
padding: 15px 20px;
border-radius: 15px;
text-align: center;
box-shadow: 0 8px 25px rgba(238, 90, 36, 0.4);
animation: priceBadgeFloat 3s ease-in-out infinite;
z-index: 3;
}
.commercial-hero-section .hero-price-badge .price-text {
display: block;
font-size: 0.8rem;
opacity: 0.9;
margin-bottom: 5px;
}
.commercial-hero-section .hero-price-badge .price-amount {
display: block;
font-size: 1.2rem;
font-weight: 700;
}
/* Commercial Solutions Section */
.commercial-solutions-section {
position: relative;
padding: 100px 0;
overflow: hidden;
}
.solutions-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
z-index: 1;
}
.solutions-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../images/solutions-pattern.png') center/cover;
opacity: 0.05;
z-index: 2;
}
.commercial-solutions-section .container {
position: relative;
z-index: 3;
}
.solutions-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
}
.section-title {
font-size: 2.5rem;
font-weight: 800;
color: #2c3e50;
margin-bottom: 20px;
}
.section-subtitle {
font-size: 1.2rem;
color: #6c757d;
margin-bottom: 0;
}
.solution-card-enhanced {
background: white;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
height: 100%;
position: relative;
overflow: hidden;
border: 2px solid transparent;
}
.solution-card-enhanced:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
border-color: #1e3c72;
}
.solution-card-enhanced.featured {
border-color: #ffc107;
transform: scale(1.05);
}
.featured-badge {
position: absolute;
top: -10px;
right: 20px;
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
z-index: 2;
display: flex;
align-items: center;
gap: 5px;
}
.solution-icon-wrapper {
text-align: center;
margin-bottom: 25px;
}
.solution-icon-bg {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
margin: 0 auto;
position: relative;
box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);
}
.icon-glow {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: radial-gradient(circle, rgba(30, 60, 114, 0.2) 0%, transparent 70%);
border-radius: 50%;
animation: iconPulse 3s ease-in-out infinite;
}
.solution-title {
font-size: 1.3rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
text-align: center;
}
.solution-description {
color: #6c757d;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 20px;
text-align: center;
}
.solution-features {
margin-bottom: 25px;
}
.solution-features .feature-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
color: #495057;
font-size: 0.9rem;
}
.solution-features .feature-item i {
color: #28a745;
font-size: 0.9rem;
flex-shrink: 0;
width: 16px;
text-align: center;
}
.solution-action {
text-align: center;
}
.btn-solution {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
padding: 12px 25px;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
}
.btn-solution:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(30, 60, 114, 0.4);
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 0.8; }
}
/* Responsive Design */
@media (max-width: 768px) {
.commercial-hero-section .hero-title {
font-size: 2.5rem;
}
.commercial-hero-section .hero-features {
flex-direction: column;
gap: 10px;
}
.commercial-hero-section .hero-stats {
flex-direction: column;
gap: 20px;
}
.commercial-hero-section .hero-actions {
flex-direction: column;
gap: 15px;
}
.solution-card-enhanced.featured {
transform: scale(1);
}
.section-title {
font-size: 2rem;
}
}
/* Quick Booking Section */
.quick-booking-section {
position: relative;
padding: 80px 0;
overflow: hidden;
}
.booking-card {
background: white;
border-radius: 25px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
position: relative;
overflow: hidden;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.booking-card:hover {
border-color: #28a745;
transform: translateY(-5px);
box-shadow: 0 25px 70px rgba(0,0,0,0.15);
}
.booking-header {
text-align: center;
margin-bottom: 40px;
}
.booking-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
padding: 8px 20px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
animation: badgePulse 2s ease-in-out infinite;
}
.booking-title {
font-size: 2rem;
font-weight: 800;
color: #2c3e50;
margin-bottom: 10px;
}
.booking-subtitle {
font-size: 1rem;
color: #6c757d;
margin-bottom: 0;
line-height: 1.6;
}
.booking-form .form-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
font-weight: 600;
color: #495057;
margin-bottom: 8px;
}
.booking-form .form-label i {
color: #28a745;
font-size: 1rem;
width: 16px;
text-align: center;
}
.booking-form .form-control,
.booking-form .form-select {
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 12px 15px;
font-size: 0.95rem;
transition: all 0.3s ease;
background: #f8f9fa;
}
.booking-form .form-control:focus,
.booking-form .form-select:focus {
outline: none;
border-color: #28a745;
background: white;
box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}
.booking-form .form-control::placeholder,
.booking-form .form-select::placeholder {
color: #adb5bd;
}
.booking-features {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
flex-wrap: wrap;
}
.booking-features .feature-item {
display: flex;
align-items: center;
gap: 8px;
color: #6c757d;
font-size: 0.9rem;
font-weight: 500;
}
.booking-features .feature-item i {
color: #28a745;
font-size: 1rem;
}
.alert-success {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border: 1px solid #c3e6cb;
border-radius: 10px;
padding: 15px 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
animation: slideInDown 0.5s ease-out;
}
.alert-danger {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
border: 1px solid #f5c6cb;
border-radius: 10px;
padding: 15px 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
animation: slideInDown 0.5s ease-out;
}
.alert-icon {
font-size: 1.5rem;
color: #28a745;
}
.alert-danger .alert-icon {
color: #dc3545;
}
.alert-content h5 {
margin: 0 0 5px 0;
font-weight: 600;
}
.alert-content p {
margin: 0;
font-size: 0.9rem;
}
.alert-close {
background: none;
border: none;
font-size: 1.2rem;
color: #6c757d;
cursor: pointer;
margin-left: auto;
}
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes slideInDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.booking-card {
padding: 30px 20px;
}
.booking-title {
font-size: 1.5rem;
}
.booking-features {
flex-direction: column;
gap: 15px;
align-items: center;
}
.booking-form .row.g-3 > div {
margin-bottom: 15px;
}
}
/* E-commerce Checkout Styles */
.checkout-steps {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 30px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.step::after {
content: '';
position: absolute;
top: 15px;
left: 50px;
width: 30px;
height: 2px;
background: #e9ecef;
z-index: 1;
}
.step:last-child::after {
display: none;
}
.step-number {
width: 30px;
height: 30px;
border-radius: 50%;
background: #e9ecef;
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.step.active .step-number {
background: #007bff;
color: white;
transform: scale(1.1);
}
.step.completed .step-number {
background: #28a745;
color: white;
}
.step.completed .step-number::before {
content: '✓';
position: absolute;
font-size: 0.8rem;
}
.step-label {
font-size: 0.85rem;
color: #6c757d;
margin-top: 5px;
font-weight: 500;
}
.step.active .step-label {
color: #007bff;
font-weight: 600;
}
.step.completed .step-label {
color: #28a745;
}
.checkout-section {
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
background: #f8f9fa;
border: 1px solid #e9ecef;
}
.section-title {
font-size: 1.2rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 20px;
display: flex;
align-items: center;
}
.section-title i {
color: #007bff;
margin-right: 8px;
}
.payment-methods {
display: grid;
gap: 15px;
}
.payment-method-card {
border: 2px solid #e9ecef;
border-radius: 10px;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
background: white;
}
.payment-method-card:hover {
border-color: #007bff;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
}
.payment-method-card.selected {
border-color: #007bff;
background: linear-gradient(135deg, #f8f9ff 0%, #e6f3ff 100%);
box-shadow: 0 4px 20px rgba(0, 123, 255, 0.2);
}
.payment-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.payment-label {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: #2c3e50;
cursor: pointer;
margin: 0;
}
.payment-label i {
color: #007bff;
font-size: 1.2rem;
}
.payment-details p {
color: #6c757d;
margin-bottom: 10px;
font-size: 0.9rem;
}
.payment-features {
list-style: none;
padding: 0;
margin: 0;
}
.payment-features li {
display: flex;
align-items: center;
gap: 8px;
color: #28a745;
font-size: 0.85rem;
margin-bottom: 5px;
}
.payment-features li i {
font-size: 0.8rem;
flex-shrink: 0;
}
.order-summary {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
position: sticky;
top: 20px;
}
.order-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f1f3f4;
}
.order-item:last-child {
border-bottom: none;
}
.order-item h6 {
font-size: 0.9rem;
margin: 0;
color: #2c3e50;
}
.order-item small {
color: #6c757d;
font-size: 0.8rem;
}
.order-item strong {
color: #2c3e50;
font-size: 0.95rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.checkout-steps {
gap: 15px;
}
.step::after {
width: 15px;
left: 35px;
}
.step-number {
width: 25px;
height: 25px;
font-size: 0.8rem;
}
.step-label {
font-size: 0.75rem;
}
.payment-methods {
grid-template-columns: 1fr;
}
.order-summary {
position: static;
margin-top: 20px;
}
}
/* Notification Styles */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
border-radius: 8px;
padding: 15px 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
z-index: 9999;
min-width: 300px;
transform: translateX(100%);
opacity: 0;
transition: all 0.3s ease;
}
.notification.show {
transform: translateX(0);
opacity: 1;
}
.notification.success {
border-left: 4px solid #28a745;
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}
.notification.error {
border-left: 4px solid #dc3545;
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
}
.notification.info {
border-left: 4px solid #17a2b8;
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
}
.notification-content {
display: flex;
align-items: center;
gap: 10px;
}
.notification-content i {
font-size: 1.2rem;
flex-shrink: 0;
}
.notification.success i {
color: #28a745;
}
.notification.error i {
color: #dc3545;
}
.notification.info i {
color: #17a2b8;
}
.notification-content span {
color: #2c3e50;
font-weight: 500;
}
/* Modal Styles */
.cart-modal, .product-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}
.cart-modal.show, .product-modal.show {
display: flex;
}
.cart-modal-content, .product-modal-content {
background: white;
border-radius: 10px;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-header {
padding: 20px;
border-bottom: 1px solid #e9ecef;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-body {
padding: 20px;
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #6c757d;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.close-btn:hover {
background: #f8f9fa;
color: #dc3545;
}
/* Mini Cart Styles */
.mini-cart {
position: fixed;
top: 80px;
right: 20px;
width: 350px;
max-height: 400px;
background: white;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
z-index: 9999;
transform: translateX(400px);
opacity: 0;
transition: all 0.3s ease;
overflow: hidden;
}
.mini-cart.show {
transform: translateX(0);
opacity: 1;
}
.mini-cart-header {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.mini-cart-header h5 {
margin: 0;
font-size: 1rem;
font-weight: 600;
}
.mini-cart-header button {
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.3s ease;
}
.mini-cart-header button:hover {
background: rgba(255,255,255,0.2);
}
.mini-cart-body {
max-height: 250px;
overflow-y: auto;
padding: 15px;
}
.mini-cart-item {
display: flex;
gap: 15px;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #e9ecef;
}
.mini-cart-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.mini-cart-item img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.mini-cart-details h6 {
margin: 0 0 5px 0;
font-size: 0.9rem;
font-weight: 600;
color: #2c3e50;
line-height: 1.2;
}
.mini-cart-details p {
margin: 0;
font-size: 0.85rem;
color: #6c757d;
font-weight: 500;
}
.mini-cart-footer {
background: #f8f9fa;
padding: 15px 20px;
border-top: 1px solid #e9ecef;
}
.mini-cart-total {
margin-bottom: 10px;
font-size: 1.1rem;
color: #2c3e50;
}
.mini-cart-footer button {
width: 100%;
background: linear-gradient(135deg, #28a745, #20c997);
border: none;
color: white;
padding: 12px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.mini-cart-footer button:hover {
background: linear-gradient(135deg, #218838, #1ea085);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}
/* Enhanced Notification Styles */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: white;
border-radius: 12px;
padding: 15px 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
z-index: 10000;
min-width: 300px;
transform: translateX(400px);
opacity: 0;
transition: all 0.3s ease;
border-left: 4px solid #28a745;
}
.notification.show {
transform: translateX(0);
opacity: 1;
}
.notification.success {
border-left-color: #28a745;
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}
.notification.info {
border-left-color: #17a2b8;
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
}
.notification-content {
display: flex;
align-items: center;
gap: 12px;
}
.notification-content i {
font-size: 1.2rem;
color: #28a745;
flex-shrink: 0;
}
.notification.info .notification-content i {
color: #17a2b8;
}
.notification-content span {
color: #2c3e50;
font-weight: 500;
font-size: 0.95rem;
}
/* Responsive Mini Cart */
@media (max-width: 768px) {
.mini-cart {
top: 60px;
right: 10px;
left: 10px;
width: auto;
max-width: none;
}
.notification {
right: 10px;
left: 10px;
min-width: auto;
}
}
/* Location Service Page Enhancements */
.service-card {
transition: all 0.3s ease;
border: 1px solid transparent;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
border-color: #667eea;
}
.service-icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.service-card:hover .service-icon {
transform: scale(1.1);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.service-icon i {
color: white;
font-size: 2rem;
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.rating {
color: #ffc107;
margin-bottom: 15px;
}
.rating i {
font-size: 1rem;
margin-right: 2px;
}
.feature-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
flex-shrink: 0;
transition: all 0.3s ease;
}
.feature-icon:hover {
transform: scale(1.1);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.feature-icon i {
color: white;
font-size: 1.5rem;
}
/* Enhanced Form Styles */
.form-control:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
.form-select:focus {
border-color: #667eea;
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.btn-outline-primary {
border-color: #667eea;
color: #667eea;
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
/* Location-specific enhancements */
.location-highlight {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-left: 4px solid #667eea;
padding: 20px;
margin: 20px 0;
border-radius: 0 8px 8px 0;
}
.location-badge {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
margin-right: 10px;
margin-bottom: 5px;
}
/* Phone input validation styles */
.phone-input.is-invalid {
border-color: #dc3545;
}
.invalid-feedback {
color: #dc3545;
font-size: 0.875rem;
margin-top: 0.25rem;
}
/* Loading spinner for buttons */
.fa-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive adjustments for location pages */
@media (max-width: 768px) {
.service-card {
margin-bottom: 20px;
}
.testimonial-card {
margin-bottom: 20px;
}
.feature-icon {
width: 50px;
height: 50px;
}
.feature-icon i {
font-size: 1.2rem;
}
}
/* Simple Product Actions */
.product-actions-simple {
padding: 15px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 0 0 10px 10px;
}
.action-row {
display: flex;
gap: 10px;
margin-bottom: 10px;
}
.btn-cart, .btn-buy {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 15px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
.btn-cart {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}
.btn-cart:hover {
background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}
.btn-cart:active {
transform: translateY(0);
}
.btn-buy {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
color: white;
box-shadow: 0 4px 15px rgba(238, 90, 36, 0.3);
}
.btn-buy:hover {
background: linear-gradient(135deg, #ff5252 0%, #e74c3c 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(238, 90, 36, 0.4);
}
.btn-buy:active {
transform: translateY(0);
}
.btn-cart i, .btn-buy i {
font-size: 1rem;
animation: none;
}
.btn-cart span, .btn-buy span {
font-weight: 600;
}
.btn-cart:disabled, .btn-buy:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.quick-info {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.stock-badge, .delivery-badge {
font-size: 0.75rem;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stock-badge {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
}
.delivery-badge {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: white;
}
/* Button animations */
@keyframes buttonPulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.btn-cart:not(:disabled):hover, .btn-buy:not(:disabled):hover {
animation: buttonPulse 0.3s ease;
}
/* Loading state */
.btn-cart .fa-spinner, .btn-buy .fa-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Responsive design */
@media (max-width: 768px) {
.action-row {
flex-direction: column;
gap: 8px;
}
.btn-cart, .btn-buy {
padding: 15px;
font-size: 0.95rem;
}
.quick-info {
flex-direction: column;
align-items: stretch;
gap: 5px;
}
.stock-badge, .delivery-badge {
text-align: center;
}
}
.benefit-card-enhanced {
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
display: flex;
gap: 25px;
align-items: flex-start;
}
/* About Page Styles */
.about-hero {
position: relative;
padding: 120px 0 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow: hidden;
}
.about-hero .hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../images/about-hero-bg.jpg') center/cover;
z-index: 1;
}
.about-hero .hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
}
.about-hero .hero-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
z-index: 3;
}
.about-hero .container {
position: relative;
z-index: 4;
}
.about-hero .hero-content {
color: white;
}
.about-hero .hero-badges {
display: flex;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.about-hero .hero-badge {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 500;
backdrop-filter: blur(10px);
}
.about-hero .hero-badge i {
color: #ffd700;
}
.about-hero .hero-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}
.about-hero .hero-subtitle {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.about-hero .hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.about-hero .hero-image {
position: relative;
}
.about-hero .image-container {
position: relative;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transform: perspective(1000px) rotateY(-5deg);
transition: transform 0.3s ease;
}
.about-hero .image-container:hover {
transform: perspective(1000px) rotateY(0deg);
}
.about-hero .image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
z-index: 1;
}
/* Story Section */
.story-section {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
padding: 20px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, #667eea, #764ba2);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 50px;
display: flex;
align-items: center;
}
.timeline-item:nth-child(odd) {
flex-direction: row-reverse;
}
.timeline-year {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 10px 20px;
border-radius: 25px;
font-weight: 600;
font-size: 0.9rem;
z-index: 2;
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
.timeline-content {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
width: calc(50% - 40px);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-content:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.timeline-content::before {
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 20px;
background: white;
border: 3px solid #667eea;
border-radius: 50%;
transform: translateY(-50%);
z-index: 3;
}
.timeline-item:nth-child(odd) .timeline-content::before {
right: -60px;
}
.timeline-item:nth-child(even) .timeline-content::before {
left: -60px;
}
.timeline-item.current .timeline-year {
background: linear-gradient(135deg, #28a745, #20c997);
}
.timeline-item.current .timeline-content::before {
border-color: #28a745;
background: #28a745;
}
/* Mission Vision Section */
.mission-vision-section {
padding: 80px 0;
background: white;
}
.feature-card {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
height: 100%;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
font-size: 2rem;
color: white;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.feature-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
color: #2c3e50;
}
.feature-card p {
color: #6c757d;
margin-bottom: 20px;
line-height: 1.6;
}
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
padding: 8px 0;
color: #495057;
position: relative;
padding-left: 25px;
}
.feature-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #28a745;
font-weight: 600;
}
/* Team Cards */
.team-card {
background: white;
padding: 30px 20px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.team-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.team-card img {
border: 5px solid #f8f9fa;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.team-card:hover img {
transform: scale(1.05);
}
.team-card h5 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 5px;
color: #2c3e50;
}
.team-card p {
color: #6c757d;
margin-bottom: 15px;
}
.social-links a {
display: inline-block;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
border-radius: 50%;
background: #f8f9fa;
transition: all 0.3s ease;
}
.social-links a:hover {
background: #667eea;
color: white !important;
transform: translateY(-3px);
}
/* Responsive Design */
@media (max-width: 768px) {
.about-hero .hero-title {
font-size: 2rem;
}
.about-hero .hero-subtitle {
font-size: 1rem;
}
.timeline::before {
left: 30px;
}
.timeline-item {
flex-direction: column !important;
align-items: flex-start !important;
padding-left: 60px;
}
.timeline-year {
position: relative;
left: 0;
transform: none;
margin-bottom: 15px;
}
.timeline-content {
width: 100%;
}
.timeline-content::before {
left: -45px !important;
right: auto !important;
}
.feature-card {
padding: 25px;
}
.team-card {
padding: 20px 15px;
}
}
.benefit-card-enhanced:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.benefit-icon-wrapper {
flex-shrink: 0;
}
.benefit-icon-bg {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
transition: all 0.3s ease;
}
.benefit-card-enhanced:hover .benefit-icon-bg {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 12px 35px rgba(40, 167, 69, 0.4);
}
.benefit-icon-bg i {
font-size: 1.8rem;
color: #fff;
z-index: 2;
position: relative;
}
.benefit-content {
flex: 1;
}
.benefit-title {
font-size: 1.3rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 10px;
}
.benefit-description {
color: #6c757d;
margin-bottom: 15px;
line-height: 1.5;
}
.benefit-metric {
display: flex;
align-items: center;
gap: 10px;
}
.metric-value {
font-size: 1.5rem;
font-weight: 800;
color: #28a745;
}
.metric-label {
font-size: 0.9rem;
color: #6c757d;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* AMC Plans Section */
.amc-plans-section {
padding: 80px 0;
background: #fff;
}
.amc-plans-section .plan-comparison {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
color: #28a745;
font-weight: 600;
transition: all 0.3s ease;
}
.amc-plans-section .plan-comparison:hover {
transform: translateX(5px);
color: #20c997;
}
.amc-plan-card-enhanced {
background: #fff;
border-radius: 20px;
padding: 0;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
}
.amc-plan-card-enhanced:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.amc-plan-card-enhanced.popular {
border: 3px solid #28a745;
transform: scale(1.05);
}
.amc-plan-card-enhanced.popular:hover {
transform: scale(1.05) translateY(-10px);
}
.popular-ribbon {
position: absolute;
top: 20px;
right: -30px;
background: #28a745;
color: #fff;
padding: 8px 40px;
font-size: 0.8rem;
font-weight: 700;
transform: rotate(45deg);
z-index: 10;
box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
}
.plan-header {
padding: 30px 30px 20px;
text-align: center;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(32, 201, 151, 0.05) 100%);
border-bottom: 1px solid rgba(40, 167, 69, 0.1);
}
.plan-name {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 10px;
}
.plan-description {
color: #6c757d;
margin-bottom: 0;
line-height: 1.5;
}
.plan-pricing {
padding: 30px 30px 20px;
text-align: center;
background: #fff;
}
.price-wrapper {
margin-bottom: 15px;
}
.price-wrapper .currency {
font-size: 1.5rem;
font-weight: 600;
color: #28a745;
vertical-align: top;
}
.price-wrapper .amount {
font-size: 3rem;
font-weight: 800;
color: #1a1a2e;
line-height: 1;
}
.price-wrapper .duration {
font-size: 1rem;
color: #6c757d;
font-weight: 600;
}
.price-info {
display: flex;
justify-content: center;
gap: 20px;
}
.services-count {
background: rgba(40, 167, 69, 0.1);
color: #28a745;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.price-savings {
background: rgba(255, 193, 7, 0.1);
color: #ffc107;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.plan-features {
padding: 20px 30px;
flex: 1;
}
.features-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding: 8px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.feature-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.feature-icon {
width: 24px;
height: 24px;
background: #28a745;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feature-icon i {
font-size: 0.7rem;
color: #fff;
}
.feature-text {
font-size: 0.9rem;
color: #1a1a2e;
line-height: 1.4;
}
.plan-action {
padding: 20px 30px 30px;
background: #f8f9fa;
}
.btn-plan-select {
width: 100%;
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: #fff;
padding: 15px;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}
.btn-plan-select:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}
.btn-plan-select .btn-hover-content {
display: none;
}
.btn-plan-select:hover .btn-content {
display: none;
}
.btn-plan-select:hover .btn-hover-content {
display: inline;
}
.amc-plan-card-enhanced.popular .btn-plan-select {
background: linear-gradient(135deg, #ffc107 0%, #ff6b6b 100%);
box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3);
}
.amc-plan-card-enhanced.popular .btn-plan-select:hover {
box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
}
/* AMC Process Section */
.amc-process-section {
padding: 80px 0;
background: #f8f9fa;
}
.process-timeline {
position: relative;
}
.process-line {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #28a745, #20c997);
z-index: 1;
transform: translateY(-50%);
}
.process-step-enhanced {
position: relative;
z-index: 2;
text-align: center;
padding: 40px 20px;
background: #fff;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
}
.process-step-enhanced:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.step-number {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
background: #28a745;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
}