/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

.containergywm {
   
    margin: 0 auto;
    padding: 0 5.2%;
}
.zimain{
    display: flex;
    justify-content: center;
}
/* Navigation */
.breadcrumb {
    background: #f8f9fa;
    padding: 10px 0;
    font-size: 14px;
    color: #666;
}

.breadcrumb .current {
    color: #333;
    font-weight: 500;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: -2;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
}

.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        100px 200px white,
        200px 100px white,
        300px 300px white,
        400px 150px white,
        500px 250px white,
        600px 50px white,
        700px 200px white,
        800px 100px white,
        900px 300px white,
        1000px 200px white,
        150px 350px white,
        250px 50px white,
        350px 200px white,
        450px 300px white,
        550px 100px white,
        650px 250px white,
        750px 150px white,
        850px 300px white,
        950px 50px white,
        50px 100px white;
    animation: twinkle 3s infinite;
}

.stars::after {
    animation-delay: 1.5s;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.hero-title {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    -webkit-text-stroke: 2px rgba(255,255,255,0.3);
    text-stroke: 2px rgba(255,255,255,0.3);
    letter-spacing: 0.1em;
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 300;
    opacity: 0.9;
}

/* Why Choose Section */
.why-choose {
    padding: 80px 0;
    background: white;
}

.why-choose h2 {
    font-size: 2.5rem;
    text-align: center; 
    color: #333;
}

.why-choose h3 {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 50px;
    color: #666;
    font-weight: 400;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.text-content p {
      margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

.text-content strong {
    color: #667eea;
}

.office-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Statistics Section     background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);*/
.statistics {
  background:url(../pc/images/m_09.jpg);
      background-size: cover;
    padding: 80px 0;
    color: white;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    text-align: center;
}

.stat-item {
    position: relative;
}

.stat-number {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

.stat-plus,
.stat-unit {
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    margin-left: 5px;
	margin-top:-18px;
}

.stat-label {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-top: 10px;
}

/* Global Reach Section */
.global-reach {
  background:url(../pc/images/m_10.jpg);
    padding: 40px 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.global-reach h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
    font-weight: 400;
}

.globe-containergywm {
    display: flex;
    justify-content: center;
    align-items: center;
}

.globe-image {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 50px rgba(100, 150, 255, 0.3);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.space-stars {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.space-stars::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        50px 50px white,
        150px 100px white,
        250px 150px white,
        350px 200px white,
        450px 100px white,
        550px 250px white,
        650px 50px white,
        750px 200px white,
        850px 150px white,
        950px 100px white,
        1050px 200px white,
        100px 300px white,
        200px 250px white,
        300px 350px white,
        400px 300px white,
        500px 350px white,
        600px 300px white,
        700px 350px white,
        800px 300px white,
        900px 350px white;
    animation: sparkle 4s infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

/* Corporate Culture Section */
.corporate-culture {
    padding: 40px 0 20px;
    background: white;
}

.culture-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.culture-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
}

.culture-text h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    line-height: 1.4;
}

.highlight-blue {
    color: #667eea;
}

.highlight-green {
    color: #28a745;
}

.culture-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.forest-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Factory Section */
.factory {
	
    background: url(../pc/images/gybg.jpg);
    padding: 40px 0 50px;
    color: white;
	margin-top:-10px;
	background-size:cover;
}

.factory h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 10px;
}

.factory-description {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 50px;
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.factory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.factory-item {
    text-align: center;
}

.workshop-image {
    width: 100%;
 
 
    border-radius: 18px;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.workshop-image:hover {
    transform: scale(1.05);
}

.factory-item p {
    font-size: 28px;
	padding-bottom:60px;
	color:#000
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 4rem;
    }
    
    .content-grid,
    .culture-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .stats-grid {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .why-choose h2,
    .global-reach h2,
    .culture-text h2,
    .factory h2 {
        font-size: 2rem;
    }
    
    .why-choose h3,
    .culture-text h3 {
        font-size: 1.4rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .stat-number {
        font-size: 3rem;
    }
    
    .factory-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .globe-image {
        width: 250px;
        height: 250px;
    }
    
    .containergywm {
        padding: 0 15px;
    }
    
    .why-choose,
    .statistics,
    .global-reach,
    .corporate-culture,
    .factory {
        padding: 46px 0;
    }
}

@media (max-width: 480px) {
	.why-choose h3{margin-bottom:30px}
	.factory{}
	.text-content p{font-size:17px;}
	.factory-item p{padding-bottom:30px}
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .why-choose h2,
    .global-reach h2,
    .culture-text h2,
    .factory h2 {
        font-size: 1.8rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .globe-image {
        width: 200px;
        height: 200px;
    }
}