.card-custom-design {

  /* border:1px solid grey; */

  width: 24%;

  height: fit-content;

  box-shadow: 1px 1px 5px lightgray;

  margin-bottom: 18px;

  border-radius: 10px;

}
.theme-color-blue {

    color: #4c96ae;

}


.web-icon-logo {
    width: 100%;
      max-width: 200px;
/*    padding: 20px !important;
    border-radius: 20px;*/
}



.web-icon-logo img {
    width: 100%;
    max-width: 200px;
    border-radius: 20px;
}


.w-32 {

  width: 33%;

}



.full-width {

  display: flex;

  width: 100%;

}



.small-width {

  display: block;

  width: 32%;

}



.with-o-card {

  display: flex;

  width: 100%;

  /* height: 70px; */

}



.without-o-card {

  width: 100%;

  /* height: 70px; */

  /* border: 1px solid green; */

}



.card-custom-design:hover {

  box-shadow: 0px 0px 3px lightblue;

  border-radius: 5px;

}



/* .card-custom-design:hover .without-o-card {

    display: none;

}



.card-custom-design:hover .with-o-card {

    display: block;

} */



.justify-space-between {

  justify-content: space-between;

}



.cit1 {

  text-align: center;

  width: 100px;

  height: 100px;

}



.cit12 {

  text-align: center;

  width: 100%;

  /* height: ; */

  padding: 10px;

  border-radius: 3px;

}



.cit2 {

  text-align: center;

  width: 90%;

  padding: 10px;

  height: 70%;

}



.card-custom-design .cit1 .card-img-top {

  width: 100%;

  height: 100%;

  overflow: hidden;

  margin-top: 12px;

  border-radius: 5px;

  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;



}





.font-litte-lite {

  font-size: 12px;

  color: grey;

  font-weight: 500;

}



.font-litle-small {

  font-size: 14px;

  font-weight: 600;

}



.quickview {

  max-width: 150px;

  width: 100%;

  font-weight: 600;

  text-align: center;

  padding: 6px;

  /*margin-left: 10px;*/

  border: 1px solid var(--blueish-color);

  font-size: 14px;

  background-color: transparent;

  border-radius: 5px;



}



.addtocart {

  min-width: 94px;

  width: 100%;

  background-color: var(--blueish-color);

  color: white;

  font-weight: 600;

  text-align: center;

  padding: 7px;

  border: none;

  font-size: 14px;

  border-radius: 5px;

}



.heading-one-section {

  display: flex;

  justify-content: space-between;

  padding: 1rem 0 1.4rem;

  margin-top: 1.5rem;

  margin-bottom: 1.5rem;

  border-bottom: 1px solid lightgray;

}



.heading-one-section button {

  border: 1px solid grey;

  background-color: transparent;

  border-radius: 5px;

  padding: 5px 10px;

}



/* limited offer banner */

.limited-offer-banner4 {

  width: 100%;

  background-color: #ecfbfb;

  height: 310px;

  margin-bottom: 3rem;

}



.font-size-22 {

  font-size: 30px;

  font-weight: 200;

}



.font-size-20 {

  font-size: 29px;

  font-weight: 700;

}



.font-size-18 {

  font-size: 21px;

  font-weight: 200;

}



.view-offer-btn {

  border: none;

  padding: 10px 20px;

  font-weight: 400;

  background-color: #5c5ceb;

  color: white;

  border-radius: 5px;

}



.padding-left-top1 {

  padding-left: 3rem;

  padding-top: 1.5rem;

}



.image-banner-card-offer {

  width: 80%;

  height: 50%;

}



.image-banner-card-offer img {

  width: 100%;

  height: 100%;

}



.badge-offer-limit {

  background-color: rgb(236, 78, 93);

  color: white;

  border-radius: 3px;

  font-size: 13px;

  padding: 1px 7px;

}



/* heading-thid-section */

.card2 {

  display: flex;

  border-bottom: 1px solid lightgray;

  margin-bottom: 8px;

  padding-bottom: 7px;

}



