/* ===================================================
   AXESELL FINAL PREMIUM UI
=================================================== */

:root{
  --primary:#5a140c;
  --primary-light:#7a2418;
  --primary-dark:#3b0905;

  --bg:#f5f6fa;
  --white:#ffffff;

  --text:#111827;
  --muted:#6b7280;

  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#06b6d4;

  --radius:16px;

  --shadow:
  0 4px 16px rgba(0,0,0,.05);
}

/* ===================================================
   BODY
=================================================== */

body{
  background:var(--bg)!important;
  font-family:'Poppins',sans-serif!important;
  overflow-x:hidden;
}

/* ===================================================
   TABLER ICON FIX
=================================================== */

i[class^="ti-"],
i[class*=" ti-"]{
  font-family:"tabler-icons" !important;
  font-style:normal !important;
  font-weight:normal !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  line-height:1 !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

.header{
  height:66px!important;

  background:#fff!important;

  border-bottom:1px solid #ececec!important;

  padding:0 18px!important;

  box-shadow:none!important;
}

.header-left{
  width:245px!important;

  height:66px!important;

  border-right:1px solid #ececec!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  background:#fff!important;
}

.logo img{
  width:115px!important;
}

/* ===================================================
   HEADER RIGHT
=================================================== */

.header-user{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
}

/* notification */

.notification-bell{
  width:40px!important;
  height:40px!important;

  border-radius:12px!important;

  background:#fff!important;

  border:1px solid #ececec!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  transition:.25s ease!important;
}

.notification-bell:hover{
  transform:translateY(-2px);
}

.notification-bell i,
.notification-bell i::before{
  color:var(--primary)!important;
  font-size:20px!important;
}

/* ===================================================
   SIDEBAR
=================================================== */

.sidebar{
  top:66px!important;

  width:245px!important;

  background:
  linear-gradient(
    180deg,
    #4e0d08 0%,
    #5a140c 55%,
    #350704 100%
  )!important;

  border:none!important;

  padding:12px!important;

  overflow-x:hidden!important;
}

.page-wrapper{
  margin-left:245px!important;

  padding-top:66px!important;

  background:var(--bg)!important;
}

/* ===================================================
   CONTENT
=================================================== */

.page-wrapper .content{
  padding:18px!important;
}

/* ===================================================
   USER CARD
=================================================== */

.clinicdropdown > a{
  background:rgba(255,255,255,.08)!important;

  border:1px solid rgba(255,255,255,.08)!important;

  border-radius:18px!important;

  padding:14px!important;

  display:block!important;

  margin-bottom:18px!important;
}

.clinicdropdown h5{
  color:#fff!important;

  font-size:15px!important;

  font-weight:700!important;

  margin-bottom:2px!important;
}

.clinicdropdown h6{
  color:rgba(255,255,255,.7)!important;

  font-size:12px!important;

  margin:0!important;
}

/* ===================================================
   MENU
=================================================== */

.sidebar-menu,
.sidebar-menu ul{
  padding:0!important;
  margin:0!important;
  list-style:none!important;
}

.sidebar-menu ul li{
  margin-bottom:5px!important;
}

/* link */

.sidebar-menu ul li a{
  height:46px!important;

  border-radius:13px!important;

  display:flex!important;
  align-items:center!important;

  gap:12px!important;

  padding:0 12px!important;

  transition:all .25s ease!important;

  overflow:hidden!important;

  position:relative;
}

/* hover */

.sidebar-menu ul li a:hover{
  background:rgba(255,255,255,.10)!important;

  transform:translateX(4px);
}

/* active */

.sidebar-menu ul li.active a,
.sidebar-menu ul li a.active{
  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.16),
    rgba(255,255,255,.08)
  )!important;

  box-shadow:
  0 6px 18px rgba(0,0,0,.15);
}

/* ===================================================
   SIDEBAR ICONS
=================================================== */

.sidebar-menu ul li a i{
  width:34px!important;
  height:34px!important;

  min-width:34px!important;

  border-radius:10px!important;

  background:rgba(255,255,255,.10)!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  transition:.25s ease!important;
}

