* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Poppins, sans-serif;
    background: #ffffff;
}






/* ==== HEADER START (Light Version) ==== */

body.no-scroll {
  overflow: hidden;
}

/* Header wrapper */
.plinfo-header-wrapper {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* 👈 thin dark-light line */
}

/* Header inner */
.plinfo-header {
  max-width: 1510px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
}

.plinfo-left {
  display: flex;
  align-items: center;
  gap: 50px;
}

.plinfo-logo img {
  height: 42px;
}

/* Desktop Nav */
.plinfo-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.plinfo-nav > div {
  position: relative;
}

.plinfo-nav a {
  text-decoration: none;
  color: #000;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.plinfo-nav a i {
  margin-left: 5px;
}

.plinfo-nav a:hover {
  color: #555;
}

/* Dropdown Menu */
.plinfo-dropdown {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-width: 220px;
  z-index: 999;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.plinfo-dropdown::before {
  content: '';
  display: block;
  height: 4px;
  background-color: #000;
  width: 100%;
}

.plinfo-dropdown a {
  display: block;
  padding: 10px 12px;
  color: #333;
  font-size: 14px;
  transition: background 0.3s ease, color 0.3s ease;
}

.plinfo-dropdown a:hover {
  background-color: #f5f5f5;
  color: #000;
}

.plinfo-nav > div:hover .plinfo-dropdown,
.plinfo-nav > div:focus-within .plinfo-dropdown {
  display: block;
}

/* CTA Button */
.plinfo-contact-btn {
  background: #000;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.plinfo-contact-btn:hover {
  background-color: #303030;
}

/* Toggle Menu Icon */
.plinfo-menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 24px;
  color: #000;
}

.plinfo-menu-toggle i,
.plinfo-close-toggle i {
  transition: transform 0.3s ease, color 0.3s ease;
}

.plinfo-menu-toggle:hover i,
.plinfo-close-toggle:hover i {
  transform: scale(1.1) rotate(5deg);
  color: #555;
}

/* Mobile Menu */
.plinfo-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 280px;
  background: #f9f9f9;
  color: #000;
  box-shadow: -2px 0 15px rgba(0,0,0,0.1);
  padding: 80px 20px 20px;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.plinfo-mobile-menu.active {
  transform: translateX(0%);
  opacity: 1;
  pointer-events: auto;
}

.plinfo-mobile-menu::-webkit-scrollbar {
  width: 6px;
}
.plinfo-mobile-menu::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

.plinfo-mobile-menu .plinfo-logo {
  text-align: center;
  margin-bottom: 10px;
}

.plinfo-mobile-menu hr {
  border: 0.5px solid #ddd;
  margin: 6px 0;
}

.plinfo-mobile-menu a,
.plinfo-mobile-menu button {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #000;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.3s ease;
}

.plinfo-mobile-menu a:hover,
.plinfo-mobile-menu button:hover {
  color: #555;
}

.plinfo-mobile-menu .mobile-dropdown {
  display: none;
  flex-direction: column;
  font-size: 14px;
  font-weight: 500;
  padding-left: 15px;
  gap: 5px;
  animation: fadeInDown 0.5s ease-in-out;
}

.plinfo-mobile-menu .plinfo-email {
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
}

.plinfo-mobile-menu .social-icons {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  margin-top: 10px;
}

.plinfo-mobile-menu .social-icons a {
  color: #000;
  font-size: 20px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.plinfo-mobile-menu .social-icons a:hover {
  color: #555;
}

.plinfo-mobile-menu .plinfo-contact-btn {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  border-radius: 30px;
  margin-top: 25px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.plinfo-mobile-menu .plinfo-contact-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.plinfo-close-toggle {
  display: block;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
  background: #000;
  border-radius: 5px;
  padding: 5px 9px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2100;
  transition: all 0.3s ease;
  border: none;
}

.plinfo-close-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 991px) {
  .plinfo-nav {
    display: none;
  }
  .plinfo-menu-toggle {
    display: block;
  }
  .plinfo-left {
    gap: 15px;
  }
  .plinfo-header {
    justify-content: space-between;
  }
  .plinfo-contact-btn {
    padding: 8px 16px;
    font-size: 14px;
  }
  .plinfo-close-toggle {
    display: block;
  }
}

/* ==== HEADER END ==== */





/* Category Services Start */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

.shopzardservices1 {
    max-width: 1500px;
    margin: auto;
    padding: 35px 20px;
    text-align: center;
    font-family: Poppins, sans-serif;
}

.shopzardservices1-heading h2 {
    font-size: 28px;
    font-weight: 600;
    color: #1F2937  ;
    margin-bottom: 10px;
    line-height: 37px;
}

.shopzardservices1-heading p {
    color: #555;
    margin-bottom: 20px;
}

.shopzardservices1-browse-link {
    display: inline-block;
    color: #506ffd  ;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 40px;
}

.shopzardservices1-browse-link i {
    margin-left: 5px;
}

.shopzardservices1-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.shopzardservices1-card {
    background: #fff;
    border: 1px solid #dde3ea;
    flex: 1 1 calc(33.333% - 20px);
    padding: 20px;
    text-align: left;
    transition: box-shadow 0.3s ease;
    border-radius: 10px;
}

.shopzardservices1-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.shopzardservices1-card-header {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 18px;
    color: #1F2937  ;
    gap: 12px;
}

.shopzardservices1-card-header i {
    background: #e5edff;
    color: #506ffd  ;
    padding: 10px;
    font-size: 18px;
    border-radius: 8px;
}

.shopzardservices1-divider {
    border-top: 1px solid #ccc;
    margin: 15px 0;
}

.shopzardservices1-body {
    list-style: none;
    padding-left: 0;
    margin: 0;
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 0.4s ease-in-out;
}

.shopzardservices1-body li {
    margin-bottom: 8px;
    color: #0c0c0c;
    font-size: 15px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.shopzardservices1-body li a {
    text-decoration: none;
    color: #0c0c0c;
    font-size: 15px;
}

.shopzardservices1-body li a:hover {
    color: #506ffd  ;
    text-decoration: underline;
}


.shopzardservices1-body li span {
    margin-right: 6px;
    color: #506ffd  ;
    font-size: 20px;
}

/* Hide dropdown icon by default */
.dropdown-icon {
    display: none;
    margin-left: auto;
    font-size: 14px;
    color: #506ffd  ;
    transition: transform 0.3s ease;
}

/* Mobile Responsive Fixes */
@media (max-width: 768px) {
    .dropdown-icon {
        display: inline-block;
    }

    .shopzardservices1-card.active .dropdown-icon {
        transform: rotate(180deg);
    }

    .shopzardservices1-grid {
        flex-direction: column;
    }

    .shopzardservices1-heading h2 {
        font-size: 30px;
        font-weight: 600;
        color: #1F2937  ;
        margin-bottom: 10px;
        line-height: 37px;
        text-align: center;
    }

    .shopzardservices1-heading p {
        color: #555;
        margin-bottom: 20px;
        text-align: center;
    }

    .shopzardservices1-browse-link {
        display: inline-block;
        color: #506ffd  ;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 40px;
        text-align: center;
    }

 

    .shopzardservices1-body {
        max-height: 0;
        padding: 0;
    }

    .shopzardservices1-card.active .shopzardservices1-body {
        max-height: 1000px;
        padding-top: 10px;
    }
}

@media (max-width: 768px) {
  .shopzardservices1-heading {
    text-align: center;
    margin-left: 10px;
  }
}
/* Category Services End */





/* Services New Section Start */

.shopzardservices2{
  --bg:#ffffff;
  --card:#ffffff;             /* solid, no glass */
  --text:#0f172a;
  --muted:#5b667a;
  --accent:#2563eb;
  --accent-2:#7aa7ff;
  --ring:#e7eefc;
  --radius:22px;
  padding:42px 16px;
  background:#ffffff;
  font-synthesis-weight:none;
}

/* Card (fixed width 1500px) — NO shadow, NO hover lift */
.shopzardservices2 .szs2-wrap{
  width:100%; max-width:1200px; margin:0 auto;
  display:flex; flex-direction:column;
  background:var(--card);
  border:2px solid var(--ring);
  border-radius:var(--radius);
  overflow:hidden; isolation:isolate;
}

/* Layout order (image first on mobile) */
.shopzardservices2 .szs2-media{ order:0; position:relative; }
.shopzardservices2 .szs2-content{ order:1; }

/* Media */
.shopzardservices2 .szs2-media{
  flex:1 1 50%;
  background:linear-gradient(180deg,#eef4ff,transparent);
}
.shopzardservices2 .szs2-media img{
  width:100%; height:100%; max-height:480px; object-fit:cover; display:block;
}
/* subtle noise */
.shopzardservices2 .szs2-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23000000'%3E%3Ccircle cx='2' cy='3' r='1'/%3E%3Ccircle cx='35' cy='23' r='1'/%3E%3Ccircle cx='90' cy='12' r='1'/%3E%3Ccircle cx='120' cy='30' r='1'/%3E%3Ccircle cx='60' cy='70' r='1'/%3E%3Ccircle cx='10' cy='120' r='1'/%3E%3Ccircle cx='130' cy='110' r='1'/%3E%3C/g%3E%3C/svg%3E");
}

/* Content (clean alignment) */
.shopzardservices2 .szs2-content{
  flex:1 1 50%;
  padding:44px 36px 48px;
  color:var(--text);
  display:flex; flex-direction:column; justify-content:center;
  max-width:720px;            /* tighter readable measure */
}
.shopzardservices2 .szs2-title{
  font-weight:500;            /* no bold */
  font-size:clamp(24px,3.2vw,40px);
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 12px;
}
.shopzardservices2 .szs2-desc{
  color:var(--muted);
  font-weight:400;
  font-size:clamp(14px,1.4vw,16px);
  line-height:1.65;           /* better readability */
  margin:0 0 18px;
}
.shopzardservices2 .szs2-desc p{ margin:0; }

/* CTA link (kept minimal; card hover removed) */
.shopzardservices2 .szs2-link{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:500;
  text-decoration:none; color:var(--accent);
  position:relative; padding-bottom:2px;
}
.shopzardservices2 .szs2-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(.25); transform-origin:left;
  transition:transform .25s ease;
}
.shopzardservices2 .szs2-link:hover::after{ transform:scaleX(1); }

/* Desktop / Tablet — alternate layout using .reverse */
@media (min-width:768px){
  .shopzardservices2 .szs2-wrap{ flex-direction:row; }
  .shopzardservices2.reverse .szs2-wrap{ flex-direction:row-reverse; }
  .shopzardservices2 .szs2-content{ padding:64px 72px; max-width:640px; }
  .shopzardservices2 .szs2-media img{ height:100%; max-height:none; }
}

/* Small screens */
@media (max-width:360px){
  .shopzardservices2{ padding:28px 12px; }
  .shopzardservices2 .szs2-content{ padding:28px 18px 32px; }
}


/* Services New Section End */




/* ===== Services Banner 1 Start ===== */

.services-banner1{
  --blue:#506ffd;       /* primary */
  --gold:#fad02c;       /* accent */
  --text:#ffffff;
  --muted:#e9edff;
  --radius:22px;
  padding:18px;         /* outer breathing */
  background:#fff;
}

/* Card */
.services-banner1 .sb1-wrap{
  position:relative;
  max-width: 1500px;
  margin:0 auto;
  border-radius: var(--radius);
  overflow:hidden;
  isolation:isolate;
  background: #506ffd;

  min-height: 320px;
  display:grid;
  place-items:center;
}

/* Decorative shapes */
.services-banner1 .sb1-wrap::before,
.services-banner1 .sb1-wrap::after{
  content:"";
  position:absolute; inset:auto;
  pointer-events:none;
  mix-blend:screen;
  opacity:.25;
}
.services-banner1 .sb1-wrap::before{
  width: 520px; height: 520px; right:-140px; top:-120px;
  filter: blur(6px);
}
.services-banner1 .sb1-wrap::after{
  width: 660px; height: 660px; left:-160px; bottom:-200px;
}

/* Content */
.services-banner1 .sb1-content{
  text-align:center;
  color: var(--text);
  padding: clamp(28px, 4vw, 64px);
  max-width: 900px;
}
.services-banner1 .sb1-title{
  margin:0 0 10px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.08;
  font-size: clamp(28px, 5vw, 56px);
}
.services-banner1 .sb1-sub{
  margin:0 0 22px;
  color: var(--muted);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.6;
}

/* CTA */
.services-banner1 .sb1-cta{
  display:inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  background: #000000ff;
  color:#ffffff;
  font-weight:600;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.services-banner1 .sb1-cta:hover{ transform: translateY(-1px); }
.services-banner1 .sb1-cta:active{ transform: translateY(0); }

/* Responsive height */
@media (min-width: 768px){
  .services-banner1 .sb1-wrap{ min-height: 420px; }
}
@media (min-width: 1200px){
  .services-banner1 .sb1-wrap{ min-height: 460px; }
}

/* ===== Services Banner 1 End ===== */



/* Pricing Section */
.shopzardprice1-section {
  font-family: Poppins, sans-serif;
  padding: 35px 0;
  background: transparent;
  text-align: center;
}

.shopzardprice1-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 30px;
}

.shopzardprice1-header h2 {
  font-size: 30px;
  color: #1F2937  ;
  margin-bottom: 8px;
}

.shopzardprice1-header p {
  color: #555;
  margin-bottom: 40px;
}

.shopzardprice1-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.shopzardprice1-card {
  background: #fff;
  border: 2px solid #1F2937  ;
  border-radius: 10px;
  flex: 1 1 calc(33.333% - 20px); /* 3 cards per row with spacing */
  min-width: 300px;
  max-width: 460px;
  padding: 30px 20px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
  text-align: left;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.shopzardprice1-card:hover {
  transform: scale(1.07);
}

.shopzardprice1-card h3 {
  font-size: 22px;
  color: #1F2937  ;
  margin-bottom: 10px;
}

.shopzardprice1-price {
  font-size: 32px;
  font-weight: 700;
  color: #506ffd  ;
  margin-bottom: 10px;
}

.shopzardprice1-price span {
  font-size: 16px;
  font-weight: 400;
  color: #666;
}

.shopzardprice1-desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

.shopzardprice1-btn {
  display: inline-block;
  width: 100%;
  background: transparent;
  border: 2px solid #1F2937  ;
  color: #1F2937  ;
  padding: 10px;
  font-weight: 600;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  margin-bottom: 25px;
}

.shopzardprice1-btn:hover,
.shopzardprice1-btn.active {
  background: #1F2937  ;
  color: #fff;
}

.shopzardprice1-features {
  list-style: none;
  padding: 0;
  color: #444;
  font-size: 14px;
  line-height: 1.8;
}

.shopzardprice1-features li {
  padding-left: 20px;
  position: relative;
}

.shopzardprice1-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #506ffd  ;
  font-weight: bold;
}

.shopzardprice1-badge {
  position: absolute;
  top: -15px;
  right: 20px;
  background: #506ffd  ;
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: 500;
}

/* ✅ Mobile Responsive */
@media (max-width: 991px) {
  .shopzardprice1-cards {
    flex-direction: column;
    align-items: center;
  }

  .shopzardprice1-card {
    max-width: 100%;
    flex: 1 1 100%;
  }
}







/* ==== Services Blog and Demo Page (Dark Version) ==== */

.plinfoservices-section {
  padding: 70px 20px;
  background: #041114;
  text-align: center;
  font-family: "Poppins", sans-serif;
}

.plinfoservices-header {
  max-width: 1600px;
  margin: 0 auto 30px;
}

.plinfoservices-header h1 {
  font-size: 34px;
  font-weight: 700;
  color: #f1dd2c;
  letter-spacing: 0.3px;
}

.plinfoservices-header p {
  font-size: 16px;
  color: #cdd5d7;
  margin-top: 10px;
}

.plinfoservices-container {
  max-width: 1500px;
  margin: 0 auto;
}

.plinfoservices-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.plinfoservices-card {
  background: #0b1d22;
  padding: 22px;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  width: calc(33.33% - 20px);
  max-width: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  transition: all 0.3s ease;
  border: 1px solid #0f2a33;
}

.plinfoservices-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
  border-color: #1e5663;
}

.plinfoservices-card img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.plinfoservices-card h3 a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 20px;
  transition: color 0.3s;
}

.plinfoservices-card h3 a:hover {
  color: #506ffd;
  text-decoration: underline;
}

.plinfoservices-card p {
  font-size: 15px;
  color: #a7b6b9;
  margin: 12px 0 20px;
  line-height: 1.7;
}

/* Buttons Group */
.plinfoservices-btn-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.plinfoservices-btn {
  background: rgba(80, 111, 253, 0.1);
  color: #506ffd;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex: 1 1 45%;
  transition: 0.3s ease;
  border: 1px solid transparent;
}

.plinfoservices-btn:hover {
  background: #506ffd;
  color: #fff;
  border-color: #506ffd;
}

.plinfoservices-btn .circle {
  background-color: #f1dd2c;
  color: #000;
  border-radius: 6px;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  font-size: 16px;
}

/* Inquiry Button Transparent */
.plinfoservices-btn.inquiry-btn {
  background: transparent;
  border: 1px solid #506ffd;
  color: #506ffd;
}

.plinfoservices-btn.inquiry-btn:hover {
  background: #506ffd;
  color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
  .plinfoservices-card {
    width: calc(50% - 20px);
  }
}

@media (max-width: 600px) {
  .plinfoservices-section {
    padding: 50px 15px;
  }

  .plinfoservices-header h1 {
    font-size: 28px;
    color: #f1dd2c;
    margin-left: 10px;
    text-align: left;
  }

  .plinfoservices-header p {
    font-size: 15px;
    color: #a7b6b9;
    margin-left: 10px;
    text-align: left;
  }

  .plinfoservices-card {
    width: 100%;
    max-width: 100%;
    padding: 15px;
  }

  .plinfoservices-btn-group {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .plinfoservices-btn {
    flex: 1;
    font-size: 15px;
    padding: 10px 5px;
  }
}

/* ==== Services Blog and Demo Page (Dark Version) End ==== */














/* Contact us form start */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Poppins, sans-serif;
    }


    .shopzardcontact3-wrapper {
      max-width: 1400px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      background: #fff;
      border-radius: 12px;
      padding: 40px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
      margin-top: 100px;
      margin-bottom: 100px;
    }

    .shopzardcontact3-form-box {
      flex: 1 1 60%;
    }

    .shopzardcontact3-form-box h2 {
      color: #000;
      margin-bottom: 10px;
    }

    .shopzardcontact3-form-box p {
      color: #555;
      margin-bottom: 30px;
    }

    .shopzardcontact3-form-row {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .shopzardcontact3-input {
      flex: 1 1 calc(50% - 10px);
      display: flex;
      flex-direction: column;
    }

    .shopzardcontact3-input label {
      font-weight: 500;
      margin-bottom: 6px;
    }

    .shopzardcontact3-input input,
    .shopzardcontact3-input select,
    .shopzardcontact3-input textarea {
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 8px;
      outline: none;
    }

    .shopzardcontact3-input textarea {
      resize: none;
    }

    .shopzardcontact3-input-full {
      flex: 1 1 100%;
    }

    .shopzardcontact3-submit-btn {
      margin-top: 20px;
      background-color: #506ffd  ;
      color: white;
      border: none;
      padding: 14px;
      width: 100%;
      border-radius: 8px;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .shopzardcontact3-submit-btn:hover {
      background-color:rgb(0, 0, 0);
    }

    .shopzardcontact3-info-box {
      flex: 1 1 35%;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .shopzardcontact3-info-card {
      background-color: #f1f5f9;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      gap: 15px;
      align-items: flex-start;
      transition: background-color 0.3s ease, color 0.3s ease;
      color: #000;
    }

    .shopzardcontact3-info-card i {
      font-size: 20px;
      margin-top: 5px;
    }

    .shopzardcontact3-info-card div {
      line-height: 1.4;
    }

    .shopzardcontact3-info-card:hover {
      background-color: #506ffd  ;
      color: white;
    }

    .shopzardcontact3-info-card:hover i {
      color: white;
    }

    .shopzardcontact3-info-card.highlight {
      background-color: #506ffd  ;
      color: white;
    }

    .shopzardcontact3-info-card.highlight i {
      color: white;
    }

    .shopzardcontact3-social-icons {
      margin-top: 10px;
      display: flex;
      gap: 15px;
    }

    .shopzardcontact3-social-icons a {
      font-size: 20px;
      color: #506ffd  ;
    }

    @media (max-width: 768px) {
      .shopzardcontact3-wrapper {
        flex-direction: column;
        padding: 20px;
      }

      .shopzardcontact3-input {
        flex: 1 1 100%;
      }
    }

/* Contact us form End */





/* About Us Section */
.shopzardabout-section {
  padding: 0;
  background: transparent;
}

.shopzardabout-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1600px;
  margin: 10px auto 0;
  align-items: flex-start;
  gap: 0;
}

.shopzardabout-image {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  overflow: hidden;
}

.shopzardabout-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 30px;
  transition: transform 0.5s ease;
  padding: 20px;
}

.shopzardabout-image:hover img {
  transform: scale(1.05);
}

.shopzardabout-content {
  flex: 1 1 100%;
  padding: 20px;
  margin: 0;
}

.shopzardabout-label {
  color: #506ffd  ;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 10px;
}

.shopzardabout-content h2 {
  font-size: 30px;
  line-height: 40px;
  margin-bottom: 15px;
  font-weight: 600;
  color: #222;
}

.shopzardabout-content p {
  font-size: 14px;
  color: #444;
  margin-bottom: 25px;
  line-height: 1.6;
}

.shopzardabout-social-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.social-icon {
  width: 36px;
  height: 36px;
  background-color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* Icon brand colors */
.social-icon.instagram i {
  color: #e1306c;
}
.social-icon.facebook i {
  color: #1877f2;
}
.social-icon.linkedin i {
  color: #0a66c2;
}
.social-icon.whatsapp i {
  color: #25D366;
}

/* Optional: Hover zoom */
.social-icon:hover {
  transform: scale(1.1);
  background-color: #333;
}

.shopzardabout-btn {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  color: #fff !important;
  background-color: #506ffd  !important;
  text-decoration: none;
  border: none;
  display: inline-block;
}


.shopzardabout-btn:hover {
  background-color: #000;
}

/* Responsive */
@media (min-width: 769px) {
  .shopzardabout-container {
    flex-direction: row;
    gap: 40px;
    padding: 60px 20px;
  }

  .shopzardabout-image,
  .shopzardabout-content {
    flex: 1 1 500px;
  }

  .shopzardabout-content h2 {
      font-size: 36px;
      line-height: 46px;
      margin-bottom: 15px;
      font-weight: 600;
      color: #222;
    }

  .shopzardabout-content p {
    font-size: 18px;
  }
}








  

/* Team */
.plinfoteam-section {
  padding: 20px 5px;
  background-color: transparent;
  margin-top: 50px;
}

.plinfoteam-container {
  max-width: 1500px;
  margin: 0 auto;
}

.plinfoteam-header {
  text-align: center;
  margin-bottom: 60px;
}

.plinfoteam-header h2 {
  font-size: 34px;
  color: #1a1311;
  font-weight: 700;
}

.plinfoteam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  justify-items: center;
  align-items: start;
}

.plinfoteam-member {
  text-align: center;
}

.plinfoteam-member img {
  width: 230px;
  height: 230px;
  border-radius: 15px;
  object-fit: cover;
  margin-bottom: 15px;
}

.plinfoteam-member h4 {
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 5px;
}

.plinfoteam-member p {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
}

.plinfoteam-social {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.plinfoteam-social a {
  font-size: 20px;
  color: #506ffd  ;
  transition: 0.3s ease;
}

.plinfoteam-social a:hover {
  color: #161616;
}

/* Mobile responsiveness: 2 columns for smaller screens */
@media (max-width: 768px) {
  .plinfoteam-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px; /* Adjust gap for mobile */
  }

  .plinfoteam-member img {
    width: 150px; /* Adjust image size for smaller screens */
    height: 150px;
  }
}

/* Team End */





/* counter Start  */
.plinfo-counter-section {
  padding: 60px 20px;
  background: #f9fafd;
  text-align: center;
  margin-top: 50px;
}
.plinfo-counter-container {
  max-width: 1600px;
  margin: auto;
}
.plinfo-counter-header h2 {
  font-size: 34px;
  color: #1a1311;
   margin-bottom: 50px;
}
.plinfo-counter-header p {
  font-size: 18px;
  color: #555;
  margin-bottom: 50px;
}
.plinfo-counter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  justify-items: center;
}
.plinfo-counter-item {
  text-align: center;
}
.plinfo-circle {
  width: 120px;
  height: 120px;
  background: #506ffd  ;
  color: white;
  font-size: 28px;
  font-weight: bold;
  line-height: 120px;
  border-radius: 20px;
  margin: 0 auto 10px;
  position: relative;
}
.plinfo-count {
  font-size: 28px;
}
.plinfo-counter-item p {
  color: #111;
  font-size: 16px;
}

/* Mobile responsiveness: 2 columns for smaller screens */
@media (max-width: 768px) {
  .plinfo-counter-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px; /* Adjust gap for mobile */
  }
}

/* counter End  */



/* SHOPZARD FEATURES START – variables removed, values inlined */

.shopzard-features.v4{
  max-width:1560px;margin:0 auto;padding:26px 16px;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#0f172a;
}
.feature-viewport{
  overflow:hidden;border:0px solid #e8edf4;border-radius:14px;
  background:transparent;box-shadow:0 10px 24px rgba(2,6,23,.06);
  padding:12px;margin-bottom:14px;
}

/* ---------- DESKTOP: all visible (5-per-row), whole panel slides ---------- */
.feature-viewport.desktop{display:block;}
.feature-track-pan{display:flex;align-items:flex-start;gap:0;will-change:transform;}
.panel{flex:0 0 100%;padding-right:0;}
.panel-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
}

/* Cards */
.feature-card{
  background:linear-gradient(180deg,#ffffff,#f5f9ff);
  border:1px solid #e8edf4;border-radius:10px;
  padding:14px;box-shadow:0 10px 24px rgba(2,6,23,.06);
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.feature-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(37,99,235,.35),transparent);
  opacity:0;transition:opacity .22s ease;z-index:1;
}
.feature-card::after{
  content:"";position:absolute;inset:-30% -60% auto -60%;height:160%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 80%);
  transform:translateX(-30%) rotate(8deg);opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .6s cubic-bezier(.22,1,.36,1);z-index:0;
}
.feature-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(2,6,23,.10);
  border-color:rgba(37,99,235,.28);
  background:linear-gradient(180deg,#ffffff,#eef6ff);
}
.feature-card:hover::before{opacity:1;}
.feature-card:hover::after{opacity:.45;transform:translateX(30%) rotate(8deg);}
.feature-title{display:flex;align-items:center;gap:10px;}
.feature-title h3{
  font-size:14px;margin:0;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.feature-icon{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:18px;box-shadow:inset 0 0 0 1px #eef2f7;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.feature-card:hover .feature-icon{
  transform:translateY(-1px);
  box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.28),0 4px 10px rgba(37,99,235,.10);
}

/* ---------- MOBILE: 2x5 per page ---------- */
.feature-viewport.mobile{display:none;}
.page-track{display:flex;gap:14px;}
.page{
  flex:0 0 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.page .feature-card{flex:none;}

/* Breakpoint: show mobile UI below 700px */
@media (max-width:700px){
  .feature-viewport.desktop{display:none;}
  .feature-viewport.mobile{display:block;}
}

/* Motion reduced */
@media (prefers-reduced-motion: reduce){
  .feature-card,.feature-icon,.feature-card::after{transition:none !important;}
}

/* SHOPZARD FEATURES END */




/* SHOPZARD PARTNER LOGO START */

.shopzardpartner1-section {
  padding: 40px 0;
  background: #fff;
  overflow: hidden;
}

.shopzardpartner1-container {
  max-width: 1500px;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.shopzardpartner1-track {
  display: flex;
  gap: 60px;
  animation: scrollLeft 150s linear infinite; /* ⬅️ Duration increased */
  align-items: center;
  width: max-content;
}

.shopzardpartner1-slide {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shopzardpartner1-slide img {
  height: 40px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.shopzardpartner1-slide img:hover {
  transform: scale(1.08);
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .shopzardpartner1-track {
    gap: 30px;
    animation-duration: 100s; /* ⬅️ Mobile me bhi slow */
  }

  .shopzardpartner1-slide img {
    height: 30px;
  }
}

/* SHOPZARD PARTNER LOGO END */



/* Popup  Contact Section Start */

/* Popup Overlay */
.plinfo-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  align-items: start;
  z-index: 9999;
}

/* Show Overlay */
.plinfo-popup-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease-in-out;
}

/* Popup Box */
.plinfo-popup {
  background: #fff;
  margin-top: 100px;
  width: 90%;
  max-width: 450px;
  padding: 30px;
  border-radius: 10px;
  position: relative;
  animation: slideDown 0.4s ease;
}

/* Animations */
@keyframes slideDown {
  from { transform: translateY(-40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Header */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.popup-header h2 {
  font-size: 20px;
  color: #333;
}

.close-btn {
  font-size: 22px;
  color: #333;
  cursor: pointer;
}

/* Form */
.popup-form input,
.popup-form select {
  width: 100%;
  padding: 10px 15px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
}

.popup-form button {
  width: 100%;
  padding: 12px;
  background-color: #506ffd  ;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}


/* Popup  Contact Section End */






/* Footer Banner  Start*/

.footerbannershopzard-wrapper {
  background: linear-gradient(to right, #0f172a, #1e293b);
  color: white;
  text-align: center;
  padding: 100px 20px;
  position: relative;
  overflow: hidden;
}

.footerbannershopzard-container {
  max-width: 1000px;
  margin: auto;
  padding: 0 20px;
}

.footerbannershopzard-title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 20px;
}

.footerbannershopzard-subtitle {
  font-size: 1.1rem;
  color: #d1d5db;
  margin-bottom: 40px;
  line-height: 1.6;
}

.footerbannershopzard-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.footerbannershopzard-btn {
  padding: 10px 26px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s ease;
}

.footerbannershopzard-btn.primary {
  background: white;
  color: #000;
}

.footerbannershopzard-btn.primary:hover {
  background: #f3f3f3;
}

.footerbannershopzard-btn.outline {
  border: 2px solid white;
  color: white;
  background: transparent;
}

.footerbannershopzard-btn.outline:hover {
  background: white;
  color: #000;
}

/* Footer Banner  End*/











/*  Admin Home Hero banner section Start  */

.shopzardadminprv1-section {
  width: 100%;
  display: flex;
  justify-content: center;
  background: transparent;
  padding: 20px;
  box-sizing: border-box;
}

.shopzardadminprv1-container {
  width: 1500px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

.shopzardadminprv1-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .shopzardadminprv1-section {
    padding: 20px 30px; /* ✅ Left-Right padding added */
  }

  .shopzardadminprv1-container {
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .shopzardadminprv1-section {
    padding: 15px; /* ✅ Mobile padding balanced */
  }

  .shopzardadminprv1-container {
    border-radius: 8px;
  }
}

/*  Admin Home Hero banner section end  */






/* Breadcrumb  */

.shopzardbadcrum-section {
  width: 100%;
  background: #506ffd;
  padding: 60px 0;
  font-family: 'Segoe UI', sans-serif;
}

.shopzardbadcrum-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}

.shopzardbadcrum-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.shopzardbadcrum-content {
  max-width: 600px;
  flex: 1;
}

.shopzardbadcrum-content h1 {
  font-size: 45px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.3;
}

.shopzardbadcrum-desc {
  font-size: 20px;
  color: #e4e4e4;
  margin-bottom: 30px;
}

.shopzardbadcrum-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.shopzardbadcrum-btn-black {
  text-decoration: none;
  font-weight: 600;
  padding: 12px 40px;
  border-radius: 30px;
  display: inline-block;
  transition: 0.3s ease;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
}

.shopzardbadcrum-btn-black:hover {
  background-color: #020202;
  color: #ffffff;
}

.shopzardbadcrum-image {
  flex: 1;
  text-align: right;
  border-radius: 5px;
}

.shopzardbadcrum-image img {
  max-width: 100%;
  width: 700px;
  max-height: 500px;
  animation: float 4s ease-in-out infinite;
  object-fit: contain;
  border-radius: 5px;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@media (max-width: 768px) {
  .shopzardbadcrum-wrapper {
    flex-direction: column;
    text-align: left;
  }

  .shopzardbadcrum-content {
    max-width: 100%;
  }

  .shopzardbadcrum-content h1 {
    font-size: 32px;
    text-align: left;
  }

  .shopzardbadcrum-desc {
    display: none;
  }

  .shopzardbadcrum-buttons {
    justify-content: flex-start; /* ✅ Align left in mobile */
    flex-wrap: nowrap;
  }

  .shopzardbadcrum-btn-black {
    min-width: auto;
    padding: 10px 28px;
    font-size: 15px;
  }

  .shopzardbadcrum-image {
    margin-top: 25px;
  }
}


/* Breadcrumb End */



.shopzardpartners-section {
  padding: 60px 20px;
  background: transparent;
  text-align: center;
  font-family: 'Segoe UI', sans-serif;
  max-width: 1730px;
  margin: auto;
}


.shopzardpartners-title {
  font-size: 32px;
  font-weight: 600;
  color: #0c0c0c;
  margin-bottom: 10px;
}

.shopzardpartners-title span {
  color: #506ffd  ;
}

.shopzardpartners-desc {
  font-size: 16px;
  color: #555;
  max-width: 700px;
  margin: 0 auto 40px;
}

.shopzardpartners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  align-items: center;
  justify-items: center;
  flex-wrap: wrap;
}

.shopzardpartners-grid img {
  max-width: 150px;
  height: auto;
  transition: transform 0.3s ease;
}

.shopzardpartners-grid img:hover {
  transform: scale(1.1);
}

.shopzardpartners-button {
  margin-top: 40px;
}

.view-all-btn {
  background: #506ffd  ;
  color: #fff;
  padding: 12px 30px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s ease;
}

.view-all-btn:hover {
  background: #1F2937  ff;
}

/* Responsive (Mobile - 4 logo per row) */
@media (max-width: 768px) {
  .shopzardpartners-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .shopzardpartners-grid img {
    max-width: 70px;
  }

  .shopzardpartners-title {
    font-size: 24px;
  }

  .shopzardpartners-desc {
    font-size: 14px;
  }
}

/* Fnq Section Start */








/* Exprites swipper Start */


.webzartexprites-section {
  max-width: 1500px;
  margin: 30px auto;
  padding: 0 20px;
}

.webzartexprites-title {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 30px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.webzartexprites-swiper {
  padding-bottom: 30px;
}

.webzartexprites-swiper .swiper-slide {
  display: flex;
  justify-content: center;
}

.webzartexprites-card {
  width: 100%;
  max-width: 1000px;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.webzartexprites-image {
  width: 100%;
  aspect-ratio: 1000 / 620; /* 👈 Exact ratio for your image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.webzartexprites-content {
  padding: 20px 25px 25px;
  text-align: left;
}

.webzartexprites-content h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.webzartexprites-content p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #333;
}

.webzartexprites-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.shopzard-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s ease;
  white-space: nowrap;
}

.shopzard-btn.primary {
  background-color: #d6f4ff;
  color: #506ffd  ;
}

.shopzard-btn.outline {
  border: 1px solid #313131ff;
  color: #313131ff;
  background: transparent;
}

.shopzard-btn.outline:hover {
  background-color: #0f0f0fff;
  color: #fff;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .webzartexprites-content {
    padding: 15px;
  }

  .webzartexprites-buttons {
    flex-wrap: nowrap;       /* 👈 buttons inline */
    overflow-x: auto;         /* 👈 scroll if needed */
    gap: 10px;
  }

  .shopzard-btn {
    width: auto;              /* 👈 not full width */
    font-size: 13px;
    padding: 6px 12px;
    text-align: center;
    flex-shrink: 0;
  }

  .webzartexprites-image {
    aspect-ratio: 1000 / 620; /* 👈 maintain full image ratio on mobile too */
  }
}


/* Exprites swipper end */









/* Portfolio card Start */

.demoshopzard-section {
  max-width: 1500px;
  margin: 30px auto;
  padding: 0 20px;
}

.demoshopzard-title {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 30px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.demoshopzard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
  gap: 30px;
}

.demoshopzard-card {
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.demoshopzard-image {
  width: 100%;
  aspect-ratio: 1000 / 620; /* 👈 fixed as per your image size */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.demoshopzard-content {
  padding: 20px 25px 25px;
  text-align: left;
}

.demoshopzard-content h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.demoshopzard-content p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #333;
}

.demoshopzard-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.demoshopzard-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s ease;
  white-space: nowrap;
}

.demoshopzard-btn.primary {
  background-color: #caebf7;
  color: #506ffd  ;
}

.demoshopzard-btn.primary:hover {
  background-color: #aad8e9;
  color: #506ffd  ;
}

.demoshopzard-btn.outline {
  background-color: #fde4c5;
  color: #a0400e;
}

.demoshopzard-btn.outline:hover {
  background-color: #ecc99e;
  color: #a0400e;
}

/* ✅ Mobile Responsive */
@media (max-width: 768px) {
  .demoshopzard-grid {
    grid-template-columns: 1fr; /* 1 card per row on mobile */
  }

  .demoshopzard-content {
    padding: 15px;
  }

  .demoshopzard-btn {
    width: auto;
    text-align: center;
    font-size: 13px;
    padding: 6px 12px;
  }

  .demoshopzard-buttons {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .demoshopzard-image {
    aspect-ratio: 1000 / 620; /* 👈 mobile par bhi same ratio maintain */
  }
}


/* Portfolio card End */











/* Floating Chat Wrapper */


.floating-chat-wrapper {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  animation: bounceIn 1s ease; /* Entry animation */
}

/* Main Chat Button */
.chat-icon {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

.chat-icon img {
  width: 40px;
  height: 40px;
}

/* Chat Options (Hidden by default) */
.chat-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.chat-options.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: fadeInUp 0.5s ease;
}

/* Individual Option Buttons */
.chat-option {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s;
}

.chat-option:hover {
  transform: scale(1.1) rotate(5deg);
}

.chat-option img {
  width: 40px;
  height: 40px;
}

/* Animations */
@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); opacity: 1; }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(67, 186, 255, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(242, 47, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(242, 47, 70, 0); }
}

@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}



/* Floating Chat Wrapper */





/* Services Details dbadcrum*/


.shopzardbadcrum2 {
  background: #d6f4ff;
  padding: 15px 0;
  font-family: 'Poppins', sans-serif;
}

.shopzardbadcrum2-container {
  width: 90%;
  max-width: 1480px;
  margin: auto;
}

.shopzardbadcrum2 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  flex-wrap: wrap;
}

.shopzardbadcrum2 ul li {
  margin-right: 8px;
  color: #333;
}

.shopzardbadcrum2 ul li a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.shopzardbadcrum2 ul li a:hover {
  text-decoration: underline;
}


/* Services Details dbadcrum*/



/* shopzard business soluction Fetures Prview page  */

.shopzardfeturs1-wrapper {
  width: 100%;
  background: transparent;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.shopzardfeturs1-container {
  max-width: 1500px;
  width: 100%;
}

/* Heading */
.shopzardfeturs1-heading {
  max-width: 720px;
  margin: 0 auto 50px;
  text-align: center;
}
.shopzardfeturs1-heading h2 {
  font-size: 30px;
  font-weight: 700;
  color: #1c1c1c;
  margin-bottom: 15px;
}
.shopzardfeturs1-heading p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Grid */
.shopzardfeturs1-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

@media (max-width: 991px) {
  .shopzardfeturs1-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.shopzardfeturs1-card {
  background: transparent;
  border: 1px solid #d1d1d1;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.shopzardfeturs1-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.shopzardfeturs1-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  background: #f9f9f9;
  justify-content: center;
  align-items: center;
}
.shopzardfeturs1-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* changed from cover */
  display: block;
}

/* Content */
.shopzardfeturs1-content {
  padding: 20px;
}
.shopzardfeturs1-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1c1c1c;
}
.shopzardfeturs1-content p {
  font-size: 14px;
  color: #555;
  margin: 0;
  line-height: 1.5;
}


/* shopzard business soluction Fetures Prview page  */




/* shopzard business soluction banner */

.custom-banner {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  position: relative;
  background-color: transparent;
  text-align: center;
  padding: 40px 20px 20px; /* Padding adjusted for mobile */
  border-radius: 10px;
  overflow: hidden;
}

.banner-heading {
  font-size: 30px;
  font-weight: 700;
  color: #131313ff;
  margin-bottom: 30px;
}

.banner-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}


/* shopzard business soluction banner */




/* 3 card Home Section Admin app prview Start */

/* 3 card Home Section – Admin app preview (UPDATED) */

/* Scope all sizing so padding/margins don’t cause overflow */
.shopzardstore1-section, 
.shopzardstore1-section * { box-sizing: border-box; }

.shopzardstore1-section {
  width: 100%;
  background: #ffffff;
  font-family: 'Poppins', sans-serif;
  padding: 56px 0;            /* reduced overall vertical padding */
}

/* Fixed content width (max 1520px) with TIGHT side padding on all screens */
.shopzardstore1-container {
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
  padding: 0 12px;            /* minimal side padding (desktop & mobile) */
}

/* Grid layout – cleaner wrapping than flex */
.shopzardstore1-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;                  /* tighter, consistent gap */
}

/* Card Base */
.shopzardstore1-card {
  border-radius: 16px;
  padding: 28px 22px;         /* reduced internal padding */
  background: #f8faff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border: 1px solid #e5e9ff;
  will-change: transform;
}
.shopzardstore1-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
  border-color: #d9defa;
}

/* Card Color Variants */
.shopzardstore1-blue {
  background: #eef5ff;
}
.shopzardstore1-yellow {
 background: #ffebf2;
}
.shopzardstore1-blue-light {
  background: #edfff3;
}

/* Text styling */
.shopzardstore1-text h3 {
  font-size: 20px;            /* slightly smaller for tighter look */
  color: #000000;
  margin-bottom: 10px;
  font-weight: 600;
}
.shopzardstore1-text p {
  font-size: 14.5px;
  color: #000000;
  margin-bottom: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.shopzardstore1-text a {
  font-size: 14.5px;
  font-weight: 600;
  color: #000000;
  text-decoration: none;
  transition: color .25s ease;
}
.shopzardstore1-text a:hover { color: #252525; }

/* Image styling */
.shopzardstore1-img {
  text-align: center;
  margin-top: 18px;           /* less spacing */
}
.shopzardstore1-img img {
  max-width: 100%;            /* use full card width on mobile/desktop */
  height: auto;
  border-radius: 12px;
  display: inline-block;
}

/* ====== Responsive ====== */

/* Large tablets / small laptops */
@media (max-width: 1200px) {
  .shopzardstore1-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .shopzardstore1-container { padding: 0 12px; }  /* keep side padding tight */
  .shopzardstore1-card { padding: 24px 18px; }
  .shopzardstore1-text h3 { font-size: 19px; }
}

/* Tablets & below */
@media (max-width: 992px) {
  .shopzardstore1-section { padding: 48px 0; }    /* reduce vertical space */
  .shopzardstore1-grid { gap: 18px; }
  .shopzardstore1-card { padding: 22px 16px; }
}

/* Mobile */
@media (max-width: 768px) {
  .shopzardstore1-container { padding: 0 10px; }  /* minimal side padding */
  .shopzardstore1-grid {
    grid-template-columns: 1fr;                   /* single column cards */
    gap: 14px;
  }
  .shopzardstore1-section { padding: 42px 0; }
  .shopzardstore1-card { padding: 18px 14px; }    /* tight internal padding */
  .shopzardstore1-text h3 { font-size: 18px; }
  .shopzardstore1-text p, 
  .shopzardstore1-text a { font-size: 14px; }
}

/* 3 card Home Section Admin app prview End */




/* shopzard Cards Section */


.shopzardcard1-wrapper {
  width: 100%;
  background: #f9f9f9;
  padding: 50px 20px;
  display: flex;
  justify-content: center;
}

.shopzardcard1-container {
  max-width: 1500px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  width: 100%;
}

.shopzardcard1-card {
  background: #ffffff; /* updated for contrast */
  border-radius: 12px;
  padding: 30px 25px;
  text-align: left;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 transparent;
  border: 1px solid #eee; /* subtle border for definition */
}

.shopzardcard1-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px);
}

.shopzardcard1-card i {
  font-size: 20px;
  color: #1a1a1a;
  margin-bottom: 20px;
  display: inline-block;
}

.shopzardcard1-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1f1f1f;
}

