@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap");
:root {
    --primary-color: #1027FF;
    --opposite-primary-color: #fff;
    --opposite-primary-color-2: #1027FF1A;
    --light-grey: #f3f3f3;
    --u-light-grey: #f9f9f9;
    --primary-svg: invert(0%) sepia(0%) saturate(0%) hue-rotate(241deg)
        brightness(0%) contrast(0%);
    --primary-svg-2: invert(0%) sepia(0%) saturate(0%) hue-rotate(240deg)
        brightness(0%) contrast(0%);
    --light-blue: rgba(18, 41, 252, 0.1);
    --header-svg: invert(0%) sepia(0%) saturate(0%) hue-rotate(241deg)
        brightness(0%) contrast(0%);
    --menu-svg: invert(0%) sepia(0%) saturate(0%) hue-rotate(240deg)
        brightness(0%) contrast(0%);
}

html {
    scroll-behavior: smooth;
}

.hide-scrollbar {
    overflow-x: auto;
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

@media (min-width: 990px) {
    body {
        background-image: url("https://4kwallpapers.com/images/wallpapers/dark-background-abstract-background-network-3d-background-3840x2160-8324.png");
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        height: 100%;
        overflow-x: hidden; /* Prevent horizontal scrolling */
        overflow-y: hidden !important;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        font-family: "Roboto", sans-serif;
        padding: 5% 0% 1% 0%;
    }
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    overflow-y: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    font-family: "Roboto", sans-serif;
}

#loading {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
    background-color: black;
    z-index: 1199;
}

#loading-image {
    z-index: 1200;
    animation: jump 1s infinite alternate;
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(20px);
    }
}


/* Hide scrollbar for Chrome, Safari and Opera */
#wrapper::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  #wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

@media (min-width: 990px) {
    #wrapper {
        display: flex;
        height: 80vh !important;
        overflow: scroll;
        width: 100%;
        max-width: 350px !important; /* Centers content with max width on larger screens */
        background-color: #fff;
        flex-direction: column;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    #expiryModal .modal-dialog {
        max-width: 350px !important; /* Centers content with max width on larger screens */
    }
    
}

#wrapper {
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 600px; /* Centers content with max width on larger screens */
    background-color: #fff;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    max-width: 1200px; /* Restrict the wrapper's width */
    margin: 0 auto; 
}

#expiryModal .modal-dialog {
    max-width: 600px; /* Centers content with max width on larger screens */
}

@media (min-width: 990px) {
    #section-header .top-nav-container{
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
        max-height: 80px;
        position: fixed;
        z-index: 1000; /* Ensure footer appears on top */
        background-color: #fff; /* Footer background color */
        width: 100%;
        max-width: 350px !important; /* Maximum width to center on larger screens */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
}


/**** Header ****/
#section-header .top-nav-container{
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    max-height: 80px;
    position: fixed;
    z-index: 1000; /* Ensure footer appears on top */
    background-color: #fff; /* Footer background color */
    width: 100%;
    max-width: 600px; /* Maximum width to center on larger screens */
}

#section-header .navbar-nav {
    flex-direction: row;
}

#section-header .bg-logo-1 {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 5px;
    max-height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
/**** End Header ****/

/**** Footer ****/
@media (min-width: 990px) {
    #section-menu {
        background-color: #fff; /* Navbar background */
        border-top: 2px solid #EFEFEF; /* Optional border for effect */
        position: fixed;
        bottom: 80px !important; 
        max-width: 350px !important; /* Maximum width to center on larger screens */
        width: 100%;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        border-bottom-right-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
    }

    #register-floating-btn{
        max-width: 350px !important;
        position: fixed;
        width: 100%;
        bottom: 14% !important;
        z-index: 1030;
    }

    #filter-floating-btn{
        max-width: 350px !important;
        position: fixed;
        width: 100%;
        bottom: 13% !important;
        z-index: 1030;
    }
}

#section-menu {
    background-color: #fff; /* Navbar background */
    border-top: 2px solid #EFEFEF; /* Optional border for effect */
    position: fixed;
    bottom: 0%;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: none;
    border-bottom-left-radius: none;
}

#section-footer {
    background-color: #fff; /* Footer background */
    border-top: 2px solid #EFEFEF; /* Optional border for effect */
    text-align: center; /* Center text/content in the footer */
    padding: 0px; /* Footer padding */
    width: 100%;
    border-bottom-right-radius: none;
    border-bottom-left-radius: none;
}

#register-floating-btn{
    max-width: 600px;
    position: fixed;
    width: 100%;
    bottom: 3%;
    z-index: 1030;
}

#filter-floating-btn{
    max-width: 600px;
    position: fixed;
    width: 100%;
    bottom: 1%;
    z-index: 1030;
}

.menu-access-background {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    margin: 0;
    list-style: none;
    width: 100%;
}

#section-menu .nav-item {
    flex: 1;
    text-align: center;
}

#section-menu .nav-item.nav-active svg path {
    fill: var(--primary-color);
}

#section-menu .nav-item.nav-active .account-svg path{
    stroke: var(--primary-color);
    fill: white;
}

#section-menu .nav-item .nav-link:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

#section-menu .menu-access-background .middle-icon-container {
    position: relative;
    height: 60px; /* Increase the height slightly */
    display: flex;
    align-items: center;
    justify-content: center;
}

#section-menu .menu-access-background .middle-icon-container::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 75px;
    height: 65px;
    border-radius: 50%;
    background: #fff;
    z-index: -1;
    border-top: 2px solid #EFEFEF
}

#section-menu .navbar-nav{
    flex-direction: row;
}
/**** End Footer ****/

/*** Inner Footer ***/
#section-inner-footer .inner-footer-link{
    /* border-top: 1px solid #f3f3f3; */
    padding: 15px 0px 15px 0px;
    font-weight: 600;
}

@media (min-width: 990px) {
   
#social-media-icon {
    max-width: 100%; /* Ensures the container fits within its parent */
    overflow: hidden; /* Prevent scrolling */
    gap: 0px 5px !important;
}
}

#social-media-icon {
    max-width: 100%; /* Ensures the container fits within its parent */
    overflow: hidden; /* Prevent scrolling */
    gap: 0px 10px;
}

.social-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 1; /* Allows icons to shrink if necessary */
}
/*** End Inner Footer ***/

/*** Home Page ***/
#home-nav-section .image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5; /* Background color */
    border-radius: 100%; /* Make it circular */
    padding: 10px; /* Space around the image */
    width: 60px;
    height: 60px;
}

#home-nav-section .image-wrapper svg circle {
    stroke: var(--primary-color);
}
/*** End Home Page ***/

/*** Card Page ***/
#section-card .box-shadow-container {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

#section-card .box-shadow-container .title-label {
    font-family: "Roboto", sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: black !important;
}

#section-card .rounded-corner {
    border-radius: 7px;
}

#section-card svg path {    
    fill: var(--primary-color);
}

#section-card svg circle {    
    stroke: var(--primary-color);
}

#section-card .bold-title {
    font-size: 20px;
    font-weight: bold;
    color: black;
}
/*** End Card Page ***/

/*** Store Page ***/ 
#section-store .bold-title {
    font-size: 20px;
    font-weight: bold;
    color: black;
}
/*** End Store Page ***/

/*** Notification Page ***/
#section-notification .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary-color) !important;
}
/*** End Notification Page ***/

/*** Register Membership Page ***/

#reister-membership-section #inner-top-nav .nav-active a.nav-link,
.inner-top-nav .nav-active a.nav-link {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: black !important;
    border-bottom: 2px solid var(--primary-color) !important;
}

#reister-membership-section #inner-top-nav a.nav-link,
.inner-top-nav a.nav-link {
    font-size: 16px !important;
    color: rgba(103, 103, 103, 1) !important;
    border-bottom: 2px solid #F7F7F7;
}

#reister-membership-section .image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5; /* Background color */
    border-radius: 100%; /* Make it circular */
    padding: 10px; /* Space around the image */
    width: 50px;
    height: 50px;
}

#reister-membership-section .image-wrapper svg path{
    fill: var(--primary-color);
}

#reister-membership-section .image-wrapper svg circle {
    stroke: var(--primary-color);
}

#reister-membership-section h5.bold-title {
    font-size: 16px;
    font-weight: bold;
}
/*** End Register Membership Page ***/

/*** Voucher Page ***/
#voucher-section #sub-category-top-nav a.nav-link {
    font-size: 16px !important;
    font-weight: normal !important;
    color: black !important;
    border-bottom: none;
}

#voucher-section #sub-category-top-nav .nav-active a.nav-link {
    font-size: 16px !important;
    background-color: var(--primary-color);
    border-radius: 25px;
    color: white !important;
}

/*** End Voucher Page ***/

/*** Label Style ***/
.small-label {
    font-size: 14px;
}

@media (max-width: 990px) {
    .small-label {
        font-size: 12px;
    }
}
/*** End Label Style ***/

/*** Color Style ***/
.color-grey {
    color:#676767 !important;
}

.disabled-color {
    color: #33333357;
}

.color-primary{
    color: var(--primary-color) !important;
}

.color-black {
    color: black;
}

.color-grey-2 {
    color: #c1bdbd;
}

.color-white {
    color: white;
}

.color-red {
    color: red;
}

/*** End Color Style ***/

/*** Bg Color Style ***/
.bg-grey {
    background-color: #f4f4f4;
}

.bg-light-2 {
    background: #f4f2f2 !important;
}

.bg-grey-3 {
    background-color: #f7f7f7;
}

.bg-whatapp{
    background-color: #25D366 !important;
}
/*** End Bg Color Style ***/

/*** Border Style ***/
.border-top-1 {
    border-top: 1px solid #f3f3f3;
}

.border-right-1 {
    border-right: 1px solid #f3f3f3;
}

.border-1 {
    border: 1px solid #f3f3f3;
}

.sm-round-border {
    border-radius: 8px !important;
}

.md-round-border {
    border-radius: 28px !important;
}

.large-rounded-corner {
    border-radius: 14px;
}

.border-unset {
    border: unset;
}

/*** End Border Style ***/

/*** Aspect Ratio ***/
.ar-1-1 {
    aspect-ratio: 1 / 1;
}
.ar-2-1 {
    aspect-ratio: 2 / 1;
}
.ar-2-3 {
    aspect-ratio: 2 / 3;
}
.ar-3-1 {
    aspect-ratio: 3 / 1;
}
.ar-16-9 {
    aspect-ratio: 16 / 9;
}
/*** End Aspect Ratio ***/

/*** Font Weight ***/
.text-bold-600{
    font-weight: 600;
}

.text-bold{
    font-weight: bold;
}
/*** End Font Weight ***/

/*** Button ***/
.btn-normal {
    padding: 15px 30px;
}

.btn-rounded {
    border-radius: 28px !important;
}

.form-btn {
    font-size: 15px;
    padding: 13px 30px;
    border: unset;
    border-radius: 28px !important;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    width: 100%;
}

.small-btn {
    font-size: 10px;
    padding: 8px 15px;
    border: unset;
    border-radius: 28px !important;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
}
/*** End Button ***/

/*** Font Style ***/
.main-title {
    font-weight: 600;
    font-size: 22px;
} 

.fs-14{
    font-size: 14px;
}
/*** End Font Style ***/

/*** Input Style ***/
.form-control.mobile_number {    
    padding-left: 97px;
}

.form-control.password {    
    padding-left: 57px;
}

.form-control {
    background-color: var(--light-grey);
    border: 1px solid transparent;
    height: 56px;
    font-size: 15px;
    color: black;
}

.input-container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.input-icon-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    margin-top: 0px;
}

.input-icon-left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 25px;
}

.iti.iti--allow-dropdown.iti--separate-dial-code {
    width: 100%;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: var(--light-grey);
    border-bottom-left-radius: 28px;
    border-top-left-radius: 28px;
    padding: 0 6px 0 20px;
}

.form-round {
    background-color: #e2e2e2;
    padding-left: 0;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
}

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

.btn-radio-label {
    display: inline-block;
    padding: 10px;
    border: 1px solid #f9f9f9;
    background: #f9f9f9;
    cursor: pointer;
    border-radius: 28px;
    color: #9d9d9d !important;
}

.btn-radio-label.md-radius {
    border-radius: 10px;
}

input[type="radio"]:checked + label.btn-radio-label {
    background: var(--opposite-primary-color-2);
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    /* color: #fff; */
}

input[type="radio"]:checked + label.btn-radio-label.label-no-border {
    border: none;
}

.input-otp{
    background-color: #F9F9F9;
    padding-left: 20px;
    border-radius: 50%;
    height: 65px;
    width: 65px;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
}
/*** End Input Style ***/


.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary-color) !important;
}

.main-offset {
    padding-left: 20px;
    padding-right: 20px;
}

.btn {
    font-weight: 500;
}

.btn-medium-rounded {
    border-radius: 10px !important;
}

.btn.bg-primary:hover {
    color: var(--opposite-primary-color) !important;
    background-color: var(--opposite-primary-color-2) !important;
}

.bg-primary {
    background: var(--primary-color) !important;
}

a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
    background-color: var(--opposite-primary-color) !important;
}

.modal{
    top: 30% !important;
}

.small-title {
    font-weight: 600;
    font-size: 16px;
}

.progress-bar-wrap {
	padding: 10px 0;
}

.progress {
	background-color: rgba(165, 207, 55, 0.2);
	border-radius: 8px;
	position: relative;
	margin: 15px auto;
	height: 8px;
	width: 100%;
	max-width: 552px;
}

.progress-done {
	background: #cce981;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 0;
	opacity: 0;
	transition: 1s ease 0.3s;
	position: relative;
}
.progress.bronze {
    background: #c2b59c79!important;
}
.progress.silver {
    background: #a8aaad7a!important;
}
.progress.gold {
    background: #c49b6c71!important;
}
.progress.platinium {
    background: #40404177!important;
}
.progress-done.bronze {
    background: #C2B59C!important;
}
.progress-done.silver {
    background: #A8AAAD!important;
}
.progress-done.gold {
    background: #C49B6C!important;
}
.progress-done.platinium {
    background: #404041!important;
}

h4 {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0;
}

.btn.active-tab {
    background: var(--primary-color) !important;
    color: white !important;
}

.voucher-detail-card{
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}

h2 {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
}

.bg-white {
    background: white !important;
}

.color-black {
    color: #000000 !important;
}

.gap-3{
    gap: 3px;
}


.bg-u-light-grey {
    background-color: var(--u-light-grey) !important;
}


.whatapp-button 
{
    border-radius: 50%;
}

.custom-confirm-button {
    border-radius: 50px !important; /* Adjust for desired roundness (e.g., 8px, 20px, 50px) */
    padding: 10px 24px !important; /* Optional: Adjust padding for better appearance */
}

a:hover {
    text-decoration: none !important;
}

#section-message{
    height: 100vh;
}

@media (min-width: 990px) {
    #section-message{
        height: 80vh !important;
    }
}

.progress-done.bronze {
    background: var(--primary-color) !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.custom-swal-title {
    font-size: 18px !important; /* Larger title */
    font-weight: bold !important;
}

/* Adjust text font size */
.custom-swal-text {
    margin-top: 10px !important;
    font-size: 16px !important; /* Larger text */
    color: #555 !important;     /* Optional: Change text color */
}