@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Reset & Variables */
* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
    font-family: 'AspireSCBlackOblique';
    src: url('../assets/fonts/aspire-sc-black-oblique-maisfontes.71d6/aspire-sc-black-oblique.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary: #0066cc;
    --secondary: #004999;
    --accent: #0080ff;
    --dark: #333;
    --light: #666;
    --bg-light: #f8f9fa;
    --white: #fff;
}

body { font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; color: var(--dark); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-padding { padding: 80px 0; }
.bg-light { background: var(--bg-light); }

/* Header */
.header { background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; }
.navbar { padding: 15px 0; }
.navbar .container { display: flex; justify-content: space-between; align-items: right; }
.nav-brand { display: flex; align-items: center; gap: 15px; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.nav-brand .logo { height: 70px; width: auto; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); margin-right: auto; border-radius: 8px; }
.nav-brand .logo:hover { transform: scale(1.05); }
.nav-brand h2 { display: none; }
.nav-menu { display: flex; list-style: none; gap: 30px; align-items: center; }
.nav-menu a { text-decoration: none; color: var(--dark); font-weight: 500; transition: 0.3s; }
.nav-menu a:hover, .nav-menu a.active { color: var(--primary); }
.btn-nav { background: var(--primary); color: var(--white) !important; padding: 10px 25px; border-radius: 5px; white-space: nowrap; transition: all 0.3s ease; }
.btn-nav:hover { background: var(--secondary); transform: translateY(-2px); }

/* Dropdown Menu */
.dropdown { position: relative; }
.dropdown > a { display: flex; align-items: center; gap: 5px; }
.dropdown-menu { position: absolute; top: 100%; left: 0; background: var(--white); min-width: 300px; list-style: none; padding: 15px 0; border-radius: 12px; box-shadow: 0 15px 50px rgba(0,102,204,0.2); opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); z-index: 1000; margin-top: 15px; border: 2px solid rgba(0,102,204,0.1); backdrop-filter: blur(10px); }
.dropdown-menu::before { content: ''; position: absolute; top: -8px; left: 30px; width: 15px; height: 15px; background: var(--white); border-left: 2px solid rgba(0,102,204,0.1); border-top: 2px solid rgba(0,102,204,0.1); transform: rotate(45deg); }
.dropdown-menu li { padding: 0; opacity: 0; transform: translateX(-10px); transition: all 0.3s ease; }
.dropdown:hover .dropdown-menu li { opacity: 1; transform: translateX(0); }
.dropdown:hover .dropdown-menu li:nth-child(1) { transition-delay: 0.05s; }
.dropdown:hover .dropdown-menu li:nth-child(2) { transition-delay: 0.1s; }
.dropdown:hover .dropdown-menu li:nth-child(3) { transition-delay: 0.15s; }
.dropdown:hover .dropdown-menu li:nth-child(4) { transition-delay: 0.2s; }
.dropdown:hover .dropdown-menu li:nth-child(5) { transition-delay: 0.25s; }
.dropdown:hover .dropdown-menu li:nth-child(6) { transition-delay: 0.3s; }
.dropdown-menu li a { display: block; padding: 12px 25px; color: var(--dark); font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-left: 3px solid transparent; position: relative; overflow: hidden; }
.dropdown-menu li a::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: linear-gradient(90deg, rgba(0,102,204,0.1), transparent); transition: width 0.4s ease; z-index: -1; }
.dropdown-menu li a:hover::before { width: 100%; }
.dropdown-menu li a:hover { background: rgba(0,102,204,0.05); color: var(--primary); border-left-color: var(--primary); padding-left: 30px; transform: translateX(5px); }
.dropdown-menu li a i { margin-right: 10px; opacity: 0; transition: opacity 0.3s ease; }
.dropdown-menu li a:hover i { opacity: 1; }
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); animation: dropdownBounce 0.5s ease; }
.dropdown > a i { font-size: 12px; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.dropdown:hover > a i { transform: rotate(180deg); }
@keyframes dropdownBounce { 0% { transform: translateY(20px) scale(0.95); } 50% { transform: translateY(-5px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }


/* Buttons */
.btn { display: inline-block; padding: 12px 30px; text-decoration: none; border-radius: 5px; font-weight: 600; transition: 0.3s; border: none; cursor: pointer; }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--secondary); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,102,204,0.3); }
.btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); }
.btn-secondary:hover { background: var(--white); color: var(--primary); }
.btn-light { background: var(--white); color: var(--primary); }
.btn-light:hover { background: var(--bg-light); }
.btn-small { padding: 8px 20px; font-size: 14px; }

/* Hero */
.hero { background: url('../images/banner/1.png') center/cover no-repeat; background-size: cover; color: var(--white); padding: 150px 0; position: relative; min-height: 500px; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 1; }
.hero .container { position: relative; z-index: 2; display: flex; justify-content: flex-start; align-items: center; }
.hero-content { text-align: left; max-width: 400px; margin-left: 50px; }
.hero-content h1 { font-size: 28px; margin-bottom: 15px; }
.hero-buttons { display: flex; gap: 12px; justify-content: flex-start; }

/* Page Header */
.page-header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 80px 0; text-align: center; }
.page-header h1 { font-size: 42px; margin-bottom: 10px; }

/* Section Header */
.section-header { text-align: center; margin-bottom: 50px; }
.section-header h2 { font-size: 36px; margin-bottom: 10px; }
.section-header p { font-size: 18px; color: var(--light); }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-text p { margin-bottom: 20px; color: var(--light); }
.about-image { background: var(--bg-light); padding: 40px; border-radius: 10px; text-align: center; }
.about-image img { max-width: 100%; height: auto; max-height: 400px; object-fit: contain; animation: float 3s ease-in-out infinite; border-radius: 8px; }
.about-image i { font-size: 120px; color: var(--primary); opacity: 0.3; }

/* Cards */
.solutions-grid, .expertise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.card { background: var(--white); padding: 40px 30px; border-radius: 10px; text-align: center; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.card-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.card-icon i { font-size: 36px; color: var(--white); }
.card h3 { margin-bottom: 15px; }
.card p { color: var(--light); }

/* Industries */
.industries-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 25px; }
.industry-card { background: var(--white); padding: 40px 20px; border-radius: 10px; text-align: center; transition: 0.3s; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.industry-card:hover { transform: translateY(-5px); background: var(--primary); color: var(--white); }
.industry-card i { font-size: 48px; color: var(--primary); margin-bottom: 15px; transition: 0.3s; }
.industry-card:hover i { color: var(--white); }

/* Features - Google Style */
.features { 
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f8f9fa 100%); 
    position: relative; 
    overflow: hidden; 
}
.features::before { 
    content: ''; 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    background: radial-gradient(circle, rgba(66, 133, 244, 0.08) 0%, transparent 70%); 
    top: -100px; 
    left: -100px; 
    animation: floatBlob 15s ease-in-out infinite; 
}
.features::after { 
    content: ''; 
    position: absolute; 
    width: 250px; 
    height: 250px; 
    background: radial-gradient(circle, rgba(234, 67, 53, 0.08) 0%, transparent 70%); 
    bottom: -80px; 
    right: -80px; 
    animation: floatBlob 18s ease-in-out infinite reverse; 
}
.features-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px; 
    position: relative; 
    z-index: 1; 
}
.feature-card { 
    background: var(--white); 
    padding: 40px 30px; 
    border-radius: 16px; 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
    border: 2px solid transparent; 
    opacity: 0; 
    transform: translateY(50px); 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); 
    position: relative; 
    overflow: hidden; 
}
.feature-card::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 4px; 
    background: linear-gradient(90deg, transparent, currentColor, transparent); 
    opacity: 0; 
    transition: opacity 0.4s ease; 
}
.feature-card.visible { 
    opacity: 1; 
    transform: translateY(0); 
}
.feature-card:nth-child(1) { transition-delay: 0.1s; }
.feature-card:nth-child(2) { transition-delay: 0.2s; }
.feature-card:nth-child(3) { transition-delay: 0.3s; }
.feature-card:nth-child(4) { transition-delay: 0.4s; }
.feature-card:hover { 
    transform: translateY(-12px) scale(1.02); 
    border-color: currentColor; 
}
.feature-card:hover::before { 
    opacity: 1; 
}
.feature-num { 
    font-size: 56px; 
    font-weight: 800; 
    opacity: 0.15; 
    margin-bottom: 15px; 
    transition: all 0.5s ease; 
    background: linear-gradient(135deg, currentColor, currentColor); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    position: relative; 
    display: inline-block; 
}
.feature-card:hover .feature-num { 
    opacity: 0.3; 
    transform: scale(1.15); 
    animation: numberGlow 1.5s ease-in-out infinite; 
}
.feature-card h3 { 
    margin-bottom: 15px; 
    font-size: 20px; 
    font-weight: 600; 
    transition: all 0.3s ease; 
    color: var(--dark); 
}
.feature-card:hover h3 { 
    color: currentColor; 
    transform: translateX(5px); 
}
.feature-card p { 
    color: var(--light); 
    line-height: 1.6; 
}

/* Google Color Themes */
.google-blue { 
    color: #4285F4; 
}
.google-blue:hover { 
    box-shadow: 0 15px 45px rgba(66, 133, 244, 0.25), 0 0 30px rgba(66, 133, 244, 0.15); 
}
.google-red { 
    color: #EA4335; 
}
.google-red:hover { 
    box-shadow: 0 15px 45px rgba(234, 67, 53, 0.25), 0 0 30px rgba(234, 67, 53, 0.15); 
}
.google-yellow { 
    color: #FBBC05; 
}
.google-yellow:hover { 
    box-shadow: 0 15px 45px rgba(251, 188, 5, 0.25), 0 0 30px rgba(251, 188, 5, 0.15); 
}
.google-green { 
    color: #34A853; 
}
.google-green:hover { 
    box-shadow: 0 15px 45px rgba(52, 168, 83, 0.25), 0 0 30px rgba(52, 168, 83, 0.15); 
}