.card2 .img-div-card2 img {

  width: 100%;

  height: 60%;

}



.card2 div p {

  font-size: 14px;

  font-weight: 600;

  margin-bottom: 2px !important;

}



.index-third-section {

  height: 100vh;

}



.testimonial-card {

  flex: 0 0 calc(50% - 20px);

  /* 2 cards per row */

  min-width: 300px;

  box-sizing: border-box;

  background: transparent;

  border: none;

  /* remove border */

  box-shadow: none;

  /* remove shadow */

  transition: none;

  /* remove hover effect */

}



/* 

.testimonial-card {

    transition: all 0.3s ease-in-out;

    border: 1px solid #f1f1f1;

} */



/* .testimonial-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

} */

.bg-c-color {

  background-color: #f2f8fd;

}



.testimonial-card img {

  width: 50px;

  height: 50px;

  object-fit: cover;

}



.hover-shadow:hover {

  background-color: #f8f9fa;

  transition: all 0.3s ease;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  transform: translateY(-3px);

}









/* Banner Section */

.banner-section {

  background: url('https://printandink.online/public/img/m,nbkjhb (1).jpg') no-repeat center center/cover;

  /* background: url('http://localhost/inkshop/public/img/m,nbkjhb (1).jpg') no-repeat center center/cover; */

  width: 100%;

  height: 90vh;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.banner-section::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  /* Dark overlay for readability */

}









.banner-content {

  position: relative;

  z-index: 2;

  max-width: 700px;

}



.banner-content h1 {

  font-size: 3rem;

}



.banner-content p {

  font-size: 1.2rem;

}



footer {

  background: #4c96ae;

}



/* slidr */



.carousel-item {

  height: 100%;

  /* Full screen height */

  min-height: 500px;

  background-size: cover;

  background-position: center;

  position: relative;

  color: #fff;

}



.carousel-caption {

  bottom: 30%;

}



.carousel-caption h1 {

  font-size: 3rem;

  font-weight: 700;

}

.carousel-caption h2 {

  font-size: 3rem;

  font-weight: 700;

}

.carousel-caption p {

  font-size: 1.2rem;

}



.btn-custom {

  background: var(--accent);

  color: #fff;

  padding: 10px 22px;

  border-radius: 5px;

  text-decoration: none;

}



.btn-custom:hover {

  background: #2d51c7;

}



/* prodect */

:root {

  --bg: #f7f8fa;

  --card: #fff;

  --muted: #8a8f98;

  --accent: #1976f3;

  --icon-bg: #7f868a;

  --border: #e6e6e6;

  font-family: Inter, system-ui, Arial, sans-serif;

}



.btn-style {

  background-color: #4c96ae !important;

  /* border: 1px solid #df3446; */

}



button.action i {

  color: white;

}



.action:hover {

  transform: translateY(-5px);

  background: var(--accent) !important;

}



/* filter buttons mock */

.tabs {

  display: flex;

  gap: 18px;

  margin-bottom: 26px

}



.tab {

  padding: 10px 18px;

  border-radius: 26px;

  background: #fff;

  border: 1px solid var(--border);

  color: #6b6f76;

  font-weight: 600

}



.tab.active {

  background: var(--accent);

  color: #fff;

  box-shadow: 0 8px 26px rgba(25, 118, 243, 0.12)

}



/* grid */

.grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px

}



@media (max-width:1100px) {

  .grid {

    grid-template-columns: repeat(3, 1fr)

  }

}



@media (max-width:800px) {

  .grid {

    grid-template-columns: repeat(2, 1fr)

  }

}



@media (max-width:480px) {

  .grid {

    grid-template-columns: 1fr

  }

}



.card {

  background: var(--card);

  border-radius: 10px;

  padding: 14px;

  border: 1px solid var(--border);

  position: relative;

  overflow: hidden;

  transition: box-shadow .18s ease, transform .18s ease;

}



