/* =====================================================
  RESET & BASE
===================================================== */
:root {
primary: #0a2a66;   /* Deep Blue – trust & security */
secondary: #f4a300; /* Orange – energy & action */
light: #f7f9fc;     /* Light background */
dark: #111111;
}

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

html, body {
width: 100%;
font-family: 'Poppins', Arial, sans-serif;
background: #0a2a66;
color: #e5e7eb;
line-height: 1.6;
}

img {
max-width: 100%;
display: block;
}

a {
text-decoration: none;
color: inherit;
}

ul {
list-style: none;
}

/* =====================================================
  GLOBAL LAYOUT
===================================================== */
.container {
max-width: 1500px;
margin: 80 auto;
padding: 0 40px;
}

section {
padding: 90px 0;
}

/* =====================================================
  HEADER & NAVIGATION
===================================================== */
header {
position: sticky;
top: 0;
z-index: 10001;
background: #020617;
border-bottom: 2px solid rgba(255, 255, 255, 0.295);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}

.header-wrap {
height: 200px;
display: flex;
align-items: center;
justify-content: space-between;
}

.logo img {
height: 200px;
}

.nav-links {
display: flex;
align-items: center;
gap: 28px;
list-style: none;
}

.nav-links li {
position: relative;
}

.nav-links a {
font-size: 20px;
color: #e5e7eb;

}

.nav-links a:hover {
color: #facc15;
}
.main-nav a, .main-nav span {
color: #fff;
margin: 0 6px;
cursor: pointer;
}

.primary-btn {
background: #f5a623;
padding: 10px 22px;
border-radius: 30px;
color: #000;
font-weight: 600;
}

.logo img {
height: 200px;
}

nav ul {
list-style: none;
display: flex;
gap: 24px;
align-items: center;
}

nav a {
position: relative;
color: #e5e7eb;
text-decoration: none;
font-weight: 500;
}

nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 2px;
background: #e11d48;
transition: 0.3s ease;
}

nav a:hover::after {
width: 100%;
}
/* =====================================================
  DROPDOWN (STABLE)
===================================================== */
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 280px;
background: #0b1220;
border: 1px solid rgba(255,255,255,0.08);
padding: 0;
z-index: 999;
}

.dropdown:hover > .dropdown-menu {
display: block;
}

.dropdown-menu li a {
display: block;
padding: 10px 20px;
font-size: 14px;
color: #e5e7eb;
}

.dropdown-menu li a:hover {
background: rgba(255,255,255,0.06);
}

/* Product hierarchy */
.product-menu .menu-title > a {
font-weight: 600;
color: #facc15;
}

.product-menu .submenu a {
padding-left: 36px;
font-size: 13.5px;
color: #cbd5f5;
}

.product-menu .divider {
height: 1px;
background: rgba(255,255,255,0.12);
margin: 8px 15px;
}

/* =====================================================
  PAGE CONTENT
===================================================== */
.page-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
}

h1 {
font-size: 42px;
margin-bottom: 20px;
}

h2 {
font-size: 32px;
margin-bottom: 16px;
}

h3 {
font-size: 22px;
margin-bottom: 12px;
}

p {
margin-bottom: 16px;
color: #cbd5f5;
}

/* =====================================================
  CARDS / BOXES
===================================================== */
.card-grid {
display: grid;
grid.template columns:repeat(3, 1fr);
gap: 30px;
}

.card {
background: #020814;
border: 1px solid rgba(255,255,255,0.08);
padding: 30px;
border-radius: 8px;
}

/* =====================================================
  BUTTONS
===================================================== */
.btn,
button {
display: inline-block;
padding: 12px 28px;
background: #facc15;
color: #020617;
border: none;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}

.btn:hover,
button:hover {
background: #eab308;
}

/* =====================================================
  FOOTER (LOCKED & CLEAN)
===================================================== */
.site-footer {
background: #010314;
padding: 60px 0 20px;
margin-top: 100px;

}

.footer-container {
max-width: 1200px;
margin: auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 50px;
}

.footer-brand img {
max-width: 200px;
margin-bottom: 20px;
}

.footer-brand p {
font-size: 14px;
color: #9ca3af;
}

.site-footer h4 {
font-size: 16px;
color: #ffffff;
margin-bottom: 15px;
}

