@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/* DTF order home start */
:root {
  --vio-a: #5339F5;
  --vio-b: #8D27EA;
  --text-light: #ffffff;
  --txt-dark: #111827;
  --muted: #475569;
  --border: rgba(15, 23, 42, .08);
  --chip: rgba(255, 255, 255, .78);
  --chip-bd: rgba(148, 163, 184, .35);
  --ring: rgba(99, 102, 241, .35);
  --max: 1200px;
  --pad: clamp(56px, 8vw, 110px);
}

   /* width */
        ::-webkit-scrollbar {
            width: 5px;
        }

        /* Track */
        ::-webkit-scrollbar-track {
            background: #feffe3;
        }

        /* Handle */
        ::-webkit-scrollbar-thumb {
            background: #ed0000;
        }

        /* Handle on hover */
        ::-webkit-scrollbar-thumb:hover {
            background: #4400ff;
        }

/* font-family: "Montserrat", sans-serif; */

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

a {
  text-decoration: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

#body-wrp {
  overflow-x: hidden;
}


.liquidGlass-wrapper {
    position: relative;
    display: flex;
    font-weight: 600;
    overflow: hidden;

    color: black;
    cursor: pointer;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}


.liquidGlass-effect {
    position: absolute;
    z-index: 0;
    inset: 0;

    backdrop-filter: blur(2px);
    filter: url(#glass-distortion);
    overflow: hidden;
    isolation: isolate;
}

.liquidGlass-tint {
    z-index: 1;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
}

.liquidGlass-shine {
    position: absolute;
    inset: 0;
    z-index: 2;

    overflow: hidden;

    box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
        inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
}

.liquidGlass-text {
    z-index: 3;
    padding: 10px 25px;
}

.lq-button,
.lq-button>div {
    border-radius: 3rem;
}

.lq-button:hover {
    /* padding: 2px 2px; */
}

.lq-button:hover>div {
    border-radius: 100px;
}

.lq-button .lq-link {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    display: inline-block;
    font-size: 20px;
    color: aliceblue;
}

/*.lq-button:hover .lq-link {*/
/*    transform: scale(0.95);*/
/*}*/


/* nav css start */
.topbar {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.bar-icon {
  width: 30px;
  height: 30px;
}

.nav-wrp {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.navbar-brand img {
  width: 220px;
}

nav {
  position: fixed !important;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: #00000000;
  transition: all linear 0.4s !important;
}

nav.navbar.scrolled {
  padding: 15px 0;
}

nav.navbar.scrolled .liquidGlass-wrapper {
  display: initial !important;
}

.liquidGlass-wrapper {
  position: absolute;
  display: none !important;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
  z-index: 1;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(2px);
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
}

.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.349);
}

.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
}

/* nav css end */

/* hero css start */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #B81221, #FF0000);
  position: relative;
  z-index: 2;
  overflow: hidden;
  transition: all linear 0.4s;
}

.h-shade {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.h-el1 {
  position: absolute;
  top: 0;
  left: 0;
}

.h-el2 {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  right: 0;
}

.hero-wrp {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-text {
  width: 50%;
}

.hero-text h1 {
  font-family: "Montserrat", sans-serif;
  color: #FCFFDA;
  font-size: 80px;
  line-height: 0.8;
  font-weight: 900;
}

.hero-text p {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  margin: 20px 0 15px 0;
  color: #ffffff;
}

.hero-tags {
  display: flex;
  align-items: center;
  gap: 10px;
}

.h-single-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
}

.h-single-tag span {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.hero-btn {
  margin-top: 60px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.h-btn-1 {
  background: #FFF600;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50px;
  padding: 7px 25px;
  border: 3px solid #FFF600;
  transition: all linear 0.4s;
}

.h-btn-1:hover {
  color: #000000;
  border: 3px solid #ffffff;
  background: #ffffff;
}

.h-btn-2 {
  background: transparent;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 50px;
  padding: 7px 25px;
  border: 3px solid #fff;
  transition: all linear 0.4s;
}

.h-btn-2:hover {
  background: #ffff;
  color: #000000;
}

.hero-content {
  width: 50%;
  display: flex;
  justify-content: center;
}

.hero-video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
}

.hero-thumb {
  width: 100%;
}

.videoplay-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
}

.hero-slider {
  display: flex;
  gap: 12px;
  background: #00000060;
  backdrop-filter: blur(100px);
  width: max-content;
  padding: 10px;
  border-radius: 999px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0%);
}

.h-tab {
  border: 0;
  font-size: 14px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: all linear 0.4s;
}

.h-tab.is-active {
  background: #fff;
  color: #1E1E1E;
}

.run-dip {
  animation: hero-dip 260ms ease-in-out both;
}

.hero-text,
.hero-content {
  opacity: 1;
}

@keyframes hero-dip {
  0% {
    opacity: 1;
  }

  50% {
    opacity: .18;
  }

  100% {
    opacity: 1;
  }
}

.navbar {
  transition: background 260ms ease, background-color 260ms ease;
}

.navbar img {
  transition: opacity 160ms ease;
}

.navbar .fade-img {
  opacity: .15;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9998;
}

.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 300px;
  background: rgba(255, 255, 255, 0.703);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  transform: translateX(-102%);
  transition: transform .28s ease;
  z-index: 9999;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.drawer.is-open {
  transform: translateX(0);
}

.drawer-close {
  align-self: flex-end;
  font-size: 35px;
  line-height: 1;
  border: 0;
  background: none;
  color: #000000;
  cursor: pointer;
}

.drawer-nav a {
  display: block;
  padding: 12px 20px;
  color: #000000;
  font-weight: 600;
  text-decoration: none;
  transition: background .3s ease;
  border-bottom: 1px solid #0000003f;
}

.drawer-nav {
  margin-top: 50px;
}

.drawer-nav a:hover {
  background: #F20306;
  color: #ffffff;
}


/* lock scroll while open */
body.menu-open {
  overflow: hidden;
}


/* THEME CLASSES (per-tab base + hover, no inline styles) */
.theme-order .hero-text h1 {
  color: #FCFFDA;
}

.theme-order .hero-text p {
  color: #ffe7e7;
}

.theme-order .h-single-tag {
  background: rgba(255, 255, 255, .18);
}

.theme-order .h-single-tag span {
  color: #ffffff;
}

.theme-order .h-btn-1 {
  background: #FFF600;
  color: #111;
  border-color: #FFF600;
}

.theme-order .h-btn-1:hover {
  background: #ffffff;
  color: #000;
  border-color: #ffffff;
}

.theme-order .h-btn-2 {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}

.theme-order .h-btn-2:hover {
  background: #ffffff;
  color: #000;
}

.theme-design .hero-text h1 {
  color: #F20306;
}

.theme-design .hero-text p {
  color: #333333;
}

.theme-design .h-single-tag {
  background: #f1f1f1;
}

.theme-design .h-single-tag span {
  color: #111111;
}

.theme-design .h-btn-1 {
  background: #FF0000;
  color: #ffffff;
  border-color: #FF0000;
}

.theme-design .h-btn-1:hover {
  background: #ffffff;
  color: #FF0000;
  border-color: #FF0000;
}

.theme-design .h-btn-2 {
  background: transparent;
  color: #FF0000;
  border-color: #FF0000;
}

.theme-design .h-btn-2:hover {
  background: #FF0000;
  color: #ffffff;
}

.theme-customize .hero-text h1 {
  color: #ffffff;
}

.theme-customize .hero-text p {
  color: #e7f1ff;
}

.theme-customize .h-single-tag {
  background: rgba(255, 255, 255, .20);
}

.theme-customize .h-single-tag span {
  color: #ffffff;
}

.theme-customize .h-btn-1 {
  background: #ffffff;
  color: #0b59ff;
  border-color: #ffffff;
}

.theme-customize .h-btn-1:hover {
  filter: brightness(.95);
}

.theme-customize .h-btn-2 {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, .6);
}

.theme-customize .h-btn-2:hover {
  background: rgba(255, 255, 255, .08);
}

/* hero css end */



/* Design pack css start */
#design-pack-banner {
  display: flex;
  flex-direction: row;
  padding: 30px 25px;
  align-items: center;
  justify-content: space-between;
  background: url('../images/banner/design-packs.png') no-repeat center center/cover;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 20px;
  transition: all linear 0.4s;
  margin-top: 65px;
}

#design-pack-banner h1 {
  color: #ffffff;
  font-size: 42px;
  line-height: 0.8;
  font-weight: 600;
  margin: 0;
}

#design-pack-banner p {
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff99;
  margin: 0;
  letter-spacing: 10px;
  text-transform: uppercase;
}

#design-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0px;
  margin-top: 10px;
}

.dp-left {
  display: flex;
  align-items: center;
  gap: 30px;
}

#filter-btn {
  background: #B81221;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 50px;
  border: none;
  border-radius: 100px;
}

#dpSort {
  padding: 8px 20px;
  border: 2px solid #D3D3D3;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  color: #616161;
  background: transparent;
}

#dpSort:focus {
  outline: none;
  border: 2px solid #B81221;
}

#dpSort option {
  font-size: 16px;
  font-weight: 600;
  color: #616161;
}

#d-search-bar {
  position: relative;
}

#d-search-bar input {
  padding: 8px 40px 8px 20px;
  border: 2px solid #D3D3D3;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  color: #616161;
  background: transparent;
  width: 500px;
}

#d-search-bar input:focus {
  outline: none;
  border: 2px solid #B81221;
}

#d-search-bar button {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  background: #000;
  padding: 3px 20px;
  border-radius: 50px;
  transition: all linear 0.3s;
}

#d-search-bar button:hover {
  background: #B81221;
}




/* Filter overlay start */
.ftr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9500;
}

.ftr-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.ftr {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 340px;
  background: rgba(24, 24, 24, 0.92);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(-102%);
  transition: transform .28s ease;
  z-index: 9600;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.ftr--left {
  left: 0;
}

.ftr.is-open {
  transform: translateX(0);
}

.ftr__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ftr__title {
  font: 800 20px/1 Poppins, sans-serif;
  margin: 0;
}

.ftr__close {
  border: 0;
  background: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.ftr__group {
  margin: 12px 0;
}

.ftr__label {
  margin: 0 0 8px;
  font: 700 14px/1 Poppins, sans-serif;
  opacity: .9;
  letter-spacing: .2px;
}

.ftr__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow-y: scroll;
    height: calc(100vh - 210px);
}

.ftr-tag {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}

.ftr-tag:hover {
  background: rgba(255, 255, 255, .16);
}

.ftr-tag.is-selected {
  background: #ffe94d;
  border-color: #ffe94d;
  color: #111;
  transform: translateY(-1px);
}

.ftr__actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.ftr-btn {
  border: 0;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  color: #111;
  background: #fff;
}

.ftr-btn--primary {
  background: #B81221;
  color: #fff;
}

/* Filter overlay End */

/* Design Pack Main start */

#design-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  align-items: start;
}

#design-grid .pin {
  display: block;
  position: relative;
  break-inside: avoid;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transition: all linear 0.2s;
  border: 2px solid transparent;
}

.pin.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #d4eaff 25%, #facdff 37%, #e2e3ff 63%);
  background-size: 400% 100%;
  animation: shimmer 3s infinite;
  border-radius: 8px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

#design-grid .pin img {
  border-radius: 18px;
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

#design-grid img[data-src] {
  filter: blur(8px);
  transform: scale(1.02);
  transition: filter .3s, transform .3s;
}

#design-grid img.loaded {
  filter: blur(0);
  transform: none;
}


/* Optional hover lift */
#design-grid .pin:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  border: 2px solid #dfdfdf;
  transition: box-shadow .2s ease;
}

/* Responsive column counts */
@media (min-width: 1600px) {
  #design-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}
@media (max-width: 1280px) {
  #design-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 992px) {
  #design-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  #design-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  #design-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Design pack css end */



/* Single design css Start */
.rel-title {
  font-size: 32px;
  font-weight: 700;
  color: #111111;
  text-align: center;
  margin: 20px 0 20px 0;
}

/* Layout */
.dp-product {
  display: flex;
  justify-content: center;
  padding: 1rem;
  margin-top: 50px;
}

.dp-card {
  display: flex;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  max-width: 800px;
  width: 100%;
}

/* Media (left side image) */
.dp-media {
  flex: 1;
  margin: 0;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  /* rounded corners */
  overflow: hidden;
  /* clip image corners */
}

.dp-media img {
  width: 100%;
  height: auto;
  /* scale naturally */
  object-fit: cover;
  /* fill horizontally */
  display: block;
  border-radius: 20px;
  /* optional, but parent handles it */
}


/* Info section (right side content) */
.dp-info {
  flex: 1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Top bar buttons */
.dp-topbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.dp-chip {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.dp-chip--dark {
  background: #111827;
  color: #fff;
}

.dp-chip--dark:hover {
  background: #374151;
}

.dp-chip--red {
  background: #ef4444;
  color: #fff;
}

.dp-chip--red:hover {
  background: #dc2626;
}

/* Title + subtitle */
.dp-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #111827;
}

.dp-sub {
  color: #6b7280;
  font-size: 0.85rem;
  margin: 0;
}

/* Tags */
.dp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.dp-tag {
  background: #f3f4f6;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
}

/* Section heading */
.dp-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
  margin: 0.25rem 0 0.2rem;
}

/* Lists */
.dp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dp-list li {
  font-size: 0.8rem;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0;
}

.dp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #9ca3af;
  /* default gray */
}

.dp-dot--amber {
  background: #f59e0b;
  /* amber */
}

/* CTA buttons */
.dp-cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dp-btn {
  padding: 0.6rem 0.8rem;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all 0.2s;
}

.dp-btn--primary {
  background: #ef4444;
  color: #fff;
}

.dp-btn--primary:hover {
  background: #dc2626;
}

.dp-btn--ghost {
  background: #111827;
  color: #fff;
}

.dp-btn--ghost:hover {
  background: #374151;
}

/* Responsive */
@media (max-width: 768px) {
  .dp-card {
    flex-direction: column;
  }

  .dp-media img {
    height: 200px;
  }
}

.dp-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #111827;
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 9999;
}

.dp-toast.show {
  opacity: 1;
  transform: translateY(0);
}


/* Single design css end */





/* Cart Overlay css start */
:root {
  --cd-bg: #ffffff;
  --cd-surface: #f6f7f8;
  --cd-text: #111214;
  --cd-muted: #6b7280;
  --cd-border: #e6e7eb;
  --cd-accent: #B81221;
  --cd-dark: #0b0b0b;
}

.cart-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9400;
}

.cart-drawer__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 360px;
  max-width: 86vw;
  background: var(--cd-bg);
  color: var(--cd-text);
  box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
  transform: translateX(102%);
  transition: transform .28s ease;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--cd-border);
}

.cart-drawer.is-open {
  transform: translateX(0);
}

/* slide in */
.cart-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 14px;
  border-bottom: 1px solid var(--cd-border);
}

.cart-drawer__title {
  margin: 0;
  font: 800 18px/1.2 system-ui, sans-serif;
}

.cart-drawer__close {
  border: 0;
  background: #fff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #111;
  border: 1px solid var(--cd-border);
}

/* Items area */
.cart-drawer__list {
  overflow: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-drawer__item {
  display: grid;
  grid-template-columns: 76px 1fr 36px;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--cd-border);
  border-radius: 12px;
  background: #fff;
}

.cart-drawer__thumb {
  width: 76px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  background: #e9eaee;
}

.cart-drawer__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.cart-drawer__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-drawer__name {
  margin: 0;
  font: 700 14px/1.3 system-ui, sans-serif;
}

.cart-drawer__meta {
  margin: 0;
  color: var(--cd-muted);
  font: 500 12px/1.3 system-ui, sans-serif;
}

.cart-drawer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.cart-drawer__qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--cd-border);
  border-radius: 999px;
  padding: 5px 8px;
}

.cart-drawer__qty button {
  border: 0;
  background: var(--cd-surface);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: all linear 0.2s;
  border: 1px solid var(--cd-border);
}

.cart-drawer__qty button:hover {
  background: #B81221;
  color: #fff;
}

.cart-drawer__qty .cd-qty-input {
  width: 32px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
}

.cart-drawer__price {
  font-weight: 800;
}

.cart-drawer__del {
  align-self: flex-start;
  border: 1px solid var(--cd-border);
  background: #fff;
  color: #111;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-drawer__del:hover {
  background: #ffe8ea;
  border-color: #ffd0d5;
}

.cart-drawer__del svg {
  width: 18px;
  height: 18px;
}

.cart-drawer__foot {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--cd-border);
  background: #fff;
}

.cart-drawer__sum .cd-row {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
  color: #2d3036;
}

.cart-drawer__sum .cd-row--total {
  font-weight: 800;
  font-size: 16px;
}

.cart-drawer__btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid var(--cd-border);
  color: #111;
  background: #f0f1f3;
}

.cart-drawer__btn--primary {
  background: var(--cd-accent);
  border-color: var(--cd-accent);
  color: #fff;
}

@media (max-width:480px) {
  .cart-drawer {
    width: 92vw;
  }
}

