/* ================= GLOBAL FIX ================= */
:root{
  --primary:#00c6ff;
  --secondary:#0072ff;
  --dark:#00264D;
  --card:#111111;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  font-family:'Inter',sans-serif;
  line-height:1.6;
  background:#0b1420;
  color:#cbd5e1;
}

/* ================= GLOBAL TYPO SAFETY ================= */
img{
  max-width:100%;
  height:auto;
}

/* ================= NAVBAR ================= */
.navbar{
  background:transparent;
  padding:15px 0;
  transition:all 0.4s ease;
  z-index:1100;
}

.nav-link{
  color:#cbd5e1;
  font-weight:500;
  padding:8px 0;
  transition:color 0.3s ease;
  position:relative;
}

.nav-link:hover{
  color:#2563eb !important;
}

/* FIX: missing hover underline width */
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  background:#2563eb;
  transition:width 0.3s ease;
}

.nav-link:hover::after{
  width:100%;
}

/* ================= BRAND ================= */
.brand-logo{
  width:55px;
  height:55px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid #3b82f6;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.brand-main{
  font-size:22px;
  font-weight:700;
  color:#fff;
}

.brand-sub{
  font-size:12px;
  color:#cbd5e1;
  letter-spacing:2px;
}

/* ================= HERO ================= */
.hero-premium{
  height:100vh;
  min-height:600px;
  background:url("../images/industrial-lpg-supply-banner.png") center/cover no-repeat;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-premium::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(10,30,60,.85), rgba(30,70,120,.65));
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:780px;
  padding:0 15px;
}

.hero-content h1{
  font-size:clamp(28px,5vw,64px);
  font-weight:800;
  color:white;
  line-height:1.2;
}

/* ================= BUTTONS ================= */
.btn-gradient,
.btn-primary-hero,
.btn-outline-hero{
  max-width:100%;
}

/* ================= STATS ================= */
#stats{
  background:#1e293b;
  padding:60px 0;
}

.stat-card,
.service-card{
  background:linear-gradient(145deg,#14409e,#0f172a);
  padding:40px;
  border-radius:15px;
  transition:0.4s;
  border:1px solid rgba(255,255,255,0.05);
  overflow:hidden;
}

.stat-card:hover,
.service-card:hover{
  transform:translateY(-8px);
  border-color:var(--primary);
}

/* ================= WHY / EXPERIENCE ================= */
.experience-box{
  background:linear-gradient(145deg,#111827,#0f172a);
  border:1px solid rgba(59,130,246,0.2);
  border-radius:14px;
  padding:80px 40px;
  text-align:center;
  transition:0.4s;
  overflow:hidden;
  max-width:100%;
}

.experience-content h1{
  font-size:60px;
  color:#3b82f6;
}

/* ================= SERVICES ================= */
.services-section{
  background:#1e293b;
  padding:100px 0;
}

/* ================= WHY SECTION ================= */
.why-section{
  background:linear-gradient(180deg,#0f1f33,#091423);
  padding:100px 0;
}

/* FIX: prevent feature row overflow */
.feature-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

/* ================= CTA ================= */
.cta-section{
  position:relative;
  background:url("../images/bulk-lpg-supply-pakistan.png") center/cover no-repeat;
  padding:100px 20px;
  text-align:center;
  color:white;
}

.cta-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

.cta-section .container{
  position:relative;
  z-index:2;
}

/* ================= FORMS ================= */
input, textarea{
  max-width:100%;
}

/* ================= CONTACT ================= */
.contact-form-box{
  background:linear-gradient(145deg,#111827,#0b1220);
  padding:40px;
  border-radius:12px;
}

/* ================= FOOTER SAFETY ================= */
.footer-container{
  width:90%;
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:60px;
}

/* ================= UNIVERSAL OVERFLOW PROTECTION ================= */
section,
.container,
.hero-premium,
.why-section,
.services-section,
.cta-section{
  overflow:hidden;
}

/* ================= MOBILE SAFETY (IMPORTANT BUT CLEAN) ================= */
@media (max-width:768px){

  .hero-content h1{
    font-size:36px;
  }

  .experience-box{
    padding:50px 20px;
  }

  .footer-container{
    grid-template-columns:1fr;
    gap:30px;
  }

  .stat-card,
  .service-card{
    padding:25px;
  }
}