* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-blue: #311d8a;
  --color-white: #f6f6f6;
  --color-blue-light: #3898ec;
  --color-blue-dark: #501b89;

  /* Text colors */
  --text-dark: #15153e;
  --text-light: #5c6b78;
  --text-blue: #008bd4;

  /* gradient colors */
  --gradient-bg: linear-gradient(90deg, #7A2180 1.82%, #E40276 98.91%);
}

/* Utility classes */
.bg-blue {
  background-color: var(--bg-blue) !important;
}

.bg-gradient {
    background: var(--gradient-bg);
}

.bg-white {
  background-color: var(--color-white) !important;
}

.bg-blue-light {
  background-color: var(--color-blue-light) !important;
}

.bg-blue-dark {
  background-color: var(--color-blue-dark) !important;
}

.text-blue {
  color: var(--bg-blue) !important;
}

.text-white {
  color: var(--color-white) !important;
}

.text-blue-light {
  color: var(--color-blue-light) !important;
}

.text-blue-dark {
  color: var(--color-blue-dark) !important;
}

.shadow-color {
    box-shadow: 0 10px 20px 0 rgba(97, 0, 188, 0.1), 0 0 2px 0 rgba(103, 0, 188, 0.1), 0 2px 4px 0 rgba(88, 0, 188, 0.2);
}

.form-wrap {
    border-radius: 1rem;
}


body {
  font-family: "Inter", sans-serif;
  background: #fff;
}

.wrapper {
  padding: 4rem 0;
}


.post {
  padding: 1rem;
}


/* navbar  */
.container-fluid {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  height: auto;
}

@media (max-width: 991px) {
  .container-fluid {
    width: 100%;
  }


}

.gap-2 {
  gap: 8px;
}

.gap-4 {
  gap: 16px;
}

.gap-5 {
  gap: 24px;
}

.cont {
  width: 98%;
  margin: auto;
}

.brder {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
    rgb(209, 213, 219) 0px 0px 0px 1px inset;
  background: white;
  padding: 2%;
}

.navbar-collapse {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.dropdown .dropdown-menu {
  border-radius: 0;
}


@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    border-radius: 0;
  }
}

.header-top {
  padding: 8px 0px 22px;
  margin: 0;
  list-style: none;
  display: flex;
  position: relative;
  justify-content: end;
  width: 100%;
  background: white;
}

.header-top .flex-logo {
  position: absolute;
  left: 0;
  padding-top: 0;
}

.brand {
  font-family: "ArialRounddedMT";
  font-size: 36px;
  line-height: 36px;
  color: #0c489e;
}

.brand img {
  width: 80%;
  line-height: 30px;
  height: auto;
  margin: 2rem 0;
}

.brand .tag-line {
  line-height: 24px;
  font-size: 13px;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

.header-top .flex-item {
  padding-top: 10px;
}

.customer-support>div {
  float: left;
  color: #757575;
  display: -webkit-box;
  margin-right: 30px;
  line-height: 18px;
}

.customer-support div i {
  display: block;
  width: 34px;
  height: 34px;
  margin-top: 2px;
  margin-right: 15px;
  border: 1px solid #a8a8a8;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-size: 20px;
  color: var(--color-blue-light);
}

.customer-support div strong {
  font-weight: 600;
}

.customer-support>div {
  padding-top: 1%;
}

.header-top .SignIn {
  background: #fff;
  border: 2px solid var(--color-blue-light);
  color: #17252a !important;
  display: inline-block;
  font-size: 18px;
  padding: 7px 14px;
  line-height: 18px;
  margin-left: 15px;
  font-weight: 600;
  border-radius: 3px;
}


.header-top .SignUp {
  background: var(--color-blue-light);
  color: #ffffff !important;
  display: inline-block;
  font-size: 18px;
  padding: 8px 15px;
  line-height: 18px;
  margin-left: 15px;
  font-weight: 600;
  border-radius: 3px;
}

#searchBar input {
  float: left;
  width: 206px;
  padding: 10px;
  height: 30px;
  border: 1px solid #ddd;
}

#searchBar button {
  background: #46b007;
  height: 30px;
  border: 0px;
  color: #fff;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--text-light) !important;
  padding: 14px;
  font-size: 16px !important;
  display: inline-block;
  /*font-weight:bold;*/

}

.border-left {
  border-left: 1px solid #ccc !important;
  height: 50px;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--color-blue-light) !important;

}

.nav-item {
  padding: 6px 0;
}