/* Cart Overlay css end */




/* Cart Page css Start */
:root {
  --c-bg: #ffffff;
  --c-page: #f7f8f9;
  --c-text: #111214;
  --c-muted: #6b7280;
  --c-border: #e6e7eb;
  --c-primary: #B81221;
  --c-success: #16a34a;
}

#cartApp {
  margin: 100px 0;

}

text .cart-page {
  max-width: 1040px;
  padding: 0 16px;
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cart-title {
  font: 800 28px/1.2 Inter, system-ui, sans-serif;
  margin: 0;
}

.cart-hint {
  color: var(--c-muted);
  font-weight: 600;
}

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
}

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

.cart-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
}

.cart-head-row {
  display: grid;
  grid-template-columns: 120px 1fr 140px 120px 44px;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  color: #3a3d43;
  font-weight: 700;
}

.cart-rows {
  display: flex;
  flex-direction: column;
}

.cart-row {
  display: grid;
  grid-template-columns: 120px 1fr 140px 120px 44px;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--c-border);
  align-items: center;
  background: #fff;
}

.cart-row:last-child {
  border-bottom: 0;
}

.thumb {
  width: 120px;
  height: 86px;
  border-radius: 12px;
  overflow: hidden;
  background: #e9eaee;
}

.thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.title {
  margin: 0 0 6px;
  font: 700 16px/1.3 Inter, system-ui, sans-serif;
}

.meta {
  margin: 0;
  color: var(--c-muted);
  font: 500 13px/1.35 Inter, system-ui, sans-serif;
}

.qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 6px 10px;
  width: max-content;
}

.qty button {
  border: 0;
  background: #f3f4f6;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 800;
  transition: all linear 0.2s;
}

.qty button:hover {
  background: #B81221;
  color: #fff;
}

.qty input {
  width: 44px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 800;
}

.price {
  font-weight: 800;
}

.remove {
  border: 1px solid var(--c-border);
  background: #fff;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.remove:hover {
  background: #ffe8ea;
  border-color: #ffd0d5;
}

.remove svg {
  width: 18px;
  height: 18px;
}

.q-input::-webkit-outer-spin-button,
.q-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.q-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

.empty {
  padding: 18px;
  color: var(--c-muted);
}

.summary {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 16px;
  position: sticky;
  top: 16px;
}

.summary h3 {
  margin: 0 0 10px;
  font: 800 18px/1.2 Inter, system-ui, sans-serif;
}

.sum-row {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  color: #2f3237;
}

.sum-row.total {
  font-weight: 800;
  font-size: 18px;
}

.coupon {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.coupon input {
  flex: 1;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 600;
}

.coupon button {
  border: 0;
  background: #f0f1f3;
  color: #111;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}

.btn-primary {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--c-primary);
  color: #fff;
  font: 800 15px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.btn-secondary {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: #fff;
  color: #111;
  font: 800 15px/1 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.muted {
  color: var(--c-muted);
  font-weight: 600;
}

/* Cart Page css end */





/* Dtf Sticker css Start */
.mt-70 {
  margin-top: 70px !important;
}

.dtf-tutorial {
  background: #e9fdf0;
  border: 1px solid #c8f1d8;
  color: #0d3b2a;
  border-radius: 14px;
  padding: 12px 16px 12px 50px;
  position: relative;
  overflow: hidden;
}

/* dismissible banner styling */
.dtf-order {
  margin-top: 30px;
}

.dtf-tutorial__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dtf-tutorial__text {
  padding-left: 12px;
}

.dtf-tutorial__title {
  margin: 0 0 6px;
}

.dtf-tutorial__sub {
  margin: 0;
  color: #3a6b57;
  font: 600 14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.dtf-tutorial__thumb {
  position: relative;
  display: block;
  width: 300px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  background: #dfe7e3;
}

/* clickable thumbnail link */
.dtf-tutorial__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dtf-tutorial__play {
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  background: #fff;
  color: #0d3b2a;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  pointer-events: none;
}

.dtf-tutorial__close {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #2c7255;
  font-size: 18px;
  cursor: pointer;
}

/* accessible close button */
.dtf-tutorial__close:hover {
  color: #0d3b2a;
}

@media (max-width: 600px) {
  .dtf-tutorial__thumb {
    width: 140px;
    height: 78px;
  }

  .dtf-tutorial__title {
    font-size: 16px;
  }

  .dtf-tutorial__sub {
    font-size: 13px;
  }
}





/* DTF sticker order main part */

.dtf-order__wrap {
  display: grid;
  grid-template-columns: minmax(280px, 560px) 1fr;
  gap: 50px;
  align-items: start;
}

.dtf-order__left {
  position: sticky;
  top: 12px;
  align-self: start;
}

.dtf-order__right {
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding-right: 6px;
}

.dtf-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}

.dtf-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}

.dtf-slide.is-active {
  opacity: 1;
}

.dtf-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.dtf-thumbs img {
  width: 22%;
  border-radius: 8px;
  aspect-ratio: 1.4/1;
  object-fit: cover;
  cursor: pointer;
  opacity: .75;
}

.dtf-thumbs img:hover {
  opacity: 1;
}

.dtf-accordion {
  border: 1px solid #e6e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.dtf-acc__head {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  background: #000000;
  border: 0;
  cursor: pointer;
  color: #ffff;
  transition: all linear 0.3s;
}

.dtf-acc__icon {
  transform: rotate(-90deg);
  transition: transform .2s ease;
}

.dtf-acc__head[aria-expanded="true"] .dtf-acc__icon {
  transform: rotate(0deg);
}

.dtf-acc__panel {
  padding: 12px 14px;
}

.dtf-price {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.dtf-cards {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}

.dtf-card {
  border: 1px solid #e6e7eb;
  background: #fff;
  border-radius: 20px;
  padding: 25px 23px;
}

.dtf-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dtf-card__title {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
}

.dtf-card__remove {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e6e7eb;
  background: #fff;
  cursor: pointer;
  transition: all linear 0.2s;
}

.dtf-card__remove:hover {
  background: #ffe8ea;
  border-color: #ffd0d5;
}

.dtf-drop {
  display: block;
  border: 2px dashed #e2e4ea;
  border-radius: 12px;
  background: #fbfcfd;
  padding: 19px 0 23px 0;
  text-align: center;
  cursor: pointer;
}

.dtf-drop__ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #888888;
  font-weight: 520;
  font-size: 14px;
}

.dtf-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.dtf-preview img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .08);
}

.dtf-or {
  text-align: center;
  color: #6b7280;
  margin: 10px 0;
}

.dtf-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.dtf-input,
.dtf-textarea {
  border: 1px solid #e6e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font: 600 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto;
}


.dtf-btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  cursor: pointer;
}

.dtf-btn--primary {
  background: #16a34a;
  color: #fff;
}

.dtf-btn--outline {
  background: #111;
  color: #fff;
}

.dtf-btn--ghost {
  background: #ffffff;
  color: #000000;
  border: 1px solid #D2D2D2;
  font-size: 13px;
  font-weight: 400 !important;
  padding: 10px 30px;
  margin-top: 12px;
  transition: all linear 0.2s;
}


.dtf-add {
  margin-top: 8px;
}

.dtf-checkout {
  margin-top: 14px;
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 32%);
}

.dp-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}

.dp-modal.is-open {
  display: block;
}

.dp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}


.dp-modal__dialog {
  position: relative;
  width: min(940px, 94vw);
  margin: 40px auto;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .25);
}

.dp-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #e6e7eb;
}

.dp-modal__close {
  width: 34px;
  height: 34px;
  border: 1px solid #e6e7eb;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.dp-modal__tabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
}

.dp-tab {
  border: 1px solid #e6e7eb;
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.dp-tab.is-active {
  background: #111;
  color: #fff;
}

.dp-modal__content {
  padding: 10px 14px;
  max-height: 60vh;
  overflow: auto;
}

.dp-grid-pack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  grid-auto-flow: dense;
}

.dp-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #f2f3f5;
}

.dp-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dp-card.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(220, 38, 38, .5);
}

@media (max-width:900px) {
  .dtf-order__wrap {
    grid-template-columns: 1fr;
  }

  .dtf-order__left {
    position: relative;
    top: auto;
  }

  .dtf-order__right {
    max-height: none;
    overflow: visible;
  }
}

#pricePanel h5 {
  margin: 20px 0 !important;
}

.dtf-price li {
  font-size: 14px !important;
}

.dtf-btn--ghost:hover {
  background: #f1f1f1;
}

.dtf-btn--red:hover {
  background: #ea1224;
}

#btnAddCard {
  background: #000000;
  color: #fff;
  width: 100%;
  width: 100%;
  font-size: 16px;
  font-weight: 600 !important;
  padding: 9px 0;
  border-radius: 10px;
  transition: all linear 0.2s;
}

#btnSaveCheckout {
  background: #005A25;
  color: #fff;
  width: 100%;
  font-size: 20px;
  font-weight: 600 !important;
  padding: 30px;
  border-radius: 10px;
  transition: all linear 0.2s;
  display: flex;
  justify-content: space-between;
}

#btnSaveCheckout:hover {
  background: #004d20;
}

.dtf-choose {
  display: flex;
  gap: 20px;
  width: 100%;
  justify-content: space-between;
}

.dtf-upload {
  width: 70%;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.dtf-packs {
  display: flex;
  width: 30%;
}

.dtf-btn--red {
  background: #B81221;
  color: #fff;
  font-size: 16px;
  font-weight: 600 !important;
  width: 100%;
  border-radius: 10px;
  transition: all linear 0.2s;
  height: 100%;
}

.dp-modal__title {
  font-size: 25px;
  font-weight: 700;
  margin: 0;
  padding: 10px;
  color: transparent;
  background: linear-gradient(90deg, #B81221, #682BD7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* choosing design from packs */
.pack-grid {
  columns: 5 280px;
  gap: 16px;
  padding: 12px 8px;
}

.pack-pin {
  position: relative;
  display: block;
  break-inside: avoid;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

.pack-pin img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: 12px;
}

.pack-pin:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transition: box-shadow .2s ease;
}

.pack-pin.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(220, 38, 38, .5);
  pointer-events: none;
}

.pack-check {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  color: #B81221;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.pack-pin.is-selected .pack-check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width:1280px) {
  .pack-grid {
    columns: 4 240px;
    column-gap: 16px;
  }
}

@media (max-width:992px) {
  .pack-grid {
    columns: 3 220px;
    column-gap: 14px;
  }
}

@media (max-width:720px) {
  .pack-grid {
    columns: 2 180px;
    column-gap: 12px;
  }
}

@media (max-width:480px) {
.pack-grid {
    columns: 2 88px;
    column-gap: 10px;
}
}

/* Dtf Sticker css end */




/* user css start */
.user-portal-container {
  display: flex;
  min-height: 100vh;
}

.user-portal-sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid #ececec;
  /* padding-bottom: 24px; */
  position: relative;
  box-shadow: 0 0 8px #e2e8f066;
  transition: transform 0.38s cubic-bezier(.68, -0.55, .27, 1.55), box-shadow 0.35s;
  z-index: 11000;
  height: 100vh;
}

.user-portal-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px 24px;
  border-bottom: 1px solid #dadada;
}

.user-portal-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

#portal-panel-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0;
}

.user-portal-sidebar-close {
  font-size: 28px;
  color: #b1b1b1;
  cursor: pointer;
  display: none;
  transition: color 0.25s;
}

.user-portal-sidebar-close:hover {
  color: #5b21b6;
  transform: rotate(90deg) scale(1.05);
  transition: transform 0.25s;
}

/* Footer pinned to bottom with white background like the screenshot */
.user-portal-sidebar-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  background: #ffffff;
  border-top: 1px solid #f1f2f5;
}

/* Button baseline: white tile look, left icon + text */
.user-portal-sidebar-footer>button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  color: #111827;
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease, filter .15s ease;
}

/* Icon sizing */
.user-portal-sidebar-footer>button img {
  width: 18px;
  height: 18px;
  display: block;
  filter: none;
}

/* Hover and focus: black background, white text, invert icon */
.user-portal-sidebar-footer>button:hover,
.user-portal-sidebar-footer>button:focus {
  background: #0b1020;
  color: #ffffff;
  border-color: #0b1020;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.user-portal-sidebar-footer>button:hover img,
.user-portal-sidebar-footer>button:focus img {
  filter: invert(1);
}

/* Keyboard focus ring refinement (optional) */
.user-portal-sidebar-footer>button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, .2), 0 2px 10px rgba(0, 0, 0, .12);
}

/* Active press feedback */
.user-portal-sidebar-footer>button:active {
  transform: translateY(1px);
}

.user-portal-menu-list {
  list-style: none;
  margin: 0;
  padding: 20px 10px;
}

.user-portal-menu-list li {
  margin-bottom: 10px;
}

.user-portal-menu-list a {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  text-decoration: none;
  border-radius: 8px;
  color: #000000;
  transition: background 0.22s, color 0.22s, transform 0.18s;
  position: relative;
}

.user-portal-menu-list a.menu-active,
.user-portal-menu-list a:hover {
  background: #000000;
  color: #fff;
}

.user-portal-menu-list a.menu-active img,
.user-portal-menu-list a:hover img {
  filter: invert(1);
}

#dashboard-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-portal-main-panel {
  flex: 1;
  min-width: 0;
  /* padding: 28px 36px 36px 36px; */
  overflow-y: scroll;
  height: 100vh;
}

#user-portal-panel-content {
  min-height: calc(100vh - 87px);
  padding: 20px;
  background: #F9F9FA;
}

.user-portal-panel-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 34px;
  background: #ffffff;
  padding: 20px;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  z-index: 9999;
}

.user-portal-breadcrumb {
  font-size: 15px;
  color: #7c8090;
}

.user-portal-home-link {
  font-size: 14px;
  color: #222;
  font-weight: 600;
  text-decoration: none;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid #d6d6d6;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all linear 0.2s;
}

.user-portal-home-link:hover {
  background: #000000;
  color: #ffffff;
}

.user-portal-home-link img {
  width: 18px;
  transition: all linear 0.2s;
}

.user-portal-home-link:hover img {
  filter: invert(1);
}


.p-card-grid {
  display: flex;
  gap: 20px;
  /* margin-bottom: 28px; */
  padding: 20px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #00000029;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.quick-card {
  flex: 1;
  min-width: 160px;
  border-radius: 16px;
  padding: 38px 26px;
  box-shadow: 0 6px 18px #bbb3fd15;
  color: #fff;
  position: relative;
  font-size: 20px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: quickCardFadeIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
  transition: all linear 0.2s;
  display: flex;
  align-items: center;
  gap: 15px;
}

.quick-card img {}

.quick-card .q-txt h4 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.quick-card .q-txt p {
  font-size: 14px;
  margin: 0;
}

