body {
	      	background-color:#fff;
	      	color: #3E4149;
	      	font-family: Inter, Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    	}

    	:root {
	        --primary-color: #2c3e50;
	        --secondary-color: #3498db;
	        --accent-color: #e74c3c;
	        --footer-color: #374e63;
	        --green-accent: #27ae60;
	    }
	      	
		.navbar-collapse {
		  position: absolute;
		  top: 0;
		  left: 0;
		  right: 0;
		  height: 100vh;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  text-align: center;
		  background-color: #3e4149;
		}
		.navbar-toggler, .navbar-brand {
		  z-index: 1;
		}
		.navbar-brand {
		  font-size: 1.8em;
		}
		.navbar-toggler:focus {
		  box-shadow: none;
		}
		.navbar-collapse .nav-link {
		  font-size: 1.5em;
		  letter-spacing: 2px;
		  color: #fff;
		}
		.navbar-collapse .nav-link:hover, .navbar-collapse .nav-link.active {
		  color: darkseagreen;
		}
		.nav-item:not(:last-child) {
		  border-bottom: 1px solid gray;
		  padding: 0.2em 4em;
		}
		@media screen and (min-width: 768px) {
		  .nav-item:not(:last-child) {
		    padding: 0.5em 8em;
		  }
		}
		@media (min-width: 1200px) {
		  .h1, h1 {
		    font-size: 4.5rem;
		  }
		}
		.navbar-collapse.show {
		  transition: all 0.5s;
		}
		.carousel-caption {
			bottom: 20%;
		}
		#txtSlide {
			color:#fff; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		}
		.round {
	       background-color: #fff;
	       width: auto;
	       height: auto;
	       margin: 0 auto 15px auto;
	       padding: 2px;
	       border: 1px solid #ccc;
	       -moz-border-radius: 11px;
	       -webkit-border-radius: 11px;
	       border-radius: 11px;
	       behavior: url(border-radius.htc);
	    }


        .icon-container {
            /* margin-left: auto; */
            padding-right: 1rem;
        }
        .navbar-icon {
            font-size: 1.2rem;
            margin-left: 15px;
            color: #6c757d;
            transition: color 0.3s;
        }
        .navbar-icon:hover {
            color: #0d6efd;
        }
        .video-mobile-container {
            display: none;
        }
        .icon_menu {
            width:32px; 
            height:32px;
        }
        .logo {
            width:250px; 
            left:30px; 
            position: relative;
        }

        @media (max-width: 991.98px) {
            .icon-container {
                padding-right: 0.5rem;
            }
            .navbar-icon {
                margin-left: 10px;
                font-size: 1.1rem;
            }
        }
        @media (max-width: 768px) {
            .video-desktop-container {
                display: none;
            }
            
            .video-mobile-container {
                display: block;
            }

            .ratio-16x9 {
                --bs-aspect-ratio: 150%;
            }
            .icon_menu {
                width:24px; 
                height:24px;
            }
            .logo {
                width:150px; 
                left:15px; 
                position: relative;
            }
        }

	    .hero-section {
	        background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), 
	                    url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80');
	        background-size: cover;
	        background-position: center;
	        color: white;
	        padding: 120px 0;
	    }
	    
	    .feature-icon {
	        font-size: 2.5rem;
	        color: var(--secondary-color);
	        margin-bottom: 1rem;
	    }
	    
	    .advantage-card {
	        border: none;
	        border-radius: 10px;
	        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	        transition: transform 0.3s;
	        height: 100%;
	    }
	    
	    .advantage-card:hover {
	        transform: translateY(-10px);
	    }
	    
	    .btn-primary {
	        background-color: var(--secondary-color);
	        border-color: var(--secondary-color);
	    }
	    
	    .btn-outline-primary {
	        color: var(--secondary-color);
	        border-color: var(--secondary-color);
	    }
	    
	    .btn-outline-primary:hover {
	        background-color: var(--secondary-color);
	        color: white;
	    }

	   
	    .advantage-card {
	        border: none;
	        border-radius: 10px;
	        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	        transition: transform 0.3s;
	        height: 100%;
	    }
	    
	    .advantage-card:hover {
	        transform: translateY(-10px);
	    }
	    
	    .btn-primary {
	        background-color: var(--secondary-color);
	        border-color: var(--secondary-color);
	    }
	    
	    .btn-outline-primary {
	        color: var(--secondary-color);
	        border-color: var(--secondary-color);
	    }
	    
	    .btn-outline-primary:hover {
	        background-color: var(--secondary-color);
	        color: white;
	    }


      .product-icon {
          font-size: 2rem;
          color: var(--secondary-color);
          margin-bottom: 1rem;
      }
      
      .product-card {
          border: none;
          border-radius: 10px;
          box-shadow: 0 5px 15px rgba(0,0,0,0.1);
          transition: transform 0.3s;
          height: 100%;
          background-color: white;
      }
      
      .product-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(0,0,0,0.15);
      }
      

     .metal-category {
          background-color: #f8f9fa;
          border-radius: 10px;
          padding: 20px;
          margin-bottom: 30px;
      }
      
      .metal-item {
          padding: 8px 0;
          border-bottom: 1px solid #eee;
      }
      
      .metal-item:last-child {
          border-bottom: none;
      }


        
    .team-icon {
        font-size: 2.5rem;
        color: var(--secondary-color);
        margin-bottom: 1rem;
    }
    
    .team-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s;
        height: 100%;
    }
    
    .team-card:hover {
        transform: translateY(-5px);
    }
    
    .member-card {
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: all 0.3s;
        overflow: hidden;
        margin-bottom: 30px;
    }
    
    .member-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    
    .member-img {
        height: 220px;
        background-color: #f8f9fa;
        background-position: center;
        background-size: cover;
    }
    
    .member-position {
        color: var(--secondary-color);
        font-weight: 500;
    }
    
    .member-contact a {
        color: var(--primary-color);
        text-decoration: none;
    }
    
    .value-item {
        padding: 25px;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        height: 100%;
        transition: transform 0.3s;
    }
    
    .value-item:hover {
        transform: translateY(-5px);
    }
    
    
    .hero-about {
        background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), 
                    url('../images/2151989569.jpeg');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 120px 0;
    }
    
    .about-icon {
        font-size: 2.5rem;
        color: var(--secondary-color);
        margin-bottom: 1rem;
    }
    
    .value-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s;
        height: 100%;
        padding: 30px;
        background-color: white;
    }
    
    .value-card:hover {
        transform: translateY(-5px);
    }
    
    .timeline {
        position: relative;
        padding-left: 50px;
    }
    
    .timeline::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--secondary-color);
    }
    
    .timeline-item {
        position: relative;
        margin-bottom: 30px;
    }
    
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -40px;
        top: 5px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--accent-color);
        border: 3px solid white;
    }
   
    .hero-csr {
        background: linear-gradient(rgba(44, 62, 80, 0.9), rgba(44, 62, 80, 0.9)), 
                    url('../images/2151989569.jpeg');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 120px 0;
    }
    
    .csr-icon {
        font-size: 2.5rem;
        color: var(--green-accent);
        margin-bottom: 1rem;
    }
    
    .value-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s;
        height: 100%;
        padding: 30px;
        background-color: white;
    }
    
    .value-card:hover {
        transform: translateY(-5px);
    }
    
    .ethic-pill {
        display: inline-block;
        padding: 8px 15px;
        margin: 5px;
        background-color: var(--green-accent);
        color: white;
        border-radius: 20px;
        font-size: 0.9rem;
    }

    .inclusion-section {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 40px;
    }

    .contact-info-item {
        margin-bottom: 20px;
        display: flex;
        align-items: flex-start;
    }


    .contact-icon {
        font-size: 2rem;
        color: var(--secondary-color);
        margin-right: 15px;
    }
    
    .contact-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        padding: 30px;
        margin-bottom: 30px;
        background-color: white;
    }
    
    .map-container {
        height: 400px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }