:root{
  --brand-red:#8B0E14; /* Dark Red */
  --brand-blue:#0B214A; /* Dark Blue */
  --bg:#ffffff;
  --text:#1c1f24;
  --muted:#5d6470;
  --soft:#f5f7fb;
  --card:#ffffff;
  --border:#E6E8EF;
  --accent:#0B214A;
  --radius:16px;
  --shadow:0 10px 30px rgba(11,33,74,0.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}
a{color:var(--brand-blue);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92vw);margin:0 auto}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:40px;height:40px;border-radius:12px;background:var(--brand-red);box-shadow:var(--shadow)}
.brand h1{font-size:18px;margin:0;font-weight:700;letter-spacing:.2px}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{font-weight:600;color:var(--text);transition:all 0.3s ease;position:relative;padding:8px 12px;border-radius:8px}
nav a:hover{background:var(--soft);color:var(--brand-blue);transform:translateY(-2px)}
nav a.active{background:var(--brand-blue);color:#fff;box-shadow:0 4px 12px rgba(11,33,74,0.3)}
.btn{padding:10px;border-radius:10px;border:1px solid var(--brand-blue);font-weight:600;transition:all 0.3s ease}
.btn.primary{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}
.btn.primary:hover{background:var(--brand-red);border-color:var(--brand-red);transform:translateY(-2px);box-shadow:0 4px 12px rgba(139,14,20,0.3)}
.btn.ghost{background:#fff;color:var(--brand-blue); border-color: #fff;}
.btn.ghost:hover{background:var(--brand-blue);color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(11,33,74,0.3)}

/* Hero */
.hero{background:linear-gradient(180deg,#f8faff,transparent 40%),
       radial-gradient(800px 300px at 70% 0%, rgba(11,33,74,.08), transparent 60%),
       url('../../assets/images/banner-12.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding:0;
      min-height: 600px;
      height: 80vh;
      position: relative;
      z-index: 1;
      overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, rgba(25, 48, 90, 0.55) 0%, rgba(11,33,74,.35) 40%, rgba(11,33,74,.15) 100%)}
.hero-wrap{display:grid;grid-template-columns:1.15fr 0.85fr;gap:28px;align-items:center;width:100%;position:absolute;top:35%;left: 46%;transform:translate(-50%, -50%);max-width:1200px;padding:0 4vw;}
.eyebrow{color:var(--brand-red);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.hero h2{font-size:40px;line-height:1.1;margin:10px 0 14px;color:var(--brand-blue)}
.hero p{color:#fff;font-size:18px;margin:0 0 18px}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}

/* Sections */
section{padding:36px 0;position:relative;z-index:2}
/* About section */
#about .about-wrap{display:grid;grid-template-columns:0.8fr 1.2fr;gap:20px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
#about .about-media{display:flex;justify-content:center}
#about .about-media img{max-width:350px;width:100%;height:auto}
#about .about-content h3{margin:0 0 8px;color:var(--brand-blue)}
#about ul{margin:10px 0 0 18px}
#about ul li{margin:6px 0;list-style:none;position:relative;padding-left:18px}
#about ul li:before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--brand-blue)}
#about .about-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#about .badge{background:var(--soft);border:1px solid var(--border);color:var(--brand-blue);padding:6px 10px;border-radius:999px;font-weight:600;font-size:12px}

/* Mobile Phone Distribution section alignment */
#distribution {
  margin-top: 0;
  padding-top: 60px;
}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.section-head h3{margin:0;color:var(--brand-blue)}
.sub{color:var(--muted);font-size:16px}

/* Product grid */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
.chip{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;font-weight:600;cursor:pointer}
.chip.active{border-color:var(--brand-blue);color:#fff;background:var(--brand-blue)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 3;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:4/3;background:linear-gradient(135deg,#e9eefb,#f6f7fb)}
.card .body{padding:14px}
.label{font-size:12px;font-weight:700;color:var(--brand-red);text-transform:uppercase;letter-spacing:.12em}
.title{font-weight:700;margin:6px 0 4px}
.meta{font-size:14px;color:var(--muted)}
.cta-row{margin-top:auto;padding:14px;border-top:1px solid var(--border);display:flex;gap:10px}
.tag{font-size:12px;background:var(--soft);border:1px solid var(--border);padding:4px 8px;border-radius:999px}

/* Two 20% sections */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.tile h4{margin:0 0 8px}
.check{display:flex;gap:10px;align-items:flex-start;margin:8px 0;color:var(--muted)}

/* Inquiry */
.form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row + .row{margin-top:10px}
label{font-size:13px;font-weight:600;color:var(--brand-blue)}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff}
textarea{min-height:120px}

/* Footer */
footer{background:#0b214a;color:#dfe7ff;margin-top:36px}
.foot{display:grid;grid-template-columns:2fr 1fr;gap:24px;padding:24px 0}
footer a{color:#fff}

/* Mobile Navigation */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--brand-blue);
  padding: 8px;
  position: relative;
}

.nav-toggle .close {
  display: none;
}

.nav-toggle.active .hamburger {
  display: none;
}

.nav-toggle.active .close {
  display: inline;
}


@media (max-width: 980px){
  .hero-wrap{grid-template-columns:1fr}
  .card{grid-column:span 6}
  .tiles{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  
  /* Hero card visibility on tablet */
  .hero-card {
    margin-top: 20px;
    order: 2;
  }
  
  /* Mobile Navigation */
  .nav-toggle {
    display: block;
  }
  
  nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    flex-direction: column;
    padding: 12px; /* reduced spacing */
    border-top: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 100;
  }
  
  nav ul.active {
    display: flex;
  }
  
  nav ul li { margin: 4px 0; }
  
  nav ul li a {
    display: block;
    padding: 10px 14px; /* tighter item padding */
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  
  nav ul li a:hover {
    background: var(--brand-blue);
    color: #fff;
    transform: translateX(5px);
  }
  
  nav ul li a.active {
    background: var(--brand-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(11,33,74,0.3);
  }
  
  /* Hero adjustments for tablet */
  .hero {
    height: 100vh;
    min-height: 600px;
    padding: 0;
  }
  
  .hero-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .hero h2 {
    font-size: 32px;
  }
  
  .hero p {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  /* Mobile Hero */
      body{overflow-x:hidden}
  .hero {
    height: 100vh!important;
    min-height: 70vh!important;
    max-height: none;
    padding: 0;
    background-size: cover;
    background-position: center center;
    position: relative;
    z-index: 1;
    margin-bottom: 40px;
  }

  .nav ul{
    gap: 0px!important;
  }
  .hero::before{background:linear-gradient(180deg, rgba(11,33,74,.65) 0%, rgba(11,33,74,.45) 45%, rgba(11,33,74,.20) 100%)}
  
  .footer-content{
    padding-top: 20px;
  }

  .footer-copyright{
    text-align: center;
    font-size: 15px;
  }

  .sub{
    padding-bottom: 20px;
  }

  .hero-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 20px;
    padding: 0 10px;
  }
  
  .hero h2 {
    font-size: 28px;
    line-height: 1.2;
  }
  
  .hero p {
    font-size: 17px!important;
    margin-bottom: 16px;
    color: #000;
  }
  
  .hero .actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .hero .actions .btn {
    width: 100%;
    text-align: center;
    padding: 12px 20px;
  }
  
  /* Mobile Hero Card */
  .hero-card {
    margin-top: 25px;
    order: 2;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    width: 100%;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .hero-card strong {
    display: block;
    font-size: 16px;
    margin-bottom: 12px;
    color: var(--brand-blue);
  }
  
  .hero-card ul {
    margin: 0 0 15px 0;
    padding-left: 20px;
  }
  
  .hero-card li {
    margin: 5px 0;
    font-size: 14px;
  }
  
  /* Mobile Product Grid */
  #distribution {
    margin-top: 0;
    padding-top: 40px;
    background: var(--bg);
    position: relative;
    z-index: 2;
  }
  /* About: stack on mobile */
  #about .about-wrap{grid-template-columns:1fr}
  #about .about-media{display:flex;justify-content:center;margin-bottom:8px}
  #about .about-content{text-align:center}
  #about ul{margin-left:0}
  
  .card {
    grid-column: span 12;
    margin-bottom: 16px;
  }
      /* Constrain product images to fixed ratio on mobile only */
      .grid .card .thumb{position:relative;overflow:hidden;border-radius:12px;background:#fff}
      /* Fallback ratio for Safari/older browsers */
      .grid .card .thumb::before{content:"";display:block;padding-top:75%}
      .grid .card .thumb img{
        position:absolute!important;
        left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
        width:auto!important;height:auto!important;
        max-width:calc(100% - 16px)!important;max-height:calc(100% - 16px)!important;
        object-fit:contain!important
      }
  
  .filters {
    justify-content: center;
    margin: 16px 0;
  }
  
  .chip {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  /* Mobile Form */
  .form {
    padding: 16px;
  }
  
  .row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  input, select, textarea {
    padding: 14px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Mobile Footer */
  .foot {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 16px;
  }
      /* Add comfortable spacing before footer on mobile */
      footer{margin-top:48px}
  
  .foot div:last-child {
    text-align: center;
  }

  .eyebrow, .hero h2{
    color: #fff!important;
    text-align: center!important;
  }
  .hero p{
    color: #fff!important;
    text-align: center!important;
  }
}

@media (max-width: 560px){
  .card{grid-column:span 12}
  
  /* Extra small mobile adjustments */
  .container {
    width: 95vw;
    padding: 0 10px;
  }
  
  .hero {
    height: 100vh;
    min-height: 60vh;
    max-height: none;
    padding: 0;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
  }
  
  .hero-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 5px;
  }
  
  .hero h2 {
    font-size: 24px;
    line-height: 1.1;
  }
  
  .hero p {
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  /* Small Mobile Hero Card */
  .hero-card {
    margin-top: 20px;
    padding: 15px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .hero-card strong {
    font-size: 15px;
    margin-bottom: 10px;
  }
  
  .hero-card li {
    font-size: 13px;
    margin: 4px 0;
  }
  
  /* Hero section bottom spacing */
  .hero .sub {
    margin-bottom: 30px !important;
  }
  
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .section-head .btn {
    width: 100%;
    text-align: center;
  }
  
  .tile {
    padding: 16px;
  }
  
  .check {
    font-size: 14px;
  }
  
  /* Mobile navigation adjustments */
  .nav {
    padding: 10px 0;
  }
  
  .brand h1 {
    font-size: 16px;
  }
  
  .logo {
    width: 32px;
    height: 32px;
  }
  .hero{
    background-image: url('../../assets/images/mobile-banner-2.png')!important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 1024px;
    position: relative;
    z-index: 1;
  }
}



.tag{

  padding: 13px 8px;

}

.btn:hover{
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

.chip:hover{
  background: var(--brand-blue);
  color: #fff;
  border-color: var(--brand-blue);
}

.rc-anchor-normal-footer{
  display: none!important;
}