/* Update  */
 .create-offer-section {
     /* background: white !important; */
     /* background-color: var(--primaryLight) !important; */
 }


 .custom-tabs .nav-link {
     font-weight: 500;
     font-size: 0.875rem;
     /* text-sm */
     border: none;
     border-bottom: 2px solid transparent;
     border-top-left-radius: 0.5rem;
     border-top-right-radius: 0.5rem;
     color: var(--black);
     background-color: transparent;
     padding: 0.5rem 1rem;
     transition: all 0.2s ease;
 }

 .custom-tabs .nav-link:hover {
     color: var(--primary-color);
     background-color: transparent;
     border-color: #d1d5db;
     /* fallback border on hover */
 }

 .custom-tabs .nav-link.active {
     background-color: var(--primaryLight);
     color: var(--primary-color);
     /* color           : white; */
     /* background-color: var(--primary-color); */
     border-color: var(--primary-color);
 }

 #myTabContent {
     /* background: var(--primaryLight); */
     /* margin: 20px 0; */
     border-radius: 12px;
     /* padding   : 20px; */
 }

 .business-header-image {
     height: 350px;
     border-radius: 12px;
     overflow: hidden;
 }

 .rating-star {
     color: #FFD700 !;
 }

 .star-button:hover {
     transform: scale(1.1);
 }

 /* .service-badge { */
 /* background-color: var(--primaryLight); */
 /* color: var(--primary-color); */
 /* } */

 .status-badge {
     background-color: var(--primaryLight);
     color: var(--primary-color);
 }

 .offer-card {
     background-color: var(--primaryLight);
     color: var(--primary-color);
 }

 .social-icon {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .gallery-img {
     cursor: pointer;
     transition: transform 0.3s ease;
 }

 /* .gallery-img:hover {
     transform: scale(1.05);
 } */

 .contact-information i,
 .primaryColor {
     color: var(--primary-color) !important;
 }

 .contact-information a {
     color: black;
 }

 :root {
     --secondary-color: #2c3e50;
     --accent-color: #f1c40f;
     --text-dark: #333333;
     --text-light: #777777;
 }

 .rating-star {
     color: var(--accent-color);
 }

 .star-button:hover {
     transform: scale(1.2);
     transition: transform 0.2s ease;
 }

 .service-badge {
     border: 1px solid var(--primary-color);
     font-size: 16px;
     /* background-color: var(--primaryLight); */
     color: var(--primary-color);
     font-weight: 500;
     letter-spacing: 0.5px;
 }

 .service-badge:hover {
     border: 1px solid var(--primaryLight);
     background-color: var(--primary-color);
     cursor: pointer;
     color: white;
 }

 .service-badge:hover i {
     color: white !important;

 }

 .status-badge {
     background-color: var(--primaryLight);
     color: var(--primary-color);
 }

 .offer-card {
     background: linear-gradient(135deg, var(--primaryLight) 0%, #0FC324 100%);
     color: var(--primary-color);
     border-left: 4px solid var(--primary-color);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .offer-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .social-icon {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
 }

 .social-icon:hover {
     transform: translateY(-3px);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .gallery-img {
     cursor: pointer;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border-radius: 8px !important;
     overflow: hidden;
 }

 .gallery-img:hover {
     /* transform: scale(1.03); */
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }

 .hero-image {
     height: 350px;
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); */
 }

 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .hero-image:hover img {
     transform: scale(1.05);
 }

 .logo-container {
     position: relative;
     margin-top: -120px;
     z-index: 2;
 }

 .logo-img {
     width: 150px;
     height: 150px;
     object-fit: cover;
     border: 5px solid white;
     /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); */
     transition: all 0.3s ease;
     overflow: hidden;
     position: relative;
 }

 .section-card {
     background: white;
     border-radius: 12px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border: none;
     overflow: hidden;
 }

 .section-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .contact-icon {
     width: 40px;
     height: 40px;
     background-color: var(--primaryLight);
     color: var(--primary-color);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 15px;
     flex-shrink: 0;
 }

 .floating-label {
     position: absolute;
     top: -10px;
     left: 15px;
     background: white;
     padding: 0 10px;
     font-size: 0.8rem;
     color: var(--primary-color);
     font-weight: 600;
 }

 .nav-pills .nav-link.active {
     background-color: var(--primary-color);
 }

 .nav-pills .nav-link {
     color: var(--secondary-color);
 }

 .text-accent {
     color: var(--accent-color);
 }

 .bg-primaryLight {
     background-color: var(--primaryLight);
 }

 .btn-primary-custom {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
     color: white;
 }

 .btn-primary-custom:hover {
     background-color: #c0392b;
     border-color: #c0392b;
 }

 .section-card i {
     color: var(--primary-color);
 }

 .form-design {
     border-radius: 20px;
     padding: 20px;
     border: 2px solid transparent;
     background-color: var(--primaryLight);
     border-color: var(--primary-color);
 }

 .w-alert {
     border-radius: 20px !important;
     /* padding         : 20px; */
     border: 2px solid transparent !important;
     /* background-color: var(--primaryLight); */
     border-color: #f5d15d !important;
 }



 /* Upload Header Image  */
 .upload-box {
     width: 100%;
     height: 100%;
     border: 2px dashed var(--primary-color);
     border-radius: 10px;
     padding: 40px;
     text-align: center;
     background-color: rgba(0, 0, 0, 0.6);
     display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     transition: border-color 0.3s ease;
     position: absolute;
     top: 0;
     left: 0;
     color: white;
     transition: all 2s ease-in;
     font-size: 18px;
 }

 #previewContainer {
     padding: 20px;
     background-color: #f9f9f9;
 }

 .upload-box.dragover {
     border-color: #0d6efd;
     background-color: #e7f1ff;
 }

 .upload-box input {
     display: none;
 }

 .upload-preview img {
     width: 100%;
     object-fit: cover;
     max-height: 300px;
     border-radius: 10px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .remove-btn {
     margin-top: 15px;
 }

 .hidden {
     display: none;
 }



 /* Set Hour  */
 .hours-container {
     margin: 2rem auto;
     padding: 2rem;
     background: white;
     border-radius: 8px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
 }

 .hours-header {
     margin-bottom: 1.5rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid #eee;
 }

 .hours-table {
     width: 100%;
     margin-bottom: 1.5rem;
 }

 .hours-table th,
 .hours-table td {
     padding: 0.75rem;
     vertical-align: middle;
 }

 .hours-table th {
     text-align: left;
     font-weight: 600;
     color: #495057;
 }

 .hours-table td {
     border-top: 1px solid #eee;
 }

 .time-input-group {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .time-input {
     width: 100px;
     text-align: center;
 }

 .to-text {
     color: #6c757d;
     font-size: 0.9rem;
 }

 .closed-badge {
     background-color: #f8f9fa;
     color: #6c757d;
     padding: 0.35rem 0.75rem;
     border-radius: 50px;
     font-size: 0.85rem;
     margin-left: 1rem;
 }

 .footer-buttons {
     display: flex;
     justify-content: flex-end;
     gap: 0.75rem;
     margin-top: 1.5rem;
     padding-top: 1.5rem;
     border-top: 1px solid #eee;
 }

 .form-switch .form-check-input {
     cursor: pointer;
 }

 .time-input-group {
     display: none !important;
 }

 .time-input-group.show {
     display: flex !important;
 }

 .day-row {
     height: 70px;
 }

 .form-check-input:checked {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
 }

 .form-check-input:focus {
     border-color: var(--primary-color) !important;

 }

 .form-control:focus {
     border-color: var(--primary-color) !important;
     box-shadow: none;

 }

 .ui-timepicker-standard {
     border-color: var(--primary-color) !important;
 }

 .timepicker.form-control {
     background-color: var(--primary-color);
     color: #0FC324;
     padding: 8px 12px;
     border-radius: 5px;
     font-size: 16px;
 }

 .ui-timepicker-standard .ui-state-hover {
     background-color: var(--primary-color) !important;
     color: white !important;
     border: 1px solid var(--primary-color) !important;
 }


 .ui-timepicker-container.ui-timepicker-standard,
 .ui-timepicker-viewport,
 .ui-menu-item,
 .ui-timepicker.ui-widget.ui-widget-content.ui-menu.ui-corner-all {
     padding: 0 !important;
 }

 .ui-timepicker.ui-widget.ui-widget-content.ui-menu.ui-corner-all,
 .ui-timepicker-viewport,
 .ui-menu-item {
     width: 100% !important;
 }

 .ui-timepicker-container.ui-timepicker-standard {
     margin-top: 5px;
     border-radius: 8px;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
 }


 /* input[type="time"]::-webkit-calendar-picker-indicator {
     filter: invert(1);
     Change icon color
 } */

 .date-picker-container {
     border: 2px solid var(--primary-color);
     border-radius: 30px;
 }

 .form_label {
     margin-bottom: 10px;
 }

 .header-business-image {
     height: 100%;
     position: relative;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 .header-business-image:hover .upload-box {
     display: flex;
     transition: all 2s ease-in;
 }

 .logo-edit {
     position: relative;
 }

 #logodropArea {
     width: 100%;
     height: 100%;
     border-radius: 50%;

 }

 .logo-edit:hover #logodropArea {
     display: flex;
 }

 .edit-about-us {
     width: 100%;
     height: 150px;
     padding: 10px;
     border-radius: 8px;
     border: 2px solid transparent;
     resize: none;
 }

 .edit-about-us:focus {
     border: 2px solid #0FC324;
     box-shadow: 0 0 0 4px #00D35B1A;
     outline: none;
 }

 .edit-about-us {
     border: 2px solid #0FC324;
     box-shadow: 0 0 0 4px #00D35B1A;
     outline: none;
 }

 .input-group .edit-input-text {
     width: 100%;
     border: 2px solid #ace1b2;
     padding: 5px 2px 5px 10px;
     border-radius: 12px;
 }

 .input-group .edit-input-text:focus {
     border: 2px solid var(--primary-color);
 }

 .submit_btn {
     width: 100px;
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* Scrollbar Styles for WebKit Browsers (Chrome, Safari, Edge) */
 .custom-scrollbar::-webkit-scrollbar {
     width: 6px;
 }

 .custom-scrollbar::-webkit-scrollbar-track {
     background: var(--primaryLight);
 }

 .custom-scrollbar::-webkit-scrollbar-thumb {
     background-color: var(--primary-color);
     border-radius: 6px;
 }

 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
     background-color: #0aa31e;
     /* darker green on hover */
 }

 /* Optional: Scrollbar for Firefox */
 .custom-scrollbar {
     scrollbar-width: thin;
     scrollbar-color: var(--primary-color) var(--white);
 }

 .service-delete-btn {
     width: 40px;
     height: 40px;
     background: var(--primaryLight);
     border-radius: 50%;
     border: none;
     border: var(--primary-color);
 }

 .save-btn {
     font-size: 14px;
     width: 75px;
     height: 100%;
     padding: 10px;
     font-weight: 400;
 }

 .work-houring-container {
     flex-direction: row;
 }



 @media(max-width:400px) {
     .gallery-img {
         height: 200px;
     }

     .hero_section_trending-viral-video {
         height: 260px;
     }

     .hero-image {
         height: 250px;
     }
 }

 @media (max-width:768px) {
     .action-button {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .save-btn {
         width: 40px;
         height: 40px;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .save-btn i {
         margin-top: 5px;
         color: white;
     }
     .pagination-container{
        justify-content: center !important;
     }
 }

 @media (max-width:576px) {
     .offer-promotion.section-title {
         font-size: 40px !important;
     }

     .hero_section_trending-viral-video {
         height: 280px !important;
     }

     /* .input-group{
        width:fit-content;
     } */
 }

 @media only screen and (max-width: 480px) {
     .create-business-offer {
         padding: 0;
     }

     .work-houring-container {
         flex-direction: column;
     }
 }


 /* DropDown List */
 .dropdown-container {
     background-color: var(--primaryLight);
     /* padding: 2px; */
     width: 100%;
     height: min-content;
     border-radius: 30px;
 }

 .filter-main-container {
     position: relative;
 }

 .select-button {
     width: 100%;
     border: none;
     background-color: white;
     padding: 10px 30px;
     border-radius: 30px;
     display: flex;
     justify-content: space-between;
     gap: 10px;
     align-items: center;
     z-index: 2;
     position: relative;
     color: var(--primary-color);
 }

 .drop-down-list {
     border-radius: 0 0 30px 30px;
     padding-top: 10px;
     width: 100%;
     transition: max-height 0.4s ease, opacity 0.4s ease;
     z-index: 1;
     top: 60%;
     position: absolute;
     padding-bottom: 10px;
     padding-top: 20px;
     background: white;
     position: absolute;
     box-shadow: 4px 10px 9px rgba(0, 0, 0, 0.1);
     /* z-index: 999; */
 }

 .drop-down-list li {
     padding: 10px 30px;
 }

 .drop-down-list li:hover {
     color: var(--primary-color);
     cursor: pointer;
 }

 .square-radio input[type="radio"] {
     display: none;
 }

 .custom-radio-box {
     width: 20px;
     height: 20px;
     /* border: 2px solid var(--primary-color); */
     border: 2px solid #000;
     border-radius: 6px;
     background-color: var(--white);
     transition: all 0.3s ease;
     display: inline-block;
 }

 .square-radio input[type="radio"]:checked+.custom-radio-box {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
     position: relative;
 }

 .square-radio input[type="radio"]:checked+.custom-radio-box::after {
     content: "✔";
     color: var(--white);
     font-size: 12px;
     position: absolute;
     top: 0;
     left: 4px;
     font-weight: bold;
 }

 /* .square-radio input[type="radio"]:checked + .custom-radio-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: var(--white);
  border-radius: 3px;
  display: none;
} */

 .radio-label {
     margin-top: 5px;
     font-size: 14px;
     color: var(--text-dark);
 }

 .check-box-group {
     margin-top: 15px;
 }

 /* day Vise  */
 .square-day-checkbox input[type="checkbox"] {
     display: none;
 }

 .custom-day-box {
     display: flex;
     padding: 10px 20px;
     width: fit-content;
     height: 40px;
     border: 2px solid var(--primary-color);
     border-radius: 6px;
     background-color: var(--white);
     transition: all 0.3s ease;
     position: relative;
     justify-content: center;
     align-items: center;
     cursor: pointer;
 }

 .square-day-checkbox input[type="checkbox"]:checked~.custom-day-box {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
     color: white;
 }

 .day-label {
     margin-top: 5px;
     font-size: 14px;
     color: var(--text-dark);
 }

 .square-day-checkbox input[type="checkbox"]:checked~.custom-day-box .day-label {
     color: white;
 }



 .upload-container {
     /* width: 250px; */
     height: 150px !important;
 }

 .image_preview {
     height: 150px !important;

 }

 .mobile-app-promption-banner {
     background: url("https://onlyindade.com/assets/img/trusted.svg");
     background-position: center;
     background-size: cover;
     height: fit-content;
     padding: 50px 0;
     position: relative;
 }

 .mobile-app-promption-banner::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     background-color: rgb(15 195 36 / 30%);
     /* background-color: rgba(0, 0, 0, 0.85); */
     height: 100%;
     width: 100%;
     z-index: 10;

 }

 .app-promption-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     z-index: 20;
     position: relative;
     gap: 20px;
     /* color: white; */
 }

 .oid-logo {
     width: 180px;
     height: 180px;
     border-radius: 50%;
 }

 .app-promption-container h2 {
     margin: 0;
     font-size: 35px;
     font-weight: 400;
 }

 .app-promption-container p {
     margin: 0;
     text-align: center;
     font-weight: 300;

 }

 .avilabel-device {
     display: flex;
     gap: 12px;
 }

 .work-houring {
     width: 50px;
     height: 50px;
     border-radius: 50%;
 }

 .available-card-device img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }


 .gallery-image-delete {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background-color: red;
     border: none;
     position: absolute;
     right: 20px;
     top: 10px;
     display: none;
     justify-content: center;
     align-items: center;
 }

 .business-card-gallery:hover .gallery-image-delete {
     display: flex;
 }

 .gallery-image-delete i {
     font-size: 12px;
     color: white !important;
 }


.datepicker td, .datepicker th {
    padding: 5px;
}

 @media (min-width: 1400px) {
     .input-group.date-picker-container {
         width: 250px !important;
     }
 }

 @media (max-width: 1400px) and (min-width: 1201px) {
     .input-group.date-picker-container {
         width: 250px !important;
     }
 }

 @media (max-width: 1200px) and (min-width: 993px) {}

 @media (max-width: 992px) and (min-width: 769px) {
     .day-check-group {
         display: grid !important;
         grid-template-columns: repeat(4, 1fr);
     }
 }

 @media (max-width: 768px) and (min-width: 577px) {
     .app-promption-container {
         gap: 10px;
     }

     .app-promption-container h2 {
         font-size: 28px;
     }

     .app-promption-container p {
         font-size: 12px;
     }

     /* .input-group {
        width: fit-content;
    } */
 }

 @media (max-width: 576px) and (min-width: 481px) {
     .app-promption-container {
         gap: 10px;
     }

     .app-promption-container h2 {
         font-size: 24px;
     }

     .app-promption-container p {
         font-size: 12px;
     }

     .day-check-group {
         display: grid !important;
         grid-template-columns: repeat(4, 50px);
     }
 }

 @media (max-width: 480px) and (min-width: 401px) {
     .app-promption-container {
         gap: 10px;
     }

     .app-promption-container h2 {
         font-size: 24px;
     }

     .app-promption-container p {
         font-size: 12px;
     }

     .day-check-group {
         display: grid !important;
         grid-template-columns: repeat(4, 50px);
     }
 }

 @media (max-width: 400px) {
     .oid-logo {
         width: 140px;
         height: 140px;
     }

     .app-promption-container {
         gap: 10px;
     }

     .app-promption-container h2 {
         font-size: 24px;
     }

     .app-promption-container p {
         font-size: 12px;
     }

     .available-card-device {
         width: 150px;
     }

     .app-promption-container {
         gap: 10px;
     }

     .day-check-group {
         display: grid !important;
         grid-template-columns: repeat(4, 50px);
     }

 }








 /* Reddem Section */
 .scan-qr-code-container {
     background: white;
     /* border: 2px solid #161917; */
     border-radius: 30px;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     height: 100%;
     /* height: 250px; */
     padding: 15px;
     gap: 20px;
 }

 .redeem-container {
     justify-content: start;
     align-items: start;
     height: fit-content;
     gap: 5px;
 }

 .scan-qr-code-container h2 {
     font-weight: 500;
 }

 /* .qr-icon-container i{
    font-size: 60px;
    color: var(--primary-color);
} */


 .reddem-code-container input {
     padding: 10px 20px;
     width: 100%;
        border-radius: 30px;
        overflow: hidden;
        background-color: var(--primaryLight);
        border: 1px solid var(--primaryLight);
 }

 .reddem-code-container input::placeholder {
     font-weight: 300;
 }

 .reddem-code-container input:focus-within {
     box-shadow: 0 0 0 2px rgba(15, 195, 36, 0.2);
     border: 1px solid var(--primary-color);
     background-color: white;
 }

 .redeem-code-input {
     width: 100%;
     padding: 10px 20px;
     background-color: white;
     font-weight: 300;
     border-radius: 12px;
 }

 .redeem-code-input::placeholder {
     font-weight: 300;
 }

 .reddem-rule-container h2 {
     font-weight: 600;
     font-size: 24px;
 }

 .rule-list {
     list-style-type: decimal;
 }

 .rule-list li::marker {
     font-size: 22px;
     font-weight: 400;
 }

 .rule-heading {
     font-weight: 400;
     font-size: 22px;
 }

 .rule-description {
     font-weight: 300;
     font-size: 20px;
 }

 .contact-us-link {
     color: var(--primary-color);
     text-decoration: underline;
 }


 .redeem-activty-card {
     /* background-color: var(--primaryLight); */
 }

 .section-heading-text {
     font-weight: 500;
 }

 .redemption-heading {
     margin-top: 70px;
     margin-bottom: 30px;
     /* border-bottom: 1px solid #000; */
 }

 .redeem-activty-card {
     display: flex;
     border-radius: 8px;
     padding: 10px 20px;
     /* border: 2px solid var(--primary-color); */
     background-color: var(--primaryLight);
     justify-content: space-between;
     align-items: center;
 }

 .redeem-activty-card:hover {
     transition: all 0.1s ease-in;
     transform: translateY(-2px);
 }

 .qr-icon-container {
     width: 180px;
     height: 180px;
     border: 0.5px solid silver;
     background: #D9D9D9;
     border-radius: 10px;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     gap: 15px;
 }

 .timer {
     font-weight: 500 !important;
     font-style: normal;

 }

 .redeem-name {
     font-size: 20px;
     font-weight: 500;
     margin-bottom: 10px;
 }

 .location-icon {
     color: var(--primary-color);
 }

 .redeem-code-input {
     background-color: var(--primaryLight);
 }

 .divider-text {
     width: 100%;
     position: relative;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .divider-text span {
     text-wrap: nowrap;
 }

 /* Before After */
 .divider-text::after,
 .divider-text::before {
     content: "";
     width: 30%;
     height: 1px;
     background-color: #000;
 }


 /* @media (max-width:992px) {
     .scan-qr-code-container {
         height: auto;
     }
 } */

 @media (max-width:768px) {
     .redemption-heading {
         margin-top: 30px;
         margin-bottom: 10px;
     }
     /* .scan-qr-code-container{
        height: 200px;
     } */
 }

 .create-offer-checkbox {
     display: flex !important;
 }


 /* Business Dashboard */
 .information-table-list {
     border: none;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     padding: 20px;
     background-color: white;
     border-radius: 20px;
     --bs-table-bg-type: var(--primaryLight)
 }


 /* table,tr,td,th{
        background-color: transparent !important;
    } */


 .header-section h3 {
     font-weight: 600;
     color: var(--primary-color);
 }

 .action-buttons-group {
     display: flex;
     gap: 0.75rem;
 }

 .action-buttons-group .form-control {
     border-radius: 0.5rem;
     border: 1px solid #dee2e6;
     width: 250px;
 }

 .action-buttons-group .btn {
     border-radius: 0.5rem;
     padding: 0.5rem 1rem;
     font-weight: 500;
 }

 .btn-outline-secondary {
     color: #6c757d;
     border-color: #6c757d;
 }

 .btn-outline-secondary:hover {
     color: #fff;
     background-color: #6c757d;
 }

 .btn-success {
     background-color: #28a745;
     border-color: #28a745;
     color: #fff;
     font-weight: 600;
 }

 .table-responsive {
     border-radius: 1rem;
     background-color: #fff;
 }

 .table-striped>tbody>tr:nth-of-type(odd) {
     background-color: #f1f5f9;
 }

 .table-striped>tbody>tr:nth-of-type(even) {
     background-color: #ffffff;
 }

 /* .table> :not(caption)>*>* {
     padding: 1rem 1rem;
 } */

 .table th,
 .table td {
     vertical-align: middle;
     /* border-bottom: 1px solid #e9ecef; */
     color: #495057;
 }

 .table thead th {
     padding: 0;
     font-weight: 600;
     background-color: #fff;
     color: black;
     /* border-bottom: 2px solid #e9ecef; */
 }

 .table tbody tr:hover {
     background-color: #e2f0e8;
 }

 .status-badge {
     display: inline-block;
     padding: 0.35em 0.8em;
     font-size: 0.75em;
     font-weight: 700;
     line-height: 1;
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
     border-radius: 0.5rem;
     color: #fff;
 }

 .status-badge.active {
     background-color: #28a745;
 }

 .action-icons-group .btn {
     background-color: transparent;
     border: none;
     color: #6c757d;
     padding: 0.375rem;
     font-size: 1rem;
 }

 .action-icons-group .btn:hover {
     color: #212529;
 }

 .action-icons-group .btn.text-danger:hover {
     color: #dc3545 !important;
 }

 .pagination-container {
     display: flex;
     justify-content: flex-end;
     margin-top: 1.5rem;
 }

 .pagination .page-item .page-link {
     border-radius: 0.5rem;
     margin: 0 0.25rem;
     color: #6c757d;
     border: 1px solid #dee2e6;
    min-width: 45px;
 }

 .pagination .page-item.active .page-link {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
     color: #fff;
 }

 .page-link:focus {
     box-shadow: none;
 }

 .data-tr-information {
     border: 2px solid silver;
     border-radius: 8px;
     padding: 20px;
 }

 .data-table-header {
     font-weight: 300;
     color: black;
 }

 .data-table {
     font-weight: 300;
 }

 .table-heading {
     padding: 20px;
     background: var(--primaryLight);
     border-radius: 12px;
 }

 .table-row {
     padding: 20px;
 }

 .table-row .data-table-header {
     font-weight: 400;
 }

 .camera-preivew-model {
     width: 100%;
     height: 100%;
     border-radius: 20px;
     border: 2px dashed #878B8F;
     background-color: #D9D9D9;
 }

 .data-offer-link {
     color: var(--primary-color);
     text-decoration: none;

 }

 /* .scan-qr-code-container {
     background: white;
     border: 2px solid #161917;
     border-radius: 30px;
     display: flex;
     justify-content: center;
     flex-direction: row;
     align-items: start;
     height: 100%;
     height: 250px;
     padding: 15px;
     gap: 10px;
 } */
 .offer-status-claimed {
     background-color: var(--primaryLight);
     color: var(--primary-color);
     font-weight: 500;
     padding: 5px 10px;
     width: fit-content;
     border-radius: 20px;
 }
 .offer-status-redeemed {
     background-color: var(--primaryLight);
     color: var(--primary-color);
     font-weight: 500;
     padding: 5px 10px;
     width: fit-content;
     border-radius: 20px;
 }

 .redeem-option-heading {
     font-size: 24px;
     font-weight: 500;
 }

 .offer-status-expired {
     background-color: #FFE8E8;
     padding: 5px 10px;
     border-radius: 20px;
     color: #E91700;
     font-weight: 500;
     width: fit-content;
 }

 .offer-status-pending {
     background-color: #FFF5E3;
     border-radius: 20px;
     padding: 5px 10px;
     color: #EC8A00;
     width: fit-content;
     font-weight: 500;
 }


 .toggle-container {
     display: flex;
     background-color: white;
     border-radius: 9999px;
     overflow: hidden;
     width: 240px;
     height: 40px;
     cursor: pointer;
     position: relative;
     border: 1px solid black;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
     margin-bottom: 20px;
 }

 .toggle-option {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1;
     font-weight: 500;
     transition: color 0.3s ease;
 }

 .toggle-option.active {
     color: white;
 }

 .slider {
     position: absolute;
     width: 50%;
     height: 100%;
     background-color: var(--primary-color);
     border-radius: 9999px;
     transition: transform 0.3s ease;
     z-index: 0;
 }

 .reddem-code-container {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 10px;
     align-items: center;
     padding: 0;
 }

 .redeem-button {
     background-color: var(--primary-color);
     color: var(--primaryLight);
     width: 100%;
     height: 44px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 32px;
     border: 1px solid var(--primary-color);
     z-index: 998;
     position: relative;
     padding: 10px 20px;
     background-color: var(--primary-color);
     border: none;
     color: white;
 }

.rule-list li {
    padding-bottom:10px;
}
 table,
 tr,
 td,
 th {
     padding: 1rem 1rem;
     border: none;
     /* background-color: transparent !important; */
 }

 .data-table-heading {
     font-weight: 400;
     background-color: var(--primaryLight);
     padding: 16px;
     /* border-radius: 30px; */
 }

 thead th:first-child .data-table-heading {
     border-top-left-radius: 12px;
     border-bottom-left-radius: 12px;
 }

 thead th:last-child .data-table-heading {
     border-top-right-radius: 12px;
     border-bottom-right-radius: 12px;
 }

 #qr-reader video{
    width: 180px;
    display: block;
    height: 180px;
    object-fit: cover;
 }


 /* Loading Animation */

.profile-main-loader{
    /* width: 180px;
    height: 180px; */
    /* display: none; */
}

.profile-main-loader .loader {
  position: relative;
  margin: 0px auto;
  width: 50px;
  height:100px;
}
.profile-main-loader .loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular-loader {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}

.loader-path {
  stroke-dasharray: 150,200;
  stroke-dashoffset: -10;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
            transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}
@-webkit-keyframes color {
  0% {
    stroke: var(--primary-color);
}
40% {
      stroke: var(--primary-color);
    }
    66% {
      stroke: var(--primary-color);
    }
    80%, 90% {
      stroke: var(--primary-color);
    }
}
@keyframes color {
    0% {
      stroke: var(--primary-color);
    }
    40% {
      stroke: var(--primary-color);
    }
    66% {
      stroke: var(--primary-color);
    }
    80%, 90% {
      stroke: var(--primary-color);
  }
}


/* Sketching Body */
.card-img {
    left: 0;
    top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

/* Loading skeleton effect */
.skeleton {
  background-color: #e2e5e7;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  background-size: 40px 100%;
  background-repeat: no-repeat;
  background-position: left -40px top 0;
  animation: shine 1s ease infinite;
}

@keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}