.shopzardcard1-card p {
  font-size: 14.5px;
  color: #555;
  line-height: 1.6;
}


/* shopzard Cards Section */





/* All Title */
.shopzardtitles-section {
  width: 100%;
  padding: 60px 20px 0 10px;
  background: transparent;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin: 0; /* ✅ No bottom margin */
}

.shopzardtitles-container {
  width: 100%;
  max-width: 1490px;
  margin: 0 auto;
}

.shopzardtitles-left {
  margin-bottom: 0;
}

.shopzardtitles-subtitle {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}

.shopzardtitles-title {
  font-size: 50px;
  font-weight: 500;
  line-height: 1.2;
  color: #000000;
  margin: 0;
  max-width: 1000px;
}

/* Responsive */
@media (max-width: 768px) {
  .shopzardtitles-section {
    padding: 40px 15px 0 15px; 
  }
  .shopzardtitles-container {
    width: 100%;
  }
  .shopzardtitles-title {
    max-width: 100%;
    font-size: 34px;
  }
  .shopzardtitles-subtitle {
    font-size: 14px;
  }
}
/* All Title */







/* Plans and Pricing - Light Theme */

.shopzardplan-section {
  padding: 60px 20px;
  font-family: 'Segoe UI', sans-serif;
  background: #f9fbff;
  color: #222;
}