.nav-item a:hover {
  color: var(--color-blue-light) !important;
}

#btns {
  display: none;
  margin-top: 11%;
  position: absolute;
  height: 41px;
  width: 50%;
}

/* footer */

.footer h4 {
  margin-bottom: 30px;
}

.footer>div ul {
  margin: 0px;
  padding: 0px;
}

.footer>div ul li {
  list-style: none;
  margin: 0px;
  padding: 0px;
  line-height: 26px;
}

.footer a,
.footer i {
  color: #fff !important;
}

.footer {
  background-color: #17252a;
  background-repeat: no-repeat;
  line-height: 30px;
  align-items: stretch;
  color: #fff;
}

.footer .newsletter-widget {
  background-color: #11141a;
  padding: 20px 30px 30px;
  margin-bottom: 0px;
  line-height: 22px;
}

.widget-content div {
  margin-bottom: 15px;
  color: #d4dae3 !important;
}

.newsletter-widget input {
  height: 50px;
  color: #fff;
  width: 100%;
  padding: 0 18px;
  background-color: #292c31;
  margin-bottom: 20px;
  border: 0px;
}

.btn-style-one {
  position: relative;
  padding: 11px 40px;
  line-height: 24px;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  background: #0a387a;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 0px;
}

.footer-bottom {
  text-align: center;
  /* background-color: #191d26; */
  color: #fff;
}


.webinar-card {
  padding: 2rem 0;
  background-color: #fff;
  display: block;
  position: relative;
  margin-bottom: 16px;
  border-bottom: 2px solid #ddd;
  width: 100%;

  transition: all 0.2s ease-in-out;

  .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--color-blue-dark);
  }

  .speaker-name {
    color: var(--color-blue-light) !important;
    text-decoration: none;
    font-weight: 400;
  }
}


.gap-4 {
  gap: 12px
}

.Instructor {
  padding: 4rem 0;
}

.date-picker {
  width: 100px;
  border-radius: 5px;
  background: linear-gradient(-45deg, #ffffff 1%, #e0c3ff 99%);
  text-align: center;
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  margin: 0 auto;
  padding: 8px;
  font-weight: 600;

  .year,
  .month {
    color: #444;
    font-size: 14px;
  }

  .day {
    color: var(--text-dark);
    text-shadow: 1px 1px #ffffff;
    font-size: 50px;
    font-weight: 200;
  }
}


@media(max-width: 578px) {
    .date-picker {
        margin: 0;
        margin-bottom: 1rem;
    }
}

.date-picker p {
  margin: 0px;
}

.carousel-item {
  height: clamp(20vh, 40vh + 5vw, 40vh);

  img {
    height: 100%;
    width: 100%;
  }
}


.Title-info ul {
  display: block;
}

.Title-info h6 {
  font-size: 16px;
  line-height: 24px;
  color: #4d618a;
  font-weight: 600;
}

.Title-info h5 {
  font-size: 16px;
  line-height: 24px;
  color: #4d618a;
  font-weight: 600;
}

.Title-info ul li {
  display: block;
  color: #333;
  line-height: 30px;
  font-weight: 500;
}



.trud {
  width: 92%;
  margin: auto;
}

.webinar {
  /* padding: 20px 0px 0px 0px; */
  text-align: center;
  width: 180px;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

  .resp {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }



}




.item {
  padding: 20px 20px 12px;
  background-color: #fff;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  display: block;
  position: relative;
  margin: 0px 10px px;
  width: 25rem;
}

.Title-info a h5 {
  font-size: 18px;
  line-height: 24px;
  color: #4d618a;
  font-weight: 600;
}

.Title-info a h5:hover {
  font-size: 18px;
  line-height: 24px;
  color: #4d618a;
  font-weight: 600;
  text-decoration: none;
}


.webinar-card-box {
  background-color: #fff;
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  height: 100%;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 10px 20px 0 rgba(97, 0, 188, 0.1), 0 0 2px 0 rgba(103, 0, 188, 0.1), 0 2px 4px 0 rgba(88, 0, 188, 0.2);
  max-width: 300px;
  margin: auto;
  .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-blue-dark);
    font-size: 16px;
    line-height: 1.1;
  }
    .date-time {
        font-size: 14px;
        display: inline-block;
        vertical-align: bottom;
        width: 100%;
        padding-bottom: 1rem ;
        border-bottom: 1px solid #ddd;
        text-align: center;
    }

  

  .webinar-banner {
    clip-path: polygon(0 0, 100% 0, 100% 94%, 0% 100%);
    text-align: center;
    img {
        height: 150px;
        width: auto;
        object-fit: contain;
        border-radius: 50%;
        width: auto !important;
        padding: 8px;
    }
  }

  .info {
    padding: 0px 16px 16px !important;
    text-align: center;
  }

  .info h6 {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-red) !important;
    font-weight: 500;
  }

  .info h5 {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-red) !important;
    font-weight: 500;
    min-height: 50px;
  }
}


