body { font-family: 'Segoe UI', sans-serif; background:#fff; }

    /* Logo Gradient */
    .logo-text {
      font-weight:700;
      font-size:22px;
      background: linear-gradient(90deg,#351171,#7c5cff);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    /* Navbar */
    .nav-pill {
      background:#f5f5f7;
      border:1px solid #e2e2e6;
      border-radius:50px;
      padding:6px;
    }

    .nav-pill a {
      font-size:14px;
      padding:6px 14px;
      border-radius:30px;
      color:#444;
      display:flex;
      align-items:center;
      gap:6px;
      text-decoration:none;
    }

    .nav-pill a:hover {
      background:#eaeaf0;
    }

    /* Search */
    .search-box {
      border:1px solid #ddd;
      border-radius:30px;
      padding:8px 16px;
      background:#f9f9fb;
      width:220px;
      font-size:14px;
    }

    /* Hero */
    .hero { text-align:center; padding:80px 20px; }

    .tag {
      display:inline-block;
      background:#f1f1f4;
      padding:6px 12px;
      border-radius:20px;
      font-size:13px;
      color:#444;
      margin-bottom:16px;
    }

    .hero h1 {
      font-size:64px;
      font-weight:800;
      line-height:1.2;
      background: linear-gradient(90deg,#2b1a5e,#7c5cff);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }

    .hero p.main {
      font-weight:600;
      color:#000;
      font-size:18px;
    }

    .hero p.sub {
      font-size:14px;
      color:#777;
    }

    .btn-gradient {
      background:linear-gradient(90deg,#0f0c29,#7c5cff);
      color:#fff;
      border-radius:50px;
      padding:12px 22px;
      border:none;
    }

    .btn-outline-custom {
      border-radius:50px;
      padding:12px 22px;
    }

    /* Cards */
    .feature-card {
      background:#fff;
      border-radius:14px;
      padding:18px;
      text-align:center;
      border:1px solid #eee;
      transition:0.3s;
    }

    .feature-card:hover {
      transform:translateY(-5px);
      box-shadow:0 10px 20px rgba(0,0,0,0.08);
    }

    .feature-icon {
      width:50px;
      height:50px;
      background:#f3f3f7;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 auto 10px;
      font-size:20px;
    }

    /* Mobile */
    @media(max-width:768px){
      .hero h1 { font-size:36px; }
      .search-box { display:none; }
    }
  
    /* Sticky glass header */
    .navbar{
      position:sticky;
      top:0;
      z-index:999;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(255,255,255,0.7);
      border-bottom:1px solid rgba(0,0,0,0.05);
    }

    /* How it works */
    .how-section{ padding:70px 20px; text-align:center; }
    .how-section h2{ font-weight:700; }
    .how-section p.sub{ color:#777; margin-bottom:40px; }

    .how-step{ text-align:center; }
    .how-icon{
      width:60px;height:60px;border-radius:50%;
      background:#f3f3f7;
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 15px;font-size:22px;
    }

    .how-step h6{ font-weight:600; }
    .how-step small{ color:#777; }

    /* bottom trust strip */
    .trust-strip{
      background:#f6f8f7;
      border-top:1px solid #e5e7eb;
      border-bottom:1px solid #e5e7eb;
      padding:18px 0;
    }
    .trust-item{ color:#2e7d32; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; }
    
    
.custom-hover {
    border-radius: 8px;
    transition: all 0.2s ease;
}

.custom-hover:hover {
    background-color: #e9ecef; /* light grey like screenshot */
}

/* CATEGORY SCROLL */
.category-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 5px;
}

.category-scroll::-webkit-scrollbar {
  height: 6px;
}

.cat-btn {
  border: 1px solid #ddd;
  padding: 6px 14px;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.cat-btn.active {
  background: #000;
  color: #fff;
}

/* DROPDOWN */
.category-menu li {
  padding: 10px;
  cursor: pointer;
}

.category-menu li.active {
  background: #f1f1f1;
  font-weight: 600;
}

/* CARD */
.listing-card {
  border-radius: 12px;
  overflow: hidden;
  transition: 0.3s;
}

.image-wrapper {
  position: relative;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* HOVER ZOOM */
.listing-card:hover img {
  transform: scale(1.08);
}

/* BADGES */
.badge {
  position: absolute;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
}

.verified {
  top: 10px;
  left: 10px;
  background: #2563eb;
  color: #fff;
}

.rating {
  top: 10px;
  right: 10px;
  background: #fff;
  color:#000;
}

.status {
  bottom: 10px;
  right: 10px;
  color: #fff;
}

.status.available {
  background: #22c55e;
}

.status.limited {
  background: #f97316;
}

/* TOP BAR */
.top-bar {
  flex-wrap: nowrap;
}

/* SEARCH */
.search-box {
  position: relative;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 8px 12px;
}

.search-box i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #6b7280;
}

.search-box input {
  border: none;
  outline: none;
  background: transparent;
  padding-left: 30px;
  width: 100%;
}

/* FILTER BUTTON */
.filter-btn {
  background: #f3f4f6;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
}

/* CARD */
.listing-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.img-box {
  position: relative;
  overflow: hidden;
}

.img-box img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: 0.4s;
}

.listing-card:hover img {
  transform: scale(1.08);
}

/* BADGES */
.badge {
  position: absolute;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
}

.verified {
  top: 10px;
  left: 10px;
  background: #2563eb;
  color: #fff;
}

.rating {
  top: 10px;
  right: 10px;
  background: #fff;
}

.status {
  bottom: 10px;
  right: 10px;
  color: #fff;
}

.available { background: #22c55e; }
.limited { background: #f97316; }

/* CONTENT */
.content {
  padding: 15px;
}

.category {
  font-size: 13px;
  color: #6b7280;
}

.location {
  font-size: 13px;
  color: #6b7280;
}

.desc {
  font-size: 13px;
  margin: 8px 0;
}

/* TAGS */
.tags span {
  font-size: 8px;
  background: #f1f5f9;
  padding: 4px 8px;
  border-radius: 6px;
  margin-right: 5px;
}

/* PRICE */
.price-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

/* EMI */
.emi-row {
  display: flex;
  justify-content: space-between;
  background: #eaf7ee;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 8px;
}



/* BUTTON */
.btn-view {
  width: 100%;
  margin-top: 10px;
  background: #020617;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 8px;
}

.category-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 5px;
}

.category-scroll::-webkit-scrollbar {
  height: 5px;
}

.cat-btn {
  border: 1px solid #ddd;
  background: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.cat-btn.active {
  background: #020617;
  color: #fff;
}

.listing-item {
  display: flex;
}

.listing-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1;   /* 🔥 THIS IS THE KEY */
}

/* PUSH BOTTOM SECTION DOWN */
.card-top {
  flex-grow: 0;
}



.bi-star-fill{color:#e1b116;}

.desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tags {
  min-height: 28px;
  max-height: 28px;
  overflow: hidden;
}


.card-bottom {
  margin-top: auto;
}

.content {
  gap: 6px;
}

/* Tabs */


.tab-btn.active {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Book button gradient */
.book-btn {
    background: linear-gradient(90deg,#6c63ff,#4f46e5);
    border: none;
    border-radius: 10px;
    padding: 10px;
}

/* Table font tuning */
.table td, .table th {
    font-size: 14px;
}

/* Headings */
h5 {
    font-size: 18px;
}

.ai-badge {
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e0e7ff;
    color: #4338ca;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

/* Wrapper */
.tab-scroll-wrapper {
    background: #f1f3f5;
    padding: 10px;
    border-radius: 999px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scroll container */
.tab-scroll {
    display: flex;
    flex-wrap: nowrap; /* 🚀 force single line */
    width: max-content;
}

/* Hide scrollbar (optional clean UI) */
.tab-scroll-wrapper::-webkit-scrollbar {
    display: none;
}
.tab-scroll-wrapper {
    scrollbar-width: none;
}

/* Tabs */


.tab-btn {
    /* display: inline-flex; */
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: transparent;
    border: none;
    white-space: nowrap;
    flex-shrink: 0; /* 🚀 prevent shrinking */
    font-weight: 500;
     color: #495057;
    font-size: 14px;
}



/* Active tab */
.tab-btn.active {
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.category-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.category-card h6 {
    font-size: 16px;
}

.category-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
}

.category-list li {
    margin-bottom: 6px;
    font-size: 14px;
}

.category-list a {
    text-decoration: none;
    color: #6b7280;
}

.category-list a.more {
    color: #4f46e5;
    font-weight: 500;
}

/* ICON CIRCLE */
.icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px;
}

/* COLORS (matching screenshot style) */
.bg-blue { background:#e0e7ff; color:#4f46e5; }
.bg-orange { background:#fff7ed; color:#ea580c; }
.bg-purple { background:#f3e8ff; color:#9333ea; }
.bg-pink { background:#fce7f3; color:#db2777; }
.bg-indigo { background:#e0e7ff; color:#6366f1; }
.bg-red { background:#fee2e2; color:#dc2626; }
.bg-green { background:#d1fae5; color:#059669; }
.bg-gray { background:#f3f4f6; color:#6b7280; }
.bg-yellow { background:#fef3c7; color:#d97706; }

.category-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    transition: 0.3s;
}

.hero-overdraft {
  background-color: #0f172b;
}

.highlight-text {
  color: #05df72;
}

.btn-success-custom {
  background-color: #05df72;
  color: #000;
  border-radius: 12px;
  border: none;
  transition: 0.3s;
}

.btn-success-custom:hover {
  background-color: #04c863;
  color: #000;
}

.btn-light-custom {
  background-color: #e5e5e5;
  color: #000;
  border-radius: 12px;
  border: none;
  transition: 0.3s;
}

.btn-light-custom:hover {
  background-color: #d6d6d6;
}
.hero-overdraft h1 {
  line-height: 1.2;
}

.hero-overdraft p {
  max-width: 650px;
  opacity: 0.85;
}

.plan-card {
  max-width: 520px;
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  position: relative;
  padding: 30px 25px;

  /* Shadow like screenshot */
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* 🔥 TOP CURVED BORDER STRIP */
.plan-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: #0a0a23; /* dark navy/black */

  /* curve effect */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

/* ICON CIRCLE */
.icon-wrap {
  width: 64px;
  height: 64px;
  background: #eef0f3; /* soft grey like screenshot */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

/* ICON STYLE */
.icon-wrap i {
  font-size: 24px;
  color: #0a0a23;
}

.plan-section {
  background: #f3f4f6;
}

.nav-pill .nav-link{
    border-radius:50px;
    padding:6px 12px;
    color:#333;
}

.nav-pill .nav-link.active{
    background:#f1f3f5;
    color:#000;
}


.upload-box{
    border:2px dashed #dcdcdc;
    border-radius:12px;
    height:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    background:#fafafa;
    transition:0.2s;
}

.upload-box:hover{
    background:#f3f3f3;
}

.upload-icon{
    font-size:32px;
    color:#6c757d;
}

.image-preview{
    background:#dfe1e6;
    border-radius:12px;
    height:160px;
}

.package-card{
    border:1px solid #e6e6e6;
    border-radius:12px;
    padding:18px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
}

.package-card h6{
    font-weight:600;
}

.price{
    font-size:18px;
    font-weight:600;
}

.addon-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    border-radius:10px;
    background:#f8f9fb;
    margin-bottom:10px;
}

.booking-card{
    border:1px solid #e6e6e6;
    border-radius:14px;
    padding:20px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    background:#fff;
}

.booking-left h5{
    font-weight:600;
}

.confirmed-badge{
    background:#000;
    color:#fff;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
}

.pending-badge{
    background:#e9ecef;
    color:#000;
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
}

.booking-title{
    flex-wrap:wrap;
}

.confirmed-badge,
.pending-badge{
    white-space:nowrap;
}


.booking-title{
    align-items:center;
    gap:10px;
    margin-bottom:4px;
}

.booking-id{
    font-size:20px;
    font-weight:600;
}

.confirmed-badge{
    background:#000;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:10px;
    flex-shrink:0;
    margin: 5px;
}

.pending-badge{
    background:#e9ecef;
    color:#000;
    padding:6px 14px;
    border-radius:20px;
    font-size:10px;
    flex-shrink:0;
    margin: 5px;
}

/* payout cards */

.payout-card{
    padding:24px;
    border-radius:16px;
    border:1px solid #e6e6e6;
    height:100%;
}

.payout-green{
    background:#e9f6ec;
    border-color:#b9e0c1;
}

.payout-orange{
    background:#f6efe4;
    border:1px solid #f0cfa3;
    color:#7c3b1c;
}

.payout-orange h6{
    color:#8b3d12;
}

.payout-orange .payout-amount{
    color:#7a3419;
}

.payout-orange small{
    color:#c2410c;
}

.payout-gray{
    background:#f5f6f8;
}

.payout-amount{
    font-size:36px;
    font-weight:700;
    margin:15px 0;
    color:#2f5d3a;
}

.payout-amount.dark{
    color:#0f172a;
}

.btn-outline-warning{
    border-color:#f0a24a;
    color:#8b3d12;
    background-color: #fff;
}

.btn-outline-warning:hover{
    background:#f0a24a;
    color:#fff;
}


/* amounts */

.amount-green{
    color:#3f8f4d !important;
    font-weight:600;
}

.amount-orange{
    color:#d35400 !important;
    font-weight:600;
}

.amount-red{
    color:#c0392b !important;
    font-weight:600;
}


/* status badges */

.status-light{
    background:#e5e7eb;
    color:#111;
}

.status-orange{
    background:#f5e9d8;
    color:#8b3d12;
}

.status-dark{
    background:#000;
    color:#fff;
}


/* automation box */

.automation-box{
    border:1px solid #cbd5f5;
    border-radius:16px;
    padding:25px;
    background:#f7f9ff;
}

.rule-card{
    background:#fff;
    border-radius:12px;
    padding:20px;
    border:1px solid #e6e6e6;
}

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

.table td{
    vertical-align:middle !important;
}

.badge{
    padding:8px 14px;
    border-radius:14px;
    font-weight:500;
    position: inherit !important;
}

.document-item{
    border:1px solid #e6e6e6;
    border-radius:14px;
    padding:18px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    background:#fff;
}

.document-left{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:18px;
}

.document-left i{
    font-size:22px;
    color:#6b7280;
}

.verified-badge{
    background:#e7f6ec;
    color:#2f6b3e;
    border:1px solid #b6e3c4;
    padding:6px 14px;
    border-radius:20px;
    font-weight:500;
}

.support-box{
    padding:40px;
}

.support-content{
    text-align:center;
    padding:60px 0;
}

.support-icon{
    font-size:48px;
    color:#6b7280;
}

.support-content h4{
    font-weight:600;
}

.support-content p{
    max-width:520px;
    margin:10px auto 20px;
    font-size:16px;
}

/* AI Card */

.ai-card{
    background:#f3efff;
    border-radius:16px;
}

.ai-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e9e3ff;
    border-radius:12px;
    font-size:20px;
    color:#7c5cff;
}

.text-purple{
    color:#6f4cff;
}

.text-purple-light{
    color:#7c5cff;
}

.btn-outline-purple{
    border:1px solid #b7a6ff;
    color:#6f4cff;
    border-radius:10px;
    padding:6px 18px;
}

.btn-outline-purple:hover{
    background:#6f4cff;
    color:white;
}


/* Checklist Card */

.checklist-card{
    border-radius:16px;
    box-shadow:0 1px 2px rgba(0,0,0,0.06);
}


/* Task circle */

.task-circle{
    width:22px;
    height:22px;
    border:2px solid #9ca3af;
    border-radius:50%;
    margin-top:3px;
}


/* Completed */

.completed-icon{
    font-size:20px;
    color:#22c55e;
}


/* Urgent */

.urgent{
    color:#ef4444;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:6px;
}


.budget-card{
border-radius:18px;
box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

.budget-icon{
font-size:28px;
color:#3da35d;
}

.edit-btn{
border-radius:12px;
padding:8px 18px;
}


/* Budget bar */

.budget-bar{
display:flex;
height:24px;
border-radius:40px;
overflow:hidden;
background:#e5e7eb;
}

.bar{
height:100%;
}

.venue{
background:#4e79d9;
}

.catering{
background:#d24b8c;
}

.decor{
background:#8b5cf6;
}

.photo{
background:#e69500;
}

.others{
background:#aeb6c2;
}


/* Legend */

.dot{
width:10px;
height:10px;
display:inline-block;
border-radius:50%;
margin-right:6px;
}

.venue-dot{background:#4e79d9;}
.catering-dot{background:#d24b8c;}
.decor-dot{background:#8b5cf6;}
.photo-dot{background:#e69500;}
.others-dot{background:#aeb6c2;}


/* Table */

.budget-table{
border:1px solid #e5e7eb;
border-radius:12px;
overflow:hidden;
}

.budget-table thead{
background:#f9fafb;
}

.budget-table th{
font-weight:600;
}


/* Inflation Alert */

.inflation-alert{
background:#eef3ff;
padding:18px;
border-radius:14px;
color:#4157d9;
}

.alert-icon{
font-size:22px;
}


/* Card */

.inspiration-card{
border-radius:18px;
box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

.add-btn{
border-radius:12px;
padding:8px 16px;
}


/* Image square */

.inspiration-img{

aspect-ratio:1/1;
overflow:hidden;
border-radius:18px;
position:relative;
}

.inspiration-img img{

width:100%;
height:100%;
object-fit:cover;
transition:transform .4s ease;

}


/* Hover zoom */

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


/* Upload card */

.upload-card{

aspect-ratio:1/1;
border:2px dashed #d1d5db;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
color:#6b7280;
cursor:pointer;
transition:.3s;

}

.upload-card:hover{

background:#f9fafb;
border-color:#9ca3af;

}

.upload-icon{

font-size:26px;

}

.upload-text{

font-size:15px;

}

/* Summary Cards */

.payment-summary{

border-radius:16px;
border:1px solid #e5e7eb;
box-shadow:0 2px 6px rgba(0,0,0,0.05);

}

.due-card{

border:1px solid #f2d6b3;
background:#fffaf3;

}



/* Main Payments Card */

.payments-card{

border-radius:18px;
border:1px solid #e5e7eb;
box-shadow:0 2px 6px rgba(0,0,0,0.05);

}



/* Section icon */

.section-icon{

font-size:22px;

}



/* Payment item */

.payment-item{

display:flex;
align-items:center;
justify-content:space-between;
padding:20px;
border:1px solid #e5e7eb;
border-radius:16px;
margin-bottom:20px;
flex-wrap:wrap;
gap:15px;

}



/* Payment icon */

.payment-icon{

width:52px;
height:52px;
background:#f3f4f6;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;

}



/* Right area */

.payment-right{

text-align:right;
min-width:120px;

}

.amount{

font-size:20px;

}

.breakdown-link{

color:#4f46e5;
text-decoration:none;

}

.breakdown-link:hover{

text-decoration:underline;

}



/* Pay button */

.pay-btn{

border-radius:10px;
padding:6px 16px;

}



/* Mobile fix */

@media (max-width:768px){

.payment-item{

flex-direction:column;
align-items:flex-start;

}

.payment-right{

text-align:left;

}

}



/* Credit card */

.credit-card{

border-radius:20px;
border:1px solid #c7d7ff;
background:#f8fbff;

}

.credit-title{

font-size:22px;
font-weight:600;
color:#2f4ba5;

}

.credit-limit{

color:#3b5bdb;
font-size:16px;

}

.manage-btn{

border-radius:10px;

}



/* Used row */

.used-label{

font-size:18px;

}

.used-amount{

font-size:22px;
font-weight:600;

}



/* Progress */

.credit-progress{

height:14px;
background:#dce5f7;
border-radius:10px;

}

.credit-progress-bar{

background:#4666e5;

}



/* Transactions card */

.transaction-card{

border-radius:20px;
border:1px solid #e5e7eb;

}

.transaction-title{

font-size:22px;
font-weight:600;

}



/* Transaction row */

.transaction-row{

display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;

}

.vendor-name{

font-size:20px;
font-weight:600;

}

.transaction-amount{

font-size:22px;
font-weight:600;

}



/* Mobile */

@media (max-width:768px){

.transaction-row{

flex-direction:column;
align-items:flex-start;
gap:6px;

}

.text-end{

text-align:left !important;

}

}






/* Main card */

.insurance-main-card{

border-radius:20px;
border:1px solid #e5e7eb;

}

.insurance-icon{

font-size:28px;
color:#5c7cfa;

}

.insurance-title{

font-size:22px;
font-weight:600;

}

.insurance-subtitle{

color:#6b7280;
font-size:18px;

}



/* Active Policy */

.active-policy-card{

border-radius:16px;
border:1px solid #b9e2c2;
background:#f6fff7;

}

.active-badge{

background:#e6f7ea;
color:#2f8f46;
font-weight:500;
padding:6px 10px;
border-radius:20px;

}

.policy-id{

color:#2f8f46;
font-size:18px;

}



/* Coverage */

.coverage-value{

font-size:20px;
font-weight:600;

}



/* Buttons */

.view-doc-btn{

border-radius:10px;

}

.claim-btn{

background:#f3f4f6;
border:1px solid #e5e7eb;
border-radius:12px;
font-size:18px;
padding:10px;

}

.claim-btn:hover{

background:#e5e7eb;

}

.claim-help{

color:#6b7280;
text-decoration:none;
font-size:16px;

}

.claim-help:hover{

text-decoration:underline;

}



/* Info */

.insurance-info{

background:#f3f4f6;
border-radius:12px;
font-size:16px;
color:#4b5563;

}

.info-icon{

font-size:20px;
color:#6b7280;

}



/* Mobile */

@media (max-width:768px){

.insurance-subtitle{

font-size:16px;

}

.coverage-value{

font-size:18px;

}

}





/* Main card */

.support-card{

border-radius:20px;
border:1px solid #e5e7eb;

}


/* Header */

.support-icon{

font-size:26px;
color:#111827;

}

.support-title{

font-size:22px;
font-weight:600;

}

.support-subtitle{

font-size:18px;
color:#6b7280;

}


/* Active Ticket */

.ticket-active{

border-radius:16px;
border:1px solid #f3d98c;
background:#fffdf5;

}

.ticket-title{

font-size:20px;
font-weight:600;

}

.ticket-update{

font-size:16px;
color:#6b7280;

}

.ticket-message{

font-size:18px;

}


/* Closed Ticket */

.ticket-closed{

border-radius:16px;
border:1px solid #e5e7eb;
background:#fafafa;

}

.ticket-view-link{

text-decoration:none;
font-size:18px;
color:#6b7280;

}

.ticket-view-link:hover{

text-decoration:underline;

}


/* Badges */

.badge-progress{

background:#fff3c4;
color:#a16207;
padding:6px 12px;
border-radius:20px;
font-weight:500;

}

.badge-resolved{

background:#e8f7ec;
color:#2f8f46;
padding:6px 12px;
border-radius:20px;
font-weight:500;

}


/* Raise ticket button */

.raise-ticket-btn{

background:#050a1f;
color:white;
border-radius:12px;
padding:12px;
font-size:18px;
font-weight:500;

}

.raise-ticket-btn:hover{

background:#0a1437;
color:white;

}


/* Footer help */

.support-help{

font-size:16px;
color:#6b7280;

}


/* Mobile */

@media (max-width:768px){

.ticket-message{

font-size:16px;

}

.support-subtitle{

font-size:16px;

}

}









.image-grid-wrapper {
  border-radius: 14px;
  overflow: hidden;
}

/* RIGHT GRID */
.right-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  height: 360px;
}

/* IMAGE BOX */
.img-box {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

/* BIG IMAGE (DESKTOP FIXED HEIGHT) */
.img-box.big {
  height: 360px;
}

/* SMALL GRID AUTO MATCH */
.img-box.small {
  height: 100%;
}

/* IMAGE STYLE */
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* HOVER */
.img-box:hover img {
  transform: scale(1.08);
}

/* MOBILE */
@media (max-width: 991px) {
  .img-box.big {
    height: 260px;
  }

  .right-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .img-box.small {
    height: 100%;
  }
}.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
}






body {
  background: #f8f9fb;
  font-family: system-ui;
}

/* INFO BOX */
.info-box {
  background: #eef3ff;
  border-radius: 10px;
  padding: 10px 12px;
}

/* EMI */
.emi-box {
  background: #e9f7ef;
  border-radius: 12px;
  padding: 12px;
}

/* TABS */
.custom-tabs .nav-link {
  color: #555;
  border: none;
  border-bottom: 2px solid transparent;
}

.custom-tabs .nav-link.active {
  border-bottom: 2px solid #000;
  font-weight: 600;
}

/* RIGHT CARD */
.bookingcard {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-top: 3px solid #000;
  position: sticky;
  top: 20px;
}

/* CALENDAR */
.calendar-box {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 30px;
}

/* PAYMENT */
.payment-box {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  margin-top: 10px;
}

.availability-box {
  background: #d1e7dd;
  border: 1px solid #badbcc;
  padding: 14px;
  border-radius: 10px;
  font-weight: 500;
  color: #0f5132;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flink{
    color: inherit !important;
    text-decoration: none !important;
}