.shopzardplan-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1500px;
  margin: auto;
}

.shopzardplan-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e3e7ed;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.shopzardplan-card:hover {
  transform: translateY(-6px);
}

.shopzardplan-top {
  font-weight: 600;
  font-size: 14px;
  color: #000000;
  background: #45f298;
  padding: 6px 12px;
  border-radius: 8px;
  width: fit-content;
  margin-bottom: 15px;
}

.shopzardplan-badge {
  font-size: 12px;
  color: #000000;
  background: #45f298;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 10px;
}
.pricetitle {
  font-size: 28px;
  font-weight: 500;
  margin: 10px 0;
  color: #041114;
}

.shopzardplan-subtext {
  color: #6b7a89;
  font-size: 14px;
  margin-bottom: 10px;
}

.shopzardplan-price {
  font-size: 28px;
  font-weight: 500;
  margin: 10px 0;
  color: #041114;
}

.shopzardplan-price span {
  font-size: 14px;
  color: #7a8d9a;
  font-weight: normal;
}

.shopzardplan-btn {
  background: #041114;
  color: #ffffff;
  text-align: center;
  padding: 12px 0;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  margin: 15px 0;
  transition: all 0.3s ease;
}

.shopzardplan-btn:hover {
  background: #06e699;
  color: #041114;
}