/* icon color */

.sidebar-menu ul li a i::before{
  color:#ffffff!important;

  font-size:18px!important;
}

/* hover */

.sidebar-menu ul li a:hover i{
  background:#ffffff!important;
}

.sidebar-menu ul li a:hover i::before{
  color:var(--primary)!important;
}

/* active */

.sidebar-menu ul li.active a i,
.sidebar-menu ul li a.active i{
  background:#ffffff!important;
}

.sidebar-menu ul li.active a i::before,
.sidebar-menu ul li a.active i::before{
  color:var(--primary)!important;
}

/* ===================================================
   MENU TEXT
=================================================== */

.sidebar-menu ul li a span{
  color:#ffffff!important;

  font-size:14px!important;

  font-weight:600!important;

  white-space:nowrap!important;

  overflow:hidden!important;

  text-overflow:ellipsis!important;
}

/* ===================================================
   WELCOME BANNER
=================================================== */

.welcome-wrap .bg-dark{
  background:
  linear-gradient(
    135deg,
    #7a160d 0%,
    #5a140c 100%
  )!important;

  border:none!important;

  border-radius:20px!important;

  padding:24px!important;

  overflow:hidden!important;

  position:relative;
}

.welcome-wrap h2{
  font-size:24px!important;

  font-weight:700!important;

  margin-bottom:6px!important;
}

.welcome-wrap p{
  font-size:13px!important;
}

/* ===================================================
   BUTTON
=================================================== */

.btn-soft-light{
  height:40px!important;

  border:none!important;

  border-radius:12px!important;

  background:rgba(255,255,255,.14)!important;

  color:#fff!important;

  font-size:14px!important;

  font-weight:600!important;

  padding:0 18px!important;

  transition:.25s ease!important;
}

.btn-soft-light:hover{
  background:#fff!important;

  color:var(--primary)!important;

  transform:translateY(-2px);
}

/* ===================================================
   CARDS
=================================================== */

.card{
  border:none!important;

  border-radius:18px!important;

  background:#fff!important;

  box-shadow:var(--shadow)!important;

  transition:all .25s ease!important;
}

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

.card-body{
  padding:18px!important;
}

/* ===================================================
   STAT CARDS
=================================================== */

.card h2{
  font-size:17px!important;

  font-weight:700!important;

  margin-top:4px!important;
}

.card p{
  font-size:13px!important;

  color:var(--muted)!important;
}

/* stat icon */

.avatar{
  width:48px!important;
  height:48px!important;

  border-radius:14px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.avatar i::before{
  font-size:20px!important;
}

/* ===================================================
   CHART
=================================================== */

.card-title{
  font-size:16px!important;

  font-weight:700!important;
}

/* ===================================================
   NOTIFICATION DROPDOWN
=================================================== */

.notification-dropdown-modern{
  border:none!important;

  border-radius:18px!important;

  overflow:hidden!important;

  box-shadow:
  0 18px 45px rgba(0,0,0,.12)!important;
}

.notification-header{
  background:
  linear-gradient(
    135deg,
    #5a140c,
    #7a2418
  )!important;
}

/* ===================================================
   SCROLLBAR
=================================================== */

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

::-webkit-scrollbar-thumb{
  background:#5a140c;
  border-radius:20px;
}

/* ===================================================
   MOBILE
=================================================== */

@media(max-width:991px){

  .sidebar{
    margin-left:-100%!important;
  }

  .page-wrapper{
    margin-left:0!important;
  }

  .header-left{
    width:100%!important;
  }

  .page-wrapper .content{
    padding:14px!important;
  }
}

/* =========================================
   COMPACT PREMIUM STAT CARDS
========================================= */

.modern-stat-row{
  --bs-gutter-x: 14px !important;
  --bs-gutter-y: 14px !important;
}

/* CARD */

.modern-stat-card{
  position:relative;
  overflow:hidden;

  border:none !important;
  border-radius:18px !important;

  background:#ffffff !important;

  min-height:92px;

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

  box-shadow:
    0 6px 18px rgba(15,23,42,0.04) !important;
}

/* HOVER */

.modern-stat-card:hover{
  transform:translateY(-4px);

  box-shadow:
    0 14px 28px rgba(15,23,42,0.08) !important;
}

/* LEFT BAR */

.modern-stat-card::before{
  content:"";

  position:absolute;
  left:0;
  top:20px;

  width:5px;
  height:32px;

  border-radius:0 10px 10px 0;
}

/* BODY */

.modern-stat-card .card-body{
  padding:20px 20px !important;
}

/* TOP */

.stat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  position:relative;
  z-index:3;
}