@keyframes quickCardFadeIn {
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.quick-card.customize {
  background: linear-gradient(94deg, #0892d0, #4b0082);
}

.quick-card.customize:hover {
  scale: 1.03;
}

.quick-card.dtf {
  background: linear-gradient(94deg, #CB218E, #6617CB);
}

.quick-card.dtf:hover {
  scale: 1.03;
}

.quick-card.library {
  background: #F20306;
}

.quick-card.library:hover {
  scale: 1.03;
}

.quick-card .quick-label {
  position: absolute;
  top: 16px;
  right: 18px;
  background: #ffffff29;
  color: #ffffff;
  border-radius: 18px;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px #4a6cf714;
  letter-spacing: 0.08em;
}

.stats-panel {
  background: url('../images/banner/grad1.png') no-repeat center/cover;
  border-radius: 18px;
  padding: 28px;
  color: #2d1862;
  opacity: 0;
  animation: fadeInStats 0.6s ease forwards;
  animation-delay: 0.28s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.stats-header img {
  background: linear-gradient(45deg, #5b21b6, #F20306);
  border-radius: 20px;
  padding: 10px;
  width: 60px;
}

@keyframes fadeInStats {
  to {
    opacity: 1;
  }
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.stats-sub {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.stat-header-txt {
  font-family: 'Poppins';
}

.state-small {
  background: #ffffff;
  padding: 3px 14px;
  color: #464646;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.state-small img {
  width: 16px;
}

.stats-info {
  display: flex;
  align-items: center;
  gap: 18px;
  /* margin-bottom: 24px; */
  font-size: 15px;
}

.stats-value {
  font-size: 32px;
  font-weight: 800;
  color: #5b21b6;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}

.stats-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.stats-card {
  flex: 1;
  display: flex;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 0 6px #e2e8f066;
  animation: statsCardFadeIn 0.7s cubic-bezier(0.26, .61, .36, 1.08) forwards;
  opacity: 0;
}

.stats-card img {
  width: 32px;
  height: 32px;
}

.st-txt p {
  font-size: 14px;
  margin: 0;
  color: #787878;
}

.st-txt span {
  font-weight: 700;
}

.stats-card:nth-child(1) {
  animation-delay: 0.41s;
}

.stats-card:nth-child(2) {
  animation-delay: 0.48s;
}

.stats-card:nth-child(3) {
  animation-delay: 0.52s;
}

.stats-card:nth-child(4) {
  animation-delay: 0.58s;
}

@keyframes statsCardFadeIn {
  to {
    opacity: 1;
    transform: scale(1.01);
  }
}

.btn {
  padding: 8px 14px;
  font-size: 16px;
  background: #715aff;
  color: #fff;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  margin-left: 16px;
  transition: background 0.18s, transform 0.15s;
}

.btn:hover {
  background: #5531a5;
  transform: scale(1.08);
}

.user-portal-sidebar-burger {
  display: none;
  border: none;
  cursor: pointer;
  opacity: 0.96;
}

.user-portal-sidebar-burger img {
  width: 24px;
}

.d-quick-title {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.d-quick-title h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.d-quick-title img {
  width: 24px;
}

.d-quick-title a {
  font-size: 13px;
  color: #3e3e3e;
  border: 1px solid #bababa;
  padding: 4px 12px;
  border-radius: 50px;
  transition: all linear 0.2s;
}

.d-quick-title a:hover {
  background: #000;
  color: #fff;
}

.d-quick-title a:hover img {
  filter: invert(1);
}

.d-quick-title a img {
  width: 18px;
}

.user-portal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(35, 36, 49, 0.23);
  z-index: 1099;
  animation: overlayFadeIn .35s linear;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 950px) {
  .user-portal-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 260px;
    background: #fff;
    transform: translateX(-105%);
    box-shadow: 0 0 16px #2222;
  }

  .user-portal-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 22px #4931a525, 0 1px 0 #efeffa;
    transition: transform 0.37s cubic-bezier(.68, -0.55, .27, 1.55), box-shadow 0.32s;
  }

  .user-portal-sidebar-close {
    display: block;
  }

  .user-portal-overlay.active {
    display: block;
    animation: overlayFadeIn .27s linear;
  }

  .user-portal-sidebar-burger {
    display: block;
  }

  .user-portal-main-panel {
    /* padding: 28px 0px 36px 0px; */
    margin-top: 63px;
  }
}

.user-portal-sidebar-burger {
  display: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  transition: background 0.25s, box-shadow 0.25s;
  margin-right: 12px;
}



@media (max-width: 950px) {
  .user-portal-sidebar-burger {
    display: inline-block;
    background: white;
  }

  .user-portal-panel-header {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
  }

  /* Adjust breadcrumb and home link for smaller space */
  .user-portal-breadcrumb {
    flex: 1;
    font-size: 13px;
    color: #6b6f84;
  }

  .user-portal-home-link {
    font-size: 0px;
    padding: 6px 4px 6px 10px;
  }
}

@keyframes globalFadein {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }

  /*
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: 0.15s;
  */
}


/* user css start */

.order-panel {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.order-top h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-top h3 img {
  width: 24px;
}

.order-all-btn {
  padding: 6px 12px;
  font-size: 14px;
  background: #ffffff;
  color: #414141;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all linear 0.2s;
  border: 1px solid #d6d6d6;
}

.order-all-btn img {
  width: 12px;
  margin-left: 3px;
  filter: invert(0.7);
  transition: all linear 0.2s;
}

.order-all-btn:hover {
  background: #000000;
  color: #ffffff;
}

.order-all-btn:hover img {
  filter: invert(0);
}

.order-table-wrp {
  width: 100%;
}

.order-table {
  width: 100%;
  font-size: 16px;
}

.view-btn img {
  width: 20px;
}

.view-btn {
  padding: 8px;
  border-radius: 6px;
  transition: all linear 0.2s;
  border: none;
  background: transparent;
}

.view-btn:hover {
  background: #f0f0f0;
}

.order-table tr {
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
}

.order-table tr:last-child {
  border-bottom: none;
}

.order-table tr td {
  padding: 12px 0;
}

.order-table tr th {
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
}

.status {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 100px;
}

.status.cancelled {
  background: #ff000011;
  color: #ff0000;
  border: 1px solid #ff0000;
}

.status.pending {
  background: #ff800011;
  color: #ff8000;
  border: 1px solid #ff8000;
}

.status.completed {
  background: #15ff0011;
  color: #0d9a00;
  border: 1px solid #15ff00;
}

.user-portal-menu-list a img {
  width: 20px;
  transition: all linear 0.2s;
}


/* user info css start */

.up-userinfo-section {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.up-userinfo-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 2px 8px #0b0f1a0d;
}

.up-userinfo-title {
  margin: 0 0 14px 0;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

.up-userinfo-subtitle {
  margin: 18px 0 10px 0;
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
}

/* Grid */
.up-userinfo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.up-userinfo-field--full {
  grid-column: 1 / -1;
}

/* Labels and inputs */
.up-userinfo-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.up-userinfo-input {
  width: 100%;
  height: 44px;
  background: #f4f5f8;
  border: 1px solid #e7e8ee;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.up-userinfo-input:focus {
  background: #ffffff;
  border-color: #715aff;
  box-shadow: 0 0 0 3px #715aff22;
}

.up-userinfo-textarea {
  height: auto;
  resize: vertical;
  line-height: 1.4;
}

/* Custom select */
.up-userinfo-select {
  position: relative;
}

.up-userinfo-select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: #f4f5f8;
  border: 1px solid #e7e8ee;
  border-radius: 10px;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.up-userinfo-select select:focus {
  background: #fff;
  border-color: #715aff;
  box-shadow: 0 0 0 3px #715aff22;
}

.up-userinfo-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #6b7280;
  pointer-events: none;
}

/* Checks */
.up-userinfo-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 16px;
}

.up-userinfo-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.up-userinfo-check input {
  display: none;
}

.up-userinfo-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid #c9cbe2;
  background: #fff;
  display: inline-block;
  position: relative;
  transition: all .18s ease;
}

.up-userinfo-check input:checked+.up-userinfo-checkbox {
  border-color: #10b981;
  background: #10b981;
  box-shadow: 0 0 0 3px #10b98122;
}

.up-userinfo-check input:checked+.up-userinfo-checkbox::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: 2px solid #fff;
  border-left: none;
  border-top: none;
  transform: rotate(45deg);
}

.up-userinfo-checktext {
  font-size: 14px;
  color: #111827;
}

/* Actions */
.up-userinfo-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Save button with animated states */
.up-userinfo-savebtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #0b1020;
  background: #0b1020;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .18s ease, background .18s;
}

.up-userinfo-savebtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px #0b102022;
}

.up-userinfo-savebtn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Loader ripple */
.up-userinfo-savebtn-loader {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, #ffffff33 0, #ffffff00 60%);
  animation: up-userinfo-pulse 1s ease infinite;
}

@keyframes up-userinfo-pulse {
  0% {
    opacity: .0
  }

  50% {
    opacity: .45
  }

  100% {
    opacity: 0
  }
}

/* Done text hidden by default */
.up-userinfo-savebtn {
  transition: all .3s ease;
}

.up-userinfo-savebtn-done {
  display: none;
  font-weight: 700;
}

.up-userinfo-savebtn-icon {
  width: 16px;
  filter: invert(1);
}

.up-userinfo-savebtn-text {}

/* Loading state */
.up-userinfo-savebtn.is-loading .up-userinfo-savebtn-loader {
  opacity: 1;
}

.up-userinfo-savebtn.is-loading .up-userinfo-savebtn-text {
  opacity: .0;
}

/* Success state */
.up-userinfo-savebtn.is-success {
  background: #10b981;
  border-color: #0c966a;
}

.up-userinfo-savebtn.is-success .up-userinfo-savebtn-icon {
  display: none;
}

.up-userinfo-savebtn.is-success .up-userinfo-savebtn-text {
  display: none;
}

.up-userinfo-savebtn.is-success .up-userinfo-savebtn-done {
  display: inline;
  color: #ffffff;
}

/* Responsive */
@media (max-width: 820px) {
  .up-userinfo-grid {
    grid-template-columns: 1fr;
  }
}



/* Saved css start */

/* Wrapper */
.dpb-banner {
  --dpb-primary: #5b5bf7;
  --dpb-primary-2: #a855f7;
  --dpb-dark: #0b1020;
  --dpb-card: #ffffff;
  --dpb-soft: #eef2ff;
  --dpb-border: #e7e8ee;
  background: linear-gradient(90deg, #eef2ff, #f7f2ff);
  padding: 10px;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.dpb-wrap {
  background: linear-gradient(100deg, #edf0ff 0%, #f6f0ff 25%, #f7f4ff 60%, #ffffff 100%);
  border: 1px solid #edf0fe;
  border-radius: 14px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 4px 22px #7b61ff14 inset, 0 1px 0 #ffffff80 inset;
}

/* Left block */
.dpb-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.dpb-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--dpb-primary), var(--dpb-primary-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px #7c5bff55;
  flex: 0 0 44px;
}

.dpb-icon-glyph {
  font-size: 20px;
  line-height: 1;
}

.dpb-text {
  min-width: 0;
}

.dpb-title {
  margin: 0 0 6px 0;
  font-size: 26px;
  line-height: 1.2;
  color: #1f2937;
  font-weight: 800;
}

.dpb-sub {
  margin: 0 0 12px 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
  max-width: 820px;
}

.dpb-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 18px;
  color: #6b7280;
  font-weight: 600;
  font-size: 14px;
}

.dpb-stats li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dpb-i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ffffffaa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9ebf7;
  color: #6366f1;
  font-size: 12px;
  box-shadow: 0 1px 0 #fff inset;
}

/* Right buttons */
.dpb-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  align-items: flex-end;
}

.dpb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: transform .1s ease, box-shadow .18s ease, background .18s ease;
  border: 1px solid transparent;
}

.dpb-btn-primary {
  color: #fff;
  background: linear-gradient(90deg, #2563eb, #8b5cf6);
  border-color: #2943d9;
  box-shadow: 0 6px 16px #4c51ff3a;
}

.dpb-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px #4c51ff44;
}

.dpb-btn-i {
  font-size: 14px;
}

.dpb-btn-ghost {
  background: #ffffff;
  color: #111827;
  border-color: #e6e8ef;
}

.dpb-btn-ghost:hover {
  background: #f5f6fb;
  transform: translateY(-1px);
}

.dpb-btn-arrow {
  opacity: .8;
}

/* Responsive */
@media (max-width: 900px) {
  .dpb-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .dpb-right {
    align-items: stretch;
  }

  .dpb-title {
    font-size: 22px;
  }
}


#s-design-grid {
  columns: 5 280px;
  /* up to 5 columns, min width 280px each */
  /* responsive auto-fit columns */
  column-gap: 16px;
  padding: 12px 8px;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

#s-design-grid .pin {
  border-radius: 18px;
  break-inside: avoid;
  /* background: #fff; */
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, .08); */
  position: relative;
  overflow: hidden;
}

#s-design-grid .pin img {
  border-radius: 18px;
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  margin-bottom: 20px;
  transition: all linear 0.2s;
}

/* Scope to grid pins */
#s-design-grid .pin {
  position: relative;
}

/* Actions wrapper */
.sdg-pin-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

/* Three dots button */
.sdg-pin-dots {
  appearance: none;
  border: none;
  background: rgba(15, 18, 28, .62);
  padding: 6px 7px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  transition: background .18s, transform .12s;
  backdrop-filter: saturate(140%) blur(4px);
}

.sdg-pin-dots:hover {
  background: rgba(15, 18, 28, .8);
  transform: scale(1.04);
}

.sdg-pin-dots:active {
  transform: scale(0.98);
}

.sdg-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: .95;
}

/* Dropdown menu */
.sdg-pin-menu {
  position: absolute;
  top: 36px;
  right: 0;
  min-width: 140px;
  background: #0b1020;
  color: #fff;
  border: 1px solid #20263a;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2, .7, .2, 1);
}

.sdg-pin-menu.sdg-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sdg-pin-menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #fff;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.sdg-pin-menu-item:hover {
  background: #121731;
}

.sdg-pin-menu-item.sdg-unsave {
  color: #ffb4b4;
}

.sdg-pin-menu-item.sdg-unsave:hover {
  background: #2a1120;
}

/* Tiny toast */
.sdg-pin-toast {
  position: absolute;
  right: 50%;
  top: 20px;
  width: 100px;
  transform: translateX(-50%) translateY(10px);
  background: #ff0000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 12px #00000033;
}

.sdg-pin-toast.sdg-show {
  animation: sdg-toast 1.6s ease forwards;
}

/* Empty state message for Saved */
.up-saved-emptystate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 40px 18px;
  margin: 16px 0;
  color: #4b5563;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  text-align: center;
}

.up-saved-emptystate b {
  color: #111827;
}

.up-saved-emptystate .up-empty-cta {
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #0b1020;
  background: #0b1020;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}



@keyframes sdg-toast {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  12% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}



/* order css start */
/* Cards */

.ordtab-section {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.ordtab-filters-card {
  background: #fff;
  border: 1px solid #eceff5;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px #0b10200c;
  margin-bottom: 14px;
}

.ordtab-filters-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}



/* Filters layout */
.ordtab-filters-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ordtab-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 260px;
}

.ordtab-search-i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa3b2;
  font-size: 14px;
}

.ordtab-search-input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 8px 12px 8px 36px;
  font-size: 14px;
  background: #f8fafc;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

.ordtab-search-input:focus {
  outline: none;
  border-color: #705efb;
  background: #fff;
  box-shadow: 0 0 0 3px #715aff22;
}

/* Styled select keeping native behavior */
.ordtab-select-wrap {
  position: relative;
  flex: 0 0 180px;
}

.ordtab-status-select {
  appearance: none;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 8px 34px 8px 12px;
  font-weight: 400;
}

.ordtab-select-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
}

/* Table styling (matching screenshot) */
.ordtab-table-scroll {
  overflow: auto;
  border-radius: 10px;
}

.ordtab-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.ordtab-table thead th {
  font-size: 13px;
  text-align: left;
  color: #6b7280;
  padding: 8px 12px;
}

.ordtab-table tbody tr {
  background: #fff;
  border: 1px solid #000000 !important;
  border-radius: 12px;
  box-shadow: 0 1px 0 #fff inset;
  transition: transform .08s ease, box-shadow .16s ease;
}


.ordtab-table tbody td {
  padding: 12px;
  vertical-align: middle;
  font-size: 14px;
}

.ordtab-link {
  color: #2563eb;
  font-weight: 800;
  text-decoration: none;
}

/* Status badges */
.ordtab-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.ordtab-badge--delivered {
  background: #d1fae5;
  color: #0f766e;
}

.ordtab-badge--shipped {
  background: #e9d5ff;
  color: #7c3aed;
}

.ordtab-badge--processing {
  background: #dbeafe;
  color: #1d4ed8;
}

.ordtab-badge--cancelled {
  background: #fee2e2;
  color: #b91c1c;
}

.ordtab-badge--pending {
  background: #fef3c7;
  color: #a16207;
}

.ordtab-prev img {
  filter: invert(1);
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.ordtab-next img {
  filter: invert(1);
  width: 16px;
  height: 16px;
}

.ordtab-next,
.ordtab-prev {
  transition: all linear 0.2s;
}

.ordtab-next:hover img,
.ordtab-prev:hover img {
  filter: invert(0);
}

.ordtab-next:hover,
.ordtab-prev:hover {
  background: #000;
}

.ordtab-pages {
  display: flex;
}

.ordtab-page-number {
  border: 1px solid #e6e8ef;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 400;
}

.or-active {
  background: #000000 !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* Action eye button */
.ordtab-view {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e6e8ef;
  background: #fff;
  cursor: pointer;
}

/* Pagination (page shifter) */
.ordtab-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ordtab-page-btn {
  border: 1px solid #e6e8ef;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
}

.ordtab-page-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.ordtab-pages {
  display: flex;
  gap: 6px;
}

.ordtab-page-num {
  min-width: 36px;
  text-align: center;
  border: 1px solid #e6e8ef;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 800;
}

.ordtab-page-num.ordtab-active {
  background: #111827;
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .ordtab-select-wrap {
    flex: 1 1 160px;
  }
}

/* order css end */




/* Tutorial css start */

/* Banner */
.tutb-banner {
  --tutb-primary: #5b5bf7;
  --tutb-secondary: #a855f7;
  --tutb-ink: #0b1020;
  --tutb-soft: #eef2ff;
  --tutb-border: #e7e8ee;
  --tutb-muted: #6b7280;

  background: linear-gradient(90deg, #eef2ff, #f7f2ff);
  border-radius: 14px;
  padding: 10px;
}

/* Card */
.tutb-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  background: linear-gradient(100deg, #edf0ff 0%, #f6f0ff 30%, #faf7ff 70%, #ffffff 100%);
  border: 1px solid #edf0fe;
  border-radius: 14px;
  box-shadow: 0 4px 22px #7b61ff14 inset, 0 1px 0 #ffffff80 inset;
}

/* Left cluster */
.tutb-left {
  display: flex;
  gap: 14px;
  min-width: 0;
  align-items: flex-start;
}

.tutb-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--tutb-primary), var(--tutb-secondary));
  box-shadow: 0 6px 18px #7c5bff55;
}

.tutb-icon-glyph {
  font-size: 22px;
  line-height: 1;
}

.tutb-head {
  min-width: 0;
}

