@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Helvetica Neue";
  src: url("../fonts/HelveticaNeue-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: "Helvetica Neue", sans-serif;
}
    .main-banner {
      background: url('../img/mainBanner.webp') no-repeat center center;
      background-size: cover;
      color: white;
      position: relative;
      height: 72vh;
      background-repeat: no-repeat;
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding-top: 100px;
    }

    .hero h1 {
      font-size: 4rem;
      font-weight: bold;
    }


    li.nav-item {
    padding: 13px;
   }
    .hero h2 {
      font-size: 2rem;
      color: #0195F5;
      font-weight: bold;
    }

    .btn-register {
      background-color: #ffd700;
      color: #fff;
      border: none;
      font-weight: bold;
    }

    .btn-register:hover {
      background-color: #e6c200;
    }

    .navbar-brand img {
      height: 60px;
    }
    
    .ball-text img {
    margin-top: -40px;
    position: relative;
    z-index: -9;
}
    .service-card {
      background-color: #fff5db;
      border-radius: 10px;
      text-align: center;
      padding: 20px 10px;
      transition: transform 0.3s;
      height: 130px;
    }

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

    .service-icon {
      height: 50px;
      margin-bottom: 15px;
    }

    .btn-yellow {
      background-color: #0195F5;
      color: #fff;
      font-weight: bold;
      border: none;
      font-size: 12px;
    }

    .btn-yellow:hover {
      background-color: #0195F5;
		color:#fff !important;
    }

    .card-title {
      margin-bottom: 15px;
      font-weight: 500;
    }
    .yoga-banner {
      background: url('../img/fitman.webp') no-repeat;
         height: 286px;
      display: flex;
      align-items: center;
      color: white;
      position: relative;
		background-size: 100% 100%;
    }
   /* .yoga-banner::after {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.3); 
    } */
    .banner-content {
      position: relative;
      z-index: 2;
    }
   .banner-content h1 {
    font-weight: 700;
    font-size: 70px;
}
    .banner-content h3 {
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 20px;
    color: #000 !important;
}
    .btn-register {
      background-color: #0195F5;
      color: #fff;
      font-weight: 600;
      border-radius: 30px;
      padding: 10px 20px;
    }
    .btn-register:hover {
      background-color: #0195F5;
      color: #fff;
    }
    
    .trending-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      height: 200px;
    }
    .trending-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
    }
    .card-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: rgb(255 255 255);
    color: #000;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .card-overlay small {
      display: block;
      font-size: 12px;
      line-height: 1.2;
    }
    .btn-view {
      background: #0195F5;
      color: #000;
      font-weight: 600;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      white-space: nowrap;
    }
    .btn-view:hover {
      background: #0195F5;
      color: #000;
    }
    .btn-view img {
    width: 19px;
}


.table-freeze-wrapper {
    max-height: 500px; /* adjust as needed */
    overflow: auto;
    position: relative;
    border: 1px solid #ddd;
}

/* Freeze header */
.table-freeze thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 20;
}

/* Freeze first column */
.table-freeze th.freeze-col,
.table-freeze td.freeze-col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 15;
    border-right: 1px solid #eee;
}

/* Optional: shadow for premium look */
.table-freeze .freeze-col {
    box-shadow: 3px 0 6px rgba(0,0,0,0.06);
}


 .promo-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      height: 200px;
    }
    .promo-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
    }
   .promo-text-box {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgb(255 255 255 / 32%);
    color: #fff;
    padding: 15px;
    border-radius: 8px;
    max-width: 75%;
}
    .promo-text-box h5 {
      font-weight: 700;
      margin-bottom: 5px;
    }
    .promo-text-box p {
      margin: 0;
      font-size: 14px;
    }
    .promo-text-box small {
      display: block;
      font-size: 12px;
      margin-top: 4px;
    }
    .btn-view {
      background: #0195F5 !important;
      color: #000 !important;
      font-weight: 600 !important;
      border-radius: 6px !important;
      padding: 6px 14px !important;
      font-size: 13px !important;
      margin-top: 10px !important;
    }
    .btn-view:hover {
      background: #0195F5;
      color: #000;
    }
