/* ==========================
 PRINTING BOX THEME CSS (print.css)
========================== */

:root{
  --accent:#ff6b6b;
  --accent-2:#ffdd57;
  --muted:#6c757d;
  --card-bg: linear-gradient(135deg,#fff 0%, #f7f9fc 100%);
}

body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  background: linear-gradient(180deg,#f3f7fb 0%, #ffffff 100%);
  color:#222;
  padding-top: 80px; 
}

/* Hero */
.hero{
  padding:6rem 0 4rem;
}
.badge-custom{
  background:var(--accent);
  color:white;
  border-radius:999px;
  padding:.35rem .8rem;
  font-weight:600;
  font-size:.9rem;
}

.ribbon{
  display:inline-block;
  padding:.4rem .9rem;
  border-radius:999px;
  background: linear-gradient(90deg,var(--accent), #ff8e8e);
  color:white;
  font-weight:700;
  box-shadow:0 6px 18px rgba(255,107,107,0.18);
}

.product-card{
  background:var(--card-bg);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:0 10px 30px rgba(20,30,50,0.06);
  transition: all .25s ease;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(20,30,50,0.08);
}

/* Boxes */
.boxes{ display:flex; gap:1rem; flex-wrap:wrap; }
.box-item{ flex:1 1 calc(33.333% - 1rem); min-width:220px; }
.box-mock{
  border-radius:.8rem;
  padding:1rem;
  height:200px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,250,0.6));
  border:1px dashed rgba(0,0,0,0.06);
}

/* Flex banner */
.flex-banner{
  background: linear-gradient(90deg, rgba(255,221,87,0.13), rgba(255,107,107,0.06));
  border-radius:.8rem;
  padding:1.25rem;
  display:flex;
  align-items:center;
  gap:1rem;
}

/* CTA */
.btn-accent{
  background: linear-gradient(90deg,var(--accent),#ff8e8e);
  border:0;
  color:white;
  font-weight:700;
  padding:.6rem 1.05rem;
  border-radius:.6rem;
}


/* Responsive */
@media (max-width:991px){ .box-item{ flex:1 1 48%; } }
@media (max-width:575px){
  .box-item{ flex:1 1 100%; }
  .hero{ padding:3.5rem 0 2rem; }
}

.slider-bg {
  height: 90vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.slider-bg .shade {
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
}

.carousel-caption {
  bottom: 25%;
}
.carousel-caption h1 {
  font-size: 3rem;
  font-weight: 700;
}
.pack-card {
  background: linear-gradient(145deg, #ffffff, #f0f4ff);
  border-radius: 16px;
  border: 1px solid #eee;
  transition: .3s;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.pack-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.1);
}

.hero-fullscreen { position: relative; min-height: 70vh; color: #fff; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(0.5); }
.hero-content { position: relative; z-index: 1; padding: 4rem 0; }

/* Enable dropdown on hover for desktop */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block !important;
        margin-top: 0;
    }
}

/* simple CSS masonry */
.masonry { column-count: 3; column-gap: 1rem; }
.masonry-item { display: inline-block; width:100%; margin-bottom:1rem; break-inside: avoid; }
@media (max-width:991px){ .masonry{ column-count:2 } }
@media (max-width:575px){ .masonry{ column-count:1 } }
.filter-btn.active { background:#ff6b6b; color:#fff; border-color:#ff6b6b; }


/* Services feature two-column layout */
.services-list { border-radius: 12px; background: linear-gradient(180deg,#fff,#fbfbff); }
.services-list h5 { font-size: 1.05rem; }

/* list items */
.service-item {
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .18s ease;
  display: block;
}
.service-item .svc-icon img { display:block; }

.service-item:hover {
  transform: translateY(-4px);
  background: rgba(255,107,107,0.04);
  box-shadow: 0 8px 20px rgba(20,30,50,0.04);
}

.service-item.active {
  background: linear-gradient(90deg, rgba(255,107,107,0.08), rgba(255,141,141,0.03));
  border-left: 4px solid #ff6b6b;
  padding-left: 10px;
}

/* content panels */
.service-detail { min-height: 360px; border-radius: 12px; background: #fff; }
.svc-panel { display:none; }
.svc-panel.active { display:block; }

/* responsive tweaks */
@media (max-width: 991px) {
  .services-list { margin-bottom: 1rem; }
  .service-item { display:flex; gap:.75rem; }
}

/* Footer */
footer{
padding:3rem 0;
color:var(--muted);
}

.footer-section {
  background: #0f172a!important;
  border-top: 5px solid #ff6b6b!important;
}

.footer-link {
  color: #cbd5e1!important;
  text-decoration: none!important;
}
.footer-link:hover {
  color: #ff6b6b!important;
}
.footer-section i {
  color: #ff6b6b!important;
}


/* Hero feature styles */
.hero-feature { position: relative; overflow: hidden; }
.hero-bg-gradient {
  position:absolute; inset:0;
  background: linear-gradient(120deg, #4f46e5 0%, #6d28d9 45%, #0ea5a6 100%);
  opacity: 0.98;
  z-index:0;
}

/* content above bg */
.hero-feature .container, .hero-feature .row { position: relative; z-index: 1; }

/* bullets */
.hero-benefits li { margin-bottom: .9rem; font-size:1.05rem; display:flex; align-items:center; gap:.75rem; }
.tick {
  display:inline-grid; place-items:center; width:34px; height:34px; background:rgba(255,255,255,0.15);
  border-radius:50%; color:#fff; font-weight:700; flex:0 0 34px;
}
.text-highlight { color:#ffd166; }

/* CTA buttons */
.btn-cta { background: linear-gradient(90deg,#ff7a59,#ff4d6d); border:0; box-shadow:0 8px 30px rgba(0,0,0,0.15); }

/* Video card */
.video-card { border-radius:14px; overflow:hidden; background:#111; }
.video-card img { display:block; object-fit:cover; height:100%; }
.play-btn {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:80px; height:80px; border-radius:50%; border:0; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,0.35); cursor:pointer;
}

/* responsive */
@media (max-width:991px){
  .display-4 { font-size:2rem; }
  .play-btn { width:64px; height:64px; }
}