.webinar-search-form {
  background-color: #ffffff;
  display: none;
}

.webinar-search-form form {
  padding: 15px;
}

.Search-form {
  float: left;
  width: 20%;
  padding-right: 15px;
}

.Search-form span {
  float: left;
}

.Search-form input {
  width: 100%;
  margin-right: 10px;
}

.webinar-search-form .search_results {
  background: #eaebf8;
  width: 100%;
}

.webinar-search-form .search_results span {
  color: #266dd4;
}

.Search-form span {
  float: left;
}

.sela {
  width: 100%;
  height: 33px;
}

#filter-button {
  font-size: 16px;
  margin-left: 30px;
  cursor: pointer;
  padding: 1px 6px 2px;
  background: #7b3ae7;
  color: #fff;
}

.pagination-numbers {
  float: right;
  margin: 0px;
  padding: 0px;
}

.pagination-numbers li {
  float: left;
  list-style: none;
  padding: 0px 10px;
}

.my-navigation div {
  float: left;
}

.my-navigation div+div {
  margin-left: 0.5rem;
}

.pagination-numbers {
  float: right;
  margin: 0px;
  padding: 0px;
}

.pagination-numbers>.simple-pagination-navigation-disabled {
  background: #55c904;
  color: #fff;
}

.simple-pagination-page-numbers a {
  border: 1px solid #ddd;
  margin-right: -1px;
  display: block;
  float: left;
  width: 2rem;
  text-align: center;
}

.simple-pagination-page-numbers a {
  border: 1px solid #ddd;
  margin-right: -1px;
  display: block;
  float: left;
  width: 2rem;
  text-align: center;
}

.pagination-box {
  background-color: #ffffff;
  padding: 15px;
  margin: 20px 0;
  overflow: hidden;
}