.tutb-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  line-height: 1.25;
  color: #1f2937;
  font-weight: 800;
}

.tutb-sub {
  margin: 0 0 10px 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
  max-width: 780px;
}

/* Points row */
.tutb-points {
  display: flex;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #374151;
  font-weight: 700;
  font-size: 14px;
  flex-wrap: wrap;
}

.tutb-points li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tutb-bullet {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 1px solid #e9ebf7;
  background: #ffffffaa;
  box-shadow: 0 1px 0 #fff inset;
}

.tutb-bullet--video {
  color: #6366f1;
}

.tutb-bullet--guide {
  color: #7c3aed;
}

.tutb-bullet--done {
  color: #10b981;
}

/* Right cluster (progress number) */
.tutb-right {
  text-align: right;
  flex: 0 0 auto;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.tutb-progress-num {
  font-size: 34px;
  font-weight: 800;
  color: #5b21b6;
  background: linear-gradient(90deg, #2563eb, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tutb-progress-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 700;
}

/* Journey progress bar */
.tutb-journey {
  padding: 12px 6px 6px;
}

.tutb-journey-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px 6px 12px;
  color: #4b5563;
  font-weight: 700;
  font-size: 14px;
}

.tutb-journey-title {
  color: #374151;
}

.tutb-journey-count {
  color: #6b7280;
}

.tutb-bar {
  margin: 0 6px 6px 6px;
  height: 10px;
  border-radius: 999px;
  background: #eef0f6;
  border: 1px solid #edf0f5;
  overflow: hidden;
}

.tutb-bar-fill {
  display: block;
  height: 100%;
  background: #0b0b22;
  border-radius: 999px;
  width: 33%;
}

/* Responsive */
@media (max-width: 900px) {
  .tutb-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .tutb-right {
    align-items: flex-start;
    text-align: left;
  }

  .tutb-title {
    font-size: 22px;
  }
}

@media (max-width: 560px) {
  .tutb-title {
    font-size: 20px;
  }

  .tutb-progress-num {
    font-size: 28px;
  }

  .tutb-points {
    gap: 12px;
  }
}




/* main tutoria start */
/* Shell */
.tutsec-wrapper {
  --ink: #0b1020;
  --muted: #6b7280;
  --br: #eceff5;
  --chip: #eef1ff;
  margin-top: 10px;
}

/* Tabs */
.tutsec-tabs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tutsec-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--br);
  background: #fff;
  color: #111827;
  font-weight: 800;
  box-shadow: 0 2px 8px #0b10200a;
  cursor: pointer;
}

.tutsec-tab.tutsec-active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.tutsec-tab-i {
  opacity: .9;
}

/* Grid */
.tutsec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 22px;
}

@media (max-width: 1100px) {
  .tutsec-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

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

/* Card */
.tutsec-card {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  box-shadow: 0 4px 16px #0b10200a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tutsec-media {
  position: relative;
  background: #f4f6fb;
}

.tutsec-media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.tutsec-pill {
  position: absolute;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: #0b1020cc;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #20263a;
}

.tutsec-pill--left {
  left: 12px;
}

.tutsec-pill--right {
  right: 12px;
}

.tutsec-pill--done {
  background: #10b981;
  border-color: #0d946e;
}

.tutsec-pill--dark {
  background: #0b1020cc;
}

.tutsec-dot {
  font-size: 16px;
  line-height: 1;
}

.tutsec-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tutsec-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
}

.tutsec-desc {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
}

.tutsec-meta {
  display: flex;
  gap: 16px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
}

.tutsec-meta-i {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tutsec-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tutsec-stars {
  color: #f59e0b;
  letter-spacing: 1px;
}

.tutsec-rate {
  font-weight: 800;
  color: #111827;
}

.tutsec-level {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #eef2ff;
  color: #374151;
  border: 1px solid #e6e8f6;
}

.tutsec-level--beginner {
  background: #e9f9f2;
  color: #0d946e;
  border-color: #b7f3dd;
}

.tutsec-level--intermediate {
  background: #e7efff;
  color: #1d4ed8;
  border-color: #bfd3ff;
}

.tutsec-level--advanced {
  background: #fde2e2;
  color: #b91c1c;
  border-color: #f8b8b8;
}

.tutsec-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.tutsec-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0b1020;
  color: #fff;
  border: 1px solid #0b1020;
  border-radius: 12px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 800;
}

.tutsec-cta:hover {
  background: #111827;
}

.tutsec-cta-i {
  font-size: 14px;
}

.tutsec-icbtn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #e6e8ef;
  background: #fff;
  cursor: pointer;
}

/* Complete button (videos only) */
.tutsec-complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #0d946e;
  background: #10b981;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.tutsec-complete-btn:hover {
  background: #0fb17a;
  border-color: #0a7a59;
  box-shadow: 0 6px 16px #10b98133;
  transform: translateY(-1px);
}

.tutsec-complete-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.tutsec-complete-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  color: #0d946e;
  font-size: 12px;
  font-weight: 900;
}

.tutsec-complete-text {
  font-size: 14px;
}

/* Mobile tweaks */
@media (max-width: 560px) {
  .tutsec-title {
    font-size: 18px;
  }

  .tutsec-media img {
    height: 200px;
  }
}


/* Tutorial css end */



/* Checkout css Start */
/* Tokens and shell */
.chk-wrap {
  --ink: #0b1020;
  --muted: #6b7280;
  --bd: #e9ecf3;
  --card: #ffffff;
  --pri: #111827;
  --accent: #715aff;
  --ok: #10b981;
  --soft: #f6f7fc;
  padding: 30px 0;
  background: #fafbff;
}

.chk-container {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}

@media (max-width: 900px) {
  .chk-container {
    grid-template-columns: 1fr;
  }
}

/* Card */
.chk-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 2px 10px #0b10200c;
  padding: 16px;
}

.chk-h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

/* Form grid */
.chk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 12px;
}

.chk-full {
  grid-column: 1 / -1;
}

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

.chk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chk-label {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.chk-input {
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  padding: 10px 12px;
  background: #f8fafc;
  font-size: 14px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

.chk-input:focus {
  outline: none;
  background: #fff;
  border-color: #705efb;
  box-shadow: 0 0 0 3px #715aff22;
}

.chk-input[type="select"],
select.chk-input {
  height: 42px;
}

/* Payment methods */
.chk-pay {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  background: #fff;
}

.chk-pay input {
  margin-top: 4px;
}

.chk-pay-body {
  flex: 1;
}

.chk-pay-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.chk-pay-ic {
  font-size: 16px;
}

.chk-badge {
  margin-left: auto;
  background: #eef2ff;
  border: 1px solid #cfd8ff;
  color: #374151;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.chk-pay-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* bKash fields block */
.chk-bkash-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.chk-bkash-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chk-help {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #6b7280;
  background: #f7faff;
  border: 1px dashed #dfe8ff;
  padding: 8px 10px;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .chk-bkash-box {
    grid-template-columns: 1fr;
  }
}

/* Terms */
.chk-term {
  margin: 10px 0 12px;
}

.chk-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.chk-check input {
  display: none;
}

.chk-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid #c9cbe2;
  background: #fff;
  position: relative;
}

.chk-check input:checked+.chk-box {
  background: #10b981;
  border-color: #0d946e;
  box-shadow: 0 0 0 3px #10b98122;
}

.chk-check input:checked+.chk-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: 2px solid #fff;
  border-left: none;
  border-top: none;
  transform: rotate(45deg);
}

/* Place order */
.chk-place {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  background: #0b1020;
  color: #fff;
  border: 1px solid #0b1020;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s, box-shadow .18s, background .18s;
}

.chk-place:hover {
  background: #111827;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px #0b102022;
}

.chk-place:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Summary */
.chk-summary .chk-card {
  position: sticky;
  top: 12px;
}

.chk-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.chk-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chk-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--bd);
}

.chk-item-txt {
  flex: 1;
}

.chk-name {
  font-weight: 600;
  color: #111827;
}

.chk-meta {
  font-size: 12px;
  color: #6b7280;
}

.chk-price {
  font-weight: 500;
}

.chk-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-weight: 700;
  color: #374151;
}

.chk-total {
  border-top: 1px dashed var(--bd);
  margin-top: 4px;
  padding-top: 10px;
  font-size: 16px;
}

.chk-note {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.chk-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Responsive spacing */
@media (max-width: 900px) {
  .chk-summary {
    order: -1;
  }
}

@media (max-width: 560px) {
  .chk-h2 {
    font-size: 16px;
  }

  .chk-card {
    padding: 14px;
  }

  .chk-place {
    height: 42px;
  }
}

/* Checkout css end */





/* print press profit start */
/* Shell */
.ppp-section {
  --ink: #0b1020;
  --muted: #6b7280;
  --border: #edf0f5;
  --glow: #7c5cff22;
  --grad1: #2563eb;
  --grad2: #8b5cf6;
  --grad3: #7c3aed;
  background: radial-gradient(1200px 500px at 50% 20%, #7c5cff10, transparent 60%), #f9fafb;
}

.ppp-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 16px;
  text-align: center;
  position: relative;

}

/* Eyebrow & Headings */
.ppp-eyebrow {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 10px #0b10200b;
  background: #fff;
}

.ppp-eyebrow p {
  margin: 0;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(90deg, #ff0000, #003cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* for Firefox */
  color: transparent;
}


.ppp-title {
  margin: 14px 0 8px;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #3700ff, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* for Firefox */
  color: transparent;
}

.ppp-sub {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 16px;
}

/* Steps */
.ppp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 28px;
  align-items: stretch;
  position: relative;
  justify-content: center;
}

/* Step Card */
.ppp-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 18px 22px;
  position: relative;
  box-shadow: 0 8px 24px #0b10200a, 0 0 0 1px #ffffff inset;
}

/* Number circle */
.ppp-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #374151;
  font-size: 13px;
  box-shadow: 0 4px 14px #0b10200d;
}

/* Icon tiles */
.ppp-icon {
  width: 92px;
  height: 92px;
  margin: 6px auto 14px;
  border-radius: 20px;
  background: linear-gradient(140deg, var(--grad1), var(--grad2));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 30px var(--glow);
}

.ppp-icon--violet {
  background: linear-gradient(140deg, #5b21b6, #7c3aed);
}

.ppp-icon--purple {
  background: linear-gradient(140deg, #6d28d9, #a855f7);
}

.ppp-emoji lord-icon {
  height: 50px;
  width: 50px;
}

/* Titles & desc */
.ppp-step-title {
  font-size: 22px;
  color: #0f172a;
  margin: 6px 0 6px;
  font-weight: 700;
}

.ppp-step {
  transition: all linear .2s;

}

.ppp-step:hover {
  transform: scale(1.03);
}

.ppp-step-desc {
  margin: 0;
  color: #7f7f7f;
  font-size: 14px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
  .ppp-title {
    font-size: 36px;
  }
}

@media (max-width: 900px) {
  .ppp-steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ppp-wrap {
    padding: 56px 14px;
  }

  .ppp-title {
    font-size: 32px;
  }

  .ppp-sub {
    font-size: 15px;
  }

  .ppp-step {
    padding: 24px 16px 20px;
  }

  .ppp-icon {
    width: 84px;
    height: 84px;
    border-radius: 18px;
  }

  .ppp-step-title {
    font-size: 20px;
  }

  .ppp-step-desc {
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .ppp-title {
    font-size: 28px;
  }

  .ppp-emoji {
    font-size: 32px;
  }

  .ppp-icon {
    width: 78px;
    height: 78px;
  }
}

/* print press profit end */


/* Section background */
.learn-sec {
  /* background: radial-gradient(900px 420px at 60% 10%, #7c5cff12, transparent 60%), #fafbff; */
}

/* Video card */
.learn-video {
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  padding-bottom: 56.25%;
}

.learn-video iframe {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Eyebrow badge */
.learn-badge {
  font-weight: 800;
  letter-spacing: .2px;
}

/* Title with gradient accent */
.learn-title {
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  text-transform: uppercase;
  font-size: 52px;
}

.grad-text {
  background: linear-gradient(90deg, #2563eb, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Stat tiles */
.learn-stat {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(11, 16, 32, .06);
}

.learn-stat-num {
  font-weight: 800;
  font-size: 1.6rem;
}

.learn-stat-label {
  font-weight: 700;
  color: #6b7280;
}

/* Buttons */
.learn-btn-primary {
  background: #5b61ff;
  border: 1px solid #4b4fe8;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: .75rem 1rem;
  box-shadow: 0 10px 22px rgba(76, 81, 255, .25);
  transition: all linear .2s;
}

.learn-btn-order {
  background: #ff0000;
  border: 1px solid #fe0000;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: .75rem 1rem;
  box-shadow: 0 10px 22px rgba(76, 81, 255, .25);
  transition: all linear .2s;
}

.learn-btn-primary:hover {
  background: #262626;
  border: 1px solid #282828;
  color: #fff;
}

.learn-btn-order:hover {
  background: #3300ff;
  border: 1px solid #3300ff;
  color: #fff;
}

.learn-btn-ghost {
  border: 2px solid #e6e8ef;
  background: #fff;
  color: #111827;
  font-weight: 700;
  border-radius: 12px;
  padding: .75rem 1rem;
  transition: all linear .2s;
}

.learn-btn-ghost:hover {
  color: #ff0000;
  border: 2px solid #ff0000;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .learn-title {
    font-size: 1.875rem;
  }
}

@media (max-width: 575.98px) {
  .learn-title {
    font-size: 1.6rem;
  }

  .learn-play-btn {
    width: 72px;
    height: 72px;
  }

  .learn-duration {
    font-size: .85rem;
  }
}

/* font-family: "Montserrat", sans-serif; */

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

a {
  text-decoration: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

#body-wrp {
  overflow-x: hidden !important;
}



/* user css start */
.user-portal-container {
  display: flex;
  min-height: 100vh;
}

.user-portal-sidebar {
  width: 260px;
  background: #fff;
  border-right: 1px solid #ececec;
  /* padding-bottom: 24px; */
  position: relative;
  box-shadow: 0 0 8px #e2e8f066;
  transition: transform 0.38s cubic-bezier(.68, -0.55, .27, 1.55), box-shadow 0.35s;
  z-index: 11000;
  height: 100vh;
}

.user-portal-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px 24px;
  border-bottom: 1px solid #dadada;
}

.user-portal-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

#portal-panel-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  margin: 0;
}

.user-portal-sidebar-close {
  font-size: 28px;
  color: #b1b1b1;
  cursor: pointer;
  display: none;
  transition: color 0.25s;
}

.user-portal-sidebar-close:hover {
  color: #5b21b6;
  transform: rotate(90deg) scale(1.05);
  transition: transform 0.25s;
}

/* Footer pinned to bottom with white background like the screenshot */
.user-portal-sidebar-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  background: #ffffff;
  border-top: 1px solid #f1f2f5;
}

/* Button baseline: white tile look, left icon + text */
.user-portal-sidebar-footer>button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff;
  color: #111827;
  border: 1px solid #e6e8ef;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease, filter .15s ease;
}

/* Icon sizing */
.user-portal-sidebar-footer>button img {
  width: 18px;
  height: 18px;
  display: block;
  filter: none;
}

/* Hover and focus: black background, white text, invert icon */
.user-portal-sidebar-footer>button:hover,
.user-portal-sidebar-footer>button:focus {
  background: #0b1020;
  color: #ffffff;
  border-color: #0b1020;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.user-portal-sidebar-footer>button:hover img,
.user-portal-sidebar-footer>button:focus img {
  filter: invert(1);
}

/* Keyboard focus ring refinement (optional) */
.user-portal-sidebar-footer>button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, .2), 0 2px 10px rgba(0, 0, 0, .12);
}

/* Active press feedback */
.user-portal-sidebar-footer>button:active {
  transform: translateY(1px);
}

.user-portal-menu-list {
  list-style: none;
  margin: 0;
  padding: 20px 10px;
}

.user-portal-menu-list li {
  margin-bottom: 10px;
}

.user-portal-menu-list a {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  text-decoration: none;
  border-radius: 8px;
  color: #000000;
  transition: background 0.22s, color 0.22s, transform 0.18s;
  position: relative;
}

.user-portal-menu-list a.menu-active,
.user-portal-menu-list a:hover {
  background: #000000;
  color: #fff;
}

.user-portal-menu-list a.menu-active img,
.user-portal-menu-list a:hover img {
  filter: invert(1);
}

#dashboard-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.user-portal-main-panel {
  flex: 1;
  min-width: 0;
  /* padding: 28px 36px 36px 36px; */
  overflow-y: scroll;
  height: 100vh;
}

#user-portal-panel-content {
  min-height: calc(100vh - 87px);
  padding: 20px;
  background: #F9F9FA;
}

.user-portal-panel-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 34px;
  background: #ffffff;
  padding: 20px;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  z-index: 9999;
}

.user-portal-breadcrumb {
  font-size: 15px;
  color: #7c8090;
}

.user-portal-home-link {
  font-size: 14px;
  color: #222;
  font-weight: 600;
  text-decoration: none;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid #d6d6d6;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all linear 0.2s;
}

