*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

 html{
 overflow-x:hidden;
 max-width:100%;
 scroll-behavior:smooth;
}

 body{
 font-family:'Arial',sans-serif;
 line-height:1.6;
 color:#333;
 overflow-x:hidden;
 max-width:100vw;
 width:100%;
 min-height:100vh;
 position:relative;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}/* Navigation */
 nav{
 background:#1a1a1a;
 color:#fff;
 padding:1rem 5%;
 position:fixed;
 width:100%;
 top:0;
 z-index:1000;
 box-shadow:0 2px 10px rgba(0,0,0,0.3);
 min-height:60px;
}

 .nav-container{
 display:flex;
 justify-content:space-between;
 align-items:center;
 max-width:1400px;
 margin:0 auto;
}

 .logo{
 font-size:1.5rem;
 font-weight:bold;
 color:#ffc107;
}

 .logo a{
 display:flex;
 align-items:center;
 gap:0.5rem;
 text-decoration:none;
 color:#ffc107;
}

 .logo-text{
 font-size:1.2rem;
 font-weight:bold;
}

 .logo-image{
 width:100px;
 height:75px;
 display:block;
}

 .nav-menu{
 display:flex;
 list-style:none;
 gap:2rem;
}

 .nav-menu a{
 color:#fff;
 text-decoration:none;
 transition:color 0.3s;
}

 .nav-menu a:hover{
 color:#ffc107;
}

 .hamburger{
 display:none;
 flex-direction:column;
 cursor:pointer;
 gap:5px;
}

 .hamburger span{
 width:25px;
 height:3px;
 background:#fff;
 transition:transform 0.3s ease,opacity 0.3s ease;
}

 /* Mobile Navigation */
 @media (max-width:768px){
 .hamburger{
 display:flex;
}

 .nav-menu{
 position:fixed;
 top:60px;
 left:-100%;
 width:100%;
 height:calc(100vh - 60px);
 background:#1a1a1a;
 flex-direction:column;
 justify-content:flex-start;
 align-items:center;
 padding-top:2rem;
 gap:2rem;
 transition:left 0.3s ease;
 z-index:999;
 will-change:left;
 contain:layout style paint;
}

 .nav-menu.active{
 left:0;
}

 .nav-menu li{
 width:100%;
 text-align:center;
}

 .nav-menu a{
 display:block;
 padding:1rem;
 width:100%;
 font-size:1.2rem;
}
}

 /* Hero Section */
 .hero{
 aspect-ratio:3/2;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 color:#fff;
 margin-top:60px;
 position:relative;
 overflow:hidden;
}

 .hero picture{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:0;
}

 .hero img{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 object-fit:cover;
}

 .hero::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:rgba(26,26,26,0.6);
 z-index:1;
}

 .hero-content{
 position:relative;
 z-index:2;
 max-width:800px;
 padding:1rem 2rem;
 margin-top:-10vh;
}

 .hero h1{
 font-size:3rem;
 color:#fff;
 margin-bottom:1rem;
 opacity:0;
 transform:translate3d(0,30px,0);
 animation:fadeInUp 1s ease forwards;
 will-change:transform,opacity;
 backface-visibility:hidden;
 contain:layout style paint;
}

 .hero p{
 font-size:1.3rem;
 margin-bottom:2rem;
 opacity:0;
 transform:translate3d(0,30px,0);
 animation:fadeInUp 1.2s ease 0.2s forwards;
 will-change:transform,opacity;
 backface-visibility:hidden;
 contain:layout style paint;
}

 .btn{
 display:inline-block;
 padding:1rem 2.5rem;
 background:#ffc107;
 color:#1a1a1a;
 text-decoration:none;
 border-radius:5px;
 font-weight:bold;
 transition:transform 0.3s ease,box-shadow 0.3s ease;
 opacity:0;
 transform:translate3d(0,30px,0);
 animation:fadeInUp 1.4s ease 0.4s forwards;
 will-change:transform,opacity;
 backface-visibility:hidden;
 contain:layout style paint;
}

 .btn:hover{
 transform:translateY(-3px);
 box-shadow:0 10px 20px rgba(255,193,7,0.3);
}

 /* About Section */
 .about{
 padding:5rem 5%;
 max-width:1400px;
 margin:0 auto;
}

 .about-container{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:4rem;
 align-items:center;
}

 .about-image{
 width:100%;
 height:400px;
 object-fit:cover;
 border-radius:10px;
 box-shadow:0 10px 30px rgba(0,0,0,0.2);
 aspect-ratio:3/2;
}

 .about-text h2{
 font-size:2.5rem;
 margin-bottom:1.5rem;
 color:#1a1a1a;
}

 .about-text p{
 margin-bottom:1rem;
 text-align:justify;
 line-height:1.8;
}

 /* Services Section */
 .services{
 background:#f8f9fa;
 padding:5rem 5%;
}

 .section-title{
 text-align:center;
 font-size:2.5rem;
 margin-bottom:3rem;
 color:#1a1a1a;
}

 .services-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:2rem;
 max-width:1400px;
 margin:0 auto;
}

 .service-card{
 background:#fff;
 padding:2rem;
 border-radius:10px;
 box-shadow:0 5px 15px rgba(0,0,0,0.1);
 transition:transform 0.3s ease;
 opacity:0;
 transform:translate3d(0,20px,0);
 transition:opacity 0.6s ease,transform 0.6s ease;
 will-change:transform,opacity;
 backface-visibility:hidden;
 perspective:1000px;
 contain:layout style paint;
}

 .service-card.animate-in{
 opacity:1;
 transform:translateY(0);
}

 .service-card:hover{
 transform:translateY(-10px);
}

 .service-card img{
 width:100%;
 height:200px;
 object-fit:cover;
 border-radius:5px;
 margin-bottom:1.5rem;
 aspect-ratio:3/2;
}

 .service-card h3{
 margin-bottom:1rem;
 color:#1a1a1a;
}

 .service-card p{
 margin-bottom:1.5rem;
 color:#666;
}

 .learn-more{
 color:#b8860b;
 text-decoration:none;
 font-weight:bold;
 transition:color 0.3s;
}

 .learn-more:hover{
 color:#8b6914;
}

 /* Products Section */
 .products{
 padding:5rem 5%;
 max-width:1400px;
 margin:0 auto;
}

 .products-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:2rem;
}

 .product-card{
 text-align:center;
 padding:1.5rem;
 background:#fff;
 border-radius:10px;
 box-shadow:0 5px 15px rgba(0,0,0,0.1);
 transition:transform 0.3s ease;
 opacity:0;
 transform:translate3d(0,20px,0);
 transition:opacity 0.6s ease,transform 0.6s ease;
 will-change:transform,opacity;
 backface-visibility:hidden;
 perspective:1000px;
 contain:layout style paint;
}

 .product-card.animate-in{
 opacity:1;
 transform:translateY(0);
}

 .product-card:hover{
 transform:scale(1.05);
}

 .product-card img{
 width:100%;
 height:200px;
 object-fit:cover;
 border-radius:5px;
 margin-bottom:1rem;
 aspect-ratio:3/2;
}

 .product-card h3{
 color:#1a1a1a;
 margin-bottom:0.5rem;
}

 /* Core Values Section */
 .core-values{
 background:#1a1a1a;
 color:#fff;
 padding:5rem 5%;
 text-align:center;
}

 .values-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:3rem;
 max-width:1200px;
 margin:3rem auto 0;
}

 .value-item{
 padding:2rem;
 opacity:0;
 transform:translate3d(0,20px,0);
 transition:opacity 0.6s ease,transform 0.6s ease;
 will-change:transform,opacity;
 backface-visibility:hidden;
 perspective:1000px;
 contain:layout style paint;
}

 .value-item.animate-in{
 opacity:1;
 transform:translateY(0);
}

 .value-item h3{
 color:#ffc107;
 font-size:1.8rem;
 margin-bottom:1rem;
}

 /* Mission & Vision */
 .mission-vision{
 padding:5rem 5%;
 max-width:1400px;
 margin:0 auto;
}

 .mv-container{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:3rem;
}

 .mv-box{
 padding:3rem;
 background:#f8f9fa;
 border-radius:10px;
 border-left:5px solid #ffc107;
}

 .mv-box h3{
 font-size:2rem;
 margin-bottom:1.5rem;
 color:#1a1a1a;
}

 /* CTA Section */
 .cta{
 background:linear-gradient(135deg,#ffc107,#e0a800);
 padding:5rem 5%;
 text-align:center;
 color:#1a1a1a;
}

 .cta h2{
 font-size:2.5rem;
 margin-bottom:1.5rem;
}

 .cta p{
 font-size:1.2rem;
 margin-bottom:2rem;
}

 .cta .btn{
 background:#1a1a1a;
 color:#fff;
}

 .cta .btn:hover{
 background:#333;
}

 /* Contact Section */
 .contact{
 padding:5rem 5%;
 max-width:1400px;
 margin:0 auto;
}

 .contact-container{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:3rem;
}

 .contact-info{
 padding:2rem;
}

 .contact-info h3{
 font-size:2rem;
 margin-bottom:2rem;
 color:#1a1a1a;
}

 .info-item{
 margin-bottom:1.5rem;
}

 .info-item strong{
 color:#1a1a1a;
 font-weight:700;
 display:block;
 margin-bottom:0.5rem;
}

 .map-container{
 width:100%;
 height:450px;
 border-radius:10px;
 overflow:hidden;
 box-shadow:0 5px 15px rgba(0,0,0,0.2);
 aspect-ratio:4/3;
}

 .map-container iframe{
 width:100%;
 height:100%;
 border:none;
 display:block;
}

 /* Footer */
 footer{
 background:#1a1a1a;
 color:#fff;
 padding:3rem 5% 0;
}

 .footer-content{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:3rem;
 max-width:1400px;
 margin:0 auto 2rem;
}

 .footer-section h3{
 color:#ffc107;
 margin-bottom:1.5rem;
}

 .footer-logo{
 font-size:1.8rem;
 font-weight:bold;
 color:#ffc107;
 margin-bottom:1rem;
}

 .footer-logo-image{
 width:100px;
 height:75px;
 display:block;
}

 .footer-logo a{
 display:flex;
 align-items:center;
 gap:0.5rem;
 text-decoration:none;
 color:#ffc107;
}

 .footer-logo-text{
 font-size:1.2rem;
 font-weight:bold;
}

 .footer-section ul{
 list-style:none;
}

 .footer-section ul li{
 margin-bottom:0.8rem;
}

 .footer-section a{
 color:#fff;
 text-decoration:none;
 transition:color 0.3s;
}

 .footer-section a:hover{
 color:#ffc107;
}

 .footer-bottom{
 border-top:1px solid #333;
 padding:1.5rem 0;
 text-align:center;
 display:flex;
 justify-content:space-between;
 align-items:center;
 max-width:1400px;
 margin:0 auto;
 flex-wrap:wrap;
 gap:1rem;
}

 .designed-by{
 display:flex;
 align-items:center;
 gap:0.5rem;
}

 .designed-by a{
 color:#ffc107;
 text-decoration:none;
 transition:text-decoration 0.3s;
}

 .designed-by a:hover{
 text-decoration:underline;
}

 .yp-logo{
 height:20px;
 width:auto;
 vertical-align:middle;
}

 .yp-logo-image{
 width:20px;
 height:20px;
 display:inline-block;
}

 /* Animations */
 @keyframes fadeInUp{
 from{
 opacity:0;
 transform:translateY(30px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}

 /* Mobile Responsive */
 @media(max-width:768px){
 .hamburger{
 display:flex;
}

 .nav-menu{
 position:fixed;
 left:0;
 top:60px;
 flex-direction:column;
 background:#1a1a1a;
 width:100%;
 text-align:center;
 transition:transform 0.3s ease;
 padding:2rem 0;
 gap:0;
 transform:translateX(-100%);
 will-change:transform;
}

 .nav-menu.active{
 transform:translateX(0);
}

 .nav-menu li{
 padding:1rem 0;
}

 .hero h1{
 font-size:2rem;
}

 .hero p{
 font-size:1rem;
}

 .hero{
 height:50vh;
 min-height:350px;
 max-height:500px;
 aspect-ratio:auto;
}

 .hero picture,
 .hero img{
 max-width:100%;
 width:100%;
}

 .hero-content{
 padding:0.5rem 1rem;
 margin-top:-2vh;
 max-width:100%;
}

 .hero h1{
 font-size:1.5rem;
 word-wrap:break-word;
}

 .hero p{
 font-size:0.9rem;
 word-wrap:break-word;
}

 .about-container,
 .contact-container,
 .mv-container{
 grid-template-columns:1fr;
 text-align:center;
}

 .about-text,
 .contact-info,
 .mv-box{
 text-align:center;
}

 .about-text p{
 text-align:center;
}

 .section-title,
 .about-text h2{
 font-size:2rem;
}

 .footer-bottom{
 flex-direction:column;
 text-align:center;
}

 .services-grid,
 .products-grid,
 .values-grid{
 grid-template-columns:1fr;
 max-width:100%;
}

 section{
 max-width:100vw;
 overflow-x:hidden;
}

 /* Logo responsiveness */
 .logo a{
 flex-direction:column;
 gap:0.25rem;
}

 .logo-text{
 font-size:0.7rem;
 text-align:center;
 line-height:1.2;
}

 .logo img{
 width:80px !important;
 height:60px !important;
}

 /* Footer logo responsiveness */
 .footer-logo a{
 flex-direction:column;
 gap:0.25rem;
 text-align:center;
}

 .footer-logo-text{
 font-size:0.7rem;
 line-height:1.2;
}

 .footer-logo-image{
 width:80px !important;
 height:60px !important;
}

 /* Footer centralization */
 .footer-content{
 grid-template-columns:1fr;
 gap:2rem;
 text-align:center;
}

 .footer-section{
 text-align:center;
}

 .footer-section h3{
 text-align:center;
}

 .footer-section p{
 text-align:center;
}

 .footer-section ul{
 text-align:center;
 padding-left:0;
 list-style-position:inside;
}

 .footer-section ul li{
 display:inline-block;
 margin:0 0.5rem;
 text-align:center;
}

 .footer-section ul li a{
 display:inline-block;
 padding:0.25rem 0.5rem;
}

 .d-flex{
 justify-content:center;
 align-items:center;
}

 .footer-bottom{
 text-align:center;
 flex-direction:column;
 align-items:center;
}

 .designed-by{
 text-align:center;
}

 .learn-more{
 color:#1a1a1a;
}
}

 /* Keyframes for animations */
 @keyframes fadeInUp{
 from{
 opacity:0;
 transform:translate3d(0,30px,0);
}
 to{
 opacity:1;
 transform:translate3d(0,0,0);
}
}