/* style.css - QuickPrint demo */
:root{
  --bg: #071226;
  --panel: #0b1b2a;
  --accent: #00A8E8;
  --muted: rgba(255,255,255,0.45);
  --card: #072033;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#031226 0%, #081a28 100%);color:#e6f6ff;line-height:1.4}
.container{max-width:1200px;margin:0 auto;padding:0 18px}
.site-header{position:sticky;top:0;background:linear-gradient(90deg, rgba(2,10,20,0.75), rgba(2,10,20,0.6));backdrop-filter:blur(6px);z-index:60;box-shadow:0 6px 20px rgba(0,0,0,0.6)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:700;color:var(--accent);text-decoration:none;font-size:20px}
.logo img{height: 70px;}
.main-nav{display:flex;gap:18px;align-items:center}
.main-nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:6px;transition:all .25s}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,0.03)}
.nav-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:22px}

/* Hero */
/* Hero / Slider */
.hero{padding:18px 0 24px}
.slider{position:relative;height:360px;border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.5)}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.02);transition:opacity .8s ease,transform .8s ease;display:flex;align-items:flex-end}
.slide.visible{opacity:1;transform:none}
.slide-content{background:linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 80%);padding:24px;color:#fff;width:100%}
.slide-content h1{margin:0 0 8px;font-size:28px}
.slide-content p{margin:0 0 12px;color:var(--muted)}
.slide a{ background-color: var(--muted); color: #000000; padding: 10px 20px; text-decoration: none; border-radius: 4px;}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.32);border:0;color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer}
.slider-nav.prev{left:12px}
.slider-nav.next{right:12px}
.slider-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px}
.slider-dots button{width:10px;height:10px;border-radius:50%;border:0;opacity:0.5;background:#fff;cursor:pointer}
.slider-dots button.active{opacity:1;transform:scale(1.2)}

/* cards-grid specific */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card-icon{width:48px;height:48px;border-radius:8px;background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.card strong{display:block;margin-bottom:6px; line-height: 1.7; }

/* Services grid */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);min-height:120px;transition:transform .35s,box-shadow .35s;opacity:0;transform:translateY(12px);animation:fadeUp .6s forwards}
.card:hover{transform:translateY(-6px);box-shadow: 0 8px 16px rgba(0, 168, 232, 0.4);}
.services .card strong{ font-size: 20px; line-height: 1.4;}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* Align icon and heading perfectly in one row */
.icon-row {display: flex;align-items: top; gap: 20px;margin-bottom: 6px;}
.icon-row i {color: #00A8E8;font-size: 32px;line-height: 1;flex-shrink: 0;}
.icon-row strong {font-size: 18px;font-weight: 600;line-height: 1;color: #fff;display: flex;align-items: center; }
.card .muted.small {display: block;margin-top: 4px;line-height: 1.4;color: rgba(255,255,255,0.8); }
/* Responsive fix */
@media (max-width:700px) {.icon-row {align-items: flex-start;}}



/* Products grid */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0}
.product{background:linear-gradient(180deg, rgba(0,20,36,0.45), rgba(0,10,20,0.2));padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);text-align:left;display:flex;flex-direction:column;gap:10px}
.product .img{height:250px;background:#062433;border-radius:8px;background-size:cover;background-position:center}
.product:hover{transform:translateY(-6px);box-shadow: 0 8px 16px rgba(0, 168, 232, 0.4);}
.product h3{margin:0;font-size:14px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.price{font-weight:700;color:var(--accent)}
.small{font-size:13px;padding:7px 10px}
.cart-badge{background:var(--accent);color:#012;display:inline-block;padding:6px 8px;border-radius:6px;font-weight:700}


/* Sections */
.section{padding:36px 0}
.section h2{margin:0 0 12px;color:#fff; }
.muted{color:var(--muted)}

/* Footer */
/* Make the layout fill full screen height */
html, body {height: 100%;margin: 0;display: flex;flex-direction: column;}
/* Main container grows to push footer down */
main {flex: 1;}
.site-footer {background: #000; /* black for smaller screens */color: #fff;padding: 20px 0;text-align: center;border-top: 1px solid rgba(255,255,255,0.1);}
.site-footer ul li{ list-style-type: none; text-align: left;}
.site-footer ul li a { color: var(--muted); text-align: center;}
.site-footer ul li a:hover { color: #00A8E8; text-align: center; text-decoration: none;}

footer ul {list-style: none;padding: 0;margin-top: 8px; /* small gap between heading and list */}
footer ul li {margin: 4px 0;}
footer ul li a {text-decoration: none;color: inherit;}
.footer-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 20px;padding: 20px;text-align: left;}
.footer-grid a {color: #00A8E8;text-decoration: none;}
.footer-grid a:hover {text-decoration: underline;}
.footer-grid img{height: 60px;}
.footer-grid p { padding-right: 10px;}
.copyright {padding-top: 10px;border-top: 1px solid rgba(255,255,255,0.1);font-size: 14px;}
.copyright:hover{color: #00A8E8;}
/* Responsive footer color and layout for large screens */
@media (min-width: 992px) {.site-footer {background: linear-gradient(180deg, rgba(2,8,12,0.6), rgba(0,0,0,0.85));position: static; /* normal floating */}}

/* For small screens — keep it visible at bottom if short page */
@media (max-height: 700px) {.site-footer {position: fixed;bottom: 0;left: 0;right: 0;}}

/* Small */
.btn.small{padding:7px 10px;font-size:13px;}

/* Utility */
.center{text-align:center}

/* Responsive */
@media(max-width:980px){
  .products{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .nav-toggle{display:block}
  .main-nav{position:fixed;right:0;top:64px;background:var(--panel);height:calc(100vh - 64px);width:220px;flex-direction:column;padding:20px;transform:translateX(120%);transition:transform .28s;border-left:1px solid rgba(255,255,255,0.02)}
  .main-nav.open{transform:none}
  .products{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .hero-card{flex-direction:column;align-items:flex-start}
}

/* Cart table */
.table{width:100%;border-collapse:collapse;background:transparent}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,0.03);text-align:left}
.form-row{display:flex;gap:10px}
.input, textarea{width:100%;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#eaf7ff}
textarea{min-height:100px;resize:vertical}
.notice{background:rgba(0,168,232,0.06);padding:8px;border-radius:6px;color:var(--accent);font-weight:600}

/* About */

.about {
  padding: 80px 20px;
  /* background: #fafafa; */
  text-align: center;
}

.about h2 {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #007bff;
}

.about-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 60px;
}

.about-content {
  text-align: left;
}

.about-content h3 {
  color: #00A8E8;
  margin-top: 20px;
  font-size: 1.3rem;
}

.about-content p {
  color: var(--muted);
  line-height: 1.6;
  margin-top: 10px;
}

.about-list {
  margin-top: 20px;
  list-style: none;
  padding: 0;
}

.about-list li {
  color: var(--muted);
  margin: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.about-list i {
  color: #007bff;
  font-size: 1.1rem;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 15px;
 
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Value Cards */
.about-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.value-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding-bottom: 20px;
  transition: transform 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
}

.value-card img {
  width: 100%;

  object-fit: cover;
  border-radius: 15px 15px 0 0;
}

.value-card h4 {
  color: #222;
  margin-top: 15px;
  font-size: 1.2rem;
}

.value-card p {
  color: #555;
  padding: 0 15px;
  line-height: 1.5;
}

























/* .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.about-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:10px;opacity:0;transform:translateY(12px);transition:all .5s}
.about-card:hover{box-shadow: 0 8px 16px rgba(0, 168, 232, 0.4);transform:translateY(-6px);} */
/* Reviews slider */
.reviews-slider{display:flex;gap:12px;overflow:hidden}
.review{min-width:280px;background:linear-gradient(180deg, rgba(0,20,36,0.3), rgba(0,10,20,0.1));padding:16px;border-radius:10px;opacity:0;transform:translateY(12px);transition:all .5s}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-form .input, .contact-form textarea{margin-bottom:8px;}

/* Footer */
.site-footer{background:linear-gradient(180deg, rgba(2,8,12,0.6), rgba(0,0,0,0.6));padding:20px 0;margin-top:30px;border-top:1px solid rgba(255,255,255,0.02)}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:18px}
.site-footer h4{margin:0 0 8px; color: #0078d7;}
.copyright{padding:14px 0;color:var(--muted);font-size:13px}
.newsletter input{padding:7px 10px;color:var(--muted);font-size:13px}

/* Scroll to top button */
#toTop{position:fixed;right:18px;bottom:18px;background:var(--accent);color:#012;border:0;padding:10px 12px;border-radius:8px;cursor:pointer;display:none;z-index:80;box-shadow:0 8px 20px rgba(0,0,0,0.45)}

/* Animations helper */
.animate-on-scroll{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.animate-on-scroll.visible{opacity:1;transform:none}

/* Small */
.btn.small{padding:7px 10px;font-size:13px}

/* Responsive */
@media(max-width:980px){
  .products{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  /* make header & footer fixed for small screens */
  .site-header{position:fixed;top:0;left:0;right:0;z-index:90}
  body{padding-top:64px}
  .site-footer{position:fixed;left:0;right:0;bottom:0;z-index:90}
  .nav-toggle{display:block}
  .main-nav{position:fixed;right:0;top:64px;background:var(--panel);height:calc(100vh - 124px);width:220px;flex-direction:column;padding:20px;transform:translateX(120%);transition:transform .28s;border-left:1px solid rgba(255,255,255,0.02);overflow:auto}
  .main-nav.open{transform:none}
  .products{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .hero .slider{height:220px}
  .slide-content h1{font-size:20px}
}

/* Utility */
.center{text-align:center}

/* Form */
.input, textarea{width:100%;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#eaf7ff}
textarea{min-height:100px;resize:vertical}

/* Blog section card layout */
.blogs-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 18px;margin: 30px 0;}
.blog-card {background: linear-gradient(180deg, rgba(0,20,36,0.45), rgba(0,10,20,0.2));border: 1px solid rgba(255,255,255,0.03);border-radius: 10px;overflow: hidden;display: flex;flex-direction: column;transition: transform 0.3s, box-shadow 0.3s;}
.blog-card:hover {transform:translateY(-6px);;box-shadow: 0 8px 16px rgba(0, 168, 232, 0.4);}
.blog-img {height: 300px;background-size: cover;background-position: center;  }
.blog-content a{text-decoration: none;}

.blog-content {padding: 14px;}
.blog-content h3 {margin: 0 0 6px;font-size: 15px;color: #fff;}
.blog-content .small {color: var(--muted);}

/* Responsive blog layout */
@media (max-width:980px) {.blogs-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width:700px) {.blogs-grid { grid-template-columns: 1fr; }}

.blog-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    padding: 40px;
    font-family: 'Segoe UI', sans-serif;
  }

  .blog-main {
    flex: 1 1 65%;
    min-width: 300px;
  }

  .blog-main .blog-img {
  width: 100%;
  height: auto;
  max-height: 450px; /* optional: limit the height for large images */
  object-fit: cover; /* ensures it fills width without distortion */
  border-radius: 10px; /* optional: keeps smooth rounded corners */
  display: block;
}

  .blog-main h1 {
    color: #1a73e8;
    margin-bottom: 15px;
  }


  .blog-meta {
    color: #777;
    font-size: 0.9rem;
    margin-bottom: 25px;
  }

  .blog-main h3 {
    color: #1a73e8;
    margin-top: 25px;
  }

  .blog-main p {
    color: var(--muted);
    margin-bottom: 15px;
    line-height: 1.7;
  }

  .blog-main a {
    color: #1a73e8;
    text-decoration: none;
  }

  .blog-main a:hover {
    text-decoration: underline;
    
  }

  /* Sidebar */
  .blog-sidebar {
    flex: 1 1 30%;
    min-width: 250px;
  }

  .blog-sidebar h2 {
    margin-bottom: 20px;
    color: #1a73e8;
  }

  .related-card {
    background: #e9e9e9;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: all 0.3s ease;
  }

  .related-card:hover {
transform:translateY(-6px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .related-card img {
    width: 100%;
    object-fit: cover;
    
  }

  .related-card h4 {
    font-size: 1rem;
    margin: 10px;
  }

  .related-card h4 a {
    color: #1a73e8;
    text-decoration: none;
  }

  .related-card p {
    font-size: 0.9rem;
    color: #555;
    margin: 0 10px 15px;
  }

  @media (max-width: 900px) {
    .blog-container {
      flex-direction: column;
    }
    .blog-sidebar {
      order: -1;
    }
  }

/* about page */

/* Banner */
  

  /* About Section */
  .about {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
  }

  .about img {
    width: 50%;
    height: 400px;
    object-fit: cover;
  }

  .about-text {
    width: 50%;
    padding: 60px;
    box-sizing: border-box;
  }

  .about-text h2 {
    font-size: 2rem;
    color: #0078d7;
    margin-bottom: 20px;
  }

  .about-text p {
    color: #444;
    line-height: 1.8;
    font-size: 1rem;
    text-align: justify;
  }

  /* Full width text after image ends */
  .about-extra {
    padding: 50px 80px;
    text-align: justify;
    color: #444;
    font-size: 1rem;
    line-height: 1.8;
  }

  .privacy {
    max-width: 1200px;         /* keeps content readable, not stretched */
    margin: 40px auto;        /* centers it horizontally with top/bottom space */
    padding: 30px 40px;       /* inner spacing */
       /* optional: white background for clarity */
    border-radius: 12px;      /* soft corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* subtle shadow */
    font-family: 'Exo', sans-serif;
    line-height: 1.6;
    color: #333;
}

.privacy h1 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 32px;
    color: #0078d7;
}

.privacy h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    color: #fff;
}

.privacy p,
.privacy ul {
    margin-bottom: 15px;
    color: var(--muted);
}


/* card conatiner */

  .services-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    width: 1200px;
  }

   .service-card {
    width: 250px;
    gap: 20px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
    padding:18px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.02);
    min-height:140px;
    transition:transform .35s,box-shadow .35s;
    opacity:0;
    transform:translateY(12px);
    animation:fadeUp .6s forwards;
  }

  .service-card:hover {
    
    color: white;
    transform:translateY(-6px);
    box-shadow: 0 8px 16px rgba(0, 168, 232, 0.4);
  }

  .service-card:hover a {
    color: #fff;
    border-color: #fff;
  }

  .icon {
    font-size: 40px;
    color: #0077b6;
    margin-bottom: 15px;
  }

  .service-card:hover .icon {
    color: #fff;
  }

  h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
  }

  p {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .card:hover p {
    color: #f1f1f1;
  }

   .printer a {
    display: inline-block;
    margin-top: 15px;
    color: #0077b6;
    font-weight: 600;
    text-decoration: underline;
    transition: all 0.3s ease;
  }

   .printer a:hover {
    color: #00A8E8;
    border-color: #00A8E8;
  }


  /* testimonials */

 .review-section {
  text-align: center;
  padding: 70px 20px;
}

.review-title {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #222;
}

.review-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.review-slide {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease-in-out;
}

.review-slide.review-active {
  display: flex;
  opacity: 1;
}

.review-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
  border: 4px solid #007bff;
}

.review-text {
  font-style: italic;
  max-width: 600px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.6;
}

.review-name {
  margin-top: 5px;
  color: #0077b6;
  font-weight: 600;
}

.review-position {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Navigation dots */
.review-dots {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  gap: 10px;
}

.review-dot {
  width: 12px;
  height: 12px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.review-dot:hover {
  background-color: #007bff;
}

.review-dot-active {
  background-color: #007bff;
  transform: scale(1.2);
}