.user-portal-home-link:hover {
  background: #000000;
  color: #ffffff;
}

.user-portal-home-link img {
  width: 18px;
  transition: all linear 0.2s;
}

.user-portal-home-link:hover img {
  filter: invert(1);
}


.p-card-grid {
  display: flex;
  gap: 20px;
  /* margin-bottom: 28px; */
  padding: 20px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #00000029;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.quick-card {
  flex: 1;
  min-width: 160px;
  border-radius: 16px;
  padding: 38px 26px;
  box-shadow: 0 6px 18px #bbb3fd15;
  color: #fff;
  position: relative;
  font-size: 20px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: quickCardFadeIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
  transition: all linear 0.2s;
  display: flex;
  align-items: center;
  gap: 15px;
}

.quick-card img {}

.quick-card .q-txt h4 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.quick-card .q-txt p {
  font-size: 14px;
  margin: 0;
}

@keyframes quickCardFadeIn {
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.quick-card.customize {
  background: linear-gradient(94deg, #0892d0, #4b0082);
}

.quick-card.customize:hover {
  scale: 1.03;
}

.quick-card.dtf {
  background: linear-gradient(94deg, #CB218E, #6617CB);
}

.quick-card.dtf:hover {
  scale: 1.03;
}

.quick-card.library {
  background: #F20306;
}

.quick-card.library:hover {
  scale: 1.03;
}

.quick-card .quick-label {
  position: absolute;
  top: 16px;
  right: 18px;
  background: #ffffff29;
  color: #ffffff;
  border-radius: 18px;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px #4a6cf714;
  letter-spacing: 0.08em;
}

.stats-panel {
  background: url('../images/banner/grad1.png') no-repeat center/cover;
  border-radius: 18px;
  padding: 28px;
  color: #2d1862;
  opacity: 0;
  animation: fadeInStats 0.6s ease forwards;
  animation-delay: 0.28s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.stats-header img {
  background: linear-gradient(45deg, #5b21b6, #F20306);
  border-radius: 20px;
  padding: 10px;
  width: 60px;
}

@keyframes fadeInStats {
  to {
    opacity: 1;
  }
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.stats-sub {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.stat-header-txt {
  font-family: 'Poppins';
}

.state-small {
  background: #ffffff;
  padding: 3px 14px;
  color: #464646;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.state-small img {
  width: 16px;
}

.stats-info {
  display: flex;
  align-items: center;
  gap: 18px;
  /* margin-bottom: 24px; */
  font-size: 15px;
}

.stats-value {
  font-size: 32px;
  font-weight: 800;
  color: #5b21b6;
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}

.stats-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.stats-card {
  flex: 1;
  display: flex;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 12px 18px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 0 6px #e2e8f066;
  animation: statsCardFadeIn 0.7s cubic-bezier(0.26, .61, .36, 1.08) forwards;
  opacity: 0;
}

.stats-card img {
  width: 32px;
  height: 32px;
}

.st-txt p {
  font-size: 14px;
  margin: 0;
  color: #787878;
}

.st-txt span {
  font-weight: 700;
}

.stats-card:nth-child(1) {
  animation-delay: 0.41s;
}

.stats-card:nth-child(2) {
  animation-delay: 0.48s;
}

.stats-card:nth-child(3) {
  animation-delay: 0.52s;
}

.stats-card:nth-child(4) {
  animation-delay: 0.58s;
}

@keyframes statsCardFadeIn {
  to {
    opacity: 1;
    transform: scale(1.01);
  }
}

.btn {
  padding: 8px 14px;
  font-size: 16px;
  background: #715aff;
  color: #fff;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  margin-left: 16px;
  transition: background 0.18s, transform 0.15s;
}

.btn:hover {
  background: #5531a5;
  transform: scale(1.08);
}

.user-portal-sidebar-burger {
  display: none;
  border: none;
  cursor: pointer;
  opacity: 0.96;
}

.user-portal-sidebar-burger img {
  width: 24px;
}

.d-quick-title {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.d-quick-title h3 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.d-quick-title img {
  width: 24px;
}

.d-quick-title a {
  font-size: 13px;
  color: #3e3e3e;
  border: 1px solid #bababa;
  padding: 4px 12px;
  border-radius: 50px;
  transition: all linear 0.2s;
}

.d-quick-title a:hover {
  background: #000;
  color: #fff;
}

.d-quick-title a:hover img {
  filter: invert(1);
}

.d-quick-title a img {
  width: 18px;
}

.user-portal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(35, 36, 49, 0.23);
  z-index: 1099;
  animation: overlayFadeIn .35s linear;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 950px) {
  .user-portal-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 260px;
    background: #fff;
    transform: translateX(-105%);
    box-shadow: 0 0 16px #2222;
  }

  .user-portal-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 22px #4931a525, 0 1px 0 #efeffa;
    transition: transform 0.37s cubic-bezier(.68, -0.55, .27, 1.55), box-shadow 0.32s;
  }

  .user-portal-sidebar-close {
    display: block;
  }

  .user-portal-overlay.active {
    display: block;
    animation: overlayFadeIn .27s linear;
  }

  .user-portal-sidebar-burger {
    display: block;
  }

  .user-portal-main-panel {
    /* padding: 28px 0px 36px 0px; */
    margin-top: 63px;
  }
}

.user-portal-sidebar-burger {
  display: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  transition: background 0.25s, box-shadow 0.25s;
  margin-right: 12px;
}



@media (max-width: 950px) {
  .user-portal-sidebar-burger {
    display: inline-block;
    background: white;
  }

  .user-portal-panel-header {
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
  }

  /* Adjust breadcrumb and home link for smaller space */
  .user-portal-breadcrumb {
    flex: 1;
    font-size: 13px;
    color: #6b6f84;
  }

  .user-portal-home-link {
    font-size: 0px;
    padding: 6px 4px 6px 10px;
  }
}

@keyframes globalFadein {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }

  /*
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: 0.15s;
  */
}


/* user css start */

.order-panel {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.order-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.order-top h3 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-top h3 img {
  width: 24px;
}

.order-all-btn {
  padding: 6px 12px;
  font-size: 14px;
  background: #ffffff;
  color: #414141;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all linear 0.2s;
  border: 1px solid #d6d6d6;
}

.order-all-btn img {
  width: 12px;
  margin-left: 3px;
  filter: invert(0.7);
  transition: all linear 0.2s;
}

.order-all-btn:hover {
  background: #000000;
  color: #ffffff;
}

.order-all-btn:hover img {
  filter: invert(0);
}

.order-table-wrp {
  width: 100%;
}

.order-table {
  width: 100%;
  font-size: 16px;
}

.view-btn img {
  width: 20px;
}

.view-btn {
  padding: 8px;
  border-radius: 6px;
  transition: all linear 0.2s;
  border: none;
  background: transparent;
}

.view-btn:hover {
  background: #f0f0f0;
}

.order-table tr {
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
}

.order-table tr:last-child {
  border-bottom: none;
}

.order-table tr td {
  padding: 12px 0;
}

.order-table tr th {
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
}

.status {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 100px;
}

.status.cancelled {
  background: #ff000011;
  color: #ff0000;
  border: 1px solid #ff0000;
}

.status.pending {
  background: #ff800011;
  color: #ff8000;
  border: 1px solid #ff8000;
}

.status.completed {
  background: #15ff0011;
  color: #0d9a00;
  border: 1px solid #15ff00;
}

.user-portal-menu-list a img {
  width: 20px;
  transition: all linear 0.2s;
}


/* user info css start */

.up-userinfo-section {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.up-userinfo-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 2px 8px #0b0f1a0d;
}

.up-userinfo-title {
  margin: 0 0 14px 0;
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

.up-userinfo-subtitle {
  margin: 18px 0 10px 0;
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
}

/* Grid */
.up-userinfo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.up-userinfo-field--full {
  grid-column: 1 / -1;
}

/* Labels and inputs */
.up-userinfo-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 8px;
}

.up-userinfo-input {
  width: 100%;
  height: 44px;
  background: #f4f5f8;
  border: 1px solid #e7e8ee;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.up-userinfo-input:focus {
  background: #ffffff;
  border-color: #715aff;
  box-shadow: 0 0 0 3px #715aff22;
}

.up-userinfo-textarea {
  height: auto;
  resize: vertical;
  line-height: 1.4;
}

/* Custom select */
.up-userinfo-select {
  position: relative;
}

.up-userinfo-select select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: #f4f5f8;
  border: 1px solid #e7e8ee;
  border-radius: 10px;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.up-userinfo-select select:focus {
  background: #fff;
  border-color: #715aff;
  box-shadow: 0 0 0 3px #715aff22;
}

.up-userinfo-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #6b7280;
  pointer-events: none;
}

/* Checks */
.up-userinfo-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 16px;
}

.up-userinfo-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.up-userinfo-check input {
  display: none;
}

.up-userinfo-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid #c9cbe2;
  background: #fff;
  display: inline-block;
  position: relative;
  transition: all .18s ease;
}

.up-userinfo-check input:checked+.up-userinfo-checkbox {
  border-color: #10b981;
  background: #10b981;
  box-shadow: 0 0 0 3px #10b98122;
}

.up-userinfo-check input:checked+.up-userinfo-checkbox::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: 2px solid #fff;
  border-left: none;
  border-top: none;
  transform: rotate(45deg);
}

.up-userinfo-checktext {
  font-size: 14px;
  color: #111827;
}

/* Actions */
.up-userinfo-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Save button with animated states */
.up-userinfo-savebtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #0b1020;
  background: #0b1020;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .18s ease, background .18s;
}

.up-userinfo-savebtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px #0b102022;
}

.up-userinfo-savebtn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Loader ripple */
.up-userinfo-savebtn-loader {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at center, #ffffff33 0, #ffffff00 60%);
  animation: up-userinfo-pulse 1s ease infinite;
}

@keyframes up-userinfo-pulse {
  0% {
    opacity: .0
  }

  50% {
    opacity: .45
  }

  100% {
    opacity: 0
  }
}

/* Done text hidden by default */
.up-userinfo-savebtn {
  transition: all .3s ease;
}

.up-userinfo-savebtn-done {
  display: none;
  font-weight: 700;
}

.up-userinfo-savebtn-icon {
  width: 16px;
  filter: invert(1);
}

.up-userinfo-savebtn-text {}

/* Loading state */
.up-userinfo-savebtn.is-loading .up-userinfo-savebtn-loader {
  opacity: 1;
}

.up-userinfo-savebtn.is-loading .up-userinfo-savebtn-text {
  opacity: .0;
}

/* Success state */
.up-userinfo-savebtn.is-success {
  background: #10b981;
  border-color: #0c966a;
}

.up-userinfo-savebtn.is-success .up-userinfo-savebtn-icon {
  display: none;
}

.up-userinfo-savebtn.is-success .up-userinfo-savebtn-text {
  display: none;
}

.up-userinfo-savebtn.is-success .up-userinfo-savebtn-done {
  display: inline;
  color: #ffffff;
}

/* Responsive */
@media (max-width: 820px) {
  .up-userinfo-grid {
    grid-template-columns: 1fr;
  }
}



/* Saved css start */

/* Wrapper */
.dpb-banner {
  --dpb-primary: #5b5bf7;
  --dpb-primary-2: #a855f7;
  --dpb-dark: #0b1020;
  --dpb-card: #ffffff;
  --dpb-soft: #eef2ff;
  --dpb-border: #e7e8ee;
  background: linear-gradient(90deg, #eef2ff, #f7f2ff);
  padding: 10px;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.dpb-wrap {
  background: linear-gradient(100deg, #edf0ff 0%, #f6f0ff 25%, #f7f4ff 60%, #ffffff 100%);
  border: 1px solid #edf0fe;
  border-radius: 14px;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 4px 22px #7b61ff14 inset, 0 1px 0 #ffffff80 inset;
}

/* Left block */
.dpb-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.dpb-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--dpb-primary), var(--dpb-primary-2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 18px #7c5bff55;
  flex: 0 0 44px;
}

.dpb-icon-glyph {
  font-size: 20px;
  line-height: 1;
}

.dpb-text {
  min-width: 0;
}

.dpb-title {
  margin: 0 0 6px 0;
  font-size: 26px;
  line-height: 1.2;
  color: #1f2937;
  font-weight: 800;
}

.dpb-sub {
  margin: 0 0 12px 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
  max-width: 820px;
}

.dpb-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 18px;
  color: #6b7280;
  font-weight: 600;
  font-size: 14px;
}

.dpb-stats li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dpb-i {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ffffffaa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9ebf7;
  color: #6366f1;
  font-size: 12px;
  box-shadow: 0 1px 0 #fff inset;
}

/* Right buttons */
.dpb-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  align-items: flex-end;
}

.dpb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: transform .1s ease, box-shadow .18s ease, background .18s ease;
  border: 1px solid transparent;
}

.dpb-btn-primary {
  color: #fff;
  background: linear-gradient(90deg, #2563eb, #8b5cf6);
  border-color: #2943d9;
  box-shadow: 0 6px 16px #4c51ff3a;
}

.dpb-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px #4c51ff44;
}

.dpb-btn-i {
  font-size: 14px;
}

.dpb-btn-ghost {
  background: #ffffff;
  color: #111827;
  border-color: #e6e8ef;
}

.dpb-btn-ghost:hover {
  background: #f5f6fb;
  transform: translateY(-1px);
}

.dpb-btn-arrow {
  opacity: .8;
}

/* Responsive */
@media (max-width: 900px) {
  .dpb-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .dpb-right {
    align-items: stretch;
  }

  .dpb-title {
    font-size: 22px;
  }
}


#s-design-grid {
  columns: 5 280px;
  /* up to 5 columns, min width 280px each */
  /* responsive auto-fit columns */
  column-gap: 16px;
  padding: 12px 8px;
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

#s-design-grid .pin {
  border-radius: 18px;
  break-inside: avoid;
  /* background: #fff; */
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, .08); */
  position: relative;
  overflow: hidden;
}

#s-design-grid .pin img {
  border-radius: 18px;
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  margin-bottom: 20px;
  transition: all linear 0.2s;
}

/* Scope to grid pins */
#s-design-grid .pin {
  position: relative;
}

/* Actions wrapper */
.sdg-pin-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

/* Three dots button */
.sdg-pin-dots {
  appearance: none;
  border: none;
  background: rgba(15, 18, 28, .62);
  padding: 6px 7px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  transition: background .18s, transform .12s;
  backdrop-filter: saturate(140%) blur(4px);
}

.sdg-pin-dots:hover {
  background: rgba(15, 18, 28, .8);
  transform: scale(1.04);
}

.sdg-pin-dots:active {
  transform: scale(0.98);
}

.sdg-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: .95;
}

/* Dropdown menu */
.sdg-pin-menu {
  position: absolute;
  top: 36px;
  right: 0;
  min-width: 140px;
  background: #0b1020;
  color: #fff;
  border: 1px solid #20263a;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2, .7, .2, 1);
}

.sdg-pin-menu.sdg-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.sdg-pin-menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #fff;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.sdg-pin-menu-item:hover {
  background: #121731;
}

.sdg-pin-menu-item.sdg-unsave {
  color: #ffb4b4;
}

.sdg-pin-menu-item.sdg-unsave:hover {
  background: #2a1120;
}

/* Tiny toast */
.sdg-pin-toast {
  position: absolute;
  right: 50%;
  top: 20px;
  width: 100px;
  transform: translateX(-50%) translateY(10px);
  background: #ff0000;
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 12px #00000033;
}

.sdg-pin-toast.sdg-show {
  animation: sdg-toast 1.6s ease forwards;
}

/* Empty state message for Saved */
.up-saved-emptystate {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 40px 18px;
  margin: 16px 0;
  color: #4b5563;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  text-align: center;
}

.up-saved-emptystate b {
  color: #111827;
}

.up-saved-emptystate .up-empty-cta {
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #0b1020;
  background: #0b1020;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}



@keyframes sdg-toast {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  12% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}


.ordtab-section {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  animation: globalFadein 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: 0.15s;
}

.ordtab-filters-card {
  background: #fff;
  border: 1px solid #eceff5;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px #0b10200c;
  margin-bottom: 14px;
}

.ordtab-filters-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}



/* Filters layout */
.ordtab-filters-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ordtab-search {
  position: relative;
  flex: 1 1 320px;
  min-width: 260px;
}

.ordtab-search-i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa3b2;
  font-size: 14px;
}

.ordtab-search-input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 8px 12px 8px 36px;
  font-size: 14px;
  background: #f8fafc;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

.ordtab-search-input:focus {
  outline: none;
  border-color: #705efb;
  background: #fff;
  box-shadow: 0 0 0 3px #715aff22;
}

/* Styled select keeping native behavior */
.ordtab-select-wrap {
  position: relative;
  flex: 0 0 180px;
}

.ordtab-status-select {
  appearance: none;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 8px 34px 8px 12px;
  font-weight: 400;
}

.ordtab-select-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
}

/* Table styling (matching screenshot) */
.ordtab-table-scroll {
  overflow: auto;
  border-radius: 10px;
}