/* TEXT */

.modern-stat-card p{
  margin-bottom:4px !important;

  font-size:13px !important;
  font-weight:500 !important;

  color:#667085 !important;
}

.modern-stat-card h3{
  margin:0 !important;

  font-size:22px !important;
  font-weight:700 !important;

  line-height:1.1;
  letter-spacing:-0.5px;
}

/* ICON */

.stat-icon{
  width:44px;
  height:44px;

  min-width:44px;

  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  transition:all .3s ease;

  position:relative;
  z-index:3;
}

.stat-icon i{
  font-size:22px !important;
}

/* ICON HOVER */

.modern-stat-card:hover .stat-icon{
  transform:scale(1.08);
}

/* WAVE */

.stat-wave{
  position:absolute;
  right:-35px;
  bottom:-35px;

  width:120px;
  height:120px;

  border-radius:50%;

  opacity:.06;

  transition:all .35s ease;
}

.modern-stat-card:hover .stat-wave{
  transform:scale(1.08);
  opacity:.10;
}

/* =========================================
   RED
========================================= */

.stat-danger::before{
  background:#ff3b30;
}

.stat-danger h3{
  color:#0f172a;
}

.stat-danger .stat-icon{
  background:rgba(255,59,48,.08);
  border:1px solid rgba(255,59,48,.28);
}

.stat-danger .stat-icon i{
  color:#ff3b30;
}

.stat-danger .stat-wave{
  background:#ff3b30;
}

/* =========================================
   GREEN
========================================= */

.stat-success::before{
  background:#22c55e;
}

.stat-success h3{
  color:#22c55e;
}

.stat-success .stat-icon{
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.28);
}

.stat-success .stat-icon i{
  color:#22c55e;
}

.stat-success .stat-wave{
  background:#22c55e;
}

/* =========================================
   WARNING
========================================= */

.stat-warning::before{
  background:#f59e0b;
}

.stat-warning h3{
  color:#f59e0b;
}

.stat-warning .stat-icon{
  background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.28);
}

.stat-warning .stat-icon i{
  color:#f59e0b;
}

.stat-warning .stat-wave{
  background:#f59e0b;
}

/* =========================================
   INFO
========================================= */

.stat-info::before{
  background:#06b6d4;
}

.stat-info h3{
  color:#06b6d4;
}

.stat-info .stat-icon{
  background:rgba(6,182,212,.08);
  border:1px solid rgba(6,182,212,.28);
}

.stat-info .stat-icon i{
  color:#06b6d4;
}

.stat-info .stat-wave{
  background:#06b6d4;
}

/* =========================================
   REVENUE
========================================= */

.stat-success-light::before{
  background:#10b981;
}

.stat-success-light h3{
  color:#10b981;
}

.stat-success-light .stat-icon{
  background:rgba(16,185,129,.08);
  border:1px solid rgba(16,185,129,.28);
}

.stat-success-light .stat-icon i{
  color:#10b981;
}

.stat-success-light .stat-wave{
  background:#10b981;
}

/* =========================================
   PURPLE
========================================= */

.stat-primary::before{
  background:#7c3aed;
}

.stat-primary h3{
  color:#7c3aed;
}

.stat-primary .stat-icon{
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.28);
}

.stat-primary .stat-icon i{
  color:#7c3aed;
}

.stat-primary .stat-wave{
  background:#7c3aed;
}

/* =========================================
   PAID
========================================= */

.stat-paid::before{
  background:#16a34a;
}

.stat-paid h3{
  color:#16a34a;
}