.book-slots {
    background: #eaf1fb;
    border: 1px solid #dbe6f7;
    border-radius: .8rem;
    padding: .85rem 1rem;
	margin-bottom:4px;

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

 .btn-buy img {
    width: 16px !important;
}

span.add-player {
    position: relative;
    left: 45%;
}



    .merch-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      height: 200px;
    }
    .merch-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
    }
    .merch-overlay {
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: 10px;
      background: #fff;
      padding: 8px 12px;
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .merch-overlay small {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: #000;
      line-height: 1.2;
    }
    .btn-buy {
      background: #0195F5;
      color: #000;
      font-weight: 600;
      border-radius: 6px;
      padding: 4px 12px;
      font-size: 13px;
      white-space: nowrap;
    }
    .btn-buy:hover {
      background: #0195F5;
      color: #000;
    }
    
      footer {
      background: #fff;
      padding: 0px 0;
      
    }

.table-responsive-custom {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
   
    .footer-nav a {
      font-size: 12px;
      font-weight: 600;
      color: #000;
      margin: 0 12px;
      text-decoration: none;
    }
    .footer-nav a:hover {
      color: #0195F5;
    }
    .footer-right {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
  
    padding-left: 30px;
}
    .footer-divider {
      height: 20px;
      width: 1px;
      background: #ccc;
      margin: 0 12px;
    }
    /*.d-flex.align-items-center.mb-3.mb-md-0.footer-nav {*/
    /*margin-left: 32%;*/
    /*}*/
    
    .modal-content {
    border-radius: 20px;
    padding: 30px 40px 20px 49px;
    text-align: center;
    width: 80%;
}

.event.modal-content{
	border-radius: 20px;
    padding: 30px 40px 20px 49px;
    text-align: left;
    width: 100%;
}
    .otp-input {
    width: 45px;
    height: 45px;
    margin: 0 5px;
    text-align: center;
    font-size: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #efefef;
}
    .btn-custom {
      background-color: #0195f5;
      color: #fff;
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 600;
    }
    .btn-custom:hover {
      background-color: #0195f5;
      color: #fff;
    }
    .close-btn {
      position: absolute;
      top: 4px;
      right: 6px;
      border: none;
      background: transparent;
      font-size: 20px;
    }
    
    button.close-btn img {
    width: 20px;
}

    
    input.form-control.mb-3.text-center {
    background: #efefef;
}



/*booking page*/
 .booking-banner {
      background: url('../img/10134711.png');
      background-size: cover;
      background-repeat: no-repeat;
      padding: 20px;
      
    }
    
       .booking-card {
    border-radius: 20px;
    background: transparent;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    }
   
    .btn-proceed {
    background: #0195f5;
    border: none;
    border-radius: 12px;
    padding: 12px 30px;
    font-size: 16px;
    width: 100%;
}

 
.btn-proceed:hover {
    background: #0195f5;
}
     .booking-table td,
    .booking-table th {
      text-align: center;
      vertical-align: middle;
      padding: 5px;
		font-weight:bold;
    }

    .color-box {
      height: 35px;
      border-radius: 5px;
		padding:5px;
    }

.color-boxb {
      height: 35px;
      border-radius: 5px;
		padding:5px;
    }

    .green { background-color: #06AE52; }
   
.blue { border: 2px solid #07cb70;}
    .pink { background-color: #E49EDD; }
    .yellow { background-color: #FFFE00; }
    .brown { background-color: #808080; }
    .darkblue { background-color: #085877; color: white; font-weight: bold; }
    
    
    .darkblue {
    background-color: #06AE52;
    color: black;
    font-weight: bold;
    text-align: center;
    vertical-align: middle !important;
    padding: 8px;
}
    .book-table {
  min-height: 100vh; /* instead of fixed height */
  padding-bottom: 80px;
        
    }
  
 .legend-item {
      display: flex;
      align-items: center;
      margin-right: 20px;
    }
    .legend-color {
      width: 50px;
      height: 20px;
      margin-right: 8px;
      border-radius: 4px;
    }

.legend-colorb {
      width: 50px;
      height: 20px;
      margin-right: 8px;
      border-radius: 4px;
    }
    .available { border:2px solid #07cb70;}   /* Blue */
    .booked { background-color: #00aa55; }      /* Green */
    .coach { background-color: #ffff00; }       /* Yellow */
    .tournament { background-color: #e49bd2; }  /* Pink */
    .na { background-color: #808080; }          /* Brown */
    
    
    /*player add css*/
    
    .rounded-4 { border-radius: 1rem !important; } /* matches the soft corners in screenshot */
  .dot-blue {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block; background: #1B53A7; /* Bootstrap primary */
  }
  /* Optional: make inputs look closer to the mock (slightly rounded) */
  .form-control { border-radius: .5rem; }
  
  
  .btn.btn-primary{
      background: #0195f5;
      border-color: #0195f5;
  }
  
  
  /*booking summery page */
  .rounded-4{border-radius:1rem!important}
  .dot{
    width:.55rem;height:.55rem;border-radius:50%;display:inline-block;vertical-align:baseline
  }
  .dot-red{background:#dc3545}
  .dot-blue{background:#0d6efd}
  .card img{object-fit:cover;

      
  }
  @media (max-width: 576px){
    .card img{
        /*height:130px*/
        
    }
  }
  
  .text-blue {
      color: #1B53A7 !important;
  }
  
  button.btn.btn-primary.fw-semibold.rounded-3.text-brand {
    font-size: 12px;
}

  /* block background + shape */
  .offers-block {
    background:#e1e9f4;          
    border-radius: 0.8rem;         
  }

  /* inputs inside the blue block */
  .offers-input {
    border: 0;
    border-radius: .6rem;
    background: #ffffff;
  }
  
  .small{
      font-size: 12px;
      color: #1E4167;
  }
  
  
   .summary-block{
    background:#e1e9f4;
    color:#1E4167;
  }
  .summary-label{
    font-size:.875rem;
    opacity:.75;          /* subtle, like the mock */
    margin-bottom:.25rem;
  }
  .summary-value{
    font-weight:600;
  }
  
  .picked-item{
    background:#e1e9f4;     /* requested bg */
    color:#424242;          /* requested text color */
  }
  .remove-dot{
    display:inline-flex;
    width:22px; height:22px;
    border-radius:50%;
    background:#c92020;     /* red circle */
    color:#fff;
    font-weight:700;
    font-size:.8rem;
    line-height:1;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  
  /* Card height & image behavior */
  .trend-card {
      height: 190px; 
      
  }
  .trend-card img 
  { 
      height: 100%; 
      object-fit: cover;
      transition: transform .35s ease; 
      
  }
  .trend-card:hover img { 
      transform: scale(1.03); 
      
  }

  /* Readable overlay */
  .trend-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%,
                                        rgba(0,0,0,.25) 35%,
                                        rgba(0,0,0,.65) 100%);
  }

  /* Optional: tighter rounded corners for the button */
  .btn-warning {
      border-radius: .5rem; 
      
  }
  
  
  
  /* match screenshot proportions */
  .trend-card{
      height:190px; 
      
  }
  .trend-card img{
      height:100%; object-fit:cover; transition:transform .3s ease; 
      
  }
  .trend-card:hover img{ 
      transform:scale(1.03); 
      
  }

  /* readable bottom gradient */
  .trend-overlay{
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%,
                                        rgba(0,0,0,.35) 45%,
                                        rgba(0,0,0,.75) 100%);
  }

  /* yellow view button */
  .btn-view{
    background:#0195f5;
    color:#111; border:none;
    border-radius:.5rem; 
    padding:.35rem .6rem;
  }
  
  
  
  .rounded-4 {
  border-radius: 1rem !important;
  }
  .bg-soft-blue { 
      background: #e1e9f4; 
      
  }

  .btn-brand{ background:#1755aa; color:#fff; border:none; }
  .btn-brand:hover{ background:#0f3f89; color:#fff; }

  /* header close (blue circular X) */
  #offersModal .btn-close{
      
    background-image:none;
    width:11px;
    height:11px;
    opacity:1;
    color:#fff !important;
    box-shadow:none;
  }
  #offersModal .btn-close::after{
    content:"\00d7"; font-weight:700; font-size:18px; color:#fff;
    line-height:1; display:block; text-align:center;
  }
  .bg-brand{ background:#1755aa; }

  /* thin divider under title */
  #offersModal .modal-sep{ border:0; height:1px; background:#e6e6e6; margin:0 1rem; }

  /* bullet + text + right button column */
  .offer-dot{ width:10px; height:10px; border-radius:50%; background:#1755aa; flex:0 0 10px; }
  .offer-li p{ color:#2b2b2b; font-size:.95rem; line-height:1.5; }

  /* keep Apply column same width so all align */
  .apply-wrap{ flex:0 0 140px; } /* adjust if you want a wider button */

  /* mobile stacking */
  @media (max-width:576px){
    .offer-li{ flex-direction:column; align-items:flex-start !important; }
    .apply-wrap{ flex:0 0 auto; width:100%; margin-top:.5rem; }
    .apply-wrap .btn{ width:100%; }
  }

span.add-player {
    position: relative;
    left: 16%;
}
  .offer-li p {
    color: #2b2b2b;
    font-size: 13px;
    text-align: left !important;
  }
/* make divider ">" like your mock */
  .breadcrumb { --bs-breadcrumb-divider: '>'; }
  /* link color like brand blue (optional) */
  .breadcrumb a { color: #1755aa; }
  .breadcrumb a:hover { color: #0f3f89; }
  
  /* keep Apply column width the same if you already had this */
.apply-wrap { flex: 0 0 140px; }

/* top-align the whole row and nudge the dot down to match text baseline */
.offer-li { align-items: flex-start; }
.offer-dot { width:10px; height:10px; border-radius:50%; background:#1755aa; margin-top:.35rem; }

/* optional: comfortable reading */
.offer-li p { line-height: 1.5; }

.event-wrap .tile {
      background: #e1e9f4;
      border: 1px solid #e1e7ef;
      border-radius: .75rem;
    }
    .event-wrap .avatar {
      width: 44px; height: 44px;  object-fit: cover;
    }
    .event-wrap .muted {
      font-size: .875rem; color: #6b7280;
    }
    .event-wrap .poster {
      border-radius: .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
  

    .card-body.tournament.p-4 {
      background: #f7f7f7;
      border-radius: 5px;
}

 .v-tabs .nav-link {
      border: 1px solid #e5e7eb;
      border-radius: .6rem;
      margin-bottom: .5rem;
      color: #111827;
      background: #fff;
    }
    .v-tabs .nav-link.active {
      background: #1b53a7;
      color: #fff;
      border-color: #1b53a7;
    }

    /* coach card tiles */
    .coach-card { border: 0; border-radius: .8rem; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
    .coach-card .ratio { border-bottom-left-radius: .8rem; border-bottom-right-radius: .8rem; }
    .coach-overlay {
      position: absolute; left: 0; right: 0; bottom: .5rem;
      padding: .5rem .6rem; display: flex; gap: .5rem; align-items: center; justify-content: space-between;
    }
    .coach-badge {
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: .5rem;
      padding: .35rem .5rem; font-size: .75rem; line-height: 1; color: #111827;
      box-shadow: 0 2px 10px rgba(0,0,0,.05);
    }
    .coach-name { font-weight: 600; display: block; }
    .coach-exp { color: #6b7280; display: block; margin-top: .1rem; }
    
   .vtabs-card{
    background:#f8f9fb;        /* soft grey */
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
  }

  /* Base tab look */
  .vtabs .nav-link{
    position:relative;
    text-align:left;
    background:transparent;
    border:0;
    color:#111827;
    font-size:1.05rem;
    font-weight:600;
    padding: .8rem 1rem;
    border-radius: 12px;        /* for active pill */
  }

  /* Divider between items */
  .vtabs .nav-link:not(:last-child)::after{
    content:"";
    position:absolute;
    left:1rem; right:1rem; bottom:-.25rem;
    height:1px;
    background:#e9edf3;
  }

  /* Active pill (rounded blue) */
  .vtabs .nav-link.active{
    background:#1b53a7;         /* deep blue like your SS */
    color:#fff;
    box-shadow: 0 4px 10px rgba(25,85,179,.25);
  }

  
.mobile-none{
        display: block important;
    }
    /* coach cards */
    .coach-card {
      border: 0;
      border-radius: .8rem;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(0,0,0,.06);
      position: relative;
    }
 
        .mobile-only{
            display:none;
        }
        .desktop-only{
            display: block;
        }
    /* overlay container */
    .coach-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: .5rem;
      padding: .5rem .6rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
    }

    /* name + experience box */
    .coach-badge {
      background: #ffffff;
      border-radius: .75rem;
      padding: .4rem .75rem;
      min-width: 150px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .coach-name {
      font-size: 0.9rem;
      font-weight: 600;
      display: block;
      color: #000;
    }

    .coach-exp {
      font-size: 0.8rem;
      color: #6b7280;
      display: block;
      margin-top: 2px;
    }

    /* custom view button like 1st screenshot */
    .view-coach {
      background: #1b53a7;
      color: #fff;
      border: none;
      padding: 10px;
      border-radius: .5rem;
      font-size: .8rem;
      font-weight: 500;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      transition: background 0.2s ease-in-out;
      white-space: nowrap;
    }
    .view-coach:hover {
      background: #1b53a7;
      color: #fff;
    }

    .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: #1b53a7 !important;
}

.trainer-wrap .tile {
      background:#eaf1fb;                /* soft blue */
      border:1px solid #dfe7f3;
      border-radius:.75rem;
      padding:14px 16px;
    }
    .trainer-wrap .tile .label { color:#6b7280; font-size:.95rem; }
    .trainer-wrap .tile .value { font-weight:700; }
    .trainer-wrap .btn-book { border-radius:.55rem; padding:.6rem 1.2rem; }
    .trainer-wrap .poster { border-radius:1rem; box-shadow:0 10px 24px rgba(0,0,0,.08); }
    .trainer-wrap .card { border:0; border-radius:1rem; }
    .trainer-wrap .muted { color:#6b7280; }
    
.tile.mb-3.location {
    width: 50%;
}


.cart-wrap .panel {
      border: 1px solid #dfe6ef;
      border-radius: 1rem;
      padding: 1rem;
    }
    .cart-wrap .v-divider {
      border-right: 1px solid #e6ebf2;
    }
    .cart-wrap .item-tile{
      background:#eef3fb;
      border:1px solid #e1e8f3;
      border-radius:.8rem;
      padding:.6rem .7rem;
    }
    .cart-wrap .item-img{
      width:48px; height:48px; border-radius:.6rem; object-fit:cover;
    }
    .cart-wrap .price{
      font-weight:600;
    }
    /* qty stepper */
    .cart-wrap .qty{
      background:#fff;
      border:1px solid #dbe3ef;
      border-radius:.6rem;
      padding:.2rem .35rem;
      display:inline-flex; align-items:center; gap:.5rem;
    }
    .cart-wrap .qty .btn-qty{
      width:32px; height:32px; border-radius:.5rem; line-height:1;
      border:0; background:transparent; font-weight:700;
    }
    .cart-wrap .qty .count{
      min-width:24px; text-align:center; font-weight:600;
    }

    /* Right summary */
    .cart-wrap .box{
      border:1px solid #e1e8f3; border-radius:.8rem; background:#e6effb;
      padding: .9rem;
    }
    .cart-wrap .box .title{ font-weight:600; }
    .cart-wrap .apply-btn{
      background:#1b53a7; color:#fff; border:0;
      border-radius:.6rem; padding:.45rem .9rem; white-space:nowrap;
    }
    .cart-wrap .apply-btn:hover{ background:#1b53a7; color:#fff; }
    .cart-wrap .form-control{
      background:#fff; border:1px solid #dfe6ef; border-radius:.6rem;
      height: 40px;
    }
    .cart-wrap .triplet{
      background:#e6effb; border:1px solid #d7e5fa; border-radius:.8rem; padding:.8rem;
      font-weight:600;
    }
    .cart-wrap .triplet .muted{ font-weight:500; color:#6b7280; }
    .cart-wrap .totals small{ color:#1e4167; }
    .cart-wrap .grand{ font-weight:800; }
    .cart-wrap .btn-checkout{
      border-radius:.6rem; padding:.7rem 1rem; font-weight:600;
    }

    .profile-pane .card-frame{
    border:1px solid #e7ebf1; border-radius:12px; background:#fff;
  }
  .profile-pane .section-head{
    border-bottom:1px solid #eef2f6; padding-bottom:.5rem; margin-bottom:1rem;
  }
  .profile-pane .field-label{
    font-size:.85rem; color:#6b7280; margin-bottom:.1rem;
  }
  .profile-pane .field-value{
    font-weight:600; color:#111826;
  }
  .profile-pane .hr-soft{ border-top:1px solid #eef2f6; margin:1rem 0; }
  .profile-pane .btn-add{
    border-radius:.55rem; padding:.55rem 1rem; font-weight:600;
  }

   /* Booking History styles */
  .booking-history .frame{border:1px solid #e4e9f2;border-radius:12px;background:#fff;}
  .booking-history .tile{background:#eaf1fb;border:1px solid #dbe6f7;border-radius:.8rem;padding:.85rem 1rem;}
  .booking-history .h6ish{font-weight:700;font-size:1rem;margin:0;}
  .booking-history .muted{color:#667085;font-size:.9rem;}
  .booking-history .total{font-weight:700;}
  .booking-history .btn-reschedule{background:#1f56b3;color:#fff;border:0;border-radius:1rem;padding:.45rem .95rem;font-weight:600;white-space:nowrap;}
  .booking-history .btn-reschedule:hover{background:#184a98;color:#fff;}
  .booking-history .cancel-link{font-size:.875rem;color:#d92d20;text-decoration:underline;display:inline-block;margin-top:.35rem;}


  .bh .tile{
    background:#eaf1fb;
    border:1px solid #dbe6f7;
    border-radius:.8rem;
    padding:.75rem 1rem;
  }
  .bh .label{font-weight:700; font-size:1rem; margin:0;}
  .bh .muted{color:#6b7280; font-size:.85rem; margin:0;}
  .bh .amount{font-weight:700;}

   .membership-pane .frame{border:1px solid #e6ecf4;border-radius:12px;background:#fff;}
  .membership-pane .section-head{border-bottom:1px solid #edf1f6;padding-bottom:.5rem;margin-bottom:1rem;}
  .membership-pane .fld-label{font-size:.85rem;color:#6b7280;margin-bottom:.15rem;}
  .membership-pane .fld-value{font-weight:600;color:#111827;}
  .membership-pane .hr-soft{border-top:1px solid #edf1f6;margin:1rem 0;}
  .membership-pane .tile{background:#eaf1fb;border:1px solid #dbe6f7;border-radius:.8rem;padding:.85rem 1rem;}
  .membership-pane .label{font-weight:700;margin:0;}
  .membership-pane .muted{color:#6b7280;font-size:.9rem;margin:0;}

  .logout-modal .modal-dialog{ max-width: 420px; }
  .logout-modal .modal-content{ border-radius: 16px; }
  .logout-modal .modal-body{ font-size: .97rem; }
  /* circular close with thin border */
  .logout-modal .btn-close-ring{
    width: 30px; height: 30px; border-radius: 50%;
    background-color: #fff; opacity: 1;
    border: 1px solid #e6eaf0; box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }
  /* buttons like the mock */
  .logout-modal .btn-cancel{
    background:#fff; color:#0195f5;
    border:1px solid #0195f5; font-weight:600;
  }
  .logout-modal .btn-cancel:hover{ background:#0195f5; color:#fff; }
  .logout-modal .btn-logout{
    background:#0195f5; border-color:#0195f5; font-weight:600; color:#fff;
  }
  .logout-modal .btn-logout:hover{ background:#0195f5; border-color:#0195f5; color:#fff; }

      .book-shell{border:1px solid #e6ebf3;border-radius:16px;background:#fff;}
    .book-title{font-weight:600;}
    .plan-box{
      background:#e9f1fb;border:1px solid #dbe6f7;border-radius:12px;
      padding:16px 20px; /* left & right spacing kept */
    }
    .dot{
      width:14px;height:14px;border-radius:50%;background:#1f56b3;display:inline-block;margin-right:.5rem;
      box-shadow:0 0 0 3px #fff;
    }
    .price{font-weight:700}
    .date-select .form-select{border-radius:.6rem;border:1px solid #dfe5ef;height:40px;}
    /* day chips */
    .day-strip{gap:.5rem;}
    .day-chip{
      min-width:48px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;
      padding:.25rem .4rem; line-height:1.1;
    }
    .day-chip .d{font-size:.8rem;color:#000;display:block}
    .day-chip .n{font-weight:700;display:block}
    .day-chip.active{background:transparent;color:#000;border-color:#1A53A7;}
    .day-chip.active .d{color:#000;}
    /* nav arrows */
    .nav-arrow{
      width:42px;height:42px;border:none;border-radius:.6rem;background:#1f56b3;color:#fff;
      display:flex;align-items:center;justify-content:center;
    }
    /* time slot chips */
    .slot{border:1px solid #d9e1ee;background:#fff;border-radius:.6rem;padding:.55rem 1rem;font-weight:600;}
    .slot.active{background:#19d1b6;border-color:#19d1b6;color:#062; color:#0b2d2a;}
    @media (max-width:576px){
      .plan-box{padding:14px;}
    }

div#otpModal {
    position: absolute;
    top: -25%;
}

    .proceed-btn{
    background:#1f56b3;            /* blue */
    border-color:#1f56b3;
    color:#fff;
    border-radius:.6rem;
    padding: 10px 90px 10px 90px;
    font-weight:600;
  }
  

  /* Make it full-width on small screens if you want */
  @media (max-width:576px){
    .proceed-btn{ width:100%; justify-content:center; }
  }
  
 .membership-card { border-radius: 14px; }
    .membership-card .card-header { background: #fff; border-bottom: 0; }
    .membership-card .list-row { padding: .5rem 0; }
    .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #2563eb; display: inline-block; margin-right: .5rem;
    }
    .price { font-size: .9rem; color: #6b7280; }
    .btn-add { padding: .3rem .7rem; border-radius: .5rem; }
    .btn-proceed { border-radius: .6rem; }
    .ratio-img { border-radius: 14px; object-fit: cover; width: 100%; height: 100%; }
    
    /* Adjust image size */
    .custom-image-wrapper {
      max-width: 85%;
      margin: 0 auto;
    }

.membership-content form {    display: inline-flex; width:100%}

    @media (max-width: 991.98px){
      .wrapper { padding-left: 1rem; padding-right: 1rem; }
	  .membership-card .card-body {padding:0}	
	  .membership-rate {    font-size: 15px;}
		.booking-card {padding: 20px 10px;}	
    }
    
    
    @media screen and (min-width: 320px) and (max-width: 700px) {
        
        .mobile-only{
            display:block;
        }
        .btn-buy {
    padding: 4px 8px;
    }
    .hero-content {
    position: relative;
    z-index: 2;
    padding-top: 30px;
}
.hero h1 {
    font-size: 32px;
    font-weight: bold;
}
.hero h2 {
    font-size: 23px;
    color: #0195F5;
    font-weight: bold;
}
	
.main-banner {
           background: url(../img/mainBanner2a.jpg) no-repeat center center;
        color: white;
        position: relative;
        height: 45vh;
        background-repeat: no-repeat;
        background-position-x: 30%;
        background-position-y: 3%;
        background-size: 100%;
}
.ball-text img {
    margin-top: 44px;
    position: relative;
    z-index: -9;
}
    button.btn.btn-yellow.btn-sm {
    width: 100%;
    font-size: 9px;
        
    }
    .yoga-banner {
  background: url(../img/fitman2.jpg) no-repeat center center / cover;
        height: 73%;
        display: flex;
        align-items: center;
        color: white;
        position: relative;
        background-size: cover;
}
    .banner-content h1 {
    font-weight: 700;
    font-size: 37px;
    padding: 0px 20px 0px 30px;
}
.banner-content h3 {
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 20px;
    color: #000 !important;
    padding-left: 20px;
}
.btn-register {
    background-color: #0195F5;
    color: #fff;
    font-weight: 600;
    border-radius: 30px;
    padding: 5px 9px;
    margin-top: -19px;
    margin-left: 23px;
}
.desktop-only {
    display: none;
}
    .mobile-none{
        display: none;
    }
    
    .modal-content {
    border-radius: 20px;
    padding: 30px 30px 20px 49px;
    text-align: center;
    width: 100% !important;
    
}
.service-card {
    background-color: #fff5db;
    border-radius: 10px;
    text-align: center;
    padding: 20px 10px;
    transition: transform 0.3s;
    height: 130px;
}
img.summery {
    width: 70%;
    
}
button.btn.btn-primary.fw-semibold.rounded-3.text-brand {
    font-size: 9px;
}
.ratio-4x3 {
    --bs-aspect-ratio: 5%;
}
		
	.color-box {
    height: 25px;
    border-radius: 5px;
    width: 25px;
}
		
		.color-boxb {
    height: 25px;
    border-radius: 5px;
    width: 40px;
	padding:6px;
}
		
	 .legend-colorb {
        width: 17px;
        height: 20px;
        margin-right: 4px;
        border-radius: 4px;
        margin-left: -15px;
    }

	.booking-table td, .booking-table th {
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    font-size: 10px;
}
        
    }


.btn-register {
    background-color: #0195F5;
    color: #fff;
    font-weight: 600;
    border-radius: 30px;
    padding: 10px 20px;
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 173px;
}

/* ========================================
   NAVBAR BASE STYLES
======================================== */
.custom-navbar {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.custom-navbar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.navbar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

/* ========================================
   LOGO STYLES
======================================== */
.navbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 1001;
}

.navbar-logo img {
    height: 60px;
    width: auto;
    max-width: 150px;
}

/* ========================================
   DESKTOP MENU STYLES
======================================== */
.desktop-menu {
    display: none;
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
    gap: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 0.5rem 1rem;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.nav-link:hover {
    color: #007bff;
    background: #f8f9fa;
}

.nav-icon .nav-link {
    padding: 0.5rem;
}

.nav-icon img {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

.nav-icon .nav-link:hover img {
    transform: scale(1.1);
}

/* ========================================
   MOBILE TOGGLE BUTTON
======================================== */
.mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #333;
    border-radius: 3px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-toggle.active .hamburger-line:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

.mobile-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.mobile-toggle.active .hamburger-line:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* ========================================
   MOBILE MENU STYLES
======================================== */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1000;
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-content {
    padding-top: 80px;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-item {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 1rem 1.5rem;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    gap: 1rem;
}

.mobile-nav-link:hover {
    background: #f8f9fa;
    color: #007bff;
    padding-left: 2rem;
}

.menu-icon {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

/* ========================================
   MOBILE OVERLAY
======================================== */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   DESKTOP RESPONSIVE (≥992px)
======================================== */
@media (min-width: 992px) {
    .desktop-menu {
        display: block;
    }
    
    .mobile-toggle {
        display: none;
    }
    
    .mobile-menu,
    .mobile-overlay {
        display: none !important;
    }
}

/* ========================================
   TABLET RESPONSIVE (768px - 991px)
======================================== */
@media (max-width: 991px) and (min-width: 768px) {
  
    
    .mobile-menu {
        width: 300px;
    }
}

/* ========================================
   MOBILE RESPONSIVE (≤767px)
======================================== */
@media (max-width: 767px) {
    .navbar-wrapper {
        padding: 0.75rem 0;
    }   

    
    .mobile-toggle {
        width: 26px;
        height: 20px;
    }
    
    .hamburger-line {
        height: 2.5px;
    }
    
    .mobile-menu {
        width: 260px;
    }
    
    .mobile-nav-link {
        font-size: 15px;
        padding: 0.875rem 1.25rem;
    }
    
    .menu-icon {
        font-size: 18px;
        width: 22px;
    }
}

/* ========================================
   SMALL MOBILE (≤480px)
======================================== */
@media (max-width: 480px) {
    
    .mobile-menu {
        width: 240px;
    }
}

/* ========================================
   PREVENT BODY SCROLL WHEN MENU OPEN
======================================== */
body.menu-open {
    overflow: hidden;
}