.ordtab-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.ordtab-table thead th {
  font-size: 13px;
  text-align: left;
  color: #6b7280;
  padding: 8px 12px;
}

.ordtab-table tbody tr {
  background: #fff;
  border: 1px solid #000000 !important;
  border-radius: 12px;
  box-shadow: 0 1px 0 #fff inset;
  transition: transform .08s ease, box-shadow .16s ease;
}


.ordtab-table tbody td {
  padding: 12px;
  vertical-align: middle;
  font-size: 14px;
}

.ordtab-link {
  color: #2563eb;
  font-weight: 800;
  text-decoration: none;
}

/* Status badges */
.ordtab-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.ordtab-badge--delivered {
  background: #d1fae5;
  color: #0f766e;
}

.ordtab-badge--shipped {
  background: #e9d5ff;
  color: #7c3aed;
}

.ordtab-badge--processing {
  background: #dbeafe;
  color: #1d4ed8;
}

.ordtab-badge--cancelled {
  background: #fee2e2;
  color: #b91c1c;
}

.ordtab-badge--pending {
  background: #fef3c7;
  color: #a16207;
}

.ordtab-prev img {
  filter: invert(1);
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.ordtab-next img {
  filter: invert(1);
  width: 16px;
  height: 16px;
}

.ordtab-next,
.ordtab-prev {
  transition: all linear 0.2s;
}

.ordtab-next:hover img,
.ordtab-prev:hover img {
  filter: invert(0);
}

.ordtab-next:hover,
.ordtab-prev:hover {
  background: #000;
}

.ordtab-pages {
  display: flex;
}

.ordtab-page-number {
  border: 1px solid #e6e8ef;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 400;
}

.or-active {
  background: #000000 !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* Action eye button */
.ordtab-view {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e6e8ef;
  background: #fff;
  cursor: pointer;
}

/* Pagination (page shifter) */
.ordtab-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ordtab-page-btn {
  border: 1px solid #e6e8ef;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 800;
}

.ordtab-page-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.ordtab-pages {
  display: flex;
  gap: 6px;
}

.ordtab-page-num {
  min-width: 36px;
  text-align: center;
  border: 1px solid #e6e8ef;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 800;
}

.ordtab-page-num.ordtab-active {
  background: #111827;
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .ordtab-select-wrap {
    flex: 1 1 160px;
  }
}

/* order css end */




/* Tutorial css start */

/* Banner */
.tutb-banner {
  --tutb-primary: #5b5bf7;
  --tutb-secondary: #a855f7;
  --tutb-ink: #0b1020;
  --tutb-soft: #eef2ff;
  --tutb-border: #e7e8ee;
  --tutb-muted: #6b7280;

  background: linear-gradient(90deg, #eef2ff, #f7f2ff);
  border-radius: 14px;
  padding: 10px;
}

/* Card */
.tutb-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  background: linear-gradient(100deg, #edf0ff 0%, #f6f0ff 30%, #faf7ff 70%, #ffffff 100%);
  border: 1px solid #edf0fe;
  border-radius: 14px;
  box-shadow: 0 4px 22px #7b61ff14 inset, 0 1px 0 #ffffff80 inset;
}

/* Left cluster */
.tutb-left {
  display: flex;
  gap: 14px;
  min-width: 0;
  align-items: flex-start;
}

.tutb-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--tutb-primary), var(--tutb-secondary));
  box-shadow: 0 6px 18px #7c5bff55;
}

.tutb-icon-glyph {
  font-size: 22px;
  line-height: 1;
}

.tutb-head {
  min-width: 0;
}

.tutb-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  line-height: 1.25;
  color: #1f2937;
  font-weight: 800;
}

.tutb-sub {
  margin: 0 0 10px 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
  max-width: 780px;
}

/* Points row */
.tutb-points {
  display: flex;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #374151;
  font-weight: 700;
  font-size: 14px;
  flex-wrap: wrap;
}

.tutb-points li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tutb-bullet {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 1px solid #e9ebf7;
  background: #ffffffaa;
  box-shadow: 0 1px 0 #fff inset;
}

.tutb-bullet--video {
  color: #6366f1;
}

.tutb-bullet--guide {
  color: #7c3aed;
}

.tutb-bullet--done {
  color: #10b981;
}

/* Right cluster (progress number) */
.tutb-right {
  text-align: right;
  flex: 0 0 auto;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.tutb-progress-num {
  font-size: 34px;
  font-weight: 800;
  color: #5b21b6;
  background: linear-gradient(90deg, #2563eb, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tutb-progress-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 700;
}

/* Journey progress bar */
.tutb-journey {
  padding: 12px 6px 6px;
}

.tutb-journey-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px 6px 12px;
  color: #4b5563;
  font-weight: 700;
  font-size: 14px;
}

.tutb-journey-title {
  color: #374151;
}

.tutb-journey-count {
  color: #6b7280;
}

.tutb-bar {
  margin: 0 6px 6px 6px;
  height: 10px;
  border-radius: 999px;
  background: #eef0f6;
  border: 1px solid #edf0f5;
  overflow: hidden;
}

.tutb-bar-fill {
  display: block;
  height: 100%;
  background: #0b0b22;
  border-radius: 999px;
  width: 33%;
}

/* Responsive */
@media (max-width: 900px) {
  .tutb-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .tutb-right {
    align-items: flex-start;
    text-align: left;
  }

  .tutb-title {
    font-size: 22px;
  }
}

@media (max-width: 560px) {
  .tutb-title {
    font-size: 20px;
  }

  .tutb-progress-num {
    font-size: 28px;
  }

  .tutb-points {
    gap: 12px;
  }
}




/* main tutoria start */
/* Shell */
.tutsec-wrapper {
  --ink: #0b1020;
  --muted: #6b7280;
  --br: #eceff5;
  --chip: #eef1ff;
  margin-top: 10px;
}

/* Tabs */
.tutsec-tabs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tutsec-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--br);
  background: #fff;
  color: #111827;
  font-weight: 800;
  box-shadow: 0 2px 8px #0b10200a;
  cursor: pointer;
}

.tutsec-tab.tutsec-active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

.tutsec-tab-i {
  opacity: .9;
}

/* Grid */
.tutsec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 22px;
}

@media (max-width: 1100px) {
  .tutsec-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

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

/* Card */
.tutsec-card {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  box-shadow: 0 4px 16px #0b10200a;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tutsec-media {
  position: relative;
  background: #f4f6fb;
}

.tutsec-media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.tutsec-pill {
  position: absolute;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  background: #0b1020cc;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #20263a;
}

.tutsec-pill--left {
  left: 12px;
}

.tutsec-pill--right {
  right: 12px;
}

.tutsec-pill--done {
  background: #10b981;
  border-color: #0d946e;
}

.tutsec-pill--dark {
  background: #0b1020cc;
}

.tutsec-dot {
  font-size: 16px;
  line-height: 1;
}

.tutsec-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tutsec-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
}

.tutsec-desc {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
}

.tutsec-meta {
  display: flex;
  gap: 16px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
}

.tutsec-meta-i {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tutsec-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tutsec-stars {
  color: #f59e0b;
  letter-spacing: 1px;
}

.tutsec-rate {
  font-weight: 800;
  color: #111827;
}

.tutsec-level {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #eef2ff;
  color: #374151;
  border: 1px solid #e6e8f6;
}

.tutsec-level--beginner {
  background: #e9f9f2;
  color: #0d946e;
  border-color: #b7f3dd;
}

.tutsec-level--intermediate {
  background: #e7efff;
  color: #1d4ed8;
  border-color: #bfd3ff;
}

.tutsec-level--advanced {
  background: #fde2e2;
  color: #b91c1c;
  border-color: #f8b8b8;
}

.tutsec-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.tutsec-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0b1020;
  color: #fff;
  border: 1px solid #0b1020;
  border-radius: 12px;
  padding: 10px 14px;
  text-decoration: none;
  font-weight: 800;
}

.tutsec-cta:hover {
  background: #111827;
}

.tutsec-cta-i {
  font-size: 14px;
}

.tutsec-icbtn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #e6e8ef;
  background: #fff;
  cursor: pointer;
}

/* Complete button (videos only) */
.tutsec-complete-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #0d946e;
  background: #10b981;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.tutsec-complete-btn:hover {
  background: #0fb17a;
  border-color: #0a7a59;
  box-shadow: 0 6px 16px #10b98133;
  transform: translateY(-1px);
}

.tutsec-complete-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.tutsec-complete-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  color: #0d946e;
  font-size: 12px;
  font-weight: 900;
}

.tutsec-complete-text {
  font-size: 14px;
}

/* Mobile tweaks */
@media (max-width: 560px) {
  .tutsec-title {
    font-size: 18px;
  }

  .tutsec-media img {
    height: 200px;
  }
}


/* Tutorial css end */



/* Checkout css Start */
/* Tokens and shell */
.chk-wrap {
  --ink: #0b1020;
  --muted: #6b7280;
  --bd: #e9ecf3;
  --card: #ffffff;
  --pri: #111827;
  --accent: #715aff;
  --ok: #10b981;
  --soft: #f6f7fc;
  padding: 30px 0;
  background: #fafbff;
}

.chk-container {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}

@media (max-width: 900px) {
  .chk-container {
    grid-template-columns: 1fr;
  }
}

/* Card */
.chk-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: 0 2px 10px #0b10200c;
  padding: 16px;
}

.chk-h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

/* Form grid */
.chk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 12px;
}

.chk-full {
  grid-column: 1 / -1;
}

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

.chk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chk-label {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.chk-input {
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  padding: 10px 12px;
  background: #f8fafc;
  font-size: 14px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

.chk-input:focus {
  outline: none;
  background: #fff;
  border-color: #705efb;
  box-shadow: 0 0 0 3px #715aff22;
}

.chk-input[type="select"],
select.chk-input {
  height: 42px;
}

/* Payment methods */
.chk-pay {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  background: #fff;
}

.chk-pay input {
  margin-top: 4px;
}

.chk-pay-body {
  flex: 1;
}

.chk-pay-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.chk-pay-ic {
  font-size: 16px;
}

.chk-badge {
  margin-left: auto;
  background: #eef2ff;
  border: 1px solid #cfd8ff;
  color: #374151;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.chk-pay-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* bKash fields block */
.chk-bkash-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.chk-bkash-line {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chk-help {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #6b7280;
  background: #f7faff;
  border: 1px dashed #dfe8ff;
  padding: 8px 10px;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .chk-bkash-box {
    grid-template-columns: 1fr;
  }
}

/* Terms */
.chk-term {
  margin: 10px 0 12px;
}

.chk-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.chk-check input {
  display: none;
}

.chk-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid #c9cbe2;
  background: #fff;
  position: relative;
}

.chk-check input:checked+.chk-box {
  background: #10b981;
  border-color: #0d946e;
  box-shadow: 0 0 0 3px #10b98122;
}

.chk-check input:checked+.chk-box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: 2px solid #fff;
  border-left: none;
  border-top: none;
  transform: rotate(45deg);
}

/* Place order */
.chk-place {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  background: #0b1020;
  color: #fff;
  border: 1px solid #0b1020;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s, box-shadow .18s, background .18s;
}

.chk-place:hover {
  background: #111827;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px #0b102022;
}

.chk-place:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Summary */
.chk-summary .chk-card {
  position: sticky;
  top: 12px;
}

.chk-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.chk-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chk-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--bd);
}

.chk-item-txt {
  flex: 1;
}

.chk-name {
  font-weight: 600;
  color: #111827;
}

.chk-meta {
  font-size: 12px;
  color: #6b7280;
}

.chk-price {
  font-weight: 500;
}

.chk-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-weight: 700;
  color: #374151;
}

.chk-total {
  border-top: 1px dashed var(--bd);
  margin-top: 4px;
  padding-top: 10px;
  font-size: 16px;
}

.chk-note {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.chk-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Responsive spacing */
@media (max-width: 900px) {
  .chk-summary {
    order: -1;
  }
}

@media (max-width: 560px) {
  .chk-h2 {
    font-size: 16px;
  }

  .chk-card {
    padding: 14px;
  }

  .chk-place {
    height: 42px;
  }
}

/* Checkout css end */





/* print press profit start */
/* Shell */
.ppp-section {
  --ink: #0b1020;
  --muted: #6b7280;
  --border: #edf0f5;
  --glow: #7c5cff22;
  --grad1: #2563eb;
  --grad2: #8b5cf6;
  --grad3: #7c3aed;
  background: radial-gradient(1200px 500px at 50% 20%, #7c5cff10, transparent 60%), #f9fafb;
}

.ppp-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 16px;
  text-align: center;
  position: relative;

}

/* Eyebrow & Headings */
.ppp-eyebrow {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 2px 10px #0b10200b;
  background: #fff;
}

.ppp-eyebrow p {
  margin: 0;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(90deg, #ff0000, #003cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* for Firefox */
  color: transparent;
}


.ppp-title {
  margin: 14px 0 8px;
  font-size: 42px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #3700ff, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* for Firefox */
  color: transparent;
}

.ppp-sub {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 16px;
}

/* Steps */
.ppp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 28px;
  align-items: stretch;
  position: relative;
  justify-content: center;
}

/* Step Card */
.ppp-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 18px 22px;
  position: relative;
  box-shadow: 0 8px 24px #0b10200a, 0 0 0 1px #ffffff inset;
}

/* Number circle */
.ppp-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #374151;
  font-size: 13px;
  box-shadow: 0 4px 14px #0b10200d;
}

/* Icon tiles */
.ppp-icon {
  width: 92px;
  height: 92px;
  margin: 6px auto 14px;
  border-radius: 20px;
  background: linear-gradient(140deg, var(--grad1), var(--grad2));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 30px var(--glow);
}