@keyframes numberGlow { 
    0%, 100% { 
        filter: drop-shadow(0 0 0px currentColor); 
    } 
    50% { 
        filter: drop-shadow(0 0 15px currentColor); 
    } 
}
@keyframes floatBlob { 
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
    } 
    33% { 
        transform: translate(50px, -50px) scale(1.1); 
    } 
    66% { 
        transform: translate(-30px, 30px) scale(0.9); 
    } 
}
@media (max-width: 768px) { 
    .feature-card { 
        padding: 30px 25px; 
    } 
    .feature-num { 
        font-size: 48px; 
    } 
}

/* Products */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.product-card { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.product-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,102,204,0.1), rgba(0,128,255,0.1)); opacity: 0; transition: opacity 0.4s ease; z-index: 1; }
.product-card:hover::before { opacity: 1; }
.product-card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 20px 50px rgba(0,102,204,0.25); }
.product-img { height: 250px; background: var(--bg-light); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.product-img::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(0,102,204,0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; }
.product-card:hover .product-img::after { width: 400px; height: 400px; }
.product-img i { font-size: 80px; color: var(--primary); opacity: 0.3; transition: all 0.5s ease; position: relative; z-index: 2; }
.product-card:hover .product-img i { transform: scale(1.2) rotate(10deg); opacity: 0.5; }
.product-card h3, .product-card p { padding: 0 25px; position: relative; z-index: 2; }
.product-card h3 { padding-top: 25px; margin-bottom: 15px; transition: color 0.3s ease; }
.product-card:hover h3 { color: var(--primary); }
.product-card p { color: var(--light); margin-bottom: 20px; }
.product-card .btn { margin: 0 25px 25px; position: relative; z-index: 2; }

/* Product Full */
.product-full-grid { display: grid; gap: 40px; }
.product-full { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; background: var(--white); border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); transition: 0.3s; }
.product-full:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.15); transform: translateY(-5px); }
.product-full-img { background: var(--bg-light); display: flex; align-items: center; justify-content: center; padding: 40px; }
.product-full-img i { font-size: 100px; color: var(--primary); opacity: 0.3; }
.product-full-content { padding: 40px; }
.product-full-content h3 { font-size: 28px; margin-bottom: 15px; }
.product-full-content > p { color: var(--light); margin-bottom: 25px; }
.product-full-content h4 { margin: 20px 0 15px; }
.product-full-content ul { list-style: none; margin-bottom: 25px; }
.product-full-content ul li { padding: 8px 0; color: var(--light); display: flex; gap: 10px; }
.product-full-content ul li i { color: var(--primary); }

/* Inspect */
.inspect-item { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-bottom: 60px; align-items: center; }
.inspect-item.reverse { direction: rtl; }
.inspect-item.reverse > * { direction: ltr; }
.inspect-img { background: var(--bg-light); padding: 60px; border-radius: 10px; text-align: center; transition: all 0.4s ease; position: relative; overflow: hidden; }
.inspect-img::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,102,204,0.1), rgba(0,163,255,0.1)); opacity: 0; transition: opacity 0.4s ease; z-index: 1; }
.inspect-item:hover .inspect-img { transform: scale(1.05); box-shadow: 0 15px 35px rgba(0,102,204,0.2); }
.inspect-item:hover .inspect-img::before { opacity: 1; }
.inspect-img i { font-size: 120px; color: var(--primary); opacity: 0.3; transition: all 0.4s ease; }
.inspect-item:hover .inspect-img i { opacity: 0.5; transform: rotate(10deg); }
.inspect-img img { width: 100%; height: auto; border-radius: 10px; object-fit: cover; transition: all 0.5s ease; position: relative; z-index: 2; animation: imageZoomIn 0.8s ease-out; }
.inspect-item:hover .inspect-img img { transform: scale(1.1); filter: brightness(1.1); }
@keyframes imageZoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.inspect-content h3 { font-size: 28px; margin-bottom: 15px; }
.inspect-content > p { color: var(--light); margin-bottom: 25px; text-align: justify; }
.inspect-content h4 { margin: 20px 0 15px; }
.inspect-content ul { list-style: none; }
.inspect-content ul li { padding: 8px 0; color: var(--light); display: flex; gap: 10px; }
.inspect-content ul li i { color: var(--primary); margin-top: 5px; }
.benefits { margin-top: 20px; padding: 20px; background: var(--bg-light); border-radius: 8px; }

/* About Page */
.about-overview { max-width: 900px; margin: 0 auto 50px; }
.about-overview h2 { font-size: 36px; margin-bottom: 10px; }
.about-overview .lead { font-size: 20px; color: var(--primary); margin-bottom: 20px; font-weight: 600; }
.about-overview p { color: var(--light); margin-bottom: 20px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-top: 40px; }
.stat-card { background: var(--white); padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: 0.3s; }
.stat-card:hover { transform: translateY(-5px); }
.stat-num { font-size: 48px; font-weight: bold; color: var(--primary); margin-bottom: 10px; }
.stat-label { color: var(--light); }

.vm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; }
.vm-card { background: var(--white); padding: 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); }
.vm-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.vm-icon i { font-size: 36px; color: var(--white); }
.vm-card h3 { font-size: 24px; margin-bottom: 15px; }
.vm-card p { color: var(--light); }