.site-footer a {
font-size: 14px;
color: #cbd5f5;
display: block;
margin-bottom: 10px;
}

.site-footer a:hover {
color: #facc15;
}

.footer-bottom {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
font-size: 13px;
color: #94a3b8;
}
/* ===== HERO ===== I did It from here for background & page fixing =====*/


.tech-bg {
  background:
    linear-gradient(rgba(2,8,20,0.95), rgba(2,8,20,0.95)),
    url("https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=1600");
  background-size: cover;
  background-position: center;
}


.hero-cta {
margin-top: 30px;
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
}

.hero p {
font-size: 18px;
margin: auto;
max-width: 700px;
}

.hero .btn {
box-shadow: 0 12px 30px rgba(225,29,72,0.4);
}

.hero h1 {
font-size: 42px;
font-weight: 700;
margin-bottom: 15px;
}
.hero-points {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
flex-wrap: wrap;
}

.hero-points span {
background: #020617;
padding: 8px 15px;
border-radius: 4px;
border: 1px solid #1f2933;
}

/* ===================== PRODUCTS PAGE ===================== */

.product-hero{
text-align:center;
padding:120px 20px 80px;
background: linear-gradient(180deg,#020617, #050914);
}

.product-hero h1{
font-size: 44px;
margin-bottom: 10px;
}

.product-hero p{
opacity:0.85;
max-width: 700px;
margin: auto;
}

/* Product Grid */
.product-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);   /* always in one clean row */
gap: 32px;
padding:70px 20px;
max-width: 1200px;
margin: auto;
}

/* Product Card */


.product-card:hover{
transform:translateY(-8px);
}

.product-card img{
width:100%;
border-radius:10px;
object-fit: cover;
height: 190px;
}

.product-card h3{
margin:16px 0 10px;
}

/* Description */
.product-desc{
font-size:14px;
color:#ccc;
min-height:40px;
}

.product-price{
color:#7CFF00;
font-weight:600;
margin:12px 0;
}

.product-cta{
display:inline-block;
background:#f5a623;
color:#000;
padding:12px 24px;
border-radius:30px;
text-decoration:none;
font-weight:600;
}

/* Benefits Section */
.product-benefits{
text-align:center;
padding:60px 10%;
}

.product-benefits ul{
list-style:none;
padding:0;
}

.product-benefits li{
margin:10px 0;
}

.product-card h3 {
margin: 16px 0 10px;
}

.product-card ul {
padding-left: 18px;
margin-bottom: 14px;
}

.product-card li {
line-height: 1.6;
}


/* CTA Section */
.product-cta-section{
padding:60px 10px;
text-align:center;
}

.product-cta-section a{
color:#7CFF00;
}

/* ===== INDUSTRY ===== */
.industry-section {
max-width:1100px;
margin:auto;
padding:80px 20px;
color:white;
padding: 70px 0;
background: radial-gradient(circle at top, #070d1f, #040814);
}

.industry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
margin-top: 40px;

}

.industry-card {
padding: 22px;
text-align: center;
border-radius: 10px;
background: rgba(255,255,255,0.05);
font-weight: 500;
transition: 0.3s ease;

}

.industry-card:hover {
background: rgba(255,255,255,0.09);
transform: translateY(-4px);

}
.industry-hero {
padding:100px 20px;
text-align:center;
color:white;
}

.industry-hero h1 {
font-size:48px;
margin-bottom:10px;
}


.industry-section h2 {
font-size:32px;
margin-bottom:15px;
color:#7CFF00;
}

.industry-section p {
font-size:18px;
color:#ccc;
line-height:1.6;
}

.industry-block {
max-width:1200px;
margin:auto;
padding:80px 20px;
}

.industry-row {
display:flex;
align-items:center;
gap:50px;
margin-bottom:100px;
animation: fadeUp .8s ease forwards;
transform: translateY(40px);
opacity:0;
}

.industry-row.reverse {
flex-direction:row-reverse;
}

.industry-row img {
width:45%;
border-radius:20px;
box-shadow: 0 25px 60px rgba(0,0,0,.7);
}
/* ===== WHY US ===== */
.industry-content {
width:55%;
}

.industry-content h2 {
color:#7CFF00;
font-size:36px;
margin-bottom:15px;
}

.industry-content p {
color:#ddd;
font-size:18px;
line-height:1.7;
}