.ppp-icon--violet {
  background: linear-gradient(140deg, #5b21b6, #7c3aed);
}

.ppp-icon--purple {
  background: linear-gradient(140deg, #6d28d9, #a855f7);
}

.ppp-emoji lord-icon {
  height: 50px;
  width: 50px;
}

/* Titles & desc */
.ppp-step-title {
  font-size: 22px;
  color: #0f172a;
  margin: 6px 0 6px;
  font-weight: 700;
}

.ppp-step {
  transition: all linear .2s;

}

.ppp-step:hover {
  transform: scale(1.03);
}

.ppp-step-desc {
  margin: 0;
  color: #7f7f7f;
  font-size: 14px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1024px) {
  .ppp-title {
    font-size: 36px;
  }
}

@media (max-width: 900px) {
  .ppp-steps {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ppp-wrap {
    padding: 56px 14px;
  }

  .ppp-title {
    font-size: 32px;
  }

  .ppp-sub {
    font-size: 15px;
  }

  .ppp-step {
    padding: 24px 16px 20px;
  }

  .ppp-icon {
    width: 84px;
    height: 84px;
    border-radius: 18px;
  }

  .ppp-step-title {
    font-size: 20px;
  }

  .ppp-step-desc {
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .ppp-title {
    font-size: 28px;
  }

  .ppp-emoji {
    font-size: 32px;
  }

  .ppp-icon {
    width: 78px;
    height: 78px;
  }
}

/* print press profit end */


/* Section background */
.learn-sec {
  /* background: radial-gradient(900px 420px at 60% 10%, #7c5cff12, transparent 60%), #fafbff; */
}

/* Video card */
.learn-video {
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  padding-bottom: 56.25%;
}

.learn-video iframe {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Eyebrow badge */
.learn-badge {
  font-weight: 800;
  letter-spacing: .2px;
}

/* Title with gradient accent */
.learn-title {
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  text-transform: uppercase;
  font-size: 52px;
}

.grad-text {
  background: linear-gradient(90deg, #2563eb, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Stat tiles */
.learn-stat {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(11, 16, 32, .06);
}

.learn-stat-num {
  font-weight: 800;
  font-size: 1.6rem;
}

.learn-stat-label {
  font-weight: 700;
  color: #6b7280;
}

/* Buttons */
.learn-btn-primary {
  background: #5b61ff;
  border: 1px solid #4b4fe8;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: .75rem 1rem;
  box-shadow: 0 10px 22px rgba(76, 81, 255, .25);
  transition: all linear .2s;
}

.learn-btn-primary:hover {
  background: #ff0000;
  border: 1px solid #ff0000;
  color: #fff;
}

.learn-btn-ghost {
  border: 2px solid #e6e8ef;
  background: #fff;
  color: #111827;
  font-weight: 700;
  border-radius: 12px;
  padding: .75rem 1rem;
  transition: all linear .2s;
}

.learn-btn-ghost:hover {
  color: #ff0000;
  border: 2px solid #ff0000;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .learn-title {
    font-size: 1.875rem;
  }
}

@media (max-width: 575.98px) {
  .learn-title {
    font-size: 1.6rem;
  }

  .learn-play-btn {
    width: 72px;
    height: 72px;
  }

  .learn-duration {
    font-size: .85rem;
  }
}





/* Video cta Start */

.ctabulk-sec {
  /* background: linear-gradient(90deg, #B81221, #F20306); */
  position: relative;
  margin: 0;
}

.ctabulk-wrap {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffff;
  border-radius: 20px;
  margin-top: 30px;
}

/* Glass shapes on right */

.ctabulk-sec::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  width: 500px;
  background: url("../images/mat/cta.png") no-repeat center/contain;
}

/* Left copy */
.ctabulk-left {
  position: relative;
  z-index: 1;
}

.ctabulk-title {
  margin: 0 0 6px 0;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  color: #225089;
  letter-spacing: .2px;
}

.ctabulk-sub {
  margin: 0;
  color: #2777b7;
  font-weight: 500;
}

/* Right actions */
.ctabulk-right {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ctabulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  height: 44px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: all linear .2s;
}

.ctabulk-btn--wa {
  background: transparent;
  color: #ffffff;
  border: 2px solid #075E54;
  background: #075E54;
}

.ctabulk-btn--wa img {
  /* filter: invert(1); */
}

.ctabulk-btn--wa:hover {
  box-shadow: 4px 4px 0px rgb(0, 255, 55);
  background: #075E54;
  transform: translateY(-1px);
}

.ctabulk-btn--ghost {
  background: #fff;
  color: #e20004;
  border: 2px solid #d32525;
}

.ctabulk-btn--ghost:hover {
  box-shadow: 4px 4px 0px rgb(255, 0, 0);
  transform: translateY(-1px);
}

/* Placeholder WA icon (replace with SVG if available) */
.ctabulk-wa-ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  box-shadow: 0 0 0 2px #fff inset;
  position: relative;
}

.ctabulk-wa-ic::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: #22c55e;
  border-radius: 50%;
}

/* Responsive */
/* XS: 320–575.98px */
@media (min-width:320px) and (max-width:575.98px) {
  .ctabulk-wrap {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .ctabulk-title {
    font-size: 18px;
    line-height: 1.3;
  }

  .ctabulk-sub {
    font-size: 12px;
  }

  .ctabulk-right {
    width: 100%;
    gap: 8px;
  }

  .ctabulk-btn {
    flex: 1 1 auto;
    justify-content: center;
    height: 42px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .ctabulk-wa-ic {
    width: 16px;
    height: 16px;
  }
}

/* SM: 576–767.98px */
@media (min-width:576px) and (max-width:767.98px) {
  .ctabulk-wrap {
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .ctabulk-title {
    font-size: 20px;
  }

  .ctabulk-sub {
    font-size: 13px;
  }

  .ctabulk-right {
    width: 100%;
  }

  .ctabulk-btn {
    flex: 1 1 auto;
    justify-content: center;
    height: 44px;
    padding: 10px 14px;
  }
}

/* MD: 768–991.98px */
@media (min-width:768px) and (max-width:991.98px) {
  .ctabulk-wrap {
    padding: 20px;
    gap: 14px;
  }

  .ctabulk-title {
    font-size: 22px;
  }

  .ctabulk-sub {
    font-size: 14px;
  }

  .ctabulk-btn {
    height: 44px;
    padding: 10px 16px;
  }
}

/* LG: 992–1199.98px */
@media (min-width:992px) and (max-width:1199.98px) {
  .ctabulk-wrap {
    padding: 22px;
    gap: 14px;
  }

  .ctabulk-title {
    font-size: 23px;
  }

  .ctabulk-sub {
    font-size: 14px;
  }

  .ctabulk-btn {
    height: 44px;
  }
}

/* XL: 1200–1399.98px */
@media (min-width:1200px) and (max-width:1399.98px) {
  .ctabulk-wrap {
    padding: 22px;
  }

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

/* XXL: ≥1400px */
@media (min-width:1400px) {
  .ctabulk-wrap {
    padding: 37px 50px;
  }

  .ctabulk-title {
    font-size: 26px;
  }

  .ctabulk-btn {
    padding: 25px;
  }
}


.v-cta {
  position: relative;
}

.vcta-scroll {
  position: absolute;
  bottom: -33px;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content !important;
  margin: 0;
}


/* Brand show start */

/* Heading */
.brandrow-sec {
  padding: 100px 0;
}

.brandrow-head .brandrow-pill {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #e9edf5;
  background: linear-gradient(90deg, #eef1ff, #f9faff);
  font-weight: 700;
  color: #464646;
  letter-spacing: .2px;
  font-size: 13px;
  box-shadow: 0 2px 10px #0b10200a;
}

.brandrow-head {
  margin-bottom: 50px;
}

.brandrow-title {
  font-weight: 800;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: .2px;
  margin: 0;
  font-size: 43px;
}

.brandrow-grad {
  background: linear-gradient(90deg, #2563eb, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brandrow-sub {
  color: #6b7280;
  margin: 8px 0 0;
}

/* Rail */
.brandrow-rail {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #edf0f5;
  background: #fff;
  padding: 50px 0;
}

.brandrow-rail::before,
.brandrow-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.brandrow-rail::before {
  left: 0;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
}

.brandrow-rail::after {
  right: 0;
  background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0));
}

/* Track */
.brandrow-track {
  display: flex;
  gap: 36px;
  align-items: center;
  white-space: nowrap;
  animation: brandrow-scroll 28s linear infinite;
}

@keyframes brandrow-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

  /* move by half since we duplicated items */
}

/* Items */
.brandrow-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  filter: grayscale(1);
  opacity: .9;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.brandrow-item:hover {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

.brandrow-item img {
  width: auto;
  display: block;
  max-height: 100px;
}

/* Responsive */
@media (max-width: 992px) {
  .brandrow-sec {
    padding: 50px 0;
  }

  .brandrow-item {
    min-width: 140px;
  }

  .brandrow-item img {
    max-height: 60px;
  }
}

@media (max-width: 576px) {
  .brandrow-item {
    min-width: 120px;
  }

  .brandrow-item img {
    max-height: 28px;
  }

  .brandrow-head .brandrow-pill {
    padding: 8px 14px;
    font-size: 13px;
  }

  .brandrow-title {
    font-size: 1.6rem;
  }

  .brandrow-sub {
    font-size: .95rem;  
  }
}


/* Brand show end */


/* Tokens */
.dlib-sec {
  background: url("../images/banner/grad2.png") no-repeat center/cover;
  padding: 70px 0;
}

.dlib-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid #e9edf5;
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  color: #ff0000;
  font-size: 13px;
  box-shadow: 0 2px 10px #0b10200b;
}

/* Title */
.dlib-title {
  font-weight: 800;
  color: #fbffe7;
  font-size: 50px;
  letter-spacing: .2px;
}

.dlib-sep {
  color: #ef4444;
  margin: 0 .25rem;
}

/* Hero preview */
.dlib-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(11, 16, 32, .18);
  background: #f3f4f8;
}

.dlib-hero>img {
  width: 100%;
  height: auto;
  display: block;
}

.dlib-badge {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 12px 24px rgba(34, 197, 94, .35);
}

.dlib-badge--paint {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dlib-corner {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f472b6, #fb7185);
  box-shadow: 0 10px 20px rgba(244, 114, 182, .35);
}

/* Overlay card on hero */
.dlib-card {
  position: absolute;
  left: 24px;
  bottom: 24px;
  right: 24px;
  background: #ffffffee;
  border: 1px solid #edf0f5;
  border-radius: 14px;
  padding: 14px 16px;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(11, 16, 32, .12);
}

.dlib-card-title {
  font-weight: 600;
  color: #2f2f2f;
}

.dlib-card-sub {
  color: #6b7280;
  font-weight: 500;
  font-size: 13px;
  margin-top: 2px;
}

/* Metric tiles */
.dlib-metric {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(11, 16, 32, .08);
}

.dlib-metric-num {
  font-weight: 700;
  font-size: 1.6rem;
  background: linear-gradient(90deg, #2563eb, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dlib-metric-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: #6b7280;
  font-size: .8rem;
  margin-top: 4px;
}

/* Benefits */
.dlib-benefit {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 22px rgba(11, 16, 32, .06);
}

.dlib-benefit-ic {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4ff;
}

.dlib-short {
  color: #ffffff;
  margin-bottom: 50px;
}

/* CTA */
.dlib-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #003cff, #0892d0);
  transition: all linear .2s;
  font-size: 18px;
  text-transform: uppercase;
}

.dlib-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  height: 80px;
}

.dlib-cta-ic {
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 991.98px) {
  .dlib-title {
    font-size: 1.9rem;
  }
}

@media (max-width: 575.98px) {
  .dlib-title {
    font-size: 1.6rem;
  }

  .dlib-card {
    left: 16px;
    right: 16px;
    bottom: 16px;
    padding: 12px;
  }

  .dlib-metric-num {
    font-size: 1.4rem;
  }

  .dlib-cta {
    height: 46px;
  }
}


/* Shell */
.homeTut-block {
  background: radial-gradient(900px 480px at 50% 0, #7c5cff0d, transparent 60%), #fbfcff;
  padding: 76px 16px;
}

.homeTut-in {
  max-width: 1140px;
  margin: 0 auto;
}

/* Headings */
.homeTut-h2 {
  margin: 0 0 6px;
  text-align: center;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
}

.homeTut-in h2 span {
  color: #ff0000;
}

.homeTut-sub {
  margin: 0 0 16px;
  text-align: center;
  color: #6b7280;
}

/* Tabs */
.homeTut-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 26px;
}

.homeTut-tab {
  padding: 6px 16px;
  border-radius: 50px;
  border: 1px solid #e6e8ef;
  background: #fff;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
}

.homeTut-tab.homeTut-active {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* Grid */
.homeTut-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 22px;
}

@media (max-width: 1024px) {
  .homeTut-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

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

/* Card */
.homeTut-card {
  background: #fff;
  border: 1px solid #edf0f5;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(11, 16, 32, .08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


/* Media */
.homeTut-media {
  position: relative;
  background: #f3f5fb;
}

.homeTut-media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Chips */
.homeTut-chip {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  color: #fff;
  background: #0f172acc;
}

.homeTut-card-head {
  margin-bottom: 20px;
}

.homeTut-chip--guide {
  background: #7c3aed;
  position: relative;
  margin-bottom: 20px;
}

.homeTut-chip--video {
  background: #0050ff7d;
}

/* Play button */
.homeTut-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffffcc;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, box-shadow .18s ease;
}

.homeTut-play:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}

.homeTut-tri {
  width: 0;
  height: 0;
  border-left: 16px solid #111827;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}

/* Body */
.homeTut-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.homeTut-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.homeTut-desc {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
}

.homeTut-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 700;
  align-items: center;
}

.homeTut-stars {
  color: #f59e0b;
  letter-spacing: 1px;
}

.homeTut-rate {
  font-weight: 800;
  color: #111827;
}

/* Actions */
.homeTut-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.homeTut-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}

.homeTut-btn--primary {
  background: linear-gradient(90deg, #5b61ff, #8b5cf6);
  color: #fff;
  border-color: #4b4fe8;
}

.homeTut-btn--primary:hover {
  filter: brightness(1.03);
}

.homeTut-icbtn {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  outline: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homeTut-icbtn-share {
  width: 45px;
  height: 100%;
  border-radius: 12px;
  outline: none;
  border: 1px solid #e6e8ef;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homeTut-icbtn lord-icon {
  width: 27px;
  height: 27px;
}

/* Mobile tweaks */
@media (max-width: 560px) {
  .homeTut-h2 {
    font-size: 1.5rem;
  }

  .homeTut-media img {
    height: 200px;
  }
}


/* Shell */
.siteFoot {
    margin-top: 40px;
  background: #f8fafc;
  color: #111827;
  border-top: 1px solid #eef2f7;
  font-family: inherit;
}

.siteFoot-wrap {
  /* max-width: 1120px; */
  /* margin: 0 auto; */
  /* padding: 0 16px; */
}

/* Top */
.siteFoot-top {

  padding: 50px 0 50px;
  border-bottom: 1px solid #e2e2e2;
}

.siteFoot-top .siteFoot-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.siteFoot-h3 {
  margin: 10px 0 8px;
  font-size: 28px;
  font-weight: 600;
}

.siteFoot-text {
  color: #6b7280;
  margin: 0 0 12px;
}

.siteFoot-pill {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #e6e8ef;
  background: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: #5b21b6;
  box-shadow: 0 2px 8px #0b10200a;
}

.siteFoot-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.siteFoot-input {
  height: 44px;
  min-width: 260px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
}

.siteFoot-input:focus {
  outline: none;
  border-color: #705efb;
  box-shadow: 0 0 0 3px #715aff22;
  background: #fff;
}

.siteFoot-sub {
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #4b4fe8;
  color: #fff;
  font-weight: 600;
  background: linear-gradient(90deg, #5b61ff, #8b5cf6);
  cursor: pointer;
}

/* Socials (placeholder glyphs; swap with SVGs) */
.siteFoot-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.siteFoot-right a lord-icon {
  width: 38px;
  height: 38px;
}

.siteFoot-soc {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 8px 18px #0b10200f;
}

.soc-ig {
  background: #e1306c;
}

.soc-fb {
  background: #1877f2;
}

.soc-yt {
  background: #ff0000;
}

.soc-wa {
  background: #25d366;
}



/* Middle */
.siteFoot-mid {
  padding: 50px 0 50px;
  border-bottom: 1px solid #e2e2e2;
}

.siteFoot-mid .siteFoot-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
}

.siteFoot-brand {
  font-size: 28px;
  color: #6d28d9;
  font-weight: 800;
  margin: 0 0 8px;
}

.siteFoot-blurb {
  color: #4b5563;
  margin: 0 0 8px;
}

.siteFoot-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.siteFoot-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6d28d9;
  opacity: .6;
}

.siteFoot-head {
  font-weight: 700;
  margin: 0 0 10px;
}

.siteFoot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.siteFoot-list a {
  color: #232323;
  text-decoration: none;
  font-weight: 500;
}

.siteFoot-list a:hover {
  color: #111827;
}

/* Bottom */
.siteFoot-bottom {
  /* padding: 10px 0 24px; */
}

.siteFoot-bottom-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 30px 0;
  border-bottom: 1px solid #e2e2e2;
}

.siteFoot-locale {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
}

.siteFoot-link {
  color: #7a7a7a;
  text-decoration: none;
  font-weight: 500;
  margin-right: 30px;
}

.siteFoot-link:hover {
  color: #111827;
}

.siteFoot-sep {
  color: #9aa3b2;
}

.siteFoot-legal {
  display: flex;
  align-items: center;
  gap: 12px;
}

.siteFoot-paylabel {
  color: #6b7280;
}

.siteFoot-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid #e6e8ef;
  background: #fff;
  color: #111827;
}

.siteFoot-bkash {
  background: #fdf2f8;
  border-color: #f5c2e1;
  color: #b91c1c;
}

.siteFoot-cod {
  background: #eef2ff;
  border-color: #cfd8ff;
  color: #1f2937;
}

.siteFoot-copy {
  text-align: center;
  color: #6b7280;
  padding: 20px 0;
}

.siteFoot-heart {
  color: #ef4444;
}

/* Responsive */
/* 320–575.98px: xs mobile */
@media (min-width:320px) and (max-width:575.98px) {

  .siteFoot {
    background: #f8fafc;
    border-top: 1px solid #eef2f7;
  }

  .siteFoot-col{
    width: fit-content;
    margin-bottom: 20px;
  }
  
  .siteFoot-wrap {
    padding: 0 12px;
  }

  /* Top area */
  .siteFoot-top {
    padding: 20px 0 12px;
  }

  .siteFoot-top .siteFoot-wrap {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }

  .siteFoot-pill {
    padding: 6px 12px;
    font-size: 12px;
  }

  .siteFoot-h3 {
    font-size: 18px;
    margin: 8px 0 6px;
  }

  .siteFoot-text {
    font-size: 13px;
    margin-bottom: 8px;
  }

  .siteFoot-form {
    width: 100%;
    gap: 8px;
  }

  .siteFoot-input {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    font-size: 14px;
    padding: 0 10px;
  }

  .siteFoot-sub {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    font-size: 14px;
    padding: 0 12px;
  }

  .siteFoot-right {
    gap: 10px;
  }

  .siteFoot-soc {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .siteFoot-divider {
    margin: 12px 0;
  }

  /* Middle columns */
  .siteFoot-mid {
    padding: 30px 0 10px;
  }

  .siteFoot-mid .siteFoot-wrap {
   display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: space-between;
  }

  .siteFoot-brand {
    font-size: 22px;
    margin: 0 0 10px;
    display: flex;
    justify-content: center;
  }

  .siteFoot-blurb {
    font-size: 14px;
    text-align: center;
  }

  .siteFoot-dots span {
    width: 7px;
    height: 7px;
  }

  .siteFoot-head {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .siteFoot-list {
    gap: 8px;
  }

  .siteFoot-list a {
    font-size: 14px;
  }

  /* Bottom bar */
  .siteFoot-bottom {
    padding: 8px 0 16px;
  }

  .siteFoot-bottom-wrap {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 0;
  }

  .siteFoot-locale {
    gap: 6px;
    font-size: 14px;
  }

  .siteFoot-link {
    font-size: 14px;
  }

  .siteFoot-legal {
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
  }

  .siteFoot-badge {
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
  }

  .siteFoot-copy {
    margin-top: 10px;
    font-size: 13px;
  }

}

/* 576–767.98px: sm */
@media (min-width:576px) and (max-width:767.98px) {

  .siteFoot-top {
    padding: 24px 0 14px;
  }

  .siteFoot-top .siteFoot-wrap {
    flex-direction: column;
    gap: 16px;
  }

  .siteFoot-h3 {
    font-size: 20px;
  }

  .siteFoot-form {
    width: 100%;
  }

  .siteFoot-input {
    flex: 1 1 auto;
  }

  .siteFoot-sub {
    width: auto;
    padding: 0 14px;
  }

  .siteFoot-mid .siteFoot-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .siteFoot-brand {
    font-size: 24px;
  }

  .siteFoot-bottom-wrap {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* 768–991.98px: md */
@media (min-width:768px) and (max-width:991.98px) {

  .siteFoot-top {
    padding: 26px 0 16px;
  }

  .siteFoot-h3 {
    font-size: 22px;
  }

  .siteFoot-text {
    font-size: 14px;
  }

  .siteFoot-form {
    gap: 10px;
  }

  .siteFoot-input {
    width: 320px;
  }

  .siteFoot-sub {
    padding: 0 16px;
  }

  .siteFoot-mid .siteFoot-wrap {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .siteFoot-brand {
    font-size: 26px;
  }

  .siteFoot-bottom-wrap {
    gap: 10px;
  }
}

/* 992–1199.98px: lg */
@media (min-width:992px) and (max-width:1199.98px) {

  .siteFoot-top {
    padding: 28px 0 18px;
  }

  .siteFoot-h3 {
    font-size: 24px;
  }

  .siteFoot-mid .siteFoot-wrap {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 22px;
  }

  .siteFoot-bottom-wrap {
    gap: 12px;
  }
}

/* 1200–1399.98px: xl */
@media (min-width:1200px) and (max-width:1399.98px) {

  .siteFoot-top {
    padding: 30px 0 20px;
  }

  .siteFoot-mid .siteFoot-wrap {
    gap: 24px;
  }
}

/* ≥1400px: xxl */
@media (min-width:1400px) {

  .siteFoot-top {
    padding: 34px 0 22px;
  }

  .siteFoot-mid .siteFoot-wrap {
    gap: 26px;
  }

  .siteFoot-h3 {
    font-size: 26px;
  }
}


.dtf-order {
  position: relative;
  overflow: clip;
  /* padding: var(--pad) 0; */
  color: var(--text-light);
}

.dtf-parallax {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.dtf-grad {
  position: absolute;
  inset: -12%;
  background: linear-gradient(120deg, #2E3192, #1BFFFF);
}

.dtf-blend {
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;
  opacity: .22;
}

.dtf-orb {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  filter: blur(24px);
  opacity: .35;
}

.orb-a {
  left: -12vmin;
  top: -10vmin;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%);
}

.orb-b {
  right: -10vmin;
  bottom: -14vmin;
  background: radial-gradient(circle at 60% 60%, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 70%);
  opacity: .18;
}

.dtf-sub {
  margin: 1rem 0 1rem;
  color: var(--txt-dark);
  font-size: 14px;
}

.dtf-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: 0 0 2rem;
}

.dtf-pills li {
  padding: .5rem .7rem;
  border-radius: 999px;
  background: #fbffd3;
  border: 1px solid var(--chip-bd);
  font: 700 12px/1 Inter;
  color: #000000;
  backdrop-filter: blur(6px);
}

.dtf-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: .25rem;
  align-items: start;
}

.dtf-info {
  background: #fff;
  border: 1px solid var(--border, rgba(15, 23, 42, .08));
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .08);
  padding: .9rem 1rem;
  transition: all linear .2s;
}

.dtf-info:hover {
  background: #7F00FF;
}
.dtf-info:hover .info-title,.dtf-info:hover .info-lead,.dtf-info:hover .info-list {
  color: #fff;
}

.info-title {
  margin: 0 0 .25rem;
  font: 800 16px/1.2 Poppins, ui-sans-serif, system-ui;
  letter-spacing: -.01em;
  color: var(--txt-dark, #111827);
  transition: all linear .2s;
}

.info-lead {
  margin: 3px 0px 15px;
  color: #64748b;
  font: 600 13px/1.55 Poppins, ui-sans-serif, system-ui;
  font-size: 12px;
  transition: all linear .2s;
}

.info-list {
  margin: .2rem 0 0;
  padding-left: 1.1rem;
  color: #0f172a;
  font: 600 13px/1.55 Poppins, ui-sans-serif, system-ui;
  transition: all linear .2s;
}

/* Mobile: single column */
@media (max-width:980px) {
  .dtf-steps-grid {
    grid-template-columns: 1fr;
  }

  .dtf-info {
    padding: .85rem .95rem;
  }

  .info-title {
    font-size: 15px;
  }

  .info-lead,
  .info-list {
    font-size: 12.5px;
  }
}


.h-dtf-order {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 85px 0;
  color: var(--text-light);
}

.dtf-parallax {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.dtf-grad {
  position: absolute;
  inset: -12%;
  background: linear-gradient(120deg, #2E3192, #1BFFFF);
}

.dtf-blend {
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  mix-blend-mode: overlay;
  /* opacity: .22; */
}

.dtf-orb {
  position: absolute;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  filter: blur(24px);
  opacity: .35;
}

.orb-a {
  left: -12vmin;
  top: -10vmin;
  background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%);
}

.orb-b {
  right: -10vmin;
  bottom: -14vmin;
  background: radial-gradient(circle at 60% 60%, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 70%);
  opacity: .18;
}
.dtf-info ul {
    margin: 0 !important;
}
.dtf-wrap {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  background: rgba(255, 255, 255);
  border-radius: 16px;
  padding: 50px 30px;
  align-items: center;
}

.dtf-title {
  margin: 0px 0 45px 0;
  text-align: center;
  letter-spacing: -.02em;
}

.dtf-title h2 {
  font-size: 60px;
  font-weight: 800;
}

.dtf-title .dlib-pill {
  color: #2d61ab;
}

.dtf-left {
  display: flex;
  flex-direction: column;
}

.dtf-sub {
  margin: 0rem 0 1.2rem;
  color: #3f3f3f;
  font-size: 16px;
  font-weight: 600;
}

.dtf-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0;
  margin: 0 0 2.5rem;
}

.dtf-pills li {
  padding: .5rem .7rem;
  border-radius: 999px;
  background: #fbffd3;
  border: 1px solid var(--chip-bd);
  font: 700 12px/1 Inter;
  color: #000000;
  backdrop-filter: blur(6px);
}

.dtf-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: .25rem;
  align-items: start;
}

.dtf-info {
  background: #fff;
  border: 1px solid var(--border, rgba(15, 23, 42, .08));
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(2, 6, 23, .08);
  padding: 1rem;
  transition: all linear .2s;
}

.dtf-info:hover {
  background: #7F00FF;
}

.dtf-info:hover .info-title,
.dtf-info:hover .info-lead,
.dtf-info:hover .info-list {
  color: #fff;
}

.info-title {
  margin: 0 0 .25rem;
  font: 800 16px/1.2 Poppins, ui-sans-serif, system-ui;
  letter-spacing: -.01em;
  color: var(--txt-dark, #111827);
  transition: all linear .2s;
}

.info-lead {
  margin: 3px 0px 15px;
  color: #64748b;
  font: 600 13px/1.55 Poppins, ui-sans-serif, system-ui;
  font-size: 12px;
  transition: all linear .2s;
}

.info-list {
  margin: .2rem 0 0;
  padding-left: 1.1rem;
  color: #0f172a;
  font: 600 13px/1.55 Poppins, ui-sans-serif, system-ui;
  transition: all linear .2s;
}

/* Mobile: single column */
@media (max-width:980px) {
  .dtf-steps-grid {
    grid-template-columns: 1fr;
  }

  .dtf-info {
    padding: .85rem .95rem;
  }

  .info-title {
    font-size: 15px;
  }

  .info-lead,
  .info-list {
    font-size: 12.5px;
  }
}

.dtf-right {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.dtf-media {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  /* border: 1px solid var(--border); */
  box-shadow: 0 18px 40px rgba(2, 6, 23, .18);
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dtf-media-link {
  width: 100%;
  display: block;
  transition: all linear .2s;
  opacity: 0;
  visibility: hidden;
  transition: all linear .2s;
}

.dtf-v-active {
  opacity: 1;
  visibility: visible;
}
.dtf-v-active .dtf-m-thumb{
  display: block;
}

.dtf-m-thumb {
  width: 100%;
  display: none;
  object-fit: cover;
  /* aspect-ratio: 16/10; */
  transition: all linear .2s;
}

.dtf-media:hover .dtf-media-link .dtf-m-thumb {
  transform: scale(1.06);
}

.dtf-m-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.dtf-media figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 100px 20px 20px 20px;
  font-weight: 600;
  font-size: 22px;
  color: #fff !important;
  background: linear-gradient(0deg, rgba(0, 0, 0), rgba(0, 0, 0, 0));
  color: #000000;
  /* border-radius: 999px; */
  width: 100%;
  /* backdrop-filter: blur(20px); */
  transition: all linear .3s;
}

.dtf-media figcaption p {
  margin: 0;
  font-size: 12px;
}


.dtf-cta {
  display: inline-block;
  padding: .85rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  background: #d32525;
  border: 2px solid #d32525;
  color: #fff;
  font: 700 18px/1 Poppins;
  transition: all linear 0.2s;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  margin: 20px 0 0;
}

.dtf-cta:hover {
  transform: translateY(-1px);
  background: #fff;
  color: #d32525;
  box-shadow: 4px 4px 0px #F20306;
}

.dtf-cta:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

@media (max-width:980px) {
  .dtf-wrap {
    grid-template-columns: 1fr;
    position: relative;
    padding: 20px;
  }

  .dtf-right {
    order: -1;
  }

  .dtf-cta {
    margin: 12px 0 12px;
  }
}

/* DTF order home end */

/* Whatsapp popup start */
.is-hidden {
  display: none
}

.wa-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  z-index: 1100;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s
}

.wa-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22)
}

.wa-ic {
  width: 28px;
  height: 28px;
  display: block
}

.wa-fab-x {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 14px/1 ui-sans-serif, system-ui;
  border: 0
}

.wa-cta {
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: 280px;
  max-width: calc(100% - 36px);
  background: #fff;
  color: #0f172a;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(2, 6, 23, .18);
  padding: 12px 12px 14px;
  z-index: 1100;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: all .25s
}

.wa-cta.is-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto
}

.wa-cta:after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  transform: rotate(45deg)
}

.wa-cta-close {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: #64748b;
  font-size: 20px;
  cursor: pointer
}

.wa-cta-body {
  font: 500 13px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;
  padding: 4px 6px 0 4px
}

.wa-cta-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 10px;
  background: #25D366;
  color: #fff;
  border-radius: 8px;
  font: 600 13px/1 ui-sans-serif, system-ui;
  text-decoration: none
}

@media (max-width:480px) {
  .wa-fab {
    right: 14px;
    bottom: 14px
  }

  .wa-cta {
    right: 14px;
    bottom: 78px
  }
}

/* Whatsapp popup end */






/* Customize start */

@font-face {
  font-family: 'delorion';
  src: url('../fonts/delorion.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0f172a;
  --muted: #6b7280;
  --bd: #d7d7d7;
  --chip: #eef2ff;
  --pri: #5b61ff;
}

#mockup-main {
  color: var(--ink);
  background: #fbfcff;
}

.c3d-layout {
  position: relative;
  min-height: 100vh;
}

.c3d-tools-wrp {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 320px;
  padding: 10px 10px 0 10px;
  background: rgb(255 255 255 / 100%);
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 999;
  overflow: hidden;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: all ease 0.4s;
}

.c3d-tools {
  height: calc(100vh - 60px);
  overflow-y: scroll;
}

.c3d-h {
  margin: 0px 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.c3d-card {
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  margin-bottom: 12px;
}

.c3d-card-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: rgb(255 255 255 / 40%);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.c3d-card-fixed .c3d-btn:first-child {
  border: 2px solid #000000;
  background: transparent;
}

.c3d-card-fixed .c3d-btn:first-child:hover {
  border: 2px solid #000000;
  background: #000000;
}

.c3d-card-fixed .pri {
  border: none;
  padding: 7px 9px;
}

.c3d-card-fixed .pri:hover {
  filter: saturate(5);
}

.c3d-loader {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  margin: 50px auto 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  opacity: 1;
  visibility: visible;
}

.c3d-layer-row span{
  width: 260px;            
  white-space: nowrap;     
  overflow: hidden;
  text-overflow: ellipsis; 
}

.l3d-disable {
  opacity: 0 !important;
  visibility: hidden !important;
}

#c3d-loader-4 span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #ffffff;
  margin: 35px 5px;
  opacity: 0;
}

#c3d-loader-4 span:nth-child(1) {
  animation: opacitychange 1s ease-in-out 0s infinite;
}

#c3d-loader-4 span:nth-child(2) {
  animation: opacitychange 1s ease-in-out 0.33s infinite;
}