.tech-list { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.tech-item { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 1px solid rgba(0, 102, 204, 0.15); border-radius: 15px; padding: 40px 30px; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; opacity: 0; transform: translateY(50px); box-shadow: 0 5px 20px rgba(0, 102, 204, 0.08); }
.tech-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transition: transform 0.5s ease; }
.tech-item:hover::before { transform: scaleX(1); }
.tech-item.animate { opacity: 1; transform: translateY(0); }
.tech-item:nth-child(1) { transition-delay: 0.1s; }
.tech-item:nth-child(2) { transition-delay: 0.2s; }
.tech-item:nth-child(3) { transition-delay: 0.3s; }
.tech-item:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 20px 50px rgba(0, 102, 204, 0.2), 0 0 30px rgba(0, 163, 255, 0.15); border-color: rgba(0, 163, 255, 0.4); }
.tech-icon { width: 90px; height: 90px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; position: relative; box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.3); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tech-icon::before { content: ''; position: absolute; inset: -5px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; filter: blur(15px); opacity: 0; transition: opacity 0.5s ease; z-index: -1; }
.tech-item:hover .tech-icon { transform: scale(1.15) rotate(10deg); box-shadow: 0 15px 40px rgba(0, 163, 255, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.tech-item:hover .tech-icon::before { opacity: 0.8; animation: pulse 2s ease-in-out infinite; }
.tech-icon i { font-size: 42px; color: var(--white); transition: all 0.4s ease; position: relative; z-index: 1; }
.tech-item:hover .tech-icon i { transform: scale(1.1); }
.tech-item h3 { margin-bottom: 15px; font-size: 20px; font-weight: 700; color: var(--dark); transition: all 0.3s ease; }
.tech-item:hover h3 { color: var(--primary); transform: translateY(-3px); }
.tech-item p { color: var(--light); line-height: 1.7; font-size: 14px; transition: all 0.3s ease; }
.tech-item:hover p { color: var(--dark); }
@media (max-width: 1024px) { .tech-list { grid-template-columns: repeat(2, 1fr); gap: 25px; } }
@media (max-width: 768px) { .tech-list { grid-template-columns: 1fr; gap: 20px; } .tech-item { padding: 30px 25px; } .tech-icon { width: 75px; height: 75px; } .tech-icon i { font-size: 36px; } }

.timeline { max-width: 800px; margin: 0 auto; position: relative; }
.timeline::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: var(--primary); }
.timeline-item { display: flex; gap: 30px; margin-bottom: 50px; position: relative; }
.timeline-year { flex: 1; text-align: right; font-size: 24px; font-weight: bold; color: var(--primary); padding-right: 30px; }
.timeline-content { flex: 1; background: var(--white); padding: 25px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }
.timeline-content h3 { margin-bottom: 10px; }
.timeline-content p { color: var(--light); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; }
.contact-form-wrap h2, .contact-info-wrap h2 { font-size: 28px; margin-bottom: 10px; }
.contact-form-wrap > p, .contact-info-wrap > p { color: var(--light); margin-bottom: 30px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; }
.form-group label { margin-bottom: 8px; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea { padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 5px; font-size: 16px; transition: 0.3s; font-family: inherit; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); }
.error { color: #dc3545; font-size: 14px; margin-top: 5px; display: none; }
.success { background: #d4edda; color: #155724; padding: 15px; border-radius: 5px; margin-top: 20px; display: none; }

.info-card { display: flex; gap: 20px; margin-bottom: 30px; }
.info-icon { width: 60px; height: 60px; background: var(--primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-icon i { font-size: 24px; color: var(--white); }
.info-card h3 { margin-bottom: 8px; }
.info-card p { color: var(--light); }

.social-media { margin-top: 40px; }
.social-links-large { display: flex; gap: 15px; }
.social-links-large a { width: 50px; height: 50px; background: var(--primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 20px; transition: 0.3s; }
.social-links-large a:hover { background: var(--secondary); transform: translateY(-5px); }

.map-section iframe { width: 100%; border-radius: 10px; }

/* CTA */
.cta { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--white); padding: 80px 0; text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: ctaGlow 8s ease-in-out infinite; }
.cta .container { position: relative; z-index: 2; }
.cta h2 { font-size: 36px; margin-bottom: 15px; animation: fadeInUp 0.8s ease-out; }
.cta p { font-size: 18px; margin-bottom: 30px; opacity: 0.9; animation: fadeInUp 1s ease-out 0.2s both; }
.cta .btn { animation: fadeInUp 1.2s ease-out 0.4s both; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.cta .btn:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(0,0,0,0.3); }
@keyframes ctaGlow { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-30px, -30px) rotate(180deg); } }

/* Partners */
.partners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; }
.partner { background: var(--white); padding: 40px; border-radius: 10px; text-align: center; box-shadow: 0 3px 10px rgba(0,0,0,0.08); transition: 0.3s; color: var(--light); font-weight: 600; }
.partner:hover { transform: translateY(-5px); }

/* Footer */
.footer { background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); color: var(--white); padding: 60px 0 20px; position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 50%, rgba(0,102,204,0.05) 0%, transparent 50%); pointer-events: none; }
.footer .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-col { animation: fadeInUp 0.6s ease-out; }
.footer-col:nth-child(1) { animation-delay: 0.1s; }
.footer-col:nth-child(2) { animation-delay: 0.2s; }
.footer-col:nth-child(3) { animation-delay: 0.3s; }
.footer-col:nth-child(4) { animation-delay: 0.4s; }
.footer-col h3, .footer-col h4 { margin-bottom: 20px; color: var(--white); font-size: 20px; position: relative; padding-bottom: 10px; }
.footer-col h3::after, .footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; }
.footer-col .footer-logo { max-width: 80px; height: auto; margin-bottom: 15px; display: block; transition: all 0.3s ease; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,102,204,0.3); cursor: pointer; }
.footer-col .footer-logo:hover { transform: scale(1.1) rotate(5deg); box-shadow: 0 6px 20px rgba(0,102,204,0.5); }
.footer-col .footer-logo.animate-click { animation: logoClickAnimation 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes logoClickAnimation { 0% { transform: scale(1); } 30% { transform: scale(1.2) rotate(10deg); } 60% { transform: scale(0.9) rotate(-5deg); } 100% { transform: scale(1.15); opacity: 0.8; } }
.footer-col p { color: #ccc; margin-bottom: 20px; text-align: justify; line-height: 1.8; font-size: 14px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 12px; transition: all 0.3s ease; }
.footer-col ul li a { color: #ccc; text-decoration: none; transition: all 0.3s ease; display: inline-block; position: relative; }
.footer-col ul li a::before { content: '→'; position: absolute; left: -20px; opacity: 0; transition: all 0.3s ease; color: var(--accent); }
.footer-col ul li:hover a { color: var(--accent); transform: translateX(10px); }
.footer-col ul li:hover a::before { opacity: 1; left: -15px; }
.contact-info li { display: flex; gap: 10px; color: #ccc; margin-bottom: 15px; transition: all 0.3s ease; align-items: flex-start; }
.contact-info li:hover { color: var(--white); transform: translateX(5px); }
.contact-info i { color: var(--accent); font-size: 16px; margin-top: 3px; transition: all 0.3s ease; }
.contact-info li:hover i { transform: scale(1.2); color: var(--primary); }
.social-links { display: flex; gap: 15px; margin-top: 20px; }
.social-links a { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); transition: all 0.4s ease; position: relative; overflow: hidden; }
.social-links a::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: var(--primary); border-radius: 50%; transition: all 0.4s ease; transform: translate(-50%, -50%); }
.social-links a:hover::before { width: 100%; height: 100%; }
.social-links a:hover { transform: translateY(-5px) rotate(360deg); box-shadow: 0 5px 15px rgba(0,102,204,0.5); }
.social-links a i { position: relative; z-index: 1; }
.footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); color: #999; animation: fadeIn 1s ease-out 0.5s both; }
.footer-bottom p { transition: color 0.3s ease; }
.footer-bottom:hover p { color: var(--accent); }

/* Animations */
.fade-in { animation: fadeIn 1s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* Welcome Section */
.welcome-section { background: var(--white); padding: 80px 0; }
.welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: left; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.welcome-content { animation: slideInLeft 1s ease-out; padding-left: 10px; }
.welcome-heading { font-size: 35px; font-weight: 700; margin-bottom: 15px; font-family: 'Poppins', sans-serif; line-height: 1.2; }
.welcome-text { color: #000; font-size: 30px; }
.company-name { color: var(--primary); white-space: nowrap; }
.welcome-description { font-size: 15px; line-height: 1.5; color: var(--light); font-family: 'Poppins', sans-serif; text-align: justify; padding-right: 1px; }
.welcome-image-wrapper { animation: zoomIn 1.2s ease-out; padding-right: 40px; }
.welcome-image { width: 100%; height: auto; border-radius: 15px; box-shadow: 0 10px 40px rgb(10, 10, 10); transition: transform 0.3s ease; }
.welcome-image:hover { transform: scale(1.05); }

/* Welcome Section */
.welcome-section { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); padding: 80px 0; }
.welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.welcome-content { opacity: 1; }
.welcome-content h2 { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; color: var(--dark); margin-bottom: 15px; line-height: 1.4; text-align: left; }
.welcome-content h2 span { color: var(--primary); font-size: 34px; display: inline; }
.welcome-content p { font-family: 'Poppins', sans-serif; font-size: 15px; color: var(--light); line-height: 1.5; text-align: justify; }
.welcome-image-wrapper { opacity: 1; }
.welcome-image { width: 100%; height: auto; border-radius: 15px; box-shadow: 0 15px 60px rgb(0, 0, 0); }

@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }

/* Banner Section */
.banner-section { position: relative; width: 100%; height: 500px; background: url('../images/banner/5.jpg') center/cover no-repeat; display: flex; align-items: flex-end; overflow: hidden; }
.banner-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
.banner-content { position: relative; z-index: 2; margin-left: auto; margin-right: 20px; margin-bottom: 20px; text-align: right; max-width: 300px; }
.banner-content h1 { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; color: #989494; margin-bottom: 20px; text-shadow: 2px 2px 8px rgba(0,0,0,0.3); animation: fadeInRight 1s ease-out; line-height: 1.2; }
.banner-btn { display: inline-block; padding: 10px 20px; background: var(--primary); color: #fff; font-size: 20px; font-weight: 600; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; animation: slideUp 1s ease-out 0.3s both; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.banner-btn:hover { background: var(--secondary); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Our Products Section */
.our-products-section { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f0f7ff 100%); padding: 80px 0; position: relative; overflow: hidden; }
.our-products-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(0, 102, 204, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 163, 255, 0.03) 0%, transparent 50%); pointer-events: none; }
.our-products-section .container { position: relative; z-index: 2; }
.our-products-section .section-header h2 { animation: fadeIn 0.8s ease-out; color: #333; }
.our-products-section .section-header h2 .text-blue { color: var(--primary); }
.our-products-section .section-header p { animation: fadeIn 1s ease-out 0.2s both; max-width: 800px; margin: 0 auto; color: #666; }
.product-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
.product-card-new { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); border: 1px solid rgba(0, 102, 204, 0.1); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,102,204,0.15); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); opacity: 0; animation: fadeInUp 0.6s ease-out forwards; height: 100%; display: flex; flex-direction: column; position: relative; }
.product-card-new::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transition: transform 0.5s ease; }
.product-card-new:hover::before { transform: scaleX(1); }
.product-card-new:nth-child(1) { animation-delay: 0.1s; }
.product-card-new:nth-child(2) { animation-delay: 0.3s; }
.product-card-new:nth-child(3) { animation-delay: 0.5s; }
.product-card-new:hover { transform: translateY(-15px) scale(1.03); box-shadow: 0 25px 60px rgba(0,102,204,0.3), 0 0 40px rgba(0,163,255,0.15); border-color: rgba(0,163,255,0.4); }
.product-card-image { width: 100%; height: 280px; overflow: hidden; background: linear-gradient(135deg, #f0f4ff, #e8f0ff); display: flex; align-items: center; justify-content: center; position: relative; }
.product-card-image::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,102,204,0.05), rgba(0,163,255,0.05)); opacity: 0; transition: opacity 0.4s ease; }
.product-card-new:hover .product-card-image::before { opacity: 1; }
.product-card-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.product-card-new:hover .product-card-image img { transform: scale(1.15) rotate(2deg); }
.product-card-content { padding: 30px 25px; flex: 1; display: flex; flex-direction: column; background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.98)); }
.product-card-content h3 { font-family: 'Poppins', sans-serif; font-size: 21px; font-weight: 700; color: #333; margin-bottom: 15px; transition: all 0.3s ease; }
.product-card-new:hover .product-card-content h3 { color: var(--primary); transform: translateX(5px); }
.product-card-content p { font-family: 'Poppins', sans-serif; font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 20px; flex: 1; }
.discover-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 32px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 16px; font-weight: 600; border-radius: 25px; text-decoration: none; transition: all 0.4s ease; text-align: center; box-shadow: 0 5px 20px rgba(0,102,204,0.3); position: relative; overflow: hidden; }
.discover-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; }
.discover-btn:hover::before { width: 300px; height: 300px; }
.discover-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0,163,255,0.5); }
.discover-btn i { transition: transform 0.3s ease; position: relative; z-index: 1; }
.discover-btn:hover i { transform: translateX(5px); }
@media (max-width: 1024px) { .product-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }
@media (max-width: 768px) { .product-cards-grid { grid-template-columns: 1fr; gap: 25px; } .product-card-image { height: 220px; } }