.stat-paid .stat-icon{
  background:rgba(22,163,74,.08);
  border:1px solid rgba(22,163,74,.28);
}

.stat-paid .stat-icon i{
  color:#16a34a;
}

.stat-paid .stat-wave{
  background:#16a34a;
}

/* =========================================
   PENDING
========================================= */

.stat-pending::before{
  background:#f59e0b;
}

.stat-pending h3{
  color:#f59e0b;
}

.stat-pending .stat-icon{
  background:rgba(245,158,11,.08);
  border:1px solid rgba(245,158,11,.28);
}

.stat-pending .stat-icon i{
  color:#f59e0b;
}

.stat-pending .stat-wave{
  background:#f59e0b;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:991px){

  .modern-stat-card{
    min-height:84px;
  }

  .modern-stat-card .card-body{
    padding:16px !important;
  }

  .modern-stat-card h3{
    font-size:19px !important;
  }

  .stat-icon{
    width:40px;
    height:40px;
    min-width:40px;
  }

  .stat-icon i{
    font-size:18px !important;
  }

}

/* =========================================
   ULTRA CLEAN COMPACT PACKAGE UI
========================================= */

/* PAGE */

.modern-package-page{
  padding:14px 16px !important;
}

/* =========================================
   TOPBAR
========================================= */

.package-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:14px;
}

.package-title{
  font-size:18px !important;
  font-weight:700 !important;

  margin-bottom:2px !important;

  color:#101828;
}

.package-subtitle{
  font-size:12px !important;
  color:#667085;
}

/* =========================================
   BUTTON
========================================= */

.package-add-btn{
  height:38px !important;

  padding:0 14px !important;

  border:none !important;

  border-radius:10px !important;

  background:
  linear-gradient(
    135deg,
    #7e120d,
    #c81e1e
  ) !important;

  color:#fff !important;

  font-size:13px !important;
  font-weight:600 !important;

  transition:.3s ease;

  box-shadow:
    0 8px 18px rgba(126,18,13,.15);
}

.package-add-btn:hover{
  transform:translateY(-2px);
}

/* =========================================
   TOOLBAR
========================================= */

.package-toolbar{
  background:#fff;

  border-radius:16px;

  padding:10px 12px;

  margin-bottom:14px;

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

  box-shadow:
    0 5px 18px rgba(15,23,42,.04);
}

/* SEARCH */

.package-search{
  width:260px;

  height:40px;

  border-radius:12px;

  background:#f8fafc;

  border:1px solid #edf1f7;

  display:flex;
  align-items:center;

  padding:0 12px;

  transition:.3s ease;
}

.package-search:focus-within{
  background:#fff;

  border-color:#86130d;
}

.package-search i{
  font-size:16px;
  color:#98a2b3;
}

.package-search input{
  width:100%;

  border:none;
  outline:none;

  background:transparent;

  padding-left:8px;

  font-size:13px;
}

/* VIEW BTNS */

.package-view-btns{
  display:flex;
  gap:8px;
}

.package-view-btns button{
  width:38px;
  height:38px;

  border:none;

  border-radius:10px;

  background:#f8fafc;

  transition:.3s ease;
}

.package-view-btns button.active{
  background:
  linear-gradient(
    135deg,
    #86130d,
    #c81e1e
  );

  color:#fff;
}

/* =========================================
   PACKAGE LIST
========================================= */

.package-list-wrap{
  display:flex;
  flex-direction:column;

  gap:12px;
}

/* =========================================
   CARD
========================================= */

.package-card{
  background:#fff;

  border-radius:18px;

  padding:14px 16px;

  display:flex;
  align-items:center;

  gap:14px;

  position:relative;

  overflow:hidden;

  transition:.3s ease;

  box-shadow:
    0 5px 18px rgba(15,23,42,.04);
}

.package-card:hover{
  transform:translateY(-2px);

  box-shadow:
    0 12px 25px rgba(15,23,42,.08);
}

/* LEFT */

.package-number{
  font-size:20px;
  font-weight:700;

  color:#86130d;

  min-width:36px;
}

