* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
/* Loading Screen */
.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease-out;
}
.loader.hidden {
opacity: 0;
pointer-events: none;
}
.loader-content {
text-align: center;
color: white;
}
.spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(255,255,255,0.3);
border-top: 3px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Header */
header {
background: linear-gradient(135deg, #ffffff 0%, #2a5298 100%);
color: white;
padding: 1rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.header-scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: #ffd700;
}
.nav-links {
display: flex;
list-style: none;
gap: 30px;
}
.nav-links a {
color: black;
text-decoration: none;
transition: color 0.3s ease;
position: relative;
}
.nav-links a:hover {
color: #ffd700;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: #ffd700;
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.mobile-menu {
display: none;
flex-direction: column;
cursor: pointer;
}
.mobile-menu span {
width: 25px;
height: 3px;
background: white;
margin: 3px 0;
transition: 0.3s;
}
/* Hero Section */
/* crosel */
.hero-carousel {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.carousel-container {
position: relative;
width: 100%;
height: 100%;
}
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateX(100%);
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.carousel-slide.active {
opacity: 1;
transform: translateX(0);
}
.carousel-slide.prev {
transform: translateX(-100%);
}
/* Slide backgrounds with sample images */
/* .slide-1 {
background-image: url('img/inv.png');
}
.slide-2 {
background-image: url('img/inv2.png');
}
.slide-3 {
background-image: url('img/inv3.png');
}
.slide-4 {
background-image: url('img/inv4.png');
} */
/* Navigation arrows */
.carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
font-size: 1.5rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
z-index: 10;
}
.carousel-nav:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-50%) scale(1.1);
}
.carousel-nav.prev {
left: 2rem;
}
.carousel-nav.next {
right: 2rem;
}
/* Indicators */
.carousel-indicators {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1rem;
z-index: 10;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: white;
transform: scale(1.2);
}
.indicator:hover {
background: rgba(255, 255, 255, 0.8);
transform: scale(1.1);
}
/* Responsive design */
@media (max-width: 768px) {
.carousel-nav {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.carousel-nav.prev {
left: 1rem;
}
.carousel-nav.next {
right: 1rem;
}
}
/* about */
.banga-container {
min-height: 100vh;
padding: 40px 20px;
font-family: Arial, sans-serif;
padding:50px;
}
.banga-main-section {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 80px;
min-height: 70vh;
margin-left: 40px;
margin-top: 50px;
}
.banga-content {
flex: 1;
max-width: 600px;
margin-left: 100px;
}
.banga-welcome {
color: #333;
font-size: 24px;
font-weight: 400;
margin-bottom: 15px;
line-height: 1.4;
}
.banga-main-title {
color: #163c6e;
font-size: 48px;
font-weight: bold;
line-height: 1.1;
margin-bottom: 30px;
}
.banga-description {
color: #555;
font-size: 16px;
line-height: 1.8;
margin-bottom: 25px;
text-align: justify;
}
.banga-company-name {
color: #6b8e23;
font-weight: bold;
}
.banga-products {
color: #555;
font-size: 16px;
line-height: 1.8;
text-align: justify;
}
.banga-highlight {
color: #6b8e23;
font-weight: bold;
}
.banga-map-section {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.banga-network-badge {
background: #6b8e23;
color: white;
padding: 12px 25px;
border-radius: 25px;
font-size: 16px;
font-weight: bold;
margin-bottom: 30px;
border: 3px solid #5a7a1a;
}
.banga-map-container {
position: relative;
width: 100%;
max-width: 500px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.banga-india-map {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: brightness(0.9);
margin-left: 60px;
}
/* .banga-location-marker {
position: absolute;
width: 40px;
height: 40px;
background: #ffd700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
color: #333;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
border: 3px solid #fff;
} */
.banga-location-label {
position: absolute;
font-size: 12px;
font-weight: bold;
color: #333;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Location positioning */
.banga-main-office::before {
font-size: 24px;
}
@media (max-width: 1024px) {
.banga-main-section {
flex-direction: column;
gap: 40px;
text-align: center;
margin-right: 118px;
}
.banga-main-title {
font-size: 36px;
}
.banga-map-container {
max-width: 400px;
height: 320px;
}
}
@media (max-width: 768px) {
.banga-main-title {
font-size: 28px;
}
.banga-welcome {
font-size: 20px;
}
.banga-description,
.banga-products {
font-size: 14px;
width: 157%;
}
.banga-map-container {
max-width: 300px;
height: 240px;
}
.banga-location-marker {
width: 30px;
height: 30px;
font-size: 14px;
}
.banga-location-label {
font-size: 10px;
}
}
.cta-button {
display: inline-block;
padding: 15px 30px;
background: linear-gradient(45deg, #ffd700, #ffed4e);
color: #333;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(255, 215, 0, 0.4);
}
/* Sections */
.section {
padding: 80px 0;
opacity: 0;
transform: translateY(50px);
transition: all 0.6s ease;
}
.section.visible {
opacity: 1;
transform: translateY(0);
}
.section:nth-child(even) {
background: #f8f9fa;
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 50px;
color: #2c3e50;
}
/* Products Grid */
.grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.card {
background: #fff;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
height: 280px;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
position: relative;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.card.loading {
pointer-events: none;
opacity: 0.7;
}
.card.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
border: 3px solid #f3f3f3;
border-top: 3px solid #6b8e23;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 10;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.brand {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.img-wrap {
flex: 1;
padding: 50px 20px 20px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%);
}
.prod-img {
max-width: 80%;
max-height: 80%;
object-fit: contain;
transition: transform 0.3s ease;
height: 55%;
width: 55%;
}
.card:hover .prod-img {
transform: scale(1.05);
}
.name-tag {
position: absolute;
bottom: -60px;
left: 0;
right: 0;
background: linear-gradient(135deg, #6b8e23 0%, #8fbc8f 100%);
color: white;
text-align: center;
padding: 15px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.4s ease;
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
}
.card:hover .name-tag {
bottom: 0;
}
.solis {
color: #000000;
font-weight: bold;
font-size: 18px;
}
.pvblink {
color: #333;
font-weight: bold;
font-size: 16px;
}
.longi {
color: #000000;
font-weight: bold;
font-size: 18px;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
height: 250px;
}
.img-wrap {
padding: 45px 15px 15px;
}
.name-tag {
font-size: 12px;
padding: 12px;
}
}
@media (max-width: 480px) {
body {
padding: 30px 1px;
}
.card {
height: 220px;
}
.img-wrap {
padding: 40px 10px 10px;
}
}
.card:active {
transform: translateY(-4px) scale(0.98);
}
/* Content fade animation */
.card-content {
opacity: 1;
transition: opacity 0.3s ease;
}
.card.loading .card-content {
opacity: 0.3;
}
/* Shimmer loading effect */
.card.loading .img-wrap {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Projects Section */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 40px;
}
.project-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.project-card:hover {
transform: scale(1.03);
}
.project-image {
height: 200px;
background: linear-gradient(45deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.project-content {
padding: 20px;
}
/* Login Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 2000;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 40px;
border-radius: 15px;
width: 90%;
max-width: 400px;
}
.form-group {
margin-bottom: 20px;
}
.form-group input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
}
/* Social Media */
.social-links {
display: flex;
justify-content: center;
gap: 20px;
margin: 30px 0;
}
.social-link {
width: 50px;
height: 50px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.social-link:hover {
transform: scale(1.1) rotate(5deg);
}
/* Footer */
footer {
background: #2c3e50;
color: white;
text-align: center;
padding: 40px 0;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeInUp 0.6s ease-out;
}
/* Cart Badge */
/* .cart-badge {
background: #ff4757;
color: white;
border-radius: 50%;
padding: 2px 8px;
font-size: 12px;
position: absolute;
top: -8px;
right: -8px;
} */
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: rgba(30, 60, 114, 0.95);
flex-direction: column;
padding: 20px;
}
.nav-links.active {
display: flex;
}
.mobile-menu {
display: flex;
}
.section {
padding: 60px 0;
}
.section-title {
font-size: 2rem;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
.modal-content {
padding: 20px;
}
}
/* News Popup */
.news-popup {
position: fixed;
bottom: 20px;
right: 20px;
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
max-width: 300px;
transform: translateX(400px);
transition: transform 0.5s ease;
z-index: 1500;
}
.news-popup.show {
transform: translateX(0);
}
.news-close {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 18px;
cursor: pointer;
}
.prod{
text-align: center;
margin-bottom: 19px;
color: #2c3e50;
font-size: large;
}
/* Inquiry Popup Styles */
.inquiry-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
display: none;
}
.inquiry-content {
background: white;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 350px; /* Thoda chhota */
position: relative;
animation: fadeInUp 0.5s ease;
}
.inquiry-content h2 {
text-align: center;
margin-bottom: 15px;
font-size: 20px;
color: #2c3e50;
}
.inquiry-content label {
display: block;
margin-top: 12px;
font-weight: bold;
font-size: 14px;
color: #333;
}
.inquiry-content input,
.inquiry-content textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 13px;
}
.inquiry-content textarea {
resize: vertical;
min-height: 80px;
}
.inquiry-content button {
width: 100%;
padding: 10px;
margin-top: 15px;
background: linear-gradient(45deg, #ffd700, #ffed4e);
border: none;
color: #333;
font-weight: bold;
font-size: 14px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
}
.inquiry-content button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(255, 215, 0, 0.4);
}
.close-btn {
position: absolute;
top: 8px;
right: 12px;
font-size: 20px;
cursor: pointer;
font-weight: bold;
color: #333;
}
/* Mobile Responsiveness */
@media (max-width: 480px) {
.inquiry-content {
padding: 15px;
max-width: 95%;
}
.inquiry-content h2 {
font-size: 18px;
}
.inquiry-content label {
font-size: 13px;
}
.inquiry-content input,
.inquiry-content textarea {
font-size: 12px;
padding: 6px;
}
.inquiry-content button {
font-size: 13px;
padding: 8px;
}
.close-btn {
font-size: 18px;
right: 10px;
}
}
/* about css */
.container-8794 {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.hero-section-2847 {
background: linear-gradient(135deg, #1e3a8a 0%, #059669 50%, #0891b2 100%);
color: white;
padding: 60px 0;
text-align: center;
position: relative;
overflow: hidden;
margin-top: 78px;
}
.hero-section-2847::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(255,255,255,0.05) 0%, transparent 50%);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.hero-section-2847 h1 {
font-size: 3.5rem;
margin-bottom: 15px;
position: relative;
font-weight: 700;
background: linear-gradient(45deg, #ffffff, #e0f2fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-section-2847 p {
font-size: 1.1rem;
max-width: 550px;
margin: 0 auto;
position: relative;
opacity: 0.95;
}
.main-content-5639 {
padding: 60px 0;
}
.content-section-1924 {
margin-bottom: 50px;
}
.title-primary-7182 {
font-size: 2.2rem;
color: #1e3a8a;
margin-bottom: 25px;
text-align: center;
position: relative;
font-weight: 600;
}
.title-primary-7182::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #059669, #0891b2);
border-radius: 2px;
}
.grid-layout-3856 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
margin-top: 40px;
}
.feature-card-9273 {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.feature-card-9273::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #059669, #0891b2);
}
.feature-card-9273:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.icon-display-4617 {
font-size: 2.5rem;
margin-bottom: 15px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.card-heading-8041 {
font-size: 1.25rem;
color: #1e3a8a;
margin-bottom: 10px;
font-weight: 600;
}
.description-text-5928 {
color: #64748b;
line-height: 1.6;
font-size: 0.9rem;
}
.statistics-area-7364 {
background: linear-gradient(135deg, #1e3a8a 0%, #059669 100%);
color: white;
padding: 50px 0;
text-align: center;
position: relative;
}
.statistics-area-7364::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.stats-container-1587 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-top: 35px;
}
.stat-box-6249 {
padding: 20px;
background: rgba(255,255,255,0.1);
border-radius: 10px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
transition: transform 0.3s ease;
}
.stat-box-6249:hover {
transform: scale(1.05);
}
.number-display-3805 {
font-size: 2.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.stat-description-9461 {
font-size: 1rem;
opacity: 0.95;
}
.products-showcase-2736 {
background: #f8fafc;
padding: 60px 0;
}
.product-grid-8153 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-top: 40px;
}
.product-item-4928 {
background: white;
padding: 25px;
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.product-item-4928::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(5,150,105,0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.product-item-4928:hover::before {
opacity: 1;
}
.product-item-4928:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.product-symbol-7381 {
font-size: 2.2rem;
margin-bottom: 15px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.product-name-6074 {
font-size: 1.15rem;
color: #1e3a8a;
margin-bottom: 10px;
font-weight: 600;
}
.call-to-action-8695 {
background: linear-gradient(135deg, #059669 0%, #0891b2 50%, #1e3a8a 100%);
color: white;
padding: 60px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.call-to-action-8695::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(255,255,255,0.1) 0%, transparent 50%);
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.1; }
}
.cta-heading-1362 {
font-size: 2.2rem;
margin-bottom: 15px;
font-weight: 600;
}
.cta-message-5847 {
font-size: 1.1rem;
margin-bottom: 25px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
opacity: 0.95;
}
.action-button-9105 {
display: inline-block;
background: white;
color: #1e3a8a;
padding: 12px 30px;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}
.action-button-9105::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s ease;
}
.action-button-9105:hover::before {
left: 100%;
}
.action-button-9105:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
.hero-section-2847 h1 {
font-size: 2rem;
}
.title-primary-7182 {
font-size: 2rem;
}
.feature-card-9273 {
padding: 30px;
}
.stats-container-1587 {
grid-template-columns: repeat(2, 1fr);
}
}
/* blog css */
.main_container_8547 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #c9cbd5 0%, #8c8a8e 100%);
min-height: 100vh;
color: #333;
padding: 2rem 0;
}
.hero_section_2156 {
padding: 4rem 2rem;
text-align: center;
color: #fff;
}
.hero_title_5894 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: slideInDown 1s ease;
margin-top: 20px;
}
.hero_subtitle_1367 {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
animation: slideInUp 1s ease 0.5s both;
}
.search_bar_9384 {
max-width: 600px;
margin: 0 auto 2rem;
position: relative;
animation: fadeIn 1s ease 1s both;
}
.search_input_7291 {
width: 100%;
padding: 1rem 1.5rem;
border: none;
border-radius: 30px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
outline: none;
transition: all 0.3s ease;
}
.search_input_7291:focus {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.search_btn_4628 {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
.search_btn_4628:hover {
transform: translateY(-50%) scale(1.05);
}
.articles_grid_6843 {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.article_card_9274 {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transition: all 0.3s ease;
transform: translateY(20px);
opacity: 0;
animation: fadeInUp 0.8s ease forwards;
}
.article_card_9274:nth-child(1) { animation-delay: 0.1s; }
.article_card_9274:nth-child(2) { animation-delay: 0.2s; }
.article_card_9274:nth-child(3) { animation-delay: 0.3s; }
.article_card_9274:nth-child(4) { animation-delay: 0.4s; }
.article_card_9274:nth-child(5) { animation-delay: 0.5s; }
.article_card_9274:nth-child(6) { animation-delay: 0.6s; }
.article_card_9274:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.article_image_4582 {
width: 100%;
height: 200px;
background-image: url('https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
cursor: pointer;
}
.article_image_4582::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.1);
opacity: 0;
transition: opacity 0.3s ease;
}
.article_image_4582:hover::before {
opacity: 1;
}
.image_overlay_7319 {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.9);
padding: 0.5rem;
border-radius: 20px;
font-size: 0.8rem;
color: #333;
font-weight: bold;
}
.card_content_5927 {
padding: 1.5rem;
}
.article_category_8461 {
display: inline-block;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: bold;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.article_title_3184 {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #333;
line-height: 1.4;
}
.article_excerpt_7561 {
color: #666;
margin-bottom: 1rem;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article_meta_2895 {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem;
color: #888;
margin-bottom: 1rem;
}
.author_info_5742 {
display: flex;
align-items: center;
gap: 0.5rem;
}
.author_avatar_9183 {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(45deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 0.8rem;
}
.read_more_btn_6438 {
background: linear-gradient(45deg, #667eea, #764ba2);
color: #fff;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
width: 100%;
}
.read_more_btn_6438:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.categories_section_9156 {
background: rgba(255, 255, 255, 0.1);
padding: 3rem 2rem;
margin-top: 2rem;
}
.categories_title_4723 {
text-align: center;
color: #fff;
font-size: 2.5rem;
margin-bottom: 2rem;
}
.categories_grid_8394 {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.category_card_1567 {
background: rgba(255, 255, 255, 0.9);
padding: 2rem;
border-radius: 10px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
background-image: url('https://images.unsplash.com/photo-1466611653911-95081537e5b7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.category_card_1567::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.85);
z-index: 1;
}
.category_card_1567 > * {
position: relative;
z-index: 2;
}
.category_card_1567:hover {
transform: translateY(-5px);
}
.category_card_1567:hover::before {
background: rgba(255, 255, 255, 0.9);
}
.category_icon_9827 {
display: none;
}
.category_name_3649 {
font-weight: bold;
color: #333;
margin-bottom: 0.5rem;
}
.category_count_7283 {
color: #666;
font-size: 0.9rem;
}
.newsletter_section_8572 {
background: rgba(0, 0, 0, 0.1);
padding: 3rem 2rem;
text-align: center;
}
.newsletter_title_6394 {
color: #fff;
font-size: 2rem;
margin-bottom: 1rem;
}
.newsletter_subtitle_7251 {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 2rem;
}
.newsletter_form_4819 {
max-width: 500px;
margin: 0 auto;
display: flex;
gap: 1rem;
}
.newsletter_input_9376 {
flex: 1;
padding: 1rem;
border: none;
border-radius: 25px;
font-size: 1rem;
outline: none;
}
.newsletter_btn_5483 {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
}
.newsletter_btn_5483:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}
@keyframes slideInDown {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeInUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 768px) {
.hero_title_5894 {
font-size: 2rem;
}
.articles_grid_6843 {
grid-template-columns: 1fr;
padding: 1rem;
}
.categories_grid_8394 {
grid-template-columns: repeat(2, 1fr);
}
.newsletter_form_4819 {
flex-direction: column;
}
}
/* Careers css */
.career-container-847 {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px 0;
}
.hero-section-923 {
text-align: center;
padding: 60px 20px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
margin-bottom: 40px;
}
.hero-title-456 {
font-size: 3.5rem;
font-weight: bold;
color: #fff;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
animation: fadeInUp-789 1s ease-out;
}
.hero-subtitle-234 {
font-size: 1.3rem;
color: #f0f0f0;
margin-bottom: 30px;
animation: fadeInUp-789 1s ease-out 0.2s both;
}
.energy-icon-567 {
font-size: 4rem;
color: #FFD700;
margin-bottom: 20px;
animation: pulse-891 2s infinite;
}
.content-wrapper-123 {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title-678 {
font-size: 2.5rem;
text-align: center;
color: #fff;
margin-bottom: 40px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.jobs-grid-345 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 60px;
}
.job-card-912 {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.job-card-912:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 1);
}
.job-card-912::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1);
border-radius: 15px 15px 0 0;
}
.job-title-543 {
font-size: 1.8rem;
font-weight: bold;
color: #2c3e50;
margin-bottom: 15px;
padding-top: 10px;
}
.job-department-876 {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
display: inline-block;
margin-bottom: 15px;
}
.job-location-198 {
color: #7f8c8d;
font-size: 1rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.job-description-765 {
color: #555;
font-size: 1rem;
margin-bottom: 20px;
line-height: 1.6;
}
.requirements-432 {
margin-bottom: 25px;
}
.requirements-title-109 {
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
font-size: 1.1rem;
}
.requirements-list-887 {
list-style: none;
padding: 0;
}
.requirements-list-887 li {
background: #f8f9fa;
padding: 8px 15px;
margin-bottom: 8px;
border-radius: 8px;
border-left: 4px solid #4ECDC4;
font-size: 0.95rem;
}
.apply-btn-654 {
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
color: white;
padding: 12px 30px;
border: none;
border-radius: 25px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}
.apply-btn-654:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
background: linear-gradient(135deg, #FF5252, #26C6DA);
}
.company-values-221 {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 50px;
margin-bottom: 40px;
text-align: center;
}
.values-grid-334 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 40px;
}
.value-item-778 {
background: rgba(255, 255, 255, 0.2);
padding: 30px;
border-radius: 15px;
text-align: center;
transition: transform 0.3s ease;
}
.value-item-778:hover {
transform: scale(1.05);
}
.value-icon-445 {
font-size: 3rem;
margin-bottom: 20px;
color: #FFD700;
}
.value-title-556 {
font-size: 1.5rem;
font-weight: bold;
color: #fff;
margin-bottom: 15px;
}
.value-desc-667 {
color: #f0f0f0;
font-size: 1rem;
line-height: 1.5;
}
.benefits-section-889 {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 50px;
margin-bottom: 40px;
}
.benefits-grid-990 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 30px;
}
.benefit-card-112 {
background: #f8f9fa;
padding: 25px;
border-radius: 12px;
border-left: 5px solid #4ECDC4;
transition: all 0.3s ease;
}
.benefit-card-112:hover {
background: #e8f5e8;
transform: translateX(10px);
}
.benefit-icon-223 {
font-size: 2.5rem;
color: #4ECDC4;
margin-bottom: 15px;
}
.benefit-title-334 {
font-size: 1.3rem;
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
}
.benefit-desc-445 {
color: #555;
font-size: 1rem;
line-height: 1.5;
}
.contact-section-556 {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 50px;
text-align: center;
}
.contact-title-667 {
font-size: 2rem;
color: #fff;
margin-bottom: 20px;
}
.contact-desc-778 {
color: #f0f0f0;
font-size: 1.1rem;
margin-bottom: 30px;
}
.contact-info-889 {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.contact-item-990 {
background: rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 12px;
color: #fff;
transition: all 0.3s ease;
}
.contact-item-990:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-5px);
}
.contact-icon-111 {
font-size: 2rem;
margin-bottom: 10px;
color: #FFD700;
}
@keyframes fadeInUp-789 {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse-891 {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
@media (max-width: 768px) {
.hero-title-456 {
font-size: 2.5rem;
}
.hero-subtitle-234 {
font-size: 1.1rem;
}
.section-title-678 {
font-size: 2rem;
}
.jobs-grid-345 {
grid-template-columns: 1fr;
}
.contact-info-889 {
flex-direction: column;
align-items: center;
}
}
/* contect css */
.container-9283 {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
backdrop-filter: blur(10px);
}
.hero-section-4758 {
background: linear-gradient(45deg, #4A90E2, #007BFF);
color: white;
text-align: center;
padding: 60px 20px;
position: relative;
overflow: hidden;
}
.hero-section-4758::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') repeat;
animation: float-1482 20s linear infinite;
}
@keyframes float-1482 {
0% { transform: translateY(0px); }
100% { transform: translateY(-100px); }
}
.hero-title-6391 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
margin-top: 116px;
}
.hero-subtitle-7429 {
font-size: 1.3rem;
opacity: 0.9;
position: relative;
z-index: 1;
}
.content-grid-5816 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 600px;
}
.contact-info-2745 {
padding: 50px;
background: #f8f9fa;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-form-3962 {
padding: 50px;
background: white;
}
.section-title-8174 {
font-size: 2.5rem;
color: #333;
margin-bottom: 30px;
position: relative;
padding-left: 20px;
}
.section-title-8174::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, #4A90E2, #007BFF);
border-radius: 2px;
}
.contact-item-1637 {
display: flex;
align-items: center;
margin-bottom: 25px;
padding: 15px;
background: white;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.contact-item-1637:hover {
transform: translateY(-5px);
}
.contact-icon-9185 {
width: 50px;
height: 50px;
background: linear-gradient(45deg, #4A90E2, #007BFF);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-size: 1.5rem;
color: white;
flex-shrink: 0;
}
.contact-text-4729 {
flex: 1;
}
.contact-label-8356 {
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.contact-value-2914 {
color: #666;
font-size: 1.1rem;
}
.form-group-7583 {
margin-bottom: 25px;
}
.form-label-3467 {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.form-input-5192 {
width: 100%;
padding: 15px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input-5192:focus {
outline: none;
border-color: #4A90E2;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}
.form-textarea-8297 {
resize: vertical;
min-height: 120px;
}
.submit-btn-6184 {
background: linear-gradient(45deg, #4A90E2, #007BFF);
color: white;
border: none;
padding: 15px 40px;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.submit-btn-6184:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.map-section-4951 {
height: 500px;
margin: 30px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.map-container-7268 {
width: 100%;
height: 100%;
border: none;
}
.social-section-3479 {
background: #333;
color: white;
padding: 40px;
text-align: center;
}
.social-title-8163 {
font-size: 2rem;
margin-bottom: 30px;
}
.social-links-5927 {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.social-link-6294 {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(45deg, #4A90E2, #007BFF);
border-radius: 50%;
color: white;
text-decoration: none;
font-size: 1.5rem;
transition: all 0.3s ease;
}
.social-link-6294:hover {
transform: scale(1.1) rotate(360deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.content-grid-5816 {
grid-template-columns: 1fr;
}
.contact-info-2745,
.contact-form-3962 {
padding: 30px;
}
.hero-title-6391 {
font-size: 2.5rem;
}
.section-title-8174 {
font-size: 2rem;
}
.map-section-4951 {
margin: 20px;
height: 400px;
}
}
.pulse-animation-9472 {
animation: pulse-9472 2s infinite;
}
@keyframes pulse-9472 {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.fade-in-8539 {
animation: fadeIn-8539 1s ease-in;
}
@keyframes fadeIn-8539 {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Inverter_ pro css */
.container_847 {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header_section_293 {
text-align: center;
margin-bottom: 40px;
padding: 30px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.main_title_184 {
font-size: 28px;
font-weight: bold;
color: #0b2167;
margin-bottom: 20px;
}
.description_text_739 {
font-size: 14px;
color: #000000;
line-height: 1.8;
text-align: justify;
max-width: 900px;
margin: 0 auto;
}
.product_section_462 {
background: #fff;
margin-bottom: 40px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
min-height: 400px;
}
.product_image_container_851 {
flex: 1;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
position: relative;
}
.product_image_851 {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.product_details_container_627 {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.product_title_394 {
font-size: 18px;
font-weight: bold;
color: #1e324d;
margin-bottom: 15px;
text-transform: uppercase;
}
.product_model_758 {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.product_description_926 {
font-size: 14px;
color: #666;
line-height: 1.7;
margin-bottom: 25px;
text-align: justify;
}
.button_container_513 {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.action_button_847 {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
min-width: 100px;
text-decoration: none;
display: inline-block;
text-align: center;
}
.datasheet_btn_293 {
background: #ff9800;
color: white;
}
.datasheet_btn_293:hover {
background: #f57c00;
transform: translateY(-2px);
}
.download_btn_184 {
background: #1b3e53;
color: white;
}
.download_btn_184:hover {
background: #223b54;
transform: translateY(-2px);
}
.manual_btn_739 {
background: #795548;
color: white;
}
.manual_btn_739:hover {
background: #6d4c41;
transform: translateY(-2px);
}
.solis_logo_462 {
position: absolute;
top: 20px;
left: 20px;
width: 60px;
height: 30px;
background: #ff9800;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 12px;
}
.product_section_reverse_851 {
flex-direction: row-reverse;
}
.product_section_reverse_851 .product_image_container_851 {
background: #f0f8f0;
}
.spec_highlight_627 {
color: #1c3149;
font-weight: bold;
}
.three_phase_section_394 {
background: #fff;
margin-bottom: 40px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
min-height: 400px;
}
.three_phase_title_758 {
font-size: 18px;
font-weight: bold;
color: #0f293f;
margin-bottom: 15px;
text-transform: uppercase;
}
.three_phase_model_926 {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
@media (max-width: 768px) {
.product_section_462,
.product_section_reverse_851,
.three_phase_section_394 {
flex-direction: column;
}
.product_image_container_851 {
min-height: 250px;
}
.product_details_container_627 {
padding: 20px;
}
.container_847 {
padding: 10px;
}
.button_container_513 {
justify-content: center;
}
}
.page_background_513 {
background: linear-gradient(135deg, #f5f5f5 0%, #e8f5e8 100%);
min-height: 100vh;
}
.content_wrapper_847 {
background: transparent;
}
.highlight_text_293 {
color: #15254c;
font-weight: bold;
}
.fade_animation_184 {
animation: fadeInUp 0.6s ease-out;
}
/* Hero Section Styles */
.hero_section_956 {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
margin-bottom: 0;
}
.hero_image_container_421 {
width: 100%;
height: 100%;
position: relative;
}
.hero_image_738 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero_overlay_164 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(44, 85, 48, 0.8) 0%, rgba(76, 175, 80, 0.6) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.hero_content_892 {
text-align: center;
color: white;
max-width: 800px;
padding: 40px;
}
.hero_title_537 {
font-size: 4rem;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: slideInFromTop 1s ease-out;
}
.hero_subtitle_219 {
font-size: 1.5rem;
margin-bottom: 40px;
opacity: 0.9;
animation: slideInFromBottom 1s ease-out 0.3s both;
}
.hero_buttons_683 {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 0.6s both;
}
.hero_btn_475 {
padding: 15px 35px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
min-width: 180px;
text-align: center;
}
.hero_primary_826 {
background: #ff9800;
color: white;
box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}
.hero_primary_826:hover {
background: #f57c00;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}
.hero_secondary_391 {
background: transparent;
color: white;
border: 2px solid white;
}
.hero_secondary_391:hover {
background: white;
color: #2c5530;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.hero_title_537 {
font-size: 2.5rem;
}
.hero_subtitle_219 {
font-size: 1.2rem;
}
.hero_buttons_683 {
flex-direction: column;
align-items: center;
}
.hero_btn_475 {
width: 100%;
max-width: 280px;
}
.hero_content_892 {
padding: 20px;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product_section_462:hover,
.product_section_reverse_851:hover,
.three_phase_section_394:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
.model_specs_739 {
font-size: 14px;
color: #888;
margin-bottom: 10px;
}
/* Product css */
.container_847 {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header_section_293 {
text-align: center;
margin-bottom: 40px;
padding: 30px;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.main_title_184 {
font-size: 28px;
font-weight: bold;
color: #0b2167;
margin-bottom: 20px;
}
.description_text_739 {
font-size: 14px;
color: #000000;
line-height: 1.8;
text-align: justify;
max-width: 900px;
margin: 0 auto;
}
.product_section_462 {
background: #fff;
margin-bottom: 40px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
min-height: 400px;
}
.product_image_container_851 {
flex: 1;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
position: relative;
}
.product_image_851 {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.product_details_container_627 {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.product_title_394 {
font-size: 18px;
font-weight: bold;
color: #1e324d;
margin-bottom: 15px;
text-transform: uppercase;
}
.product_model_758 {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
.product_description_926 {
font-size: 14px;
color: #666;
line-height: 1.7;
margin-bottom: 25px;
text-align: justify;
}
.button_container_513 {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.action_button_847 {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
min-width: 100px;
text-decoration: none;
display: inline-block;
text-align: center;
}
.datasheet_btn_293 {
background: #ff9800;
color: white;
}
.datasheet_btn_293:hover {
background: #f57c00;
transform: translateY(-2px);
}
.download_btn_184 {
background: #1b3e53;
color: white;
}
.download_btn_184:hover {
background: #223b54;
transform: translateY(-2px);
}
.manual_btn_739 {
background: #795548;
color: white;
}
.manual_btn_739:hover {
background: #6d4c41;
transform: translateY(-2px);
}
.solis_logo_462 {
position: absolute;
top: 20px;
left: 20px;
width: 60px;
height: 30px;
background: #ff9800;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 12px;
}
.product_section_reverse_851 {
flex-direction: row-reverse;
}
.product_section_reverse_851 .product_image_container_851 {
background: #f0f8f0;
}
.spec_highlight_627 {
color: #1c3149;
font-weight: bold;
}
.three_phase_section_394 {
background: #fff;
margin-bottom: 40px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
display: flex;
min-height: 400px;
}
.three_phase_title_758 {
font-size: 18px;
font-weight: bold;
color: #0f293f;
margin-bottom: 15px;
text-transform: uppercase;
}
.three_phase_model_926 {
font-size: 16px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
@media (max-width: 768px) {
.product_section_462,
.product_section_reverse_851,
.three_phase_section_394 {
flex-direction: column;
}
.product_image_container_851 {
min-height: 250px;
}
.product_details_container_627 {
padding: 20px;
}
.container_847 {
padding: 10px;
}
.button_container_513 {
justify-content: center;
}
}
.page_background_513 {
background: linear-gradient(135deg, #f5f5f5 0%, #e8f5e8 100%);
min-height: 100vh;
}
.content_wrapper_847 {
background: transparent;
}
.highlight_text_293 {
color: #15254c;
font-weight: bold;
}
.fade_animation_184 {
animation: fadeInUp 0.6s ease-out;
}
/* Hero Section Styles */
.hero_section_956 {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
margin-bottom: 0;
}
.hero_image_container_421 {
width: 100%;
height: 100%;
position: relative;
}
.hero_image_738 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero_overlay_164 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(44, 85, 48, 0.8) 0%, rgba(76, 175, 80, 0.6) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.hero_content_892 {
text-align: center;
color: white;
max-width: 800px;
padding: 40px;
}
.hero_title_537 {
font-size: 4rem;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: slideInFromTop 1s ease-out;
}
.hero_subtitle_219 {
font-size: 1.5rem;
margin-bottom: 40px;
opacity: 0.9;
animation: slideInFromBottom 1s ease-out 0.3s both;
}
.hero_buttons_683 {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 0.6s both;
}
.hero_btn_475 {
padding: 15px 35px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
min-width: 180px;
text-align: center;
}
.hero_primary_826 {
background: #ff9800;
color: white;
box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}
.hero_primary_826:hover {
background: #f57c00;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}
.hero_secondary_391 {
background: transparent;
color: white;
border: 2px solid white;
}
.hero_secondary_391:hover {
background: white;
color: #2c5530;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.hero_title_537 {
font-size: 2.5rem;
}
.hero_subtitle_219 {
font-size: 1.2rem;
}
.hero_buttons_683 {
flex-direction: column;
align-items: center;
}
.hero_btn_475 {
width: 100%;
max-width: 280px;
}
.hero_content_892 {
padding: 20px;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.product_section_462:hover,
.product_section_reverse_851:hover,
.three_phase_section_394:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
.model_specs_739 {
font-size: 14px;
color: #888;
margin-bottom: 10px;
}
/* Product 2 */
.container_8472 {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Section */
.hero_bg_7832 {
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('hero-bg.jpg');
background-size: cover;
background-position: center;
color: white;
text-align: center;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.hero_bg_7832::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, #1e3c72, #2a5298);
opacity: 0.7;
z-index: -1;
}
.hero_title_4921 {
font-size: 3.5rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: fadeInUp_3847 1s ease-out;
}
.hero_subtitle_6754 {
font-size: 1.3rem;
margin-bottom: 30px;
opacity: 0.9;
animation: fadeInUp_3847 1s ease-out 0.2s both;
}
@keyframes fadeInUp_3847 {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Products Grid */
.products_section_5921 {
padding: 80px 0;
background: white;
position: relative;
}
.products_section_5921::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, rgba(102, 126, 234, 0.1), transparent);
}
.section_title_7364 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
color: #2c3e50;
position: relative;
}
.section_title_7364::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 2px;
}
.products_grid_1748 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 40px;
}
.product_card_1893 {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
cursor: pointer;
}
.product_card_1893:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.card_image_2856 {
height: 200px;
background: linear-gradient(45deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.card_image_2856 img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.product_card_1893:hover .card_image_2856 img {
transform: scale(1.05);
}
.card_image_2856::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: shimmer_9274 3s infinite;
}
@keyframes shimmer_9274 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.card_content_4521 {
padding: 30px;
}
.card_title_3895 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 15px;
color: #2c3e50;
}
.card_description_7182 {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.card_features_6493 {
list-style: none;
margin-bottom: 25px;
}
.card_features_6493 li {
color: #555;
margin-bottom: 8px;
position: relative;
padding-left: 20px;
}
.card_features_6493 li::before {
content: '✓';
position: absolute;
left: 0;
color: #27ae60;
font-weight: bold;
}
.card_button_8371 {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
font-weight: bold;
}
.card_button_8371:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
/* Special styling for different products */
.product_card_1893.inverter_type_9651 .card_image_2856 {
background: linear-gradient(45deg, #e74c3c, #c0392b);
}
.product_card_1893.solar_type_4821 .card_image_2856 {
background: linear-gradient(45deg, #f39c12, #e67e22);
}
.product_card_1893.bos_type_3074 .card_image_2856 {
background: linear-gradient(45deg, #9b59b6, #8e44ad);
}
.product_card_1893.water_heater_type_7592 .card_image_2856 {
background: linear-gradient(45deg, #3498db, #2980b9);
}
.product_card_1893.modules_type_8164 .card_image_2856 {
background: linear-gradient(45deg, #27ae60, #229954);
}
/* CTA Section */
.cta_section_5281 {
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
text-align: center;
padding: 80px 0;
}
.cta_content_6729 h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.cta_content_6729 p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.cta_buttons_9347 {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.cta_btn_4856 {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
text-decoration: none;
padding: 15px 40px;
border-radius: 30px;
font-size: 1.1rem;
font-weight: bold;
transition: all 0.3s ease;
display: inline-block;
}
.cta_btn_4856:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.cta_btn_4856.secondary_btn_7291 {
background: transparent;
border: 2px solid #667eea;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero_title_4921 {
font-size: 2.5rem;
}
.hero_subtitle_6754 {
font-size: 1.1rem;
}
.products_grid_1748 {
grid-template-columns: 1fr;
gap: 30px;
}
.cta_buttons_9347 {
flex-direction: column;
align-items: center;
}
.cta_btn_4856 {
width: 250px;
text-align: center;
}
}
/* projects css */
.container_9273 {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Hero Section */
.hero_section_4821 {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('projects-hero-bg.jpg');
background-size: cover;
background-position: center;
color: white;
text-align: center;
padding: 100px 0;
position: relative;
overflow: hidden;
}
.hero_section_4821::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, #1e3c72, #2a5298);
opacity: 0.8;
z-index: -1;
}
.hero_title_7658 {
font-size: 3.5rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
animation: slideInDown_5941 1s ease-out;
}
.hero_subtitle_3947 {
font-size: 1.3rem;
margin-bottom: 30px;
opacity: 0.9;
animation: slideInUp_8264 1s ease-out 0.2s both;
}
.hero_stats_6182 {
display: flex;
justify-content: center;
gap: 60px;
margin-top: 40px;
flex-wrap: wrap;
}
.stat_item_7439 {
text-align: center;
animation: fadeIn_2856 1s ease-out 0.5s both;
}
.stat_number_9174 {
font-size: 3rem;
font-weight: bold;
color: #f39c12;
display: block;
}
.stat_label_4625 {
font-size: 1.1rem;
opacity: 0.8;
}
@keyframes slideInDown_5941 {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp_8264 {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn_2856 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Filter Section */
.filter_section_5927 {
background: white;
padding: 40px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.filter_buttons_3841 {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.filter_btn_7294 {
background: transparent;
border: 2px solid #667eea;
color: #667eea;
padding: 10px 25px;
border-radius: 25px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
}
.filter_btn_7294:hover,
.filter_btn_7294.active_filter_8153 {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
/* Projects Section */
.projects_section_9486 {
padding: 80px 0;
background: #f8f9fa;
}
.section_title_1672 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 60px;
color: #2c3e50;
position: relative;
}
.section_title_1672::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(45deg, #667eea, #764ba2);
border-radius: 2px;
}
.projects_grid_3594 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 40px;
margin-top: 40px;
}
.project_card_8271 {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
cursor: pointer;
}
.project_card_8271:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.project_image_4738 {
height: 250px;
position: relative;
overflow: hidden;
}
.project_image_4738 img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.project_card_8271:hover .project_image_4738 img {
transform: scale(1.05);
}
.project_overlay_6429 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
font-weight: bold;
}
.project_card_8271:hover .project_overlay_6429 {
opacity: 1;
}
.project_badge_9317 {
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(45deg, #f39c12, #e67e22);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
z-index: 2;
}
.project_content_5840 {
padding: 30px;
}
.project_title_7163 {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 15px;
color: #2c3e50;
}
.project_location_2584 {
color: #7f8c8d;
font-size: 0.9rem;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 5px;
}
.project_description_8906 {
color: #666;
margin-bottom: 20px;
line-height: 1.6;
}
.project_specs_4157 {
display: flex;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.spec_item_9635 {
background: #f8f9fa;
padding: 10px 15px;
border-radius: 10px;
text-align: center;
flex: 1;
min-width: 120px;
}
.spec_value_7281 {
font-size: 1.2rem;
font-weight: bold;
color: #2c3e50;
display: block;
}
.spec_label_5419 {
font-size: 0.9rem;
color: #7f8c8d;
}
.project_button_6374 {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
border: none;
padding: 12px 30px;
border-radius: 25px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
font-weight: bold;
}
.project_button_6374:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
/* Project Categories */
.project_card_8271.residential_type_4682 .project_badge_9317 {
background: linear-gradient(45deg, #27ae60, #229954);
}
.project_card_8271.commercial_type_7139 .project_badge_9317 {
background: linear-gradient(45deg, #3498db, #2980b9);
}
.project_card_8271.industrial_type_5826 .project_badge_9317 {
background: linear-gradient(45deg, #e74c3c, #c0392b);
}
.project_card_8271.government_type_9473 .project_badge_9317 {
background: linear-gradient(45deg, #9b59b6, #8e44ad);
}
/* CTA Section */
.cta_section_2947 {
background: linear-gradient(135deg, #2c3e50, #34495e);
color: white;
text-align: center;
padding: 80px 0;
}
.cta_content_8162 h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.cta_content_8162 p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.cta_buttons_5738 {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.cta_btn_9451 {
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
text-decoration: none;
padding: 15px 40px;
border-radius: 30px;
font-size: 1.1rem;
font-weight: bold;
transition: all 0.3s ease;
display: inline-block;
}
.cta_btn_9451:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.cta_btn_9451.secondary_btn_6284 {
background: transparent;
border: 2px solid #667eea;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero_title_7658 {
font-size: 2.5rem;
}
.hero_subtitle_3947 {
font-size: 1.1rem;
}
.hero_stats_6182 {
gap: 30px;
}
.stat_number_9174 {
font-size: 2.5rem;
}
.projects_grid_3594 {
grid-template-columns: 1fr;
gap: 30px;
}
.project_specs_4157 {
flex-direction: column;
}
.filter_buttons_3841 {
gap: 10px;
}
.filter_btn_7294 {
padding: 8px 20px;
font-size: 0.9rem;
}
.cta_buttons_5738 {
flex-direction: column;
align-items: center;
}
.cta_btn_9451 {
width: 250px;
text-align: center;
}
}
/* Footer */
.footer-container-827 {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: white;
padding: 3rem 0 1rem;
position: relative;
overflow: hidden;
}
.footer-overlay-934 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
z-index: 1;
}
.footer-content-541 {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.footer-grid-672 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section-893 {
padding: 1rem;
}
.footer-logo-214 {
font-size: 1.2rem;
font-weight: bold;
color: #f39c12;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.solar-icon-456 {
width: 40px;
height: 40px;
background: radial-gradient(circle, #f39c12 30%, #ff6b35 70%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}
.footer-heading-789 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
color: #f39c12;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
}
.footer-heading-789::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 40px;
height: 3px;
background: linear-gradient(90deg, #f39c12, #e67e22);
}
.footer-nav-345 {
list-style: none;
}
.footer-nav-345 li {
margin-bottom: 0.8rem;
}
.footer-nav-345 a {
color: #ecf0f1;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-nav-345 a:hover {
color: #f39c12;
transform: translateX(5px);
}
.footer-nav-345 a::before {
content: '▶';
font-size: 0.7rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.footer-nav-345 a:hover::before {
opacity: 1;
}
.footer-description-156 {
font-size: 0.95rem;
line-height: 1.7;
color: #bdc3c7;
margin-bottom: 1.5rem;
}
.contact-info-729 {
list-style: none;
text-align: justify;
}
.contact-info-729 li {
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.8rem;
}
.contact-icon-481 {
width: 20px;
height: 20px;
background: #f39c12;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: white;
flex-shrink: 0;
}
.services-list-683 {
list-style: none;
}
.services-list-683 li {
margin-bottom: 0.8rem;
padding-left: 1.5rem;
position: relative;
text-align: justify;
}
.services-list-683 li::before {
content: '✓';
position: absolute;
left: 0;
color: #f39c12;
font-weight: bold;
}
.social-links-397 {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-icon-825 {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ecf0f1;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.2rem;
}
.social-icon-825:hover {
background: #f39c12;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
}
.newsletter-form-564 {
margin-top: 1.5rem;
}
.newsletter-input-718 {
width: 100%;
padding: 0.8rem;
border: none;
border-radius: 25px;
background: rgba(255, 255, 2
52, 0.1);
color: white;
font-size: 0.9rem;
margin-bottom: 1rem;
outline: none;
}
.newsletter-input-718::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.newsletter-btn-291 {
width: 100%;
padding: 0.8rem;
background: linear-gradient(45deg, #f39c12, #e67e22);
color: white;
border: none;
border-radius: 25px;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.newsletter-btn-291:hover {
background: linear-gradient(45deg, #e67e22, #f39c12);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(243, 156, 18, 0.3);
}
.footer-bottom-649 {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
margin-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-copyright-372 {
font-size: 0.9rem;
color: #bdc3c7;
}
.footer-links-858 {
display: flex;
gap: 2rem;
}
.footer-links-858 a {
color: #bdc3c7;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-links-858 a:hover {
color: #f39c12;
}
.certification-badge-502 {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
margin-top: 1rem;
}
.badge-icon-917 {
width: 20px;
height: 20px;
background: #f39c12;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.footer-grid-672 {
grid-template-columns: 1fr;
}
.footer-bottom-649 {
flex-direction: column;
text-align: center;
}
.footer-links-858 {
flex-direction: column;
gap: 1rem;
}
}
/* Animation for icons */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.solar-icon-456 {
animation: pulse 2s infinite;
}
/* log in and signup */
.floating_particles_9847 {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.particle_3759 {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: float_6284 6s ease-in-out infinite;
}
@keyframes float_6284 {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.auth_container_4829 {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 450px;
overflow: hidden;
position: relative;
transform: translateY(0);
transition: all 0.3s ease;
}
.auth_container_4829:hover {
transform: translateY(-5px);
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3);
}
.header_section_1847 {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
padding: 40px 30px;
text-align: center;
position: relative;
overflow: hidden;
}
.header_section_1847::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(transparent, rgba(255, 255, 255, 0.1), transparent);
animation: rotate_5639 4s linear infinite;
}
@keyframes rotate_5639 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.logo_container_8374 {
position: relative;
z-index: 2;
}
.logo_icon_2948 {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 24px;
color: white;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
animation: pulse_3847 2s infinite;
}
@keyframes pulse_3847 {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.auth_title_5928 {
font-size: 32px;
font-weight: 700;
color: white;
margin-bottom: 8px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.auth_subtitle_7392 {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
font-weight: 300;
}
.form_wrapper_6841 {
padding: 40px 30px;
position: relative;
}
.input_group_9285 {
position: relative;
margin-bottom: 30px;
}
.input_label_4738 {
position: absolute;
top: 50%;
left: 55px;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
transition: all 0.3s ease;
pointer-events: none;
z-index: 1;
}
.input_field_8274 {
width: 100%;
padding: 18px 20px 18px 55px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
color: white;
font-size: 16px;
outline: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.input_field_8274::placeholder {
color: transparent;
}
.input_field_8274:focus,
.input_field_8274:not(:placeholder-shown) {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.15);
}
.input_field_8274:focus + .input_label_4738,
.input_field_8274:not(:placeholder-shown) + .input_label_4738 {
top: -10px;
left: 20px;
font-size: 12px;
color: #23d5ab;
background: rgba(0, 0, 0, 0.5);
padding: 2px 8px;
border-radius: 5px;
}
.input_icon_3947 {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.6);
font-size: 18px;
z-index: 2;
}
.password_toggle_7293 {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
z-index: 2;
}
.password_toggle_7293:hover {
color: #23d5ab;
}
.submit_button_5847 {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 15px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 25px;
position: relative;
overflow: hidden;
}
.submit_button_5847::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.submit_button_5847:hover::before {
left: 100%;
}
.submit_button_5847:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
}
.divider_section_9384 {
display: flex;
align-items: center;
margin: 30px 0;
}
.divider_line_4829 {
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.3);
}
.divider_text_7392 {
color: rgba(255, 255, 255, 0.7);
margin: 0 20px;
font-size: 14px;
}
.social_login_8374 {
display: flex;
gap: 15px;
margin-bottom: 25px;
}
.social_btn_2948 {
flex: 1;
padding: 15px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
color: white;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.social_btn_2948:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.form_switch_5639 {
text-align: center;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
.switch_link_3759 {
color: #23d5ab;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.switch_link_3759:hover {
color: #ee7752;
text-shadow: 0 0 10px rgba(238, 119, 82, 0.5);
}
.forgot_password_6284 {
text-align: right;
margin-bottom: 20px;
}
.forgot_link_1847 {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
}
.forgot_link_1847:hover {
color: #23d5ab;
}
.error_message_9847 {
color: #ff6b6b;
font-size: 12px;
margin-top: 5px;
display: none;
background: rgba(255, 107, 107, 0.1);
padding: 5px 10px;
border-radius: 5px;
border-left: 3px solid #ff6b6b;
}
.success_message_4738 {
color: #51cf66;
font-size: 12px;
margin-top: 5px;
display: none;
background: rgba(81, 207, 102, 0.1);
padding: 5px 10px;
border-radius: 5px;
border-left: 3px solid #51cf66;
}
.input_group_9285.error .input_field_8274 {
border-color: #ff6b6b;
background: rgba(255, 107, 107, 0.1);
}
.input_group_9285.success .input_field_8274 {
border-color: #51cf66;
background: rgba(81, 207, 102, 0.1);
}
.loading_spinner_8374 {
display: none;
margin-left: 10px;
animation: spin_2948 1s linear infinite;
}
.loading_spinner_8374.active {
display: inline-block;
}
@keyframes spin_2948 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.hidden_form_7392 {
display: none;
}
.strength_meter_5928 {
margin-top: 8px;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
}
.strength_bar_3847 {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #ff6b6b, #ffd93d, #51cf66);
transition: width 0.3s ease;
}
.strength_text_9284 {
font-size: 12px;
margin-top: 5px;
color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 480px) {
.auth_container_4829 {
margin: 10px;
max-width: none;
}
.form_wrapper_6841 {
padding: 30px 20px;
}
.header_section_1847 {
padding: 30px 20px;
}
}
/* login button */
.login-button-7453 {
display: inline-block;
padding: 3px 22px;
background: linear-gradient(135deg, #4e54c8, #8f94fb); /* Gradient */
color: #fff;
text-decoration: none;
border-radius: 50px;
font-size: 16px;
font-weight: bold;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.login-button-7453::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.login-button-7453:hover::after {
left: 100%;
}
.login-button-7453:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
/* logo */
.logo-img-9123 {
height: 55px;
width: auto;
object-fit: contain;
display: block;
}
/* Optional: Center logo inside div */
.logo {
display: flex;
align-items: center;
justify-content: start; /* or center */
}
/* scarch icon */
/* Existing styles remain the same */
.search-container-7294 {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
padding: 2px 12px;
border-radius: 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.search-input-7294 {
border: none;
outline: none;
background: transparent;
color: #fff;
font-size: 16px;
width: 160px;
}
.search-input-7294::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.search-btn-7294 {
background: #4e54c8;
color: white;
border: none;
padding: 8px 14px;
border-radius: 50px;
cursor: pointer;
transition: 0.3s ease;
font-size: 18px;
}
.search-btn-7294:hover {
background: #5c63e7;
transform: scale(1.05);
}
/* ✅ Responsive: Hide on small screens */
@media (max-width: 768px) {
.search-container-7294 {
display: none;
}
}
/* Dropdown wrapper */
.dropdown-7453 {
position: relative;
display: inline-block;
}
/* Dropdown content */
.dropdown-content-7453 {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
border-radius: 4px;
width: 220px;
padding: 10px;
z-index: 999;
font-family: Arial, sans-serif;
}
/* Text inside dropdown */
.dropdown-content-7453 p {
margin: 0;
padding: 8px;
font-size: 14px;
border-bottom: 1px solid #ddd;
}
.dropdown-content-7453 p a {
color: #2874f0;
font-weight: bold;
text-decoration: none;
}
.dropdown-content-7453 a {
display: block;
padding: 8px;
color: #333;
text-decoration: none;
font-size: 14px;
}
.dropdown-content-7453 a:hover {
background: #f1f1f1;
}
/* Show dropdown on hover */
.dropdown-7453:hover .dropdown-content-7453 {
display: block;
}
/* WhatsApp Floating Button */
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 20px;
right: 20px;
background-color: #25D366;
color: #fff;
border-radius: 50%;
text-align: center;
font-size: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.whatsapp-float:hover {
background-color: #1ebc57;
transform: scale(1.1);
}
.whatsapp-icon {
width: 35px;
height: 35px;
}
/* cart */
#cartLink {
position: relative;
display: inline-block;
font-size: 18px;
color: #333;
text-decoration: none;
}
#cartLink i {
font-size: 22px;
}
.cart-badge {
position: absolute;
top: -8px;
right: -10px;
/* background: white; */
color: #fff;
border-radius: 50%;
padding: 2px 6px;
font-size: 12px;
font-weight: bold;
}
/* product cat */
.product-cat{
color: orange;
}