.card:hover {

  transform: translateY(-6px);

  box-shadow: 0 18px 40px rgba(14, 20, 30, 0.06)

}



/* badge(s) top-left */

.badges {

  position: absolute;

  left: 12px;

  top: 12px;

  display: flex;

  flex-direction: column;

  gap: 8px;

  z-index: 3

}



.badge {

  background: #0b5ed7;

  color: #fff;

  padding: 6px 8px;

  border-radius: 6px;

  font-weight: 700;

  font-size: 12px;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06)

}



.badge.sale {

  background: #0b5ed7

}



/* blue badge for percent */



.thumb {

  height: 170px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 8px;

}



.thumb img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  display: block

}



.meta {

  padding: 8px 6px 15px;

  /* text-align: center */

  font-size: 20px;

}



.category {

  color: var(--muted);

  font-size: 13px;

  margin-top: 6px

}



.title {

  font-weight: 700;

  margin: 8px 0;

  color: #222;

  font-size: 15px

}



.price {

  font-weight: 700;

  color: #333

}



.price .old {

  color: #9aa0a6;

  text-decoration: line-through;

  font-weight: 600;

  margin-right: 8px;

  font-size: 14px

}



.price .now {

  font-size: 15px

}



/* action bar, hidden below card and slides up on hover */

.action-bar {

  position: absolute;

  left: 0;

  right: 0;

  bottom: -62px;

  display: flex;

  justify-content: center;

  gap: 12px;

  padding: 10px 0;

  transition: all .28s cubic-bezier(.2, .9, .3, 1);

  background: transparent;

  z-index: 4;

}



.card:hover .action-bar {

  bottom: 12px;

}



.action {

  width: 42px;

  height: 42px;

  border-radius: 8px;

  background: var(--icon-bg);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  border: navajowhite;

  /* box-shadow:0 6px 18px rgba(15,20,30,0.06); */

  transition: transform .12s ease, background .12s;

}





/* small spacing so action bar doesn't overlap text on mobile */

@media (max-width:480px) {

  .meta {

    padding-bottom: 68px

  }

}











/* HERO SECTION */

.hero {

  position: relative;

  min-height: 420px;

  /* background: url("public/img/m,nbkjhb%20(1).jpg") no-repeat center/cover; */

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: #fff;

  padding: 40px 20px;

}



/* overlay for contrast */

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.4);

}



.hero-content {

  position: relative;

  z-index: 2;

  max-width: 800px;

}



.hero-small {

  font-size: 22px;

  font-weight: 500;

  margin-bottom: 10px;

}



.hero-title {

  font-size: 52px;

  font-weight: 700;

  margin: 10px 0 20px;

  line-height: 1.1;

}







/* responsive */

@media(max-width:768px) {

  .hero {

    min-height: 360px

  }



  .hero-title {

    font-size: 34px

  }



  .hero-small {

    font-size: 16px

  }

}



/* blog */





.swiper {

  padding: 12px 0 36px;

}



.swiper-wrapper {

  align-items: stretch

}



.slide-card {

  background: var(--card-bg);

  border-radius: 12px;

  padding: 18px;

  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);

  display: flex;

  gap: 28px;

  align-items: center;

  min-height: 280px;

  box-sizing: border-box;

}



.card-thumb {

  width: 260px;

  flex: 0 0 260px

}



.card-thumb img {

  width: 100%;

  height: 300px;

  object-fit: cover;

  border-radius: 14px;

  display: block;

}



.card-body {

  flex: 1;

  padding-right: 8px

}



.meta-a {

  display: flex;

  gap: 12px;

  align-items: center;

  color: var(--accent);

  font-size: 13px;

  margin-bottom: 8px

}



.card-title {

  font-size: 22px;

  font-weight: 700;

  margin: 6px 0 10px;

  color: #111

}



.excerpt {

  color: #666;

  line-height: 1.6;

  font-size: 19px;

  margin-bottom: 16px

}