/* ICON */

.package-icon{
  width:54px;
  height:54px;

  min-width:54px;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    rgba(134,19,13,.06),
    rgba(200,30,30,.08)
  );

  display:flex;
  align-items:center;
  justify-content:center;
}

.package-icon i{
  font-size:24px;
  color:#86130d;
}

/* =========================================
   CONTENT
========================================= */

.package-content{
  flex:1;

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

  gap:18px;
}

/* =========================================
   INFO
========================================= */

.package-left{
  min-width:180px;
}

.package-left h4{
  font-size:18px !important;
  font-weight:700 !important;

  margin-bottom:8px !important;

  color:#101828;
}

/* META */

.package-meta{
  display:flex;
  align-items:center;

  flex-wrap:wrap;

  gap:10px;
}

.package-meta span{
  display:flex;
  align-items:center;

  gap:5px;

  font-size:12px;
  color:#667085;
}

/* BADGE */

.active-badge{
  padding:4px 10px;

  border-radius:999px;

  background:#ecfdf3;

  color:#16a34a !important;

  font-size:12px !important;
  font-weight:600 !important;
}

.dot{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#16a34a;
}

/* =========================================
   MODULES
========================================= */

.package-modules{
  flex:1;
}

.package-modules h6{
  font-size:13px !important;
  font-weight:700 !important;

  margin-bottom:8px !important;
}

.module-tags{
  display:flex;
  flex-wrap:wrap;

  gap:8px;
}

.module-chip{
  padding:6px 12px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    rgba(134,19,13,.05),
    rgba(200,30,30,.08)
  );

  color:#86130d;

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

  transition:.25s ease;
}

.module-chip:hover{
  background:
  linear-gradient(
    135deg,
    #86130d,
    #c81e1e
  );

  color:#fff;
}

/* =========================================
   ACTIONS
========================================= */

.package-actions{
  display:flex;
  align-items:center;

  gap:8px;
}

.action-btn{
  width:38px;
  height:38px;

  border:none;

  border-radius:12px;

  transition:.25s ease;
}

.action-btn i{
  font-size:16px;
}

.action-btn:hover{
  transform:translateY(-2px);
}

/* VIEW */

.view-btn{
  background:#f8fafc;
}

.view-btn i{
  color:#475467;
}

/* EDIT */

.edit-btn{
  background:#ecfdf3;
}

.edit-btn i{
  color:#16a34a;
}

/* DELETE */

.delete-btn{
  background:#fef2f2;
}

.delete-btn i{
  color:#dc2626;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1200px){

  .package-content{
    flex-direction:column;
    align-items:flex-start;

    gap:14px;
  }

}

@media(max-width:768px){

  .package-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .package-toolbar{
    flex-direction:column;
    align-items:stretch;

    gap:10px;
  }

  .package-search{
    width:100%;
  }

  .package-actions{
    width:100%;
  }

  .action-btn{
    flex:1;
  }

}

/* =========================================
   MODERN DELETE MODAL
========================================= */

#delete-modal .modal-dialog{
  max-width:380px !important;
}

#delete-modal .modal-content{
  border:none !important;

  border-radius:24px !important;

  padding:28px 24px !important;

  background:#ffffff !important;

  box-shadow:
    0 30px 60px rgba(15,23,42,.18) !important;

  overflow:hidden;

  animation:deleteModalShow .28s ease;
}

/* ANIMATION */

@keyframes deleteModalShow{

  from{
    transform:translateY(20px) scale(.96);
    opacity:0;
  }

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

}

/* TOP ICON */

.delete-icon{
  width:74px !important;
  height:74px !important;

  margin:0 auto 18px !important;

  border-radius:22px !important;

  background:
  linear-gradient(
    135deg,
    rgba(220,38,38,.08),
    rgba(239,68,68,.14)
  ) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  position:relative;
}

.delete-icon::before{
  content:"";

  position:absolute;

  width:52px;
  height:52px;

  border-radius:16px;

  background:#fff;

  box-shadow:
    0 8px 18px rgba(220,38,38,.10);
}

