<style>
/* ================= GLOBAL ================= */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif;background:#f6f7f9;color:#1f2937;scroll-behavior:smooth;} 

/* ================= LOADER ================= */
#loader{
position:fixed;
inset:0;
background:#111827;
display:flex;
align-items:center;
justify-content:center;
z-index:99999;
flex-direction:column;
}

.loader-logo{
width:140px;
height:auto;
margin-bottom:25px;
animation:logoPulse 2s ease-in-out infinite;
}

.loader-bar{
width:240px;
height:12px;
background:#1f2937;
border-radius:8px;
overflow:hidden;
margin-bottom:12px;
position:relative;
border:1px solid #374151;
}

/* REAL TMT BAR (RIBBED) QUENCHER ANIMATION */
.loader-progress{
position:absolute;
height:100%;
width:100%;
border-radius:8px;
overflow:hidden;

/* realistic ribbed TMT pattern */
background:
repeating-linear-gradient(
45deg,
#2f3640 0px,
#2f3640 6px,
#4b5563 6px,
#4b5563 12px
);

box-shadow:
inset 0 0 10px rgba(0,0,0,0.9),
inset 0 2px 3px rgba(255,255,255,0.08),
inset 0 -2px 3px rgba(0,0,0,0.6);
}

/* molten head moving like real TMT exiting furnace */
.loader-progress::before{
content:"";
position:absolute;
top:0;
left:-80px;
width:80px;
height:100%;

background:linear-gradient(
90deg,
#ff3c00 0%,
#ff6a00 30%,
#ffa94d 60%,
rgba(255,169,77,0.3) 100%
);

filter:blur(1px);
animation:tmtMove 2s linear infinite;
}

/* quencher water cooling zone */
.loader-progress::after{
content:"";
position:absolute;
top:0;
left:50%;
width:4px;
height:100%;

background:linear-gradient(
180deg,
#38bdf8,
#0ea5e9,
#38bdf8
);

animation:waterLine 0.5s linear infinite;
}

@keyframes tmtMove{
0%{left:-80px;}
100%{left:320px;}
}

@keyframes waterLine{
0%,100%{opacity:0.4;height:80%;top:10%;}
50%{opacity:1;height:100%;top:0%;}
}
100%{opacity:0;transform:translateY(-20px);}
}
50%{opacity:0.7}
}
50%{opacity:0.6;}
}

.loader-progress{
width:0%;
height:100%;
background:linear-gradient(90deg,#f97316,#fb923c);
animation:loadingBar 3s ease forwards;
}

.loader-text{
margin-top:10px;
color:#f97316;
font-weight:500;
letter-spacing:2px;
font-size:14px;
}

@keyframes logoPulse{
0%,100%{transform:scale(1);opacity:0.9}
50%{transform:scale(1.08);opacity:1}
}

@keyframes loadingBar{
0%{width:0%}
100%{width:100%}
}

.loader-text{
margin-top:18px;
color:#f97316;
font-weight:500;
letter-spacing:1px;
}

@keyframes spin{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

/* ================= HEADER ================= */
header{background:#ffffff;padding:18px 60px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 15px rgba(0,0,0,.06);position:sticky;top:0;z-index:1000;transition:all .3s ease;} 
header.shrink{padding:10px 60px;box-shadow:0 5px 25px rgba(0,0,0,.12);}
.logo{
font-size:28px;
font-weight:700;
color:#b45309;
letter-spacing:1px;
display:flex;
align-items:center;
gap:14px;
}

/* Professional logo styling */
.logo img{
height:48px;
width:auto;
display:block;
object-fit:contain;
filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25));
transition:all .3s ease;
}

/* Hover animation */
.logo:hover img{
transform:scale(1.08);
filter:drop-shadow(0 6px 18px rgba(180,83,9,0.4));
}

/* Premium brand text styling */
.logo{
background:linear-gradient(90deg,#b45309,#ea580c);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* Header shrink logo */
header.shrink .logo img{
height:40px;
}

header.shrink .logo{
font-size:22px;
}
/* Responsive professional logo alignment fix */
.logo img{
height:80px;
width:auto;
display:block;
object-fit:contain;
}

/* Tablet */
@media(max-width:900px){
.logo img{
height:42px;
}
}

/* Mobile */
@media(max-width:600px){
header{
padding:12px 18px;
}
.logo{
font-size:20px;
gap:10px;
}
.logo img{
height:36px;
}
}

/* Small mobile */
@media(max-width:400px){
.logo img{
height:32px;
}
.logo{
font-size:18px;
}
}
nav{display:flex;gap:22px;align-items:center;}

/* Navigation grouping */
.nav-group{display:flex;gap:18px;align-items:center;}

.nav-divider{
    width:1px;
    height:20px;
    background:#e5e7eb;
    margin:0 8px;
}

.nav-secondary a{
    font-size:14px;
    color:#6b7280;
}

.nav-secondary a:hover{
    color:#b45309;
}
nav a{text-decoration:none;color:#374151;font-weight:500;position:relative;padding:6px 4px;transition:.3s;} 
nav a.active{color:#b45309;} 
nav a.active::after{width:100%;}

/* Company dropdown */
.nav-company{
    position:relative;
    margin-left:10px;
    font-weight:500;
    color:#374151;
    cursor:pointer;
}

.nav-company span{
    padding:6px 4px;
}

.nav-dropdown{
    position:absolute;
    top:32px;
    right:0;
    background:#ffffff;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    border-radius:8px;
    padding:10px 0;
    display:none;
    min-width:180px;
}

.nav-dropdown a{
    display:block;
    padding:10px 18px;
    color:#374151;
}

.nav-dropdown a:hover{
    background:#f3f4f6;
    color:#b45309;
}

.nav-company:hover .nav-dropdown{
    display:block;
}
nav a::after{content:'';position:absolute;width:0;height:2px;background:#b45309;left:0;bottom:-4px;transition:.3s;}
nav a:hover::after{width:100%;}
nav a:hover{color:#b45309}
.menu-toggle{display:none;font-size:28px;cursor:pointer}
@media(max-width:900px){nav{display:none;position:absolute;top:75px;left:0;width:100%;background:#fff;flex-direction:column;text-align:center;padding:20px 0;box-shadow:0 5px 20px rgba(0,0,0,.1);}nav.active{display:flex}.menu-toggle{display:block}}

/* ================= HERO ================= */
.hero{height:85vh;position:relative;display:flex;align-items:center;padding-left:80px;color:#fff;overflow:hidden;}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.65));z-index:1;}
.hero > div{position:relative;z-index:2;}
.hero h1{font-size:52px;font-weight:600;opacity:0;transform:translateY(40px);animation:heroFade 1s ease forwards;} 
.hero p{opacity:0;transform:translateY(40px);animation:heroFade 1s ease forwards .3s;} 
.hero .btn{opacity:0;transform:translateY(40px);animation:heroFade 1s ease forwards .6s;} 
@keyframes heroFade{to{opacity:1;transform:translateY(0);}}
.hero p{margin-top:15px;font-size:20px;max-width:650px;opacity:.95;}
.btn{margin-top:30px;display:inline-block;background:#b45309;color:#fff;padding:14px 34px;border-radius:4px;text-decoration:none;font-weight:500;box-shadow:0 10px 25px rgba(0,0,0,.25);transition:.3s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(0,0,0,.35);}

/* ================= SECTIONS ================= */
.section{padding:60px 60px 45px 60px;background:#fff;scroll-margin-top:80px;opacity:0;transform:translateY(40px);transition:all .8s ease;} 
.section.visible{opacity:1;transform:translateY(0);}
.section:nth-child(even){background:#f9fafb}
.section h2{font-size:34px;font-weight:600;color:#1e3a8a;margin-bottom:35px;}
.section p{color:#4b5563;line-height:1.9;}

/* ================= WHY CHOOSE US ================= */
.why-choose li{
    position:relative;
    padding-left:28px;
}

.why-choose li::before{
    content:"✔";
    position:absolute;
    left:0;
    color:#f97316; /* orange accent */
    font-weight:600;
}

/* ================= COMPANY OVERVIEW ================= */
.overview-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:40px;
}

@media(max-width:900px){
    .overview-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .overview-grid{
        grid-template-columns:1fr;
    }
}

/* ================= PRODUCTS ================= */

/* Product Action Buttons */
.product-actions{
    display:flex;
    gap:12px;
    margin-top:auto; /* pushes buttons to bottom */
    align-items:center;
}

/* unified button size – responsive */
.product-box .btn-small,
.product-box .btn-buy{
    width:100%;
    max-width:160px;
    height:44px;
    padding:0 20px;
    border:none;
    border-radius:6px;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* Desktop spacing */
@media(min-width:900px){
    .product-actions{
        justify-content:flex-start;
    }
}

/* Tablet */
@media(max-width:900px){
    .product-box .btn-small,
    .product-box .btn-buy{
        max-width:140px;
        height:42px;
        font-size:13px;
    }
}

/* Mobile */
@media(max-width:600px){
    .product-actions{
        flex-direction:column;
    }

    .product-box .btn-small,
    .product-box .btn-buy{
        width:100%;
        max-width:100%;
        height:44px;
        font-size:14px;
    }
}

.product-box .btn-small{
    background:#c25a0a;
    color:#ffffff;
}

.product-box .btn-small:hover{
    background:#a94e08;
}

.product-box .btn-buy{
    background:#1e3a8a;
    color:#ffffff;
}

.product-box .btn-buy:hover{
    background:#162f6b;
}

.products{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:35px;
}

/* Mobile: 1 product per row */
@media(max-width:768px){
    .products{
        grid-template-columns:1fr;
    }
}

.product-box{background:#fff;border-radius:8px;padding:25px;box-shadow:0 10px 30px rgba(0,0,0,.06);transition:.35s;display:flex;flex-direction:column;}
.product-box:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.12);}
.product-box img{width:100%;height:200px;object-fit:cover;border-radius:6px;cursor:pointer;transition:.3s;}
.product-box img:hover{transform:scale(1.03);} 

/* Scheme Image Modal */
.image-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:3000;}
.image-modal.active{display:flex;}
.image-modal img{max-width:90%;max-height:85%;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);} 
.image-modal span{position:absolute;top:20px;right:30px;color:#fff;font-size:32px;cursor:pointer;}
.product-box h3{margin-top:15px;color:#1e3a8a;}

/* Product price placeholder */
.product-price{
    margin-top:6px;
    font-size:14px;
    font-weight:500;
    color:#111827;
    display:flex;
    align-items:center;
    gap:8px;
}

.product-price .rate{
    color:#16a34a;
    font-weight:600;
}

/* trend arrows */
.trend{
    font-size:16px;
    font-weight:700;
}

.trend-up{
    color:#16a34a; /* green */
}

.trend-down{
    color:#dc2626; /* red */
}

.trend-neutral{
    color:#6b7280; /* gray */
}


/* ================= FOOTER ================= */
footer{background:#111827;color:#cbd5e1;padding:35px 60px;}
.footer-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.footer-left{text-align:left;}
.footer-right{display:flex;gap:15px;align-items:center;} 

.footer-social{display:flex;gap:12px;margin-right:20px;} 
.footer-social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#1f2937;border-radius:6px;transition:.3s;} 
.footer-social a:hover{background:#b45309;transform:translateY(-2px);} 
.footer-social svg{width:18px;height:18px;fill:#e5e7eb;}
.footer-links{display:flex;gap:15px;}
.footer-links a{color:#e5e7eb;text-decoration:none;border:1px solid #374151;padding:10px 18px;border-radius:8px;transition:.3s;font-weight:500;}
.footer-links a:hover{background:#1e3a8a;border-color:#1e3a8a;color:#fff;}

/* ===== QUOTE SECTION ===== */
.quote-wrapper{display:grid;grid-template-columns:2fr 1fr;gap:35px;margin-top:30px;}
.quote-box{background:#fff;padding:30px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);} 
.quote-box h3{margin-bottom:15px;color:#1e3a8a;font-size:22px;} 
.quote-box input,.quote-box select,.quote-box textarea{width:100%;padding:12px 14px;margin-top:6px;margin-bottom:15px;border-radius:6px;border:1px solid #d1d5db;font-family:Poppins;} 
.quote-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;} 
.quote-btn{background:#c25a0a;color:#fff;border:none;padding:14px 26px;border-radius:6px;font-weight:500;cursor:pointer;} 
.quote-btn:hover{background:#a94e08;} 
.contact-info{line-height:1.9;color:#374151;} 
.contact-info a{color:#1e3a8a;text-decoration:none;font-weight:500;} 
.map-box iframe{width:100%;height:250px;border:none;border-radius:10px;margin-top:15px;} 
@media(max-width:900px){.quote-wrapper{grid-template-columns:1fr;} .quote-row{grid-template-columns:1fr;}}
footer span{color:#60a5fa;}

/* ===== GALLERY SECTION ===== */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:30px;} 
.gallery-item{background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);overflow:hidden;text-align:center;transition:.3s;}
.gallery-item{background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08);overflow:hidden;text-align:center;transition:.3s;}
.gallery-item:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,.15);} 
.gallery-item img{width:100%;height:200px;object-fit:cover;cursor:pointer;} 
.gallery-item p{padding:12px;font-weight:500;color:#1e3a8a;} 
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr;} }

/* ===== MANUFACTURING GRAPH ===== */
.process-wrapper{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:35px;
    width:100%;
    margin-top:20px;
}

.process-step{
    position:relative;
    background:#ffffff;
    border-radius:14px;
    padding:30px 22px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    text-align:center;
    cursor:pointer;
    transition:.35s ease;

    /* equal height cards */
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:330px;
}

.process-step:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 50px rgba(0,0,0,.15);
}

/* arrows between cards */
.process-step:not(:last-child)::after{
    content:"→";
    position:absolute;
    right:-30px;
    top:50%;
    transform:translateY(-50%);
    font-size:30px;
    font-weight:600;
    color:#c2410c;
}

.process-step span{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#1e3a8a;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-size:18px;
    margin:0 auto 14px;
}

.process-step h4{
    font-size:18px;
    margin-bottom:10px;
    color:#1e3a8a;
    font-weight:600;
}

.process-step p{
    font-size:14px;
    line-height:1.7;
    margin-bottom:18px;
    color:#4b5563;
}

.process-step button{
    background:#c2410c;
    color:#ffffff;
    border:none;
    padding:10px 24px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
    margin-top:auto; /* aligns all buttons */
}

/* Tablet: keep horizontal */
@media(max-width:900px){
    .process-wrapper{
        grid-template-columns:repeat(5,1fr);
        gap:25px;
    }

    .process-step:not(:last-child)::after{
        right:-24px;
        font-size:26px;
    }
}

/* Mobile: vertical */
@media(max-width:600px){
    .process-wrapper{
        grid-template-columns:1fr;
        gap:35px;
    }

    .process-step:not(:last-child)::after{
        content:"↓";
        right:50%;
        top:auto;
        bottom:-32px;
        transform:translateX(50%);
        font-size:28px;
    }
}

/* ===== MODAL ===== */
.process-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:2000;
}

.process-modal.active{display:flex;}

.modal-box{
    background:#fff;
    max-width:420px;
    width:90%;
    padding:30px;
    border-radius:10px;
    position:relative;
}

.modal-box h3{margin-bottom:15px;color:#1e3a8a;}

.close{
    position:absolute;
    top:12px;
    right:15px;
    font-size:22px;
    cursor:pointer;
}
/* ================= MOBILE OVERFLOW FIX ================= */

html, body{
    overflow-x:hidden;
    max-width:100%;
}

/* Fix section padding for mobile */
@media(max-width:768px){

    .section{
        padding:40px 18px;
    }

    header{
        padding:12px 18px;
    }

    .hero{
        padding-left:18px;
        padding-right:18px;
    }

}

/* Ensure all elements stay inside screen */
img, video, iframe{
    max-width:100%;
    height:auto;
}

/* Prevent any element from exceeding width */
*{
    max-width:100%;
}