/* Products We Inspect Section */
.inspect-products-section { background: linear-gradient(135deg, #074f98 0%, #ffffff 100%); padding: 80px 0; position: relative; overflow: hidden; }
.inspect-products-section .section-header h2 { font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 700; color: var(--dark); animation: fadeIn 1s ease-out; }
.inspect-products-section .section-header h2 .highlight { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.inspect-carousel-wrapper { width: 110%; margin-left: -5%; overflow: hidden; position: relative; }
.inspect-grid { display: flex; gap: 30px; animation: continuousScroll 8s linear infinite; will-change: transform; }
.inspect-grid.paused { animation-play-state: paused; }
.inspect-card { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-radius: 20px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,102,204,0.15); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; min-width: 280px; flex-shrink: 0; opacity: 0; animation: staggerFadeIn 0.8s ease-out forwards; cursor: pointer; }
.inspect-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: 0.5s; z-index: 1; }
.inspect-card:hover::before { left: 100%; }
.inspect-card:nth-child(1) { animation-delay: 0.1s; }
.inspect-card:nth-child(2) { animation-delay: 0.2s; }
.inspect-card:nth-child(3) { animation-delay: 0.3s; }
.inspect-card:nth-child(4) { animation-delay: 0.4s; }
.inspect-card:nth-child(5) { animation-delay: 0.5s; }
.inspect-card:hover { transform: scale(1.15) translateY(-15px); box-shadow: 0 20px 60px rgba(0,102,204,0.4); z-index: 100; }
.inspect-card-img { width: 100%; height: 220px; overflow: hidden; background: linear-gradient(135deg, #f0f4ff, #e8f0ff); position: relative; }
.inspect-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.inspect-card:hover .inspect-card-img img { transform: scale(1.2) rotate(2deg); }
.inspect-card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,102,204,0.85), rgba(0,128,255,0.85)); opacity: 0; transition: opacity 0.5s ease; display: flex; align-items: center; justify-content: center; z-index: 2; }
.inspect-card:hover .inspect-card-overlay { opacity: 1; }
.inspect-card-name { padding: 20px; text-align: center; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--dark); transition: all 0.4s ease; background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.85)); }
.inspect-card:hover .inspect-card-name { color: var(--primary); transform: translateY(-5px); }
@keyframes continuousScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes staggerFadeIn { from { opacity: 0; transform: translateY(30px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 1024px) { .inspect-card { min-width: 240px; } .inspect-carousel-wrapper { width: 100%; margin-left: 0; } }
@media (max-width: 768px) { .inspect-card { min-width: 200px; } .inspect-card-img { height: 180px; } .inspect-card-name { font-size: 13px; padding: 15px; } }

.text-blue { color: var(--primary); }

.inspect-products-section { position: relative; }
.inspect-nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 24px; cursor: pointer; z-index: 10; transition: all 0.3s ease; animation: arrowPulse 2s infinite; }
.inspect-nav-arrow:hover { background: var(--secondary); transform: translateY(-50%) scale(1.1); }
.inspect-nav-arrow.left { left: 20px; }
.inspect-nav-arrow.right { right: 20px; }
@keyframes arrowPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,102,204,0.7); } 50% { box-shadow: 0 0 0 15px rgba(0,102,204,0); } }

@keyframes cardSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }

/* Hamburger Menu */
.hamburger { display: none; flex-direction: column; cursor: pointer; gap: 5px; }
.hamburger span { width: 25px; height: 3px; background: var(--dark); transition: 0.3s; border-radius: 3px; }

/* Responsive Header & Footer */
@media (max-width: 768px) {
    .header { border-bottom: 3px solid var(--primary); }
    .navbar .container { align-items: center; }
    .nav-brand .logo { height: 50px; }
    .hamburger { display: flex; }
    .nav-menu { position: fixed; left: -100%; top: 70px; flex-direction: column; background: var(--white); width: 100%; text-align: center; transition: 0.3s; box-shadow: 0 10px 27px rgba(0,0,0,0.05); padding: 20px 0; gap: 0; z-index: 999; }
    .nav-menu.active { left: 0; }
    .nav-menu li { margin: 15px 0; width: 100%; }
    .nav-menu a { display: block; padding: 10px; }
    .btn-nav { display: inline-block; width: auto; }
    .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); }
    
    /* Mobile Dropdown */
    .dropdown { position: relative; }
    .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: linear-gradient(135deg, rgba(0,102,204,0.05), rgba(0,163,255,0.05)); margin: 10px 0; max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), padding 0.3s ease; padding: 0; border-radius: 10px; border: none; }
    .dropdown-menu::before { display: none; }
    .dropdown.active .dropdown-menu { max-height: 500px; padding: 10px 0; animation: mobileDropdownSlide 0.5s ease; }
    .dropdown > a i { transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
    .dropdown.active > a i { transform: rotate(180deg); }
    .dropdown-menu li { opacity: 1; transform: none; }
    .dropdown-menu li a { padding: 12px 25px; font-size: 14px; border-radius: 8px; margin: 5px 10px; }
    .dropdown-menu li a:hover { padding-left: 35px; background: rgba(0,102,204,0.1); }
    @keyframes mobileDropdownSlide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-col ul { padding: 0; }
    .contact-info li { justify-content: center; text-align: left; }
    .social-links { justify-content: center; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .nav-brand .logo { height: 60px; }
    .nav-menu { gap: 20px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Statistics Counter Section */
.stats-counter-section { background: linear-gradient(135deg, #0a1628 0%, #1a2942 50%, #0a1628 100%); padding: 100px 0; position: relative; overflow: hidden; }
.stats-counter-section::before { content: ''; position: absolute; top: 0; left: 0; width: 200%; height: 200%; background: radial-gradient(circle at 20% 50%, rgba(0,102,204,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(0,128,255,0.15) 0%, transparent 50%); animation: backgroundMove 20s ease-in-out infinite; }
.stats-counter-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="rgba(0,102,204,0.2)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)"/></svg>'); animation: particleFloat 30s linear infinite; }
.stats-counter-section .container { position: relative; z-index: 2; }
.stats-counter-section .section-header { text-align: center; margin-bottom: 70px; }
.stats-counter-section .section-header h2 { font-family: 'Poppins', sans-serif; font-size: 42px; font-weight: 700; color: var(--white); margin-bottom: 15px; text-shadow: 0 4px 20px rgba(0,102,204,0.5); }
.stats-counter-section .section-header p { font-size: 18px; color: rgba(255,255,255,0.8); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.stat-item { background: rgba(255,255,255,0.08); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); padding: 50px 30px; border-radius: 20px; text-align: center; box-shadow: 0 15px 50px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; opacity: 0; transform: translateY(80px) scale(0.9); }
.stat-item::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0,102,204,0.3) 0%, transparent 70%); opacity: 0; transition: opacity 0.6s ease; }
.stat-item:hover::before { opacity: 1; animation: pulse 2s ease-in-out infinite; }
.stat-item.animate { opacity: 1; transform: translateY(0) scale(1); }
.stat-item:nth-child(1) { transition-delay: 0.1s; }
.stat-item:nth-child(2) { transition-delay: 0.25s; }
.stat-item:nth-child(3) { transition-delay: 0.4s; }
.stat-item:nth-child(4) { transition-delay: 0.55s; }
.stat-item::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary)); transition: width 0.8s ease; box-shadow: 0 0 20px rgba(0,102,204,0.8); }
.stat-item.animate::after { width: 85%; }
.stat-item:hover { transform: translateY(-15px) scale(1.08); box-shadow: 0 25px 70px rgba(0,102,204,0.4), inset 0 1px 0 rgba(255,255,255,0.3); border-color: rgba(0,128,255,0.5); }
.stat-item:hover::after { width: 100%; }
.stat-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; box-shadow: 0 10px 30px rgba(0,102,204,0.5), inset 0 2px 10px rgba(255,255,255,0.3); position: relative; animation: iconFloat 3s ease-in-out infinite; }
.stat-icon::before { content: ''; position: absolute; inset: -3px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 50%; opacity: 0.5; filter: blur(10px); animation: iconGlow 2s ease-in-out infinite; }
.stat-icon i { font-size: 36px; color: var(--white); position: relative; z-index: 1; }
.stat-number { font-family: 'Poppins', sans-serif; font-size: 56px; font-weight: 800; background: linear-gradient(135deg, #0066cc, #00a3ff, #0066cc); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; gap: 5px; animation: gradientShift 3s ease infinite; text-shadow: 0 0 30px rgba(0,102,204,0.5); }
.stat-number .counter { display: inline-block; }
.stat-number .plus { font-size: 42px; }
.stat-label { font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 500; color: rgba(255,255,255,0.9); line-height: 1.4; }
@keyframes backgroundMove { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-50px, -50px) rotate(5deg); } }
@keyframes particleFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-100px); } }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.5); opacity: 0.1; } }
@keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes iconGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.1); } }
@media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .stat-item { padding: 40px 25px; } .stat-number { font-size: 48px; } }
@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; gap: 25px; } .stat-item { padding: 40px 30px; } .stat-number { font-size: 52px; } .stat-icon { width: 70px; height: 70px; } .stat-icon i { font-size: 32px; } .stats-counter-section { padding: 70px 0; } }

/* Enhanced Solutions Section */
.solutions-intro { max-width: 1000px; margin: 0 auto 50px; text-align: center; }
.intro-text { font-size: 16px; line-height: 1.8; color: var(--light); margin-bottom: 20px; text-align: justify; }
.solutions-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 60px; }
.solutions-features { max-width: 900px; margin: 0 auto 60px; }
.solutions-features h3 { font-size: 28px; margin-bottom: 25px; color: var(--dark); text-align: center; }
.features-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.features-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--light); }
.features-list i { color: var(--primary); font-size: 18px; }
.solutions-benefits { margin-bottom: 50px; }
.solutions-benefits h3 { font-size: 28px; margin-bottom: 35px; color: var(--dark); text-align: center; }
.benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.benefit-item { text-align: center; padding: 30px 20px; background: var(--white); border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: 0.3s; }
.benefit-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,102,204,0.15); }
.benefit-item i { font-size: 40px; color: var(--primary); margin-bottom: 15px; }
.benefit-item h4 { font-size: 18px; margin-bottom: 10px; color: var(--dark); }
.benefit-item p { font-size: 14px; color: var(--light); }
.solutions-closing { max-width: 900px; margin: 0 auto; text-align: center; padding: 30px; background: linear-gradient(135deg, rgba(0,102,204,0.05), rgba(0,128,255,0.05)); border-radius: 10px; border-left: 4px solid var(--primary); }
.solutions-closing p { font-size: 16px; line-height: 1.8; color: var(--dark); font-weight: 500; }
@media (max-width: 1024px) { .solutions-grid { grid-template-columns: repeat(2, 1fr); } .benefits-grid { grid-template-columns: repeat(2, 1fr); } .features-list { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .solutions-grid { grid-template-columns: 1fr; } .benefits-grid { grid-template-columns: 1fr; } }

/* Product Showcase Section */
.product-showcase-section { background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 50%, #ffffff 100%); padding: 80px 0; position: relative; overflow: hidden; }
.product-showcase-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="rgba(0,102,204,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>'); opacity: 0.5; }

/* Page Header with Animation */
.page-header { background: linear-gradient(135deg, #0066cc 0%, #0080ff 100%); color: #fff; padding: 80px 0; text-align: center; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: 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%); animation: headerGlow 8s ease-in-out infinite; }
.page-header::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, transparent, rgba(255,255,255,0.03) 1px, transparent 2px, transparent 50px); animation: headerScan 15s linear infinite; }
.page-header .container { position: relative; z-index: 10; }
.page-header h1 { font-size: 48px; margin-bottom: 15px; font-weight: 700; animation: fadeInDown 0.8s ease-out; text-shadow: 0 4px 20px rgba(0,0,0,0.2); position: relative; display: inline-block; }
.page-header h1::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 0; height: 4px; background: linear-gradient(90deg, #fff, rgba(255,255,255,0.5), #fff); animation: lineExpand 1.5s ease-out 0.5s forwards; box-shadow: 0 0 15px rgba(255,255,255,0.8); }
.page-header h1:hover { transform: scale(1.05); transition: transform 0.3s ease; text-shadow: 0 0 30px rgba(255,255,255,0.5); }
.page-header p { font-size: 20px; opacity: 0.95; animation: fadeInUp 1s ease-out 0.2s both; position: relative; }
.page-header p::before { content: ''; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: rgba(255,255,255,0.5); }
@keyframes headerGlow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.1); } }
@keyframes headerScan { 0% { transform: translateX(0); } 100% { transform: translateX(50px); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
.product-showcase-section .container { position: relative; z-index: 2; }
.product-showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin-top: 50px; }
.product-showcase-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(0, 102, 204, 0.1); border-radius: 15px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 102, 204, 0.15); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease forwards; }
.product-showcase-card:nth-child(1) { animation-delay: 0.1s; }
.product-showcase-card:nth-child(2) { animation-delay: 0.2s; }
.product-showcase-card:nth-child(3) { animation-delay: 0.3s; }
.product-showcase-card:nth-child(4) { animation-delay: 0.4s; }
.product-showcase-card:nth-child(5) { animation-delay: 0.5s; }
.product-showcase-card:nth-child(6) { animation-delay: 0.6s; }
.product-showcase-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,102,204,0.1), rgba(0,128,255,0.1)); opacity: 0; transition: opacity 0.4s ease; z-index: 1; pointer-events: none; }
.product-showcase-card::after { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0,102,204,0.15) 0%, transparent 70%); opacity: 0; transition: all 0.6s ease; z-index: 0; }
.product-showcase-card:hover { transform: translateY(-15px) scale(1.05); border-color: rgba(0, 163, 255, 0.5); box-shadow: 0 25px 70px rgba(0, 163, 255, 0.4), 0 0 0 1px rgba(0, 163, 255, 0.3); }
.product-showcase-card:hover::before { opacity: 1; }
.product-showcase-card:hover::after { opacity: 1; top: -25%; right: -25%; }
.product-showcase-image { width: 100%; height: 320px; overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 163, 255, 0.1)); }
.product-showcase-image::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, transparent 0%, rgba(0,102,204,0.05) 100%); z-index: 1; }
.product-showcase-image img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 0; }
.product-showcase-card:hover .product-showcase-image img { transform: scale(1.15); }
.product-showcase-image img { width: 100%; height: 100%; object-fit: contain; transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; z-index: 2; filter: brightness(0.9); }
.product-showcase-card:hover .product-showcase-image img { transform: scale(1.1) rotate(2deg); filter: brightness(1.1); }
.product-showcase-content { padding: 30px 25px; position: relative; z-index: 3; }
.product-showcase-content h3 { font-size: 20px; font-weight: 600; color: rgba(255, 255, 255, 0.95); margin-bottom: 12px; transition: all 0.3s ease; }
.product-showcase-card:hover .product-showcase-content h3 { color: #00a3ff; text-shadow: 0 0 20px rgba(0, 163, 255, 0.5); }
.product-showcase-content p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); margin-bottom: 20px; }
.discover-more-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, #0066cc, #00a3ff); color: #fff; border-radius: 25px; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.4s ease; position: relative; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 102, 204, 0.4); z-index: 3; }
.discover-more-btn::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 ease, height 0.6s ease; }
.discover-more-btn:hover::before { width: 300px; height: 300px; }
.discover-more-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0, 163, 255, 0.6); }
.discover-more-btn i { transition: transform 0.3s ease; position: relative; z-index: 1; }
.discover-more-btn:hover i { transform: translateX(5px); }
@media (max-width: 1024px) { .product-showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }
@media (max-width: 768px) { .product-showcase-grid { grid-template-columns: 1fr; gap: 25px; } .product-showcase-image { height: 250px; } }

/* Machine Vision Solutions Section */
.machine-vision-section { background: #fff; padding: 80px 0; overflow: hidden; }
.machine-vision-section .section-header h2 { color: #0066cc; font-size: 36px; margin-bottom: 60px; animation: fadeInUp 0.8s ease-out; }
.vision-solutions-wrapper { display: flex; flex-direction: column; gap: 80px; }
.vision-solution-item { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; opacity: 0; transform: translateY(50px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.vision-solution-item.animate { opacity: 1; transform: translateY(0); }
.vision-solution-image { overflow: hidden; border-radius: 20px; box-shadow: 0 15px 50px rgba(0,0,0,0.15); position: relative; }
.vision-solution-image::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,102,204,0.3), rgba(0,128,255,0.3)); opacity: 0; transition: opacity 0.5s ease; z-index: 1; }
.vision-solution-image:hover::before { opacity: 1; }
.vision-solution-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.vision-solution-image:hover img { transform: scale(1.15) rotate(2deg); }
.vision-solution-content { padding: 20px; animation: fadeInRight 1s ease-out; }
.vision-solution-content h3 { font-size: 28px; color: var(--dark); margin-bottom: 20px; font-weight: 600; position: relative; padding-left: 20px; }
.vision-solution-content h3::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 80%; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 10px; }
.vision-solution-content p { font-size: 15px; line-height: 1.9; color: var(--light); text-align: justify; }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 768px) { 
    .vision-solution-item { grid-template-columns: 1fr; gap: 30px; } 
    .vision-solution-item:nth-child(even) .vision-solution-image { order: 1; }
    .vision-solution-item:nth-child(even) .vision-solution-content { order: 2; }
}


/* Premium Product Showcase Animations & Graphics */
.bg-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(2px 2px at 20% 30%, rgba(0, 163, 255, 0.4), transparent), radial-gradient(2px 2px at 60% 70%, rgba(0, 102, 204, 0.4), transparent), radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.3), transparent), radial-gradient(1px 1px at 80% 10%, rgba(0, 163, 255, 0.3), transparent); background-size: 200% 200%, 300% 300%, 250% 250%, 400% 400%; background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%; animation: particleFloatBg 20s ease-in-out infinite; pointer-events: none; }
.scanning-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, rgba(0, 163, 255, 0.03) 0px, rgba(0, 163, 255, 0.03) 1px, transparent 1px, transparent 2px); animation: scanMove 3s linear infinite; pointer-events: none; }
#circuitCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.15; }
.card-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 163, 255, 0.3) 0%, transparent 70%); opacity: 0; transition: all 0.6s ease; pointer-events: none; z-index: 1; }
.product-showcase-card:hover .card-glow { opacity: 1; animation: glowPulse 2s ease-in-out infinite; }
.laser-scan { position: absolute; top: -100%; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, rgba(0, 163, 255, 0.8), transparent); box-shadow: 0 0 20px rgba(0, 163, 255, 1), 0 0 40px rgba(0, 163, 255, 0.6); opacity: 0; transition: opacity 0.3s ease; z-index: 3; }
.product-showcase-card:hover .laser-scan { opacity: 1; animation: laserScan 2s ease-in-out infinite; }
@keyframes particleFloatBg { 0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%; opacity: 1; } 50% { background-position: 100% 100%, 0% 0%, 80% 80%, 20% 80%; opacity: 0.8; } }
@keyframes scanMove { 0% { transform: translateY(0); } 100% { transform: translateY(50px); } }
@keyframes glowPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } }
@keyframes laserScan { 0% { top: -10%; } 50% { top: 50%; } 100% { top: 110%; } }