.delete-icon i{
  position:relative;
  z-index:2;

  font-size:30px !important;

  color:#dc2626 !important;
}

/* TITLE */

#delete-modal h4{
  text-align:center !important;

  font-size:24px !important;
  font-weight:700 !important;

  color:#111827 !important;

  margin-bottom:8px !important;
}

/* TEXT */

#delete-modal p{
  text-align:center !important;

  font-size:14px !important;

  color:#6b7280 !important;

  margin-bottom:0 !important;
}

/* BUTTON WRAP */

.delete-modal-actions{
  display:flex;
  gap:12px;

  margin-top:24px;
}

/* CANCEL BTN */

.delete-cancel-btn{
  height:48px !important;

  border:none !important;

  border-radius:14px !important;

  background:#f3f4f6 !important;

  color:#374151 !important;

  font-size:14px !important;
  font-weight:600 !important;

  transition:.25s ease;
}

.delete-cancel-btn:hover{
  background:#e5e7eb !important;
}

/* DELETE BTN */

.delete-confirm-btn{
  height:48px !important;

  border:none !important;

  border-radius:14px !important;

  background:
  linear-gradient(
    135deg,
    #dc2626,
    #ff003c
  ) !important;

  color:#fff !important;

  font-size:14px !important;
  font-weight:600 !important;

  box-shadow:
    0 12px 25px rgba(220,38,38,.20);

  transition:.28s ease;
}

.delete-confirm-btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 16px 30px rgba(220,38,38,.28);
}

/* BACKDROP */

.modal-backdrop.show{
  opacity:.45 !important;

  backdrop-filter:blur(3px);
}

/* =========================================
   PACKAGE PAGE HEADER
========================================= */

.package-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  margin-bottom:22px;

  position:relative;
}

/* LEFT SIDE */

.package-heading-wrap{
  position:relative;
}

/* SMALL BADGE */

.package-heading-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;

  height:34px;

  padding:0 14px;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    rgba(127,29,29,.08),
    rgba(220,38,38,.08)
  );

  border:1px solid rgba(127,29,29,.08);

  color:#8b0c04;

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

  margin-bottom:12px;

  animation:fadeSlide .5s ease;
}

.package-heading-badge i{
  font-size:15px;
}

/* TITLE */

.package-title{
  font-size:38px !important;

  line-height:1.05;

  font-weight:800 !important;

  letter-spacing:-1.5px;

  margin-bottom:12px !important;

  background:
  linear-gradient(
    90deg,
    #111827 0%,
    #7f1d1d 55%,
    #dc2626 100%
  );

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  animation:fadeSlide .55s ease;
}

/* SUBTITLE */

.package-subtitle{
  font-size:15px !important;

  color:#6b7280 !important;

  line-height:1.7;

  max-width:620px;

  margin-bottom:18px !important;

  animation:fadeSlide .65s ease;
}

/* LINE */

.package-heading-line{
  width:120px;
  height:5px;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    #7f1d1d,
    #dc2626,
    transparent
  );

  animation:lineGrow .8s ease;
}

/* BUTTON */

.package-add-btn{
  height:52px !important;

  padding:0 26px !important;

  border:none !important;

  border-radius:18px !important;

  background:
  linear-gradient(
    135deg,
    #7f1d1d,
    #dc2626
  ) !important;

  color:#fff !important;

  font-size:15px !important;
  font-weight:700 !important;

  box-shadow:
    0 14px 28px rgba(127,29,29,.20);

  transition:.28s ease !important;
}

.package-add-btn:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 34px rgba(127,29,29,.28);
}

/* ANIMATIONS */

@keyframes fadeSlide{

  from{
    opacity:0;
    transform:translateY(14px);
  }

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

}

@keyframes lineGrow{

  from{
    width:0;
    opacity:0;
  }

  to{
    width:120px;
    opacity:1;
  }

}

/* MOBILE */

@media(max-width:768px){

  .package-topbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .package-title{
    font-size:32px !important;
  }

  .package-subtitle{
    font-size:14px !important;
  }

  .package-add-btn{
    width:100%;
    justify-content:center;
  }

}