.thr-hedding h5 {
  position: relative;
  border-left: 2px solid var(--color-blue-light);
  padding-left: 15px;
  /*height: 40px;*/
  margin: 40px 10px;
  /*width: 97%;*/
  font-size: clamp(1.5rem, 1.8vw, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thr-hedding h5 a {
  position: relative;
  padding-left: 15px;
  /*height: 40px;*/
  float: right;
  font-size: clamp(1rem, 1.5vw, 1.5rem);

}

.fwid {
  width: 97%;
  margin: auto;
}

.confr {
  background: #e8e7ff;
  margin-left: -3%;
  margin-right: -3%;
  padding: 2%;
}




.event-title {
  font-weight: 700;
  letter-spacing: .4px;
  font-size: clamp(1.5rem, 1vw + 1rem, 2.5rem);
  color: var(--color-blue-dark);
  width: 100%;
}


@media (min-width: 992px) {

  /* lg and up */
  .event-title {
    width: 60%;
  }
}


.meta-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.meta-table th {
  width: 120px;
  color: #1b2e25;
  font-weight: 700;
  text-align: left;
  vertical-align: top;
}

.meta-table td {
  color: #2f5140;
}

.order-card {
  background: #fff;
  border: 1px solid #dbe1f1;
  border-radius: 8px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  overflow: hidden;
}

.order-card .card-head {
  padding: 8px;
  /* border-bottom: 1px solid #eef1f7; */
}

.order-card .card-head h4 {
  margin: 0 0 4px 0;
  color: var(--color-blue-light);
  font-weight: 700;
}

.trainer-pic {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.group-header {
  background: var(--color-blue-dark);
  color: #fff;
  padding: 10px 14px;
  font-weight: 700;
}

.option-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
}

.option-row:last-child {
  border-bottom: none;
}

.option-row label {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: normal !important;
  padding: 4px 8px !important;
  font-size: 14px;
}

.opt-price {
  font-weight: 500;
  margin-left: 10px;
  margin-right: 14px;
  font-size: 14px;
  min-width: 70px;
  text-align: end;
  color: #2f5140;
}

.cta-wrap {
  padding: 14px;
  border-top: 1px solid #eef1f7;
}

.btn-cart {
  background: var(--color-blue-dark);
  color: #fff;
  border: none;
  font-weight: 700;
}

.btn-cart:hover {
  color: #fff;
  background: var(--color-blue-light);
}

/* expert section */
.expert-wrap {
  border-top: 4px solid var(--color-blue-light);
  margin-top: 24px;
  padding-top: 22px;
}

.expert-head {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 18px 0;
}

.expert-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}

/* related webinars */
.related-card {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  margin-top: 16px;
}

.related-card h5 {
  font-weight: 700;
  color: #234161;
}

.related-list p {
  margin-bottom: .5rem;
}

/* mobile spacing */
@media (max-width: 991.98px) {
  .order-card {
    margin-top: 16px;
  }
}



/* CSS */
.main-btn {
  align-items: center;
  background-color: var(--color-blue-dark);
  border: 0;
  border-radius: 100px;
  box-sizing: border-box;
  color: #ffffff !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  line-height: 20px;
  max-width: 480px;
  min-height: 40px;
  min-width: 0px;
  overflow: hidden;
  padding: 0px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
}

.main-btn:hover,
.main-btn:focus {
  background-color: var(--color-blue-light);
  color: #ffffff;
  text-decoration: none;
}

.main-btn:active {
  background: var(--color-blue-light);
  color: rgb(255, 255, 255, .7);
}

.main-btn:disabled {
  cursor: not-allowed;
  background: rgba(0, 0, 0, .08);
  color: rgba(0, 0, 0, .3);
}

.webinar-desc ul {
  padding-left: 2rem;
}


.row {
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.conference-header {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  background: linear-gradient(-45deg, #ffffff 1%, #e8d3ff 99%);
  padding-top: 2rem;
}

@media (min-width: 992px) {
  .conference-right {
    margin-top: -16rem;
  }
}

/* Center + width control */
#searchForm.searchbar {
  position: relative;
  width: 100%;
  max-width: 560px;
  /* zarurat ho to badha lo */
}

/* Pill look */
.searchbar-input {
  height: 56px;
  padding: 0 64px 0 20px;
  /* right me button ki jagah */
  border: 0;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .06);
}

.searchbar-input:focus {
  outline: 0;
  box-shadow: 0 10px 18px rgba(0, 0, 0, .10), 0 0 0 3px rgba(246, 144, 44, .25);
}

.searchbar-input::placeholder {
  color: #6e8b97;
}

/* Orange circular search button */
.searchbar-btn {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--color-blue-light);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.searchbar-btn:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(246, 44, 44, 0.35);
}

