:root{
  --brand-blue:#1296d8;
  --brand-magenta:#d91b76;
  --brand-yellow:#f2c400;
  --brand-black:#141414;
}
html,body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.py-6{padding-top:4rem;padding-bottom:4rem}
.pt-6{padding-top:4rem}
.object-fit-cover{object-fit:cover}
.text-brand{color:var(--brand-blue)}

.btn-brand{background:var(--brand-blue); color:#fff; border:0;}
.btn-brand:hover{filter:brightness(.95); color:#0e0e0e; border: #cecece 1px solid;}
.btn-outline-brand{border:2px solid var(--brand-blue); color:var(--brand-blue)}
.btn-outline-brand:hover{background:var(--brand-blue); color:#fff}

/* Header */
.topbar{background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.topbar .social a{color:var(--brand-blue);}
.topbar .social a:hover{color:var(--brand-magenta)}
.mainbar{background:#fff}
.logo{height:60px; width:auto}
.navbar .nav-link{font-weight:600; text-transform:uppercase; color:#1f2937; padding:0.9rem 1rem}
.navbar .nav-link:hover{color:var(--brand-blue)}
.navbar .nav-link.active{color:var(--brand-magenta)}
.navbar-toggler{border-color:rgba(0,0,0,.2)}

/* Hero */
.hero-slider .carousel-item{height:68vh;min-height:520px;background:var(--bg) center/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:rgba(10,16,28,.55)}
.hero-card{max-width:760px;background:rgba(21,28,43,.75);border:4px solid rgba(255,255,255,.8);border-radius:24px;padding:2rem;margin-top:3rem;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.hero-card h1{font-weight:800;letter-spacing:.08em}
.section-title .eyebrow{display:inline-block;padding:.25rem .75rem;border:2px solid var(--brand-blue);border-radius:999px;font-size:.8rem;color:var(--brand-blue)}

/* Products & services */
.card-service img{height:160px;object-fit:cover}
.product-card img{height:180px;object-fit:cover}
.features{background:#0f172a}
.features .feature-card{background:#0f172a;border:1px solid rgba(255,255,255,.12);color:#cbd5e1}
.features .feature-card .icon{font-size:1.6rem;color:var(--brand-blue);margin-bottom:.5rem}

/* About ribbon gradient */
.feature-ribbon{display:flex;gap:1rem;flex-wrap:wrap;background:linear-gradient(90deg,var(--brand-blue),var(--brand-magenta));padding:1.25rem 1.5rem;border-radius:40px;color:#fff;box-shadow:0 10px 18px rgba(2,8,20,.12)}
.feature-ribbon .r-item{display:flex;align-items:center;gap:.6rem}
.feature-ribbon .r-item i{font-size:1.6rem}

/* Back to top */
.back-to-top{position:fixed;right:1rem;bottom:1rem;display:none}
.back-to-top.show{display:inline-flex}

/* Hide logo when menu open on mobile */
@media (max-width: 991.98px){.mainbar.menu-open .logo{display:none!important}}


/* ===== Mobile menu redesign (list-style, full-width items) ===== */
@media (max-width: 991.98px){
  .mainbar{ position: relative; }
  .mainbar .navbar-collapse{
    background:#fff;
    border-radius: 14px;
    box-shadow: 0 22px 40px rgba(2,8,20,.12);
    padding: .25rem;
    margin-top: .5rem;
  }
  .mainbar .navbar-nav{
    width:100%;
    margin:0;
  }
  .mainbar .navbar-nav .nav-item{
    border-bottom:1px solid #eef1f4;
  }
  .mainbar .navbar-nav .nav-item:last-child{
    border-bottom:0;
  }
  .mainbar .navbar-nav .nav-link{
    padding: 1rem 1rem;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;      /* remove uppercase on mobile */
    color:#111827;
    text-align: left;          /* left aligned like reference */
  }
  .mainbar .navbar-nav .nav-link.active{
    color: var(--brand-magenta);
    background: #f6f7fb;
    border-radius: 8px;
  }
  /* Make the toggler a bit larger and clearer */
  .navbar-toggler{
    padding:.35rem .55rem;
    border-radius:10px;
  }
  .navbar-toggler:focus{
    box-shadow: 0 0 0 .2rem rgba(18,150,216,.15);
  }

  /* Keep logo hidden while menu open (from earlier fix) */
  .mainbar.menu-open .logo{ display:none!important; }
}

/* Mobile offcanvas: full width, slide from right; keep toggler on right */
@media (max-width: 991.98px){
  .mobile-menu-btn{position:relative; z-index:1051; margin-left:auto;}
  .mobile-offcanvas{width:100vw; max-width:100vw; background:#fff; box-shadow:-16px 0 40px rgba(0,0,0,.15);}
  .mobile-offcanvas .offcanvas-header{padding:1rem 1.25rem;}
  .mobile-offcanvas .mobile-nav-list .list-group-item{
    padding: 1.05rem 1.25rem;
    font-size:1.05rem;
    font-weight:700;
    color:#111827;
    border-color:#eef1f4;
    text-align:left;
  }
  .mobile-offcanvas .mobile-nav-list .list-group-item.active{
    color: var(--brand-magenta);
    background:#f6f7fb;
    border-color:#eef1f4;
  }
  /* Hide brand logo when offcanvas is open (visual clarity) */
  .offcanvas-backdrop.show + .site-header .logo{ display:none !important; }
}

/* Layout: footer at bottom */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; display:block; }
/* Horizontal product scroller */
.product-scroller{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding: .5rem .25rem 1rem; }
.product-scroller .p-item{ flex:0 0 auto; width:220px; scroll-snap-align:start; border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(2,8,20,.08); background:#fff }
.product-scroller .p-item img{ width:100%; height:150px; object-fit:cover; display:block }
.product-scroller .p-item .px{ padding:.6rem .8rem; font-weight:600 }

/* Product card inner carousel sizing */
.product-card-carousel,
.product-card-carousel .carousel-item,
.product-card-carousel img{
  height:180px;
}
.product-card-carousel img{ object-fit:cover; }