.shopzardplan-link {
  color: #0b79d0;
  text-decoration: underline;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 10px;
}

.shopzardplan-section-title {
  font-weight: bold;
  font-size: 14px;
  margin: 15px 0 5px;
  color: #041114;
}

.shopzardplan-card ul {
  padding-left: 18px;
  margin: 0;
}

.shopzardplan-card li {
  font-size: 14px;
  margin-bottom: 6px;
  list-style: disc;
  color: #4c5c67;
}


/* Planes and Pricing - Dark Theme */



/* Featurs 2 card */

:root{
  --sz-bg: transparent;
  --sz-text: #000000;
  --sz-muted: #585858;
  --sz-card: #f4f6fb;
  --sz-border: #c3c5ca;
  --sz-link: #3fb9a3;
  --sz-shadow: 0 16px 40px rgba(0,0,0,0.45);
}

/* Section: fixed 80px padding */
.shopzard2card{
  background: var(--sz-bg);
  color: var(--sz-text);
  padding: 80px 0;             /* fixed padding as requested */
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display: flex;
  justify-content: center;
}

/* Container: centered, max-width 1920px */
.shopzard2card-container{
  max-width: 1540px;           /* requested width */
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;             /* safe side gutter on very small screens */
  display: grid;
  grid-template-columns: repeat(2, minmax(340px, 1fr));
  gap: 40px;
  align-items: start;
}

/* Card */
.shopzard2card-item{
  background: var(--sz-card);
  border: 1px solid var(--sz-border);
  border-radius: 16px;
  overflow: hidden;
  will-change: transform;
}


/* Media: keep aspect tidy on huge screens */
.shopzard2card-item img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;          /* prevents layout jumps */
  object-fit: cover;
  margin-top: 20px;
}

/* Text */
.shopzard2card-item h3{
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 20px 20px 10px;
  letter-spacing: -.01em;
}
.shopzard2card-item p{
  font-size: 1rem;
  margin: 0 20px 22px;
  line-height: 1.65;
  color: var(--sz-muted);
}

/* Links */
.shopzard2card-item a{
  color: var(--sz-link);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px dashed rgba(63,185,163,.35);
}
.shopzard2card-item a:hover{
  border-bottom-style: solid;
}

/* ===================== Responsive ===================== */
/* XL (≥1440px): give more breathing room */
@media (min-width: 1440px){
  .shopzard2card-container{
    gap: 48px;
  }
  .shopzard2card-item h3{ font-size: 1.45rem; }
  .shopzard2card-item p{ font-size: 1.05rem; }
}

/* LG (992–1439px): comfortable two columns */
@media (max-width: 1439.98px){
  .shopzard2card-container{
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 36px;
  }
}

/* MD (768–991px): still two columns but tighter */
@media (max-width: 991.98px){
  .shopzard2card-container{
    padding: 0 20px;
    gap: 28px;
  }
  .shopzard2card-item h3{ font-size: 1.2rem; }
  .shopzard2card-item p{ font-size: .95rem; }
}

/* SM (≤767px): single column */
@media (max-width: 767.98px){
  .shopzard2card-container{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }
  .shopzard2card{ padding: 80px 0; } /* keep fixed as requested */
  .shopzard2card-item h3{ font-size: 1.1rem; }
  .shopzard2card-item p{ font-size: .92rem; }
}

/* Motion friendly */
@media (prefers-reduced-motion: reduce){
  .shopzard2card-item{ transition: none; }
  .shopzard2card-item:hover{ transform: none; box-shadow: none; }
}

/* Featurs 2 card */




/* Badcrum start  */

.shopzardbadcrums3-section{
  width:100%;
  padding:clamp(60px,8vw,120px) 20px;
  background:linear-gradient(90deg,#fbf9e5 0%,#f8f8f8 50%,#dae0fbce 100%);
  text-align:center;
  font-family:'Poppins',sans-serif;
  margin-top:-10px;
}
.shopzardbadcrums3-container{
  max-width:min(1000px,92vw);
  margin:0 auto;
}

/* Text */
.shopzardbadcrums3-subtitle{
  font-size:clamp(12px,1.6vw,14px);
  font-weight:600;color:#444;letter-spacing:.08em;margin-bottom:12px;
}
.shopzardbadcrums3-title{
  font-size:clamp(24px,5vw,42px);
  font-weight:600;color:#000;line-height:1.25;margin:0 0 14px;
}
.shopzardbadcrums3-desc{
  font-size:clamp(14px,2.2vw,18px);
  color:#666;margin:0 auto 28px;
  max-width:820px;
  padding:0 6px;
}

/* Button */
.shopzardbadcrums3-btn{
  display:inline-block;
  background:#000000;color:#fff;
  font-size:clamp(14px,1.8vw,16px);
  font-weight:600;
  padding:14px 32px;border-radius:28px;
  text-decoration:none;transition:.25s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.shopzardbadcrums3-btn:hover{background:#303030;transform:translateY(-2px)}

/* Breakpoints */
@media (max-width: 768px){
  .shopzardbadcrums3-container{max-width:600px}
  .shopzardbadcrums3-desc{max-width:90%}
  .shopzardbadcrums3-btn{width:92%;max-width:340px}
}
@media (max-width: 480px){
  .shopzardbadcrums3-section{padding:56px 16px}
  .shopzardbadcrums3-title{letter-spacing:.2px}
  .shopzardbadcrums3-btn{width:100%;padding:14px 20px;border-radius:24px}
}