.truncate-15 {
  display: -webkit-box;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


.empty-card{
  min-height: 80dvh;
  width: 100%;
  background: #fff;
  border-radius: .5rem;
  gap: 1rem;
  .empty-cart-img {
    width: 150px;
  }
}

.empty-cart-img{
  max-width: 180px;   /* tweak as you like */
  height: auto;
}

.heading_pera {
    background: var(--gradient-bg) !important;
    color: white;
    text-align: center;
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
    font-size: 16px;
    padding: 0.8rem;
}


.cart,.checkout-table {
    /* Minimal, modern inputs for white backgrounds */
    .form-control{
      background-color:#fff;
      border:1px solid #e5e7eb;        /* light grey */
      border-radius:.5rem;              /* softer corners */
      padding:.5rem .675rem;          /* 10px 14px */
      height:auto;
      line-height:1;
      color:#111827;                    /* near-black text */
      box-shadow:none;
      transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    }
    
    .form-control::placeholder{
      color:#9ca3af;                    /* muted placeholder */
      opacity:1;
      font-size: 14px;
    }
    
    .form-control:hover{
      border-color:#d1d5db;
    }
    
    /* Brand focus (matches your #56cd92 green) */
    .form-control:focus{
      background-color:#fff;
      border-color:var(--bg-blue);
      outline:0;
      box-shadow:none;
    }
    
    /* Disabled / readonly */
    .form-control[disabled], .form-control:disabled{
      background-color:#f8f9fb;
      color:#9ca3af;
      border-color:#e5e7eb;
      cursor:not-allowed;
    }
    .form-control[readonly]{
      background-color:#fbfbfb;
    }
    
    /* Textarea + select tweaks */
    textarea.form-control{ min-height:120px; resize:vertical; }
    select.form-control{ background-color:#fff; }
    
    /* Keep rounded corners inside input-groups/addons */
    .input-group .form-control{ border-radius:.6rem; }
    
    /* Validation states (optional) */
    .form-control.is-invalid{
      border-color:#ef4444;
      box-shadow:0 0 0 .2rem rgba(239,68,68,.15);
    }
    .form-control.is-valid{
      border-color:#10b981;
      box-shadow:0 0 0 .2rem rgba(16,185,129,.15);
    }
    
    /* Minor polish for number/search fields */
    input[type=number].form-control::-webkit-outer-spin-button,
    input[type=number].form-control::-webkit-inner-spin-button{ height:auto; }
    input[type=search].form-control{ -webkit-appearance:none; }
    
    
    /* ===== Cart table (Bootstrap 4) ===== */
    .table {
      background:#fff;
      border-radius:12px;
      overflow:hidden;                    /* rounded corners */
      margin-bottom:0;
      box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
      border:1px solid #e5e7eb;
    }
    
    .table thead th,
    .table tbody td {
      padding:8px;               /* comfy spacing */
      vertical-align:middle;
    }
    
    .table.table-sticky {
      border-collapse: collapse;     /* helps with consistent widths */
      width: 100%;
    }
    
    /* Make head a separate block (stays visible), body scrollable */
    .table.table-sticky thead { 
      display: table; 
      width: 100%;
      table-layout: fixed; 
    }
    .table.table-sticky tbody{
      display: block;
      max-height: 50vh;
      min-height: 40vh;  
      overflow-y: auto;
      width: 100%;
    }
    .table.table-sticky tr{
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    
    
    /* Column widths – must be set on BOTH th and td */
    .table.table-sticky th:nth-child(1),
    .table.table-sticky td:nth-child(1){ width: 6%;  text-align:center; box-sizing:border-box; }
    
    .table.table-sticky th:nth-child(3),
    .table.table-sticky td:nth-child(3){ width: 8%; text-align:center; box-sizing:border-box; }
    
    .table.table-sticky th:nth-child(4),
    .table.table-sticky td:nth-child(4){ width: 10%; text-align:right; white-space:nowrap; box-sizing:border-box; }
    
    .table.table-sticky th:nth-child(5),
    .table.table-sticky td:nth-child(5){ width: 10%; text-align:right; white-space:nowrap; box-sizing:border-box; }
    
    .table.table-sticky th:nth-child(6),
    .table.table-sticky td:nth-child(6){ width: 10%; text-align:center; box-sizing:border-box; }
    

    .row-gap-4 {
        row-gap: 1rem;
    }
    
    
    /* Header row */
    .table thead th {
      /* background:#f8fafc; */
      /* color:#111827; */
      font-weight:600;
      letter-spacing:.02em;
      border-bottom:1px solid #e5e7eb;
      font-size: 14px;
    }
    
    /* Use your existing header row class for brand color */
    .heading-table  {
      background:var(--gradient-bg) !important;
      color:#fff !important;
      border-color:var(--color-blue-dark) !important;
    }
    
    /* Body cells */
    .table tbody td {
      color:#374151;
      border-top:1px solid #f1f5f9;
      font-size: 14px;
    }
    
    /* Hover */
    .table tbody tr:hover {
      background:var(--color-white);
    }
    
    /* Links inside table */
    .table a.text-dark { text-decoration:none;font-weight: 600;font-size: 16px; }
    .table a.text-dark:hover { text-decoration:underline; }
    
    /* Alignments: item #, quantity, remove centered; money right-aligned */
    .table tbody td:nth-child(1),
    .table tbody td:nth-child(3),
    .table tbody td:nth-child(6) {
      text-align:center;
    }
    .table tbody td:nth-child(4),
    .table tbody td:nth-child(5) {
      text-align:right;
      font-variant-numeric: tabular-nums; /* tidy numbers */
    }
    
    /* Totals cell emphasis */
    .table .itotal { font-weight:600; }
    
    /* HRs printed inside the product-name cell */
    .table td hr {
      border:0;
      border-top:1px dashed #e5e7eb;
      margin:.25rem 0;
    }
    
    /* Quantity input inside table */
    .table .iquantity {
      width:50px;
      text-align:center;
      margin:0 auto;
    }
    
    /* Trash icon size */
    .table .fa-trash { font-size:1rem; }
    
    /* Mobile tweaks */
    @media (max-width:575.98px){
      .table thead th, .table tbody td { padding:.625rem .75rem; font-size:.95rem; }
      .table tbody td:nth-child(4),
      .table tbody td:nth-child(5) { white-space:nowrap; }
    }
    
    .coupon-total-div {
        padding: 12px 8px;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        border-radius: 8px;
    }


}