.read-btn {

  display: inline-block;

  background: var(--btn-bg);

  color: #fff;

  padding: 10px 20px;

  border-radius: var(--btn-radius);

  text-decoration: none;

  font-weight: 600;

}



.read-btn:hover {

  background: #333

}



.swiper-slide-active .slide-card {

  transform: translateY(-6px);

  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.12);

}



@media(max-width:1000px) {

  .card-thumb {

    width: 180px;

    flex: 0 0 180px

  }



  .card-thumb img {

    height: 160px

  }



  .card-title {

    font-size: 20px

  }

}



@media(max-width:720px) {

  .slide-card {

    flex-direction: column;

    align-items: flex-start;

    min-height: auto

  }



  .card-thumb {

    width: 100%;

    flex: 0 0 auto

  }



  .card-thumb img {

    height: 220px

  }



  .card-body {

    width: 100%

  }

}



.swiper-button-next,

.swiper-button-prev {

  color: #222;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

}



.swiper-pagination-bullet {

  background: #d0d5da;

  opacity: 1

}



.swiper-pagination-bullet-active {

  background: var(--accent)

}





i.fa-solid.fa-eye {

    color: #fff;

}

/* hedsre */





:root {

  --dark: #111213;

  --muted-dark: #1f1f20;

  --blue: #2e7cff;

  /* nav color */

  --accent: #2e7cff;

  --text: #ffffff;

  --muted: #98a0a8;

  --radius: 8px;

  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;

}