#c3d-loader-4 span:nth-child(3) {
  animation: opacitychange 1s ease-in-out 0.66s infinite;
}

@keyframes opacitychange {

  0%,
  100% {
    opacity: 0;
  }

  60% {
    opacity: 1;
  }
}


.c3d-file {
  width: 100%;
  height: 44px;
  border: 1px dashed var(--bd);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: #f8fafc;
}

.c3d-file input {
  display: none;
}


.c3d-btn {
  padding: 5px 8px;
  border-radius: 50px;
  border: 1px solid var(--bd);
  background: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all linear 0.2s;
}

.c3d-btn:hover {
  background: #e20004;
  color: #fff;
}

.c3d-icon {
  height: 40px;
  width: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;

}

.c3d-btn img {
  height: 20px;
  width: 20px;
}

.c3d-btn:hover img {
  filter: invert(1);
}

.c3d-btn.pri {
  background: linear-gradient(90deg, #5b61ff, #8b5cf6);
  border-color: #4b4fe8;
  color: #fff;
}

.c3d-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.c3d-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #e7e9f3;
  cursor: pointer;
}

.c3d-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  width: 100%;
}

#c3d-canvas {
  width: 100%;
  height: 100vh;
  display: block;
  background: #0b1220;
  cursor: grab;
}

.c3d-topbar {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.c3d-chip {
  font-family: 'delorion', sans-serif;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 5px 15px;
  font-weight: 700;
  font-size: 14px;
  color: #374151;
}

.open-3dsetting {
  font-family: poppins, sans-serif;
  cursor: pointer;
}

.c3d-logo {
  background: linear-gradient(to right, #003cff, #b91c1c);
  border-color: #003cff;
  color: #fff;
}

.c3d-mesh-wrap {
  background: #ffffff;
}

.c3d-close {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fe0000;
  color: #fff;
  font-size: 14px;
  padding: 5px 0;
  position: absolute;
  transition: all linear 0.2s;
  top: 0;
  left: 0;
  z-index: 10;
}

.c3d-close:hover {
  background: #000000;
}

.c3d-close img {
  filter: invert(1);
}

.c3d-close img {
  width: 16px;
}

/* When visible */
.c3d-tools-wrp.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}


#c3d-mesh {
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  border-radius: 8px;
  background: url("../3d-assets/models/cutout.png") no-repeat center/cover;
}

@media (max-width: 900px) {
  .c3d-layout {
    grid-template-columns: 1fr;
  }

  .c3d-tools-wrp {
    height: calc(100vh - 110px);
  }

  .c3d-sp1 {
    padding: 15px 0;
  }

  .c3d-sp2 {
    padding: 100px 0 !important;
  }

  .c3d-tools-wrp.active {
    left: 50%;
    transform: translateX(-50%);
  }

  .c3d-tools {
    order: 2;
    border-right: none;
    border-top: 1px solid var(--bd);
  }

  .c3d-stage {
    order: 1;
    height: 100vh;
  }

  #c3d-canvas {
    height: 100vh;
  }
}


/* Order Form for custom */

/* Order modal overlay */
#c3dOrder_modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.6);
  z-index: 100000;
}

/* Modal box */
#c3dOrder_box {
  width: min(560px, 94vw);
  background: #0b1220;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Header */
#c3dOrder_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #1f2937;
  font-weight: 800;
}

/* Close button */
#c3dOrder_close {
  background: #111827;
  color: #fff;
  border: 1px solid #374151;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

/* Form */
#c3dOrder_form {
  padding: 16px;
  display: grid;
  gap: 12px;
}
.c3dOrder_field {
  display: grid;
  gap: 6px;
}
.c3dOrder_label {
  font-weight: 700;
}
.c3dOrder_input, .c3dOrder_textarea {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #0f172a;
  color: #fff;
}
.c3dOrder_actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 6px;
}
.c3dOrder_btn {
  background: #111827;
  color: #fff;
  border: 1px solid #374151;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
}
.c3dOrder_btn--primary {
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border: none;
}


/* Toast */
#c3dOrder_toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  display: none;
  background: #ef4444;
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  z-index: 100001;
  font-weight: 700;
}