/* White Theme Product Cards */
.product-showcase-content h3 { color: #1a1a1a; }
.product-showcase-card:hover .product-showcase-content h3 { color: #0066cc; }
.product-showcase-content p { color: #666; }


/* Section Header Below Page Header - Classic Motion Graphics */
.product-showcase-section .section-header { text-align: center; margin-bottom: 60px; position: relative; padding: 40px 0; }
.product-showcase-section .section-header::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 200px; background: radial-gradient(circle, rgba(0, 102, 204, 0.08) 0%, transparent 70%); animation: sectionGlowPulse 4s ease-in-out infinite; }
.product-showcase-section .section-header h2 { font-size: 42px; font-weight: 700; color: #0066cc; margin-bottom: 15px; position: relative; display: inline-block; animation: slideInFromLeft 1s ease-out; }
.product-showcase-section .section-header h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 0; height: 4px; background: linear-gradient(90deg, #0066cc, #00a3ff, #0066cc); animation: lineExpand 1.5s ease-out 0.5s forwards; box-shadow: 0 0 10px rgba(0, 102, 204, 0.5); }
.product-showcase-section .section-header h2:hover::after { animation: lineGlow 1s ease-in-out infinite; }
.product-showcase-section .section-header p { font-size: 18px; color: #666; position: relative; animation: fadeInUp 1.2s ease-out 0.3s both; }

/* Decorative Graphics Around Header */
.product-showcase-section .section-header::after { content: ''; position: absolute; top: 50%; right: 10%; width: 60px; height: 60px; background: linear-gradient(135deg, rgba(0, 102, 204, 0.1), rgba(0, 163, 255, 0.1)); border-radius: 50%; animation: floatCircle 6s ease-in-out infinite; }

/* Classic Motion Animations */
@keyframes sectionGlowPulse { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; } 50% { transform: translateX(-50%) scale(1.3); opacity: 0.8; } }
@keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes lineExpand { from { width: 0; } to { width: 100%; } }
@keyframes lineGlow { 0%, 100% { box-shadow: 0 0 10px rgba(0, 102, 204, 0.5); } 50% { box-shadow: 0 0 20px rgba(0, 163, 255, 0.8), 0 0 30px rgba(0, 163, 255, 0.4); } }
@keyframes floatCircle { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } }

/* Hover Effect on Section Header */
.product-showcase-section .section-header:hover h2 { color: #00a3ff; text-shadow: 0 0 20px rgba(0, 163, 255, 0.3); transform: scale(1.05); transition: all 0.3s ease; }


/* Clean Animation Reset */
.page-header h1 { overflow: visible; border-right: none; white-space: normal; animation: fadeInDown 0.8s ease-out; }

/* About Business Section */
.about-business { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-business-content h2 { font-size: 32px; color: var(--dark); margin-bottom: 25px; font-weight: 600; }
.about-business-content p { font-size: 16px; line-height: 1.8; color: var(--light); margin-bottom: 20px; text-align: justify; }
.about-business-image { overflow: hidden; border-radius: 15px; box-shadow: 0 15px 40px rgba(0,102,204,0.2); position: relative; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); }
.about-business-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(0,163,255,0.2), transparent); opacity: 0; transition: opacity 0.5s ease; z-index: 1; border-radius: 15px; }
.about-business-image:hover::before { opacity: 1; }
.about-business-image img { width: 100%; height: auto; object-fit: cover; transition: transform 0.5s ease; }
.about-business-image:hover img { transform: scale(1.1) rotate(-2deg); filter: brightness(1.1); }
@media (max-width: 768px) { .about-business { grid-template-columns: 1fr; gap: 30px; } }

/* About Features Grid */
.about-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.about-feature-card { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,102,204,0.1); transition: all 0.4s ease; opacity: 0; transform: translateY(50px); animation: fadeInUp 0.8s ease-out forwards; position: relative; }
.about-feature-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(0,163,255,0.1), transparent); transform: rotate(45deg); transition: all 0.6s ease; opacity: 0; z-index: 0; }
.about-feature-card:hover::before { opacity: 1; animation: shimmer 1.5s infinite; }
.about-feature-card:nth-child(1) { animation-delay: 0.2s; }
.about-feature-card:nth-child(2) { animation-delay: 0.4s; }
.about-feature-card:nth-child(3) { animation-delay: 0.6s; }
.about-feature-card:hover { transform: translateY(-15px) scale(1.03); box-shadow: 0 25px 60px rgba(0,102,204,0.25), 0 0 40px rgba(0,163,255,0.3); background: rgba(255, 255, 255, 0.95); border-color: rgba(0,163,255,0.5); }
.about-feature-image { overflow: hidden; height: 300px; position: relative; }
.about-feature-image::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,102,204,0.2), rgba(0,163,255,0.2)); opacity: 0; transition: opacity 0.4s ease; z-index: 1; }
.about-feature-card:hover .about-feature-image::before { opacity: 1; }
.about-feature-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.about-feature-card:hover .about-feature-image img { transform: scale(1.2) rotate(2deg); }
.about-feature-content { padding: 30px; position: relative; z-index: 1; }
.about-feature-content h3 { font-size: 22px; color: var(--dark); margin-bottom: 15px; font-weight: 600; transition: all 0.3s ease; position: relative; z-index: 1; }
.about-feature-card:hover .about-feature-content h3 { color: var(--primary); transform: translateX(10px); text-shadow: 0 0 15px rgba(0,163,255,0.3); }
.about-feature-content p { font-size: 15px; line-height: 1.8; color: var(--light); text-align: justify; }
@media (max-width: 1024px) { .about-features-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }
@media (max-width: 768px) { .about-features-grid { grid-template-columns: 1fr; gap: 25px; } }

/* Vision Mission Image */
.vm-image { overflow: hidden; border-radius: 10px; margin-bottom: 20px; height: 400px; box-shadow: 0 10px 25px rgba(0,102,204,0.15); position: relative; }
.vm-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,102,204,0.3), rgba(0,163,255,0.3)); opacity: 0; transition: opacity 0.4s ease; mix-blend-mode: overlay; z-index: 1; }
.vm-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.vm-card:hover .vm-image img { transform: scale(1.1) rotate(1deg); }
.vm-card:hover .vm-image::after { opacity: 1; }
.vm-card p { text-align: justify; }

/* Glass Effect Animations */
@keyframes shimmer { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(0,163,255,0.3); } 50% { box-shadow: 0 0 40px rgba(0,163,255,0.6), 0 0 60px rgba(0,163,255,0.4); } }

/* Enhanced Product Cards Glass Effect */
.product-showcase-card { background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; }
.product-showcase-card:hover { background: rgba(255, 255, 255, 0.95) !important; animation: float 3s ease-in-out infinite; }

/* Vision Solution Cards Glass */
.vision-solution-image::before { z-index: 2; }
.vision-solution-item:hover .vision-solution-image::before { animation: glow 2s ease-in-out infinite; }