header {

  background: linear-gradient(180deg, var(--dark), #1b1b1c);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

  z-index: 10;

  /* border-bottom: 1px solid var(--accent); */

}





/* Top header: dark */

.topbar {

  background: linear-gradient(180deg, var(--dark), #1b1b1c);

  color: var(--text);

  padding: 24px 28px;

  display: flex;

  align-items: center;

  gap: 20px;

}



.header-a {

  /*max-width: 1180px;*/

  margin: 0 auto;

  width: 100%;

  display: flex;

  align-items: center;

  gap: 16px

}



/* Logo */

.logo {

  display: flex;

  align-items: center;

  gap: 8px;

  font-weight: 700;

  font-size: 22px;

  color: #fff;

  flex: 0 0 auto;

}



.logo b {

  color: var(--blue);

  font-weight: 800

}



/* Search: centered */

.search-wrap {

  flex: 1 1 480px;

  display: flex;

  justify-content: center;

}



.search {

  width: 100%;

  max-width: 600px;

  display: flex;

  align-items: center;

  gap: 8px;

  background: #fff;

  border-radius: 8px;

  padding: 6px;

  box-shadow: 0 6px 20px rgba(18, 20, 22, 0.12);

}



.search input {

  border: 0;

  outline: none;

  padding: 10px 12px;

  font-size: 15px;

  flex: 1;

  border-radius: 6px;

}



.search button {

  background: var(--blue);

  border: 0;

  color: #fff;

  padding: 10px 12px;

  border-radius: 6px;

  cursor: pointer;

}



/* Right icons */

.actions {

  display: flex;

  gap: 14px;

  align-items: center;

  flex: 0 0 auto

}



.icon {

  width: 36px;

  height: 36px;

  border-radius: 6px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.08);

  cursor: pointer;

  color: #fff;

  position: relative;

}



.icon svg {

  width: 18px;

  height: 18px;

  fill: transparent;

  stroke: #fff;

  stroke-width: 1.4

}



.badge-heade {

  position: absolute;

  top: -6px;

  right: -6px;

  background: var(--blue);

  color: #fff;

  font-size: 12px;

  padding: 3px 6px;

  border-radius: 12px;

  box-shadow: 0 6px 14px rgba(46, 124, 255, 0.18);

}



/* Blue nav bar */

.navbar {

  background: #4c96ae;
  color: #fff;
  padding: 10px 0;
  box-shadow: 0 6px 18px rgba(46, 124, 255, 0.12);

}



.nav-inner {

  max-width: 1180px;

  margin: 0 auto;

  display: flex;

  align-items: center;

  gap: 30px;

  padding: 0 18px

}



.nav {

  display: flex;

  gap: 20px;

  align-items: center;

  flex: 1;

  justify-content: center;

}



.nav a {

  color: #fff;

  text-decoration: none;

  padding: 10px 18px;

  border-radius: 24px;

  font-weight: 600;

  font-size: 14px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.nav a:hover {

  background: rgba(255, 255, 255, 0.08)

}



.caret {

  font-size: 12px;

  display: inline-block;

  transform: translateY(-1px);

  opacity: 0.95

}



/* Dropdown (simple) */

.nav-item {

  position: relative

}



.dropdown {

  position: absolute;

  left: 0;

  top: calc(100% + 10px);

  background: #fff;

  color: #222;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 12px 30px rgba(10, 20, 30, 0.15);

  min-width: 200px;

  display: none;

  z-index: 40;

}



.dropdown a {

  display: block;

  padding: 10px 14px;

  color: #222;

  text-decoration: none;

  border-bottom: 1px solid #f2f2f2

}



.dropdown a:last-child {

  border-bottom: 0

}



.dropdown a:hover {

  background: #f6f8ff

}



/* show on hover (desktop) */

.nav-item:hover .dropdown {

  display: block

}



/* mobile nav toggle */

.mobile-toggle {

  display: none;

  background: transparent;

  border: 0;

  color: #fff;

  font-size: 20px;

  cursor: pointer

}



/* responsive */

@media(max-width:991px) {

  nav.navbar {

    display: none;

  }



  .container {

    padding: 0 16px

  }



  .search-wrap {

    order: 3;

    width: 100%;

    justify-content: flex-start

  }



  .logo {

    flex: 0 0 auto

  }



  .actions {

    order: 1;

    margin-left: auto

  }



  .mobile-toggle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex: 0 0 auto

  }



  .nav-inner {

    padding: 0 12px

  }



  .nav {

    display: none;

    flex-direction: column;

    gap: 0;

    align-items: stretch;

    justify-content: flex-start;

    width: 100%

  }



  .nav a {

    padding: 12px 16px;

    border-radius: 6px

  }



  .nav.open {

    display: flex

  }



  .dropdown {

    position: relative;

    top: 0;

    left: 0;

    box-shadow: none;

    border-radius: 6px

  }



  .nav-inner .right-extra {

    display: none

  }

}



/* small phones: stack topbar nicely */

@media(max-width:520px) {

  .topbar {

    padding: 12px

  }



  .search {

    max-width: 100%

  }



  .search input {

    font-size: 14px

  }



  .logo {

    font-size: 18px

  }



  .search-wrap {

    margin-top: 11px;

    margin-bottom: 11px;

  }



  .header-a {

    display: block;



  }



  .mobile-toggle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex: 0 0 auto;

    position: absolute;

    right: 24px;

    top: 19px;

  }



  .actions {

    display: flex;

    gap: 14px;

    align-items: center;

    flex: 0 0 auto;

    top: 22px;

    position: absolute;

    text-align: center;

    justify-content: center;

    left: 0;

    right: 0;

  }



  .carousel-caption h1 {

    font-size: 26px;

    font-weight: 700;

  }

    .carousel-caption h2 {

    font-size: 26px;

    font-weight: 700;

  }

}



.logo img {
    width: 100%;
    background: white;
    padding: 7px;
    border-radius: 10px;
    max-width: 200px;
}



.main_under_cart_design {

    box-shadow: 0 0 9px #00000059;

    border-radius: 6px;

}

.right_main_cart{

      box-shadow: 0 0 9px #00000059;

    border-radius: 6px;

}

.remove_cart {

    background: #2e7cff;

}

.remove_cart:hover {

    border: 1px solid #2e7cff;

}

.update_basic_detail {

    background: #0d6efd !important;

}

.update_basic_detail:hover {

    background: #0d6efd !important;

    color: #fff !important;

}

.btn-custom-red {

    background-color: #0d6efd;

}