@keyframes fadeUp{
to{
opacity:1;
transform: translateY(0);
}
}
.highlight{
color:#7CFF00;
font-weight:600;
}
/* ===== WHY us ===== */
.why-arka {
padding: 80px 0;
background: linear-gradient(180deg, #030814, #050c1f);

}
.why-hero {
text-align:center;
padding:120px 20px;
color:white;
}

.why-hero h1{font-size:48px;}

.why-block{
max-width:900px;
margin:80px auto;
text-align:center;
color:#ddd;
}

.why-card {
background: rgba(255,255,255,0.05);
padding: 26px;
border-radius: 12px;
transition: 0.3s ease;
}
.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
max-width:1100px;
margin:auto;
margin-top: 45px;
padding:60px 20px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.why-card h3{color:#7CFF00;}

.why-stats{
display:flex;
justify-content:space-around;
text-align:center;
color:white;
padding:80px 20px;
}

.why-cta{
text-align:center;
padding:100px 20px;
}

.why-card:hover {
background: rgba(255,255,255,0.09);
transform: translateY(-5px);
}

.why-card h4 {
margin-bottom: 10px;
font-size: 1.1rem;
}

.bulk-hero{
text-align:center;
padding:120px 20px;
color:white;
}

.bulk-hero h1{font-size:48px;}

.bulk-intro{
max-width:900px;
margin:60px auto;
text-align:center;
color:#ddd;
}

.bulk-form{
max-width:800px;
margin:60px auto;
background:#020b1f;
padding:40px;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,.6);
}

.form-row{
display:flex;
gap:20px;
margin-bottom:15px;
}

.bulk-form input,
.bulk-form textarea{
width:100%;
padding:12px;
border-radius:8px;
border:none;
background:#06142f;
color:white;
}

.submit-btn{
background:#7CFF00;
border:none;
padding:14px 40px;
border-radius:30px;
font-weight:600;
cursor:pointer;
margin-top:20px;
}

.bulk-benefits{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
max-width:1000px;
margin:80px auto;
padding:20px;
text-align:center;
color:white;
}

.bulk-benefits h3{color:#7CFF00;}

/* ===== Testimonial ===== */

.testimonials {
padding: 80px 0;
background: linear-gradient(180deg, #050c1f, #020814);

}

.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 45px;

}

.testimonial-card {
background: rgba(255,255,255,0.06);
padding: 28px;
border-radius: 12px;
font-size: 0.95rem;
line-height: 1.6;
transition: 0.3s ease;
}

.testimonial-card:hover {
background: rgba(255,255,255,0.1);
transform: translateY(-4px);
}

.testimonial-card h4 {
margin-top: 18px;
font-size: 1rem;

}

.testimonial-card span {
color: #9ca3af;
font-size: 0.85rem;

}
/* ===== CTA ===== */
.cta-section {
padding: 80px 0;
background: linear-gradient(135deg, #020814, #0b1430);
}

.cta-box {
background: rgba(255,255,255,0.05);
border-radius: 14px;
padding: 50px;
display: flex;
flex-wrap: wrap;
gap: 30px;
align-items: center;
justify-content: space-between;
}

.cta-text h2 {
font-size: 2rem;
margin-bottom: 12px;
}

.cta-text p {
color: #cbd5f5;
max-width: 520px;
}

.cta-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
}

.cta-btn {
padding: 14px 26px;
border-radius: 30px;
font-weight: 600;
transition: 0.3s;
}

.cta-btn.primary {
background: #ffb000;
color: #000;
}

.cta-btn.primary:hover {
background: #ffc733;
}

.cta-btn.secondary {
border: 2px solid #ffb000;
color: #ffb000;
}

.cta-btn.secondary:hover {
background: #ffb000;
color: #000;
}


/* ===== CONTACT ===== */
.contact-hero{
text-align:center;
padding:120px 20px;
color:white;
}

.contact-hero h1{font-size:48px;}

.contact-container{
max-width:1100px;
margin:80px auto;
padding:20px;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.contact-info{
color:#ddd;
}
.contact-section {
padding: 90px 0;
background: #020814;
}

.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}

.contact-info h2 {
font-size: 2rem;
margin-bottom: 10px;
}

.contact-info ul {
margin-top: 20px;
}

.contact-info li {
margin-bottom: 10px;
color: #cbd5f5;
}

.contact-form{
background:#020b1f;
padding:40px;
border-radius:16px;
box-shadow: 0 25px 60px rgba(0,0,0,.7);
}

.contact-form input:focus,
.contact-form textarea{
width:100%;
padding:12px;
margin-bottom:15px;
border-radius:8px;
border:none;
background:#06142f;
color:white;
}

.contact-form input,
.contact-form textarea {
width: 100%;
margin-bottom: 14px;
padding: 12px;
border-radius: 8px;
border: none;
}

.contact-form button {
background: #ffb000;
color: #000;
padding: 12px 24px;
border-radius: 30px;
border: none;
font-weight: 600;
cursor: pointer;
}


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

.footer-logo {
width: 490px;
margin-bottom: 10px;
}

.footer-bottom {
text-align: center;
margin-top: 40px;
font-size: 0.85rem;
color: #94a3b8;
}

/* ===== Blog =====*/
.blog-hero{
text-align:center;
padding:120px 20px;
color:white;
}
.blog-page {
background: linear-gradient(135deg, #020b1f, #04142f);
color: #ffffff;
padding: 80px 0;
}

.blog-hero h1{font-size:48px;}

.blog-grid{
max-width:1100px;
margin:80px auto;
padding:20px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}
.blog-page h1,
.blog-page h2,
.blog-page h3,
.blog-page p {
color: #ffffff;
}

.blog-card{
background:#020b1f;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.6);
color:white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
h1 {
font-size: 50px;
}
}
.blog-card img{
width:100%;
height:180px;
object-fit:cover;
}
h2 {
font-size: 40px;
}

.blog-card h3{padding:20px 20px 10px;}
nav ul {
display: none;
position:absolute;
top: 100%;
left: 0;
width: 100%;
background: #020617;
flex-direction: column;
gap: 0;
border-top: 1px solid #1f2933;

.blog-card p{padding:0 20px 20px; color:#ccc;}
}

.read-btn{
display:block;
text-align:center;
background:#7CFF00;
color:black;
padding:12px;
margin:20px;
border-radius:30px;
font-weight:600;
text-decoration:none;
}
nav ul li {
border-bottom: 1px solid #1f2933;
padding: 16px;      
display: flex;
}

nav ul li a {
display: flex;
text-align: center;
padding: 12px 0;
}
nav ul.show {
display: flex;
}

.menu-toggle {
display: flex;
}

/* === FINAL FLOATING BUTTONS  === */
.floating-buttons{
position: fixed !important;
right: 25px !important;
bottom: 25px !important;
display: flex;
flex-direction: column;
gap: 14px;
z-index: 999999;
}

.floating-buttons a{
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #fff;
text-decoration: none;
box-shadow: 0 10px 25px rgba(0,0,0,.35);
transition: transform .2s ease;
}

.floating-buttons .whatsapp{
background:#25D366;
}

.floating-buttons .call{
background:#e11d48;
}

/* ===== FLOATING BUTTONS WITH TOOLTIP ===== */
.floating-buttons {
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
gap: 14px;
z-index: 9999;
}

.float-btn {
position: relative;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #fff;
text-decoration: none;
box-shadow: 0 8px 22px rgba(0,0,0,0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.float-btn:hover {
transform: scale(1.08);
box-shadow: 0 14px 32px rgba(0,0,0,0.55);
}

/* FORCE HIDE MENU ICON ON DESKTOP */
@media (min-width: 992px) {
.menu-toggle {
display: none !important;
}
}

.main-nav {
display: flex;
align-items: center;
justify-content: space-between;

}
.raise-inquiry-btn {
background: #fbbf24;
color: #000;
padding: 10px 22px;
border-radius: 30px;
font-weight: 600;
}

.trust-section {
padding: 60px 0;
background: transparent;
}

.trust-section h2 {
text-align: center;
margin-bottom: 30px;
}

.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 15px;
max-width: 900px;
margin: auto;
font-size: 16px;
}

.spec-box {
margin-top: 30px;
}

.spec-box h2 {
margin-bottom: 5px;
color: #003366;
}

.spec-table {
width: 80%;
border-collapse: collapse;
font-size: 5px;
}

.spec-table th {
background: #003366;
color: white;
padding: 10px;
text-align: left;
}

.spec-table td {
border: 1px solid #ddd;
padding: 10px;
}

.spec-table tr:nth-child(even) {
background: #f5f7fa;
}

/* ==== Whatsapp Btn ====*/
.whatsapp-btn,
.call-btn {
position: fixed;
right: 20px;
z-index: 9999;
padding: 12px 16px;
color: #fff;
font-size: 14px;
border-radius: 50px;
text-decoration: none;
}

.whatsapp-btn {
bottom: 80px;
background-color: #25D366;
}

.call-btn {
bottom: 20px;
background-color: #0a58ca;
}
/*--- Product Slider ---*/

.product-image {
width: 100%;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
overflow: hidden;
}

.product-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

/* thumbnails */
.thumbs {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 8px;
}

.thumbs img {
width: 60px;
height: 60px;
object-fit: contain;
cursor: pointer;
border: 2px solid transparent;
padding: 5px;
background: #fff;
}

.thumbs img:hover {
border-color: #f5b800;
}

/* ===== RESET ===== */
.nav-links ul {
list-style: none;
margin: 0;
padding: 0;
}

/* Hide all submenus */
.submenu,
.submenu ul {
display: none;
position: absolute;
background: #0b1e36;
min-width: 220px;
z-index: 9999;
}

/* First dropdown (Products) */
.nav-links > li {
position: relative;
}

.nav-links > li > ul.submenu {
top: 100%;
left: 0;
}

/* Show Products menu on hover */
.nav-links > li:hover > ul.submenu {
display: block;
}

/* Main category list */
.submenu > li {
position: relative;
}

/* Right side submenus */
.submenu > li > ul {
top: 0;
left: 100%;
}

/* Show right submenu only when its parent is hovered */
.submenu > li:hover > ul {
display: block;
}

/* ===== MENU LOOK ===== */
.submenu {
border-radius: 6px;
box-shadow: 0 0 15px rgba(0,0,0,0.6);
}

.submenu > li > a {
display: block;
padding: 12px 16px;
color: #ffd700;
text-decoration: none;
white-space: nowrap;
background: linear-gradient(180deg,#0d2748,#081a30);
}

/* Hover highlight */
.submenu > li > a:hover {
background: #1b3b6d;
color: #fff;
}

/* Right panel links */
.submenu > li > ul > li > a {
padding: 12px 18px;
color: #fff;
background: linear-gradient(180deg,#081a30,#061425);
}

/* Right panel hover */
.submenu > li > ul > li > a:hover {
background: #102c52;
}

/* Arrow icon ▸ */
.submenu > li > a::after {
content: "▸";
float: right;
color: gold;
}

.cart-title {
  text-align:center;
  color:white;
  margin:40px 0;
}

.cart-container {
  width:80%;
  margin:auto;
  background:#0b2344;
  border-radius:8px;
  padding:20px;
}

.cart-item {
  display:grid;
  grid-template-columns: 3fr 1fr 2fr 1fr;
  align-items:center;
  padding:15px;
  border-bottom:1px solid rgba(255,255,255,0.2);
  color:white;
}

.cart-qty button {
  background:#ffcc00;
  border:none;
  padding:5px 10px;
  cursor:pointer;
}

.cart-summary {
  width:80%;
  margin:20px auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:white;
  font-size:20px;
}

.checkout-btn {
  background:#ffcc00;
  padding:12px 30px;
  text-decoration:none;
  color:black;
  font-weight:bold;
  border-radius:5px;
}
.checkout-title {
  text-align:center;
  color:white;
  margin:40px 0;
}

.checkout-wrapper {
  width:85%;
  margin:auto;
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:30px;
}

.checkout-left, .checkout-right {
  background:#0b2344;
  padding:25px;
  border-radius:8px;
  color:white;
}

.checkout-left input,
.checkout-left textarea,
.checkout-left select {
  width:100%;
  padding:12px;
  margin:10px 0;
  border:none;
  border-radius:5px;
}

.checkout-left textarea {
  height:80px;
}

.summary-item, .summary-total {
  display:flex;
  justify-content:space-between;
  padding:10px 0;
}

.summary-total {
  font-size:20px;
  font-weight:bold;
}

.place-order {
  width:100%;
  padding:15px;
  background:#ffcc00;
  border:none;
  margin-top:20px;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
}
.cart-link {
  color: white;
  text-decoration: none;
  position: relative;
  padding: 8px 15px;
}

.cart-link i {
  font-size: 18px;
  margin-right: 5px;
}

.cart-count {
  background: #ffcc00;
  color: black;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 5px;
}

.total{
  margin-top: 20px;
  padding: 15px 20px;
  border-top: 2px solid #f7c600;
  font-size: 22px;
  display: flex;
  justify-content: flex-end;
  font-weight: bold;
  
}
/* FORCE SHOW BACKGROUNDS */
.trust-section.tech-bg,
.products-section.tech-bg,

.hero {
  background-attachment: fixed;
  padding: 120px 20px;
  text-align: center;
  color: white;
}
/* ===== ARKA INDIA – FACTORY BACKGROUNDS ===== */

.hero {
  background:
    linear-gradient(rgba(10,42,102,0.85), rgba(10,42,102,0.85)),
    url("https://images.pexels.com/photos/159298/cables-wire-cable-wire-harness-159298.jpeg?auto=compress&cs=tinysrgb&w=1600") !important;
  background-size: cover !important;
  background-position: center !important;
}

.trust-section.tech-bg,
.products-section.tech-bg {
  background:
    linear-gradient(rgba(2,8,20,0.9), rgba(2,8,20,0.9)),
    url("https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&w=1600") !important;
  background-size: cover !important;
  background-position: center !important;
}

.product-card {
  background:
    linear-gradient(rgba(2,11,31,0.95), rgba(2,11,31,0.95)),
    url("https://images.pexels.com/photos/442150/pexels-photo-442150.jpeg?auto=compress&cs=tinysrgb&w=1600") !important;
  background-size: cover !important;
  background-position: center !important;
}
/* ===== HOUSE WIRES – CABLE FACTORY BACKGROUND ===== */

.product-hero,
.house-wires-hero {
  background:
    linear-gradient(rgba(2,8,25,0.80), rgba(2,8,25,0.90)),
    url("https://images.pexels.com/photos/442150/pexels-photo-442150.jpeg?auto=compress&cs=tinysrgb&w=1600") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Text clarity */
.product-hero h1,
.product-hero p {
  color: #ffffff !important;
  text-shadow: 0 6px 20px rgba(0,0,0,0.85);
}


/* ===============================
   GLOBAL CABLE INDUSTRY BACKGROUND
   Applies to ALL pages
================================ */

body {
  background:
    linear-gradient(rgba(3,12,35,0.88), rgba(3,12,35,0.95)),
    url("https://images.pexels.com/photos/442150/pexels-photo-442150.jpeg?auto=compress&cs=tinysrgb&w=1600") !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

/* Page sections must be transparent so background shows */
.hero,
.products-section,
.product-hero,
.industry-section,
.why-arka,
.testimonials,
.cta-section,
.contact-section {
  background: transparent !important;
}

/* Make cards readable */
.product-card,
.testimonial-card,
.why-card,
.industry-card,
.cart-container,
.checkout-left,
.checkout-right {
  background: rgba(2,10,30,0.85) !important;
  backdrop-filter: blur(2px);
}

/* Improve headings contrast */
h1, h2, h3, p {
  text-shadow: 0 4px 14px rgba(0,0,0,0.8);
}


/* ===============================
   GLOBAL CABLE FACTORY BACKGROUND
================================ */
body {
  background:
    linear-gradient(rgba(3,12,35,0.88), rgba(3,12,35,0.95)),
    url("https://images.unsplash.com/photo-1581092919530-2f6c2f1f5a1b?auto=format&fit=crop&w=1600&q=80");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Transparent sections so background shows */
.hero,
.products-section,
.product-hero,
.industry-section,
.why-arka,
.testimonials,
.cta-section,
.contact-section {
  background: transparent !important;
}

/* Cards readable */
.product-card,
.testimonial-card,
.why-card,
.industry-card,
.cart-container,
.checkout-left,
.checkout-right {
  background: rgba(2,10,30,0.88);
}

/* ===============================
   FOOTER BACKGROUND
================================ */
.site-footer {
  background:
    linear-gradient(rgba(1,4,15,0.95), rgba(1,4,15,0.98)),
    url("https://images.unsplash.com/photo-1581090700227-3f89c8f55a06?auto=format&fit=crop&w=1600&q=80");
  background-size: cover;
  background-position: center;
  border-top: 3px solid #f5b800;
}

.footer-bottom {
  background: rgba(0,0,0,0.6);
}