/* Product Card New Glass */
.product-card-new { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); }
.product-card-new:hover { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Inspect Card Glass */
.inspect-card { backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; }
.inspect-card:hover { backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }

/* SMART Goals Section - Advanced UI */
.smart-goals-section { padding: 100px 0; background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%); position: relative; overflow: hidden; }
.smart-goals-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 50%, rgba(66, 133, 244, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(156, 39, 176, 0.15) 0%, transparent 50%); animation: bgFloat 15s ease-in-out infinite; }
.smart-goals-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.02) 1px, transparent 2px, transparent 40px); animation: scanLines 20s linear infinite; pointer-events: none; }
.smart-goals-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 35px; position: relative; z-index: 2; }
.smart-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 25px; padding: 45px 30px; text-align: center; position: relative; overflow: hidden; opacity: 0; transform: translateY(80px) scale(0.9); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform, opacity; }
.smart-card::before { content: ''; position: absolute; top: -100%; left: -100%; width: 300%; height: 300%; background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.15), transparent 30%); animation: rotate 4s linear infinite; opacity: 0; transition: opacity 0.5s ease; }
.smart-card:hover::before { opacity: 1; }
.smart-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent); opacity: 0; transition: opacity 0.4s ease; border-radius: 25px; pointer-events: none; }
.smart-card:hover::after { opacity: 1; }
.smart-card:nth-child(1) { border-color: rgba(74, 144, 226, 0.3); }
.smart-card:nth-child(1):hover { border-color: rgba(74, 144, 226, 0.8); box-shadow: 0 25px 70px rgba(74, 144, 226, 0.4), 0 0 80px rgba(74, 144, 226, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.smart-card:nth-child(2) { border-color: rgba(233, 75, 138, 0.3); }
.smart-card:nth-child(2):hover { border-color: rgba(233, 75, 138, 0.8); box-shadow: 0 25px 70px rgba(233, 75, 138, 0.4), 0 0 80px rgba(233, 75, 138, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.smart-card:nth-child(3) { border-color: rgba(255, 140, 66, 0.3); }
.smart-card:nth-child(3):hover { border-color: rgba(255, 140, 66, 0.8); box-shadow: 0 25px 70px rgba(255, 140, 66, 0.4), 0 0 80px rgba(255, 140, 66, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.smart-card:nth-child(4) { border-color: rgba(46, 191, 165, 0.3); }
.smart-card:nth-child(4):hover { border-color: rgba(46, 191, 165, 0.8); box-shadow: 0 25px 70px rgba(46, 191, 165, 0.4), 0 0 80px rgba(46, 191, 165, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.smart-card:nth-child(5) { border-color: rgba(155, 89, 182, 0.3); }
.smart-card:nth-child(5):hover { border-color: rgba(155, 89, 182, 0.8); box-shadow: 0 25px 70px rgba(155, 89, 182, 0.4), 0 0 80px rgba(155, 89, 182, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.smart-card:hover { transform: translateY(-20px) scale(1.05); }
.smart-badge { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)); backdrop-filter: blur(15px); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; font-size: 36px; font-weight: 900; color: #fff; transform: scale(0.8); opacity: 0; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.smart-badge::before { content: ''; position: absolute; inset: -5px; background: inherit; border-radius: 50%; filter: blur(15px); opacity: 0; transition: opacity 0.5s ease; z-index: -1; }
.smart-card:hover .smart-badge::before { opacity: 0.8; animation: pulse 2s ease-in-out infinite; }
.smart-card.animate .smart-badge { animation: badgeScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.3s; }
.smart-card:hover .smart-badge { transform: scale(1.15) rotate(15deg); box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.smart-card h3 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 20px; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5); transition: all 0.4s ease; letter-spacing: 0.5px; }
.smart-card:hover h3 { transform: scale(1.08) translateY(-5px); text-shadow: 0 5px 25px rgba(255, 255, 255, 0.3); }
.smart-card p { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.85); margin-bottom: 35px; transition: all 0.3s ease; }
.smart-card:hover p { color: rgba(255, 255, 255, 1); transform: translateY(-3px); }
.smart-letter { font-size: 90px; font-weight: 900; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-top: auto; transition: all 0.5s ease; position: relative; }
.smart-letter::before { content: attr(data-letter); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, currentColor, transparent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0; transition: opacity 0.5s ease; }
.smart-card:hover .smart-letter { transform: scale(1.15) translateY(-10px); }
.smart-card:hover .smart-letter::before { opacity: 0.3; }
.smart-card:nth-child(1) .smart-letter::before { color: #4A90E2; }
.smart-card:nth-child(2) .smart-letter::before { color: #E94B8A; }
.smart-card:nth-child(3) .smart-letter::before { color: #FF8C42; }
.smart-card:nth-child(4) .smart-letter::before { color: #2EBFA5; }
.smart-card:nth-child(5) .smart-letter::before { color: #9B59B6; }
@keyframes cardSlideUp { from { opacity: 0; transform: translateY(80px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes badgeScale { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.4; } }
@keyframes bgFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -50px) scale(1.1); } }
@keyframes scanLines { 0% { transform: translateY(0); } 100% { transform: translateY(40px); } }
@media (max-width: 1024px) { .smart-goals-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } }
@media (max-width: 768px) { .smart-goals-grid { grid-template-columns: 1fr; gap: 25px; } .smart-card { padding: 40px 25px; } .smart-badge { width: 70px; height: 70px; font-size: 32px; } .smart-letter { font-size: 70px; } }

/* SMART Goals Section Header Colors */
.smart-goals-section .section-header h2 { color: #fff; font-size: 42px; margin-bottom: 15px; text-shadow: 0 0 30px rgba(66, 133, 244, 0.5); }
.smart-goals-section .section-header p { color: rgba(255, 255, 255, 0.8); font-size: 18px; }


/* ========================================
   ENHANCED CONTACT PAGE ANIMATIONS
======================================== */

/* Contact Section Background */
.section-padding { position: relative; }
.section-padding::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(0, 102, 204, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(0, 163, 255, 0.03) 0%, transparent 50%); pointer-events: none; }

/* Contact Form Wrapper Enhanced */
.contact-form-wrap { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); border-radius: 20px; padding: 40px; box-shadow: 0 15px 50px rgba(0, 102, 204, 0.15); border: 1px solid rgba(255, 255, 255, 0.5); position: relative; overflow: hidden; opacity: 0; animation: slideInLeft 1s ease-out 0.2s forwards; }
.contact-form-wrap::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 163, 255, 0.08) 0%, transparent 70%); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.contact-form-wrap:hover::before { opacity: 1; animation: pulse 3s ease-in-out infinite; }
.contact-form-wrap h2 { color: var(--primary); margin-bottom: 15px; font-size: 32px; position: relative; padding-left: 20px; }
.contact-form-wrap h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 80%; background: linear-gradient(180deg, #0066cc, #00a3ff); border-radius: 3px; }

/* Form Input Enhanced Animations */
.form-group { position: relative; }
.form-group input, .form-group select, .form-group textarea { background: rgba(255, 255, 255, 0.9); border: 2px solid rgba(0, 102, 204, 0.2); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1), 0 8px 25px rgba(0, 102, 204, 0.15); transform: translateY(-2px); background: #fff; }
.form-group label { color: var(--dark); font-weight: 600; transition: all 0.3s ease; }
.form-group:hover label { color: var(--primary); transform: translateX(5px); }

/* Submit Button Enhanced */
.contact-form .btn-primary { width: 100%; padding: 15px; font-size: 16px; position: relative; overflow: hidden; background: linear-gradient(135deg, #0066cc, #00a3ff); border: none; box-shadow: 0 10px 30px rgba(0, 102, 204, 0.3); transition: all 0.4s ease; }
.contact-form .btn-primary::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; }
.contact-form .btn-primary:hover::before { width: 400px; height: 400px; }
.contact-form .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 163, 255, 0.5); }
.contact-form .btn-primary i { margin-left: 10px; transition: transform 0.3s ease; }
.contact-form .btn-primary:hover i { transform: translateX(5px); }

/* Contact Info Wrapper Enhanced */
.contact-info-wrap { opacity: 0; animation: slideInRight 1s ease-out 0.4s forwards; }
.contact-info-wrap h2 { color: var(--primary); margin-bottom: 15px; font-size: 32px; position: relative; padding-left: 20px; }
.contact-info-wrap h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 80%; background: linear-gradient(180deg, #0066cc, #00a3ff); border-radius: 3px; }

/* Info Cards Enhanced */
.info-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 15px; padding: 25px; box-shadow: 0 10px 30px rgba(0, 102, 204, 0.1); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; opacity: 0; animation: fadeInUp 0.6s ease-out forwards; }
.info-card:nth-child(1) { animation-delay: 0.6s; }
.info-card:nth-child(2) { animation-delay: 0.7s; }
.info-card:nth-child(3) { animation-delay: 0.8s; }
.info-card:nth-child(4) { animation-delay: 0.9s; }
.info-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #0066cc, #00a3ff); transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s ease; }
.info-card:hover { transform: translateX(10px) translateY(-5px); box-shadow: 0 20px 50px rgba(0, 102, 204, 0.25), 0 0 40px rgba(0, 163, 255, 0.15); background: rgba(255, 255, 255, 1); }
.info-card:hover::before { transform: scaleY(1); transform-origin: top; }

/* Info Icon Enhanced */
.info-icon { background: linear-gradient(135deg, #0066cc, #00a3ff); box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; }
.info-icon::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: translateX(-100%) rotate(45deg); transition: transform 0.6s ease; }
.info-card:hover .info-icon { transform: rotate(10deg) scale(1.15); box-shadow: 0 15px 35px rgba(0, 163, 255, 0.5); }
.info-card:hover .info-icon::before { transform: translateX(100%) rotate(45deg); }
.info-icon i { position: relative; z-index: 1; }

/* Info Card Content */
.info-card h3 { color: var(--dark); transition: all 0.3s ease; }
.info-card:hover h3 { color: var(--primary); transform: translateX(5px); }
.info-card p { transition: all 0.3s ease; }
.info-card:hover p { color: var(--dark); }

/* Social Media Enhanced */
.social-media { opacity: 0; animation: fadeInUp 0.6s ease-out 1s forwards; }
.social-media h3 { color: var(--dark); margin-bottom: 20px; font-size: 20px; }
.social-links-large a { background: linear-gradient(135deg, #0066cc, #00a3ff); box-shadow: 0 8px 20px rgba(0, 102, 204, 0.3); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; }
.social-links-large a::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.5s ease, height 0.5s ease; }
.social-links-large a:hover::before { width: 100px; height: 100px; }
.social-links-large a:hover { transform: translateY(-8px) rotate(360deg); box-shadow: 0 15px 35px rgba(0, 163, 255, 0.5); }
.social-links-large a i { position: relative; z-index: 1; }

/* Map Section Enhanced */
.map-wrapper::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 102, 204, 0.05), rgba(0, 163, 255, 0.05)); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; border-radius: 20px; }
.map-wrapper:hover::after { opacity: 1; }

/* Floating Particles Animation */
@keyframes floatParticle { 0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; } 50% { transform: translateY(-20px) translateX(10px); opacity: 0.6; } }

/* Responsive Enhancements */
@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-form-wrap, .contact-info-wrap { animation: fadeInUp 0.8s ease-out forwards; }
    .info-card:hover { transform: translateY(-5px); }
}

/* ========================================
   MODERN LOCATION MAP SECTION
======================================== */
.location-map-section { padding: 100px 0; background: linear-gradient(135deg, #0a0e27 0%, #1a2942 50%, #0a0e27 100%); position: relative; overflow: hidden; }
.location-glow-bg { position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(0, 163, 255, 0.2) 0%, transparent 70%); transform: translate(-50%, -50%); animation: pulseGlow 8s ease-in-out infinite; pointer-events: none; }
.location-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(2px 2px at 20% 30%, rgba(0, 163, 255, 0.3), transparent), radial-gradient(2px 2px at 60% 70%, rgba(0, 102, 204, 0.3), transparent), radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.2), transparent); background-size: 200% 200%, 300% 300%, 250% 250%; animation: particleFloat 20s ease-in-out infinite; pointer-events: none; }
@keyframes pulseGlow { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.8; } }
@keyframes particleFloat { 0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; } 50% { background-position: 100% 100%, 0% 0%, 80% 80%; } }

