:root{--bg:#0b1220; --card:#0f1a2f; --muted:#a9b3c7; --text:#eef2ff; --line:rgba(255,255,255,.10); --accent:#ffd54a; --shadow:0 18px 50px rgba(0,0,0,.45); --radius:18px; --max:1120px;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: #ffffff; color:var(--text); line-height:1.55;}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
/* ===== Header ===== */
.topbar{position:sticky; top:0; z-index:50; background: rgba(178,51,54,1); backdrop-filter: blur(10px);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0;}

.brand{display:flex; align-items:center; gap:12px; min-width:240px;}
.logo{}
.logo img {width: 200px;}

.brandTxt{display:flex; flex-direction:column; gap:2px}
.brandName{font-weight:800; letter-spacing:.2px}
.brandTag{font-size:12px; color:var(--muted)}

.links{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.navLink{padding:10px 12px; border-radius:12px; font-size: 13px; color:#ffffff; text-transform: none; border:1px solid transparent;}
.navLink:hover{color:var(--text); border-color:rgba(142,41,41,1); color: rgba(142,41,41,1); background:rgba(255,255,255,3);}
.navLink.active{color:var(--text); border-color:rgba(142,41,41,1); color: rgba(142,41,41,1); background:rgba(255,255,255,3);}

.navRight{display:flex; align-items:center; gap:10px}
.menuBtn{display:none; width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); color: var(--text); cursor:pointer; font-size:18px;}
.menuBtn:hover{transform: translateY(-1px)}

/* ===== Dropdown (CLEAN & STABLE - fixes hide issue) ===== */
.dd{position:relative; display:inline-flex; align-items:center}

/* Button */
.ddBtn{ padding:10px 12px; border-radius:12px; border:1px solid transparent; background:transparent; text-transform: none; color:#ffffff; cursor:pointer; font:inherit; display:inline-flex; align-items:center; gap:6px;}
.ddBtn:hover{color:var(--text); border-color:rgba(142,41,41,10); background:rgba(142,41,41,3);}

/* Menu */
.ddMenu{position:absolute; top:100%; /* NO GAP */ left:0; min-width:240px; border:1px solid var(--line); border-radius:16px; background: rgba(142,41,41,1); backdrop-filter: blur(10px); box-shadow: var(--shadow); padding:10px; display:none; z-index:100;}

/* Hover bridge (prevents menu hiding while moving cursor) */
.dd::after{content:""; position:absolute; left:0; right:0; top:100%; height:12px;}

/* Menu items */
.ddMenu a, .ddMenu .ddBtn{width:100%; display:flex; justify-content:space-between; align-items:center; text-transform: uppercase; padding:10px 12px; border-radius:12px; border:1px solid transparent; color:var(--text);}
.ddMenu a:hover, .ddMenu .ddBtn:hover{border-color:var(--line); background:rgba(255,255,255,.06);}

/* Submenu */
.dd.sub{width:100%;}
.dd.sub > .ddMenu{top:0; left:100%; margin-left:8px; min-width:220px;}

/* Desktop: open on hover */
@media (min-width:861px){
  .dd:hover > .ddMenu{display:block;}
  .dd.sub:hover > .ddMenu{display:block;}
}

/* ===== Mobile menu ===== */
.mobileMenu{display:none; padding:0 0 14px}
.mobileBox{border:1px solid var(--line); border-radius: var(--radius); background: rgba(142,41,41,1); padding:12px; box-shadow: 0 16px 40px rgba(0,0,0,.25);}
.mobileBox > a{display:block; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); margin-bottom:10px;}
.mDetails{border:1px solid rgba(255,255,255,.10); border-radius:14px; background: rgba(255,255,255,.03); padding:10px 12px; margin-bottom:10px;}
.mDetails summary{cursor:pointer; color:var(--text); font-weight:700;}
.mInner{display:grid; gap:8px; padding:10px 0 0}
.mInner a{padding:10px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);}
.mDetails.sub{margin-left:10px}

/* Responsive header breakpoint */
@media (max-width:860px){
  .links{display:none;}
  .menuBtn{display:inline-flex; align-items:center; justify-content:center; background: rgba(142,41,41,1); color: #ffffff;}
  .brand{min-width:unset}
}


/* ===== Page ===== */
.page{padding:0px 0 0}
.section{padding:18px 0}
.secHead{float:left; width:100%; margin:6px 0 30px}
.secHead .left{float: left; width: 60%;}
.secHead .right{float: left; width: 35%; margin-left: 5%;}
.secHead .right img{width:100%; border-radius: 20px;}
.secHead h1{margin:0 0 8px; font-size:24px; letter-spacing:-.2px; color: #8E2929; text-transform: uppercase;}
.secHead h2{margin:0 0 0; font-size:24px; letter-spacing:-.2px; color: #8E2929; text-transform: uppercase;}
.secHead span{margin:0; color:var(--muted); color: #676767; font-style: italic;}
.secHead p{margin:0; color:var(--muted); text-align: justify; color: #000000; margin-top:20px;}
.clear{clear: both;}
.grid{display:grid; gap:14px}
.cols3{grid-template-columns:repeat(3,1fr)}
.cols2{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){ .cols3{grid-template-columns:repeat(2,1fr)} .cols2{grid-template-columns:1fr} }
@media (max-width:680px){ .cols3{grid-template-columns:1fr} }

.card{border:1px solid var(--line); background: rgba(15,26,47,.55); border-radius: var(--radius); padding:16px; box-shadow: 0 16px 40px rgba(0,0,0,.25);}
.card h3{margin:0; font-size:16px}
.card p{margin:10px 0 0; color:var(--muted); font-size:13px}

.muted{color:var(--muted)}
.list{margin:10px 0 0; padding-left:18px; color:var(--muted)}
.btnRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); font-weight:800; font-size:14px; cursor:pointer;}
.btn:hover{transform: translateY(-1px)}
.btn.primary{border-color: rgba(255,213,74,.40); background: rgba(255,213,74,.10);}

/* ===== Banner (Image Only) ===== */
.banner{position:relative; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);}

/* FULL WIDTH banner class */
.fullBanner{width:100vw; margin-left:50%; transform:translateX(-50%); border-radius:0; box-shadow:none; border-left:none; border-right:none;}
.bannerTrack{display:flex; transition:transform .6s ease; will-change:transform;}
.bannerSlide{min-width:100%; height:700px; overflow:hidden}
.bannerSlide img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:768px){ .bannerSlide{height:260px;} }
@media (max-width:480px){ .bannerSlide{height:220px;} }
.bannerNav{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:center; padding:12px 18px; background:linear-gradient(to top, rgba(0,0,0,.6), transparent);}
.bannerDots{display:flex; gap:8px}
.bannerDot{width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.2); cursor:pointer;}
.bannerDot.active{background:#fff}

.bannerBtns{display:flex; gap:10px}
.bannerBtn{width:40px; height:40px; border:none; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:20px; cursor:pointer;}
.bannerBtn:hover{background:rgba(0,0,0,.8)}

/* ===== OUR PRODUCT HOME PAGE ==== */
/* ===== OUR PRODUCTS (CLEAN) ===== */
.ourProducts{padding:22px 0; margin-bottom: 30px;}
.opHead{margin:6px 0 14px;}
.opHead h2{margin:0 0 8px; font-size:22px; letter-spacing:-.2px; color: #8E2929;}
.opHead p{margin:0; color:var(--muted); max-width:80ch; color: #000000; margin-bottom: 30px;}

/* Grid */
.opGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
@media (max-width:980px){ .opGrid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width:680px){ .opGrid{grid-template-columns: 1fr;} }

/* Card */
.opCard{
  display:block;
  border-radius:20px;
  background:#ffffff; /* sample style */
  color:#000000;
  text-decoration:none;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease;
}
.opCard:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 55px rgba(0,0,0,.35);
}

/* Image: NO crop, NO fixed height */
.opImg{
  position:relative;
  padding:14px 14px 0;
}
.opImg img{
  width:100%;
  height:auto;          /* IMPORTANT */
  display:block;
  border-radius:16px;
}

/* Tag */
.opTag{
  position:absolute;
  top:22px;
  right:22px;
  padding:6px 12px;
  border-radius:999px;
  background:#8E2929;
  color:#ffffff;
  font-size:12px;
}

/* Content */
.opBody{padding:16px 18px 20px;}
.opBody h3{margin:0; font-size:16px;}
.opBody p{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.55;
  opacity:.95;
}
.opLink{
  display:inline-block;
  margin-top:10px;
  font-weight:900;
  font-size:13px;
}

/* ===== About Page Banner ===== */
.aboutBanner{width:100%; margin-bottom: 50px;}
.aboutBanner img{width:100%;}
.aboutBanner .mb{display: none;}
.mvqSection{padding:60px 0; background:#ffffff;}
.mvqHead{text-align:center; margin-bottom:40px;}
.mvqHead h2{font-size:28px; color:#8E2929; margin:0; text-transform:uppercase; letter-spacing:.5px;}
.mvqGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:25px;}
.mvqCard{background:#ffffff; border-radius:18px; padding:30px; box-shadow:0 18px 40px rgba(0,0,0,.08); transition:transform .3s ease, box-shadow .3s ease; border-top:4px solid #8E2929;}
.mvqCard:hover{transform:translateY(-5px); box-shadow:0 22px 50px rgba(0,0,0,.12);}
.mvqCard h3{margin:0 0 15px; color:#8E2929; font-size:20px;}
.mvqCard p{margin:0; color:#333333; font-size:14px; line-height:1.7; text-align:justify;}

/* Responsive */

@media(max-width:992px){
  .mvqGrid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
  .mvqGrid{grid-template-columns:1fr;}
}
/* ===== Product Section ===== */

.productSection{padding:60px 0; background:#ffffff;}
.prodHead{text-align:center; margin-bottom:40px;}
.prodHead h1{margin:0 0 15px; font-size:28px; color:#8E2929; text-transform:uppercase;}
.prodHead p{max-width:700px; margin:0 auto; font-size:14px; line-height:1.7; color:#333;}
.productGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px;}

/* Card */

.productCard{background:#ffffff; border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.08); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease;}
.productCard:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,.12);}
.prodImg img{width:100%; height:auto; display:block;}
.prodBody{padding:20px;}
.prodBody h3{margin:0 0 10px; font-size:18px; color:#8E2929;}
.prodBody p{font-size:14px; color:#444; margin:0 0 15px; line-height:1.6;}
.prodBtn{display:inline-block; padding:10px 18px; background:#8E2929; color:#ffffff; text-decoration:none; border-radius:30px; font-size:13px; font-weight:600; transition:background .3s ease;}
.prodBtn:hover{background:#5f1b1b;}

/* Responsive */

@media(max-width:992px){
  .productGrid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
  .productGrid{grid-template-columns:1fr;}
}














.container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* Hero */
.wireHero{
    background:#8E2929;
    color:#fff;
    text-align:center;
    padding:100px 20px;
}

.wireHero h1{
    font-size:40px;
    margin-bottom:10px;
}

/* Overview */
.wireOverview{
    padding:70px 0;
}

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

.overviewImage img{
    width:100%;
    border-radius:8px;
}

.overviewContent h2{
    margin-bottom:15px;
    color: #8E2929;
}
.overviewContent p{color: #000000;}
/* Sizes */
.wireSizes{
    background:#f5f5f5;
    padding:70px 0;
}

.wireSizes h2{
    text-align:center;
    margin-bottom:40px;
    font-size: 25px;
    color: #8E2929;
}

/*.sizeGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
}*/
.sizeGrid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);  /* 4 boxes per row */
    gap:20px;
}
.sizeCard{
    background:#fff;
    padding:10px;
    text-align:center;
    border-radius:6px;
}

.sizeCard img{
    width:100%;
    object-fit:contain;
}

.sizeCard p{
    font-weight:600; font-size: 20px; color: #000000;
}

/* Features */
.wireFeatures{
    padding:70px 0;
}

.wireFeatures h2{
    text-align:center;
    margin-bottom:40px;
    color: #8E2929;;
}

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

.featureItem{
    background: #8E2929;
    padding:20px;
    text-align:center;
    border-radius:6px;
    color: #ffffff;
}

/* Responsive */

@media(max-width:992px){
    .sizeGrid{
        grid-template-columns:repeat(2, 1fr);
    }
}
@media(max-width:900px){
    .overviewGrid{
        grid-template-columns:1fr;
    }
}

@media(max-width:576px){
    .sizeGrid{
        grid-template-columns:1fr;
    }
}

.tapeSection{padding:60px 0; background:#ffffff;}
.tapeHead{text-align:center; margin-bottom:40px;}
.tapeHead h1{margin:0 0 15px; font-size:28px; color:#8E2929; text-transform:uppercase;}
.tapeHead p{max-width:700px; margin:0 auto; font-size:14px; line-height:1.7; color:#333;}
.tapeGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:25px;}
.tapeCard{background:#ffffff; border-radius:18px; padding:20px; text-align:center; box-shadow:0 18px 40px rgba(0,0,0,.08); transition:transform .3s ease, box-shadow .3s ease;}
.tapeCard:hover{transform:translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,.12);}
.tapeCard img{width:100%; height:auto; border-radius:14px; margin-bottom:15px;}
.tapeCard h3{margin:0 0 10px; font-size:18px; color:#8E2929;}
.tapeCard p{font-size:14px; color:#444; margin:0; line-height:1.6;}

/* Responsive */

@media(max-width:992px){
  .tapeGrid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
  .tapeGrid{grid-template-columns:1fr;}
}

.productDetailSection{
  padding:60px 0;
  background:#ffffff;
}

.productDetailGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:start;
}

.productImage img{
  width:100%;
  border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.1);
}

.productInfo h1{
  margin:0 0 20px;
  font-size:20px;
  color:#8E2929;
  text-transform:uppercase;
}

.productInfo h4{
  margin:25px 0 10px;
  font-size:16px;
  color:#8E2929;
  text-transform:uppercase;
}

.productInfo p{
  font-size:14px;
  line-height:1.7;
  color:#333;
  margin:0;
}

.featureList{
  margin:0;
  padding-left:18px;
  font-size:14px;
  color:#333;
  line-height:1.7;
}

.dimensionTable{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
  font-size:14px;
}

.dimensionTable th,
.dimensionTable td{
  border:1px solid #ddd;
  padding:10px;
  text-align:center;
}

.dimensionTable th{
  background:#8E2929;
  color:#ffffff;
  font-weight:600;
}

/* Responsive */

@media(max-width:992px){
  .productDetailGrid{
    grid-template-columns:1fr;
  }
}

.colorSection{
  margin-top:25px;
}

.colorSelected{
  margin-bottom:15px;
  font-size:15px;
  font-weight:600;
  color: #000000;
}

.colorSelected span{
  text-transform:capitalize;
}

.colorGrid{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
}

.colorBox{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border:1px solid #ddd;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
  background:#f9f9f9;
  transition:all .2s ease;
  color: #000000;
}

.colorBox:hover{
  border-color:#8E2929;
}

.colorBox.active{
  border:2px solid #1e88e5;
  background:#eef6ff;
  color: #000000;
}

.dot{
  width:16px;
  height:16px;
  border-radius:50%;
  display:inline-block;
}

.whiteDot{
  background:#fff;
  border:1px solid #ccc;
}


.contactHero{
    width:100%;
    padding:120px 20px;
    background:linear-gradient(135deg,#111,#8E2929);
    text-align:center;
    color:#fff;
}

.contactHero h1{
    font-size:42px;
}

.contactHero p{
    font-size:18px;
    opacity:.9;
}

/* ===== CONTACT SECTION ===== */

.contactSection{
    padding:0 20px 80px 20px;
}

.contactWrapper{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
}

.contactInfo h2,
.contactForm h2{
  color: #8E2929;
    margin-bottom:30px;
    font-size:28px;
}

.infoItem{
    margin-bottom:25px;
}
.infoItem p{color: #000000;}
.infoItem h4{
    margin-bottom:8px;
    color:#8E2929;
}

/* ===== FORM ===== */

.contactForm form{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.contactForm input,
.contactForm textarea{
    padding:14px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:14px;
}

.contactForm input:focus,
.contactForm textarea:focus{
    outline:none;
    border-color:#8E2929;
}

.contactForm button{
    padding:14px;
    background:#8E2929;
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:16px;
    transition:.3s;
}

.contactForm button:hover{
    background:#6f1f1f;
}

/* ===== MAP ===== */

.mapSection{
    width:100%;
}
.mapSection iframe {width: 100%; height: 500px;}
/* ===== RESPONSIVE ===== */

@media(max-width:992px){
    .contactWrapper{
        grid-template-columns:1fr;
    }
}
/* ===== Corporate Footer ===== */
.corpFooter{background:#f3f3f3; padding:60px 0; color:#333;}
.footerGrid{display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:40px;}
.footerCol h4{margin:0 0 20px; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;}
.footLogo img{max-width:220px; margin-bottom:20px;}
.footText{font-size:14px; line-height:1.6; color:#555;}
.footLinks, .footContact{list-style:none; padding:0; margin:0;}
.footLinks li{margin-bottom:6px;}
.footLinks a{text-decoration:none; color:#333; font-size:14px; transition:all .3s ease;}
.footLinks a:hover{color:#8E2929; padding-left:4px;}
.footContact li{margin-bottom:12px;}
.footer{background: #8E2929; border-top:1px solid var(--line); color: #ffffff; padding:22px 0; color:var(--muted);}
.foot{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.footTitle{font-weight:900; color:var(--text)}
@media (max-width:680px){ .foot{flex-direction:column} }


@media only screen and (min-width: 320px) and (max-width: 479px) {
  .nav{padding: 8px 0 6px;}
  .logo img {width: 180px;}
  .aboutBanner .mb{display: block;}
  .aboutBanner .db{display: none;}
  .secHead .left {float: left; width: 100%;}
  .secHead h2{font-size: 16px;}
  .secHead span{font-size: 12px;}
  .secHead p {font-size: 13px; margin-top:10px;}
  .secHead .right {width: 100%; margin-left: 0; margin-top: 25px;}
  .mvqSection{padding-top: 20px;}
  .mvqHead h2 {font-size: 25px;}
  .mvqCard p{text-align: left; font-size: 13px;}
}
@media only screen and (min-width: 480px) and (max-width: 599px) {
  .nav{padding: 8px 0 6px;}
  .logo img {width: 180px;}
  .aboutBanner .mb{display: block;}
  .aboutBanner .db{display: none;}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
  .nav{padding: 8px 0 6px;}
  .logo img {width: 180px;}
  .aboutBanner .mb{display: block;}
  .aboutBanner .db{display: none;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {

}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .bannerSlide{height:360px;}
}