.location-header { text-align: center; margin-bottom: 60px; opacity: 0; animation: fadeInDown 0.8s ease-out 0.2s forwards; position: relative; z-index: 2; }
.location-icon-wrapper { width: 100px; height: 100px; background: linear-gradient(135deg, #0066cc, #00a3ff); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; box-shadow: 0 15px 40px rgba(0, 163, 255, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.3); position: relative; animation: iconBounce 2s ease-in-out infinite; }
.location-icon-wrapper::before { content: ''; position: absolute; inset: -5px; background: linear-gradient(135deg, #0066cc, #00a3ff); border-radius: 50%; filter: blur(15px); opacity: 0.6; animation: iconGlow 2s ease-in-out infinite; z-index: -1; }
.location-icon-wrapper i { font-size: 48px; color: #fff; animation: iconRotate 3s ease-in-out infinite; }
@keyframes iconBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes iconGlow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.1); } }
@keyframes iconRotate { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } }

.location-title { font-size: 42px; font-weight: 700; color: #fff; margin-bottom: 15px; position: relative; display: inline-block; text-shadow: 0 4px 20px rgba(0, 163, 255, 0.5); }
.location-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 4px; background: linear-gradient(90deg, #0066cc, #00a3ff, #0066cc); border-radius: 2px; animation: lineExpand 1.5s ease-out 0.8s forwards; box-shadow: 0 0 15px rgba(0, 163, 255, 0.8); }
.location-subtitle { font-size: 18px; color: rgba(255, 255, 255, 0.8); margin-top: 20px; }

.map-container { opacity: 0; animation: fadeInUp 1s ease-out 0.4s forwards; position: relative; z-index: 2; }
.map-wrapper { position: relative; border-radius: 25px; overflow: hidden; box-shadow: 0 25px 70px rgba(0, 102, 204, 0.4); height: 600px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 3px solid rgba(0, 163, 255, 0.3); transition: all 0.5s ease; }
.map-wrapper::before { content: ''; position: absolute; inset: -3px; background: linear-gradient(135deg, #0066cc, #00a3ff, #0066cc); background-size: 200% 200%; border-radius: 25px; z-index: -1; opacity: 0; transition: opacity 0.5s ease; animation: gradientShift 3s ease infinite; }
.map-wrapper:hover { transform: translateY(-10px) scale(1.01); box-shadow: 0 35px 90px rgba(0, 163, 255, 0.5), 0 0 60px rgba(0, 163, 255, 0.3); border-color: rgba(0, 163, 255, 0.6); }
.map-wrapper:hover::before { opacity: 1; }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.map-pin-indicator { position: absolute; top: 20px; right: 20px; width: 60px; height: 60px; background: linear-gradient(135deg, #ff4444, #ff6b6b); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(255, 68, 68, 0.5); z-index: 10; animation: pinPulse 2s ease-in-out infinite; cursor: pointer; }
.map-pin-indicator::before { content: ''; position: absolute; inset: -5px; background: inherit; border-radius: 50%; filter: blur(10px); opacity: 0.6; animation: pinGlow 2s ease-in-out infinite; z-index: -1; }
.map-pin-indicator i { font-size: 28px; color: #fff; animation: pinBounce 1.5s ease-in-out infinite; }
@keyframes pinPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes pinGlow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes pinBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.map-info-card { position: absolute; bottom: 30px; left: 30px; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border-radius: 20px; padding: 25px 30px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); border: 2px solid rgba(0, 163, 255, 0.3); max-width: 400px; z-index: 10; opacity: 0; animation: slideInLeft 1s ease-out 0.8s forwards; transition: all 0.4s ease; }
.map-info-card:hover { transform: translateY(-5px); box-shadow: 0 20px 60px rgba(0, 163, 255, 0.4); border-color: rgba(0, 163, 255, 0.6); }
.map-info-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, #0066cc, #00a3ff); border-radius: 20px 0 0 20px; }
.map-info-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #0066cc, #00a3ff); border-radius: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3); transition: all 0.3s ease; }
.map-info-card:hover .map-info-icon { transform: rotate(10deg) scale(1.1); }
.map-info-icon i { font-size: 28px; color: #fff; }
.map-info-content h4 { font-size: 20px; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.map-info-content p { font-size: 14px; color: var(--light); margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.map-info-content p i { color: var(--primary); }
.map-directions-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, #0066cc, #00a3ff); color: #fff; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3); }
.map-directions-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 163, 255, 0.5); }
.map-directions-btn i { transition: transform 0.3s ease; }
.map-directions-btn:hover i { transform: translateX(5px); }

@media (max-width: 768px) { 
    .location-map-section { padding: 60px 0; }
    .location-icon-wrapper { width: 80px; height: 80px; }
    .location-icon-wrapper i { font-size: 36px; }
    .location-title { font-size: 32px; }
    .location-subtitle { font-size: 16px; }
    .map-wrapper { height: 450px; }
    .map-info-card { position: static; margin-top: 20px; max-width: 100%; }
    .map-pin-indicator { width: 50px; height: 50px; top: 15px; right: 15px; }
    .map-pin-indicator i { font-size: 22px; }
}

@media (max-width: 480px) { 
    .location-map-section { padding: 40px 0; }
    .location-header { margin-bottom: 40px; }
    .location-title { font-size: 28px; }
    .map-wrapper { height: 350px; }
}


/* Company Information Table */
.company-info-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 30px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 102, 204, 0.1); }
.company-info-table tbody tr { transition: all 0.3s ease; }
.company-info-table tbody tr:hover { background: rgba(0, 102, 204, 0.05); transform: translateX(5px); }
.company-info-table td { padding: 18px 20px; border-bottom: 1px solid rgba(0, 102, 204, 0.1); }
.company-info-table tbody tr:last-child td { border-bottom: none; }
.table-label { font-weight: 600; color: var(--dark); width: 40%; display: flex; align-items: center; gap: 12px; }
.table-label i { color: var(--primary); font-size: 18px; min-width: 20px; }
.table-value { color: var(--light); line-height: 1.8; }

/* New Contact Grid with Animated Info Boxes */
.contact-grid-new { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact-info-boxes { display: flex; flex-direction: column; gap: 25px; }
.info-box { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(15px); border-radius: 20px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 102, 204, 0.1); border: 1px solid rgba(255, 255, 255, 0.5); display: flex; gap: 20px; align-items: flex-start; position: relative; overflow: hidden; opacity: 0; transform: translateX(50px); animation: slideInRight 0.6s ease-out forwards; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.info-box[data-delay="0.1"] { animation-delay: 0.1s; }
.info-box[data-delay="0.2"] { animation-delay: 0.2s; }
.info-box[data-delay="0.3"] { animation-delay: 0.3s; }
.info-box[data-delay="0.4"] { animation-delay: 0.4s; }
.info-box::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, #0066cc, #00a3ff); transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s ease; }
.info-box::after { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(0, 163, 255, 0.1) 0%, transparent 70%); opacity: 0; transition: all 0.6s ease; pointer-events: none; }
.info-box:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 50px rgba(0, 102, 204, 0.25), 0 0 40px rgba(0, 163, 255, 0.15); background: rgba(255, 255, 255, 1); }
.info-box:hover::before { transform: scaleY(1); transform-origin: top; }
.info-box:hover::after { opacity: 1; top: -25%; right: -25%; animation: pulse 2s ease-in-out infinite; }
.info-box-icon { width: 70px; height: 70px; min-width: 70px; background: linear-gradient(135deg, #0066cc, #00a3ff); border-radius: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(0, 102, 204, 0.3); position: relative; overflow: hidden; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.info-box-icon::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: translateX(-100%) rotate(45deg); transition: transform 0.6s ease; }
.info-box:hover .info-box-icon { transform: rotate(10deg) scale(1.1); box-shadow: 0 15px 35px rgba(0, 163, 255, 0.5); }
.info-box:hover .info-box-icon::before { transform: translateX(100%) rotate(45deg); }
.info-box-icon i { font-size: 28px; color: #fff; position: relative; z-index: 1; transition: transform 0.3s ease; }
.info-box:hover .info-box-icon i { transform: scale(1.2); }
.info-box-content { flex: 1; }
.info-box-content h3 { font-size: 20px; font-weight: 600; color: var(--dark); margin-bottom: 10px; transition: all 0.3s ease; }
.info-box:hover .info-box-content h3 { color: var(--primary); transform: translateX(5px); }
.info-box-content p { font-size: 14px; line-height: 1.8; color: var(--light); transition: all 0.3s ease; }
.info-box:hover .info-box-content p { color: var(--dark); }
@keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 768px) { .contact-grid-new { grid-template-columns: 1fr; gap: 40px; } .info-box { animation: fadeInUp 0.6s ease-out forwards; } }

/* Pharmaceutical Horizontal Containers */
.pharma-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.pharma-container { display: flex; gap: 20px; background: var(--white); padding: 25px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,102,204,0.1); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid rgba(0,102,204,0.1); opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease-out forwards; }
.pharma-container:nth-child(1) { animation-delay: 0.1s; }
.pharma-container:nth-child(2) { animation-delay: 0.15s; }
.pharma-container:nth-child(3) { animation-delay: 0.2s; }
.pharma-container:nth-child(4) { animation-delay: 0.25s; }
.pharma-container:nth-child(5) { animation-delay: 0.3s; }
.pharma-container:nth-child(6) { animation-delay: 0.35s; }
.pharma-container:nth-child(7) { animation-delay: 0.4s; }
.pharma-container:nth-child(8) { animation-delay: 0.45s; }
.pharma-container:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 40px rgba(0,102,204,0.25); border-color: rgba(0,163,255,0.4); }
.pharma-icon { width: 60px; height: 60px; min-width: 60px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,102,204,0.3); transition: all 0.4s ease; }
.pharma-container:hover .pharma-icon { transform: rotate(10deg) scale(1.1); box-shadow: 0 12px 30px rgba(0,163,255,0.5); }
.pharma-icon i { font-size: 28px; color: var(--white); }
.pharma-content { flex: 1; }
.pharma-content h3 { font-size: 18px; font-weight: 600; color: var(--dark); margin-bottom: 8px; transition: all 0.3s ease; }
.pharma-container:hover .pharma-content h3 { color: var(--primary); }
.pharma-content p { font-size: 14px; line-height: 1.6; color: var(--light); }
@media (max-width: 1024px) { .pharma-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 768px) { .pharma-grid { grid-template-columns: 1fr; gap: 20px; } .pharma-container { padding: 20px; } }