@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/*============ GENERAL STYLE ==========================*/
/*========== ROOT & GENERAL STYLE ===================*/
:root {
  color-scheme: light dark;
  --color-first: light-dark(#000, #fff);
  --color-second: light-dark(#5d5d5d,#dddddd);
  --color-third:light-dark(#f9f9f9,#2f2f2f);
  --color-fourth: #D7D7D7;
  --color-white:light-dark(#fff,#000);
  --color-dark:light-dark(#fff,#000);
  --border-color-dark:light-dark(#6c757d,#d5d5d5);
  --secondary-dark:light-dark(#6c757d,#f3f3f3);
  --color-yellow:light-dark(#fdd94b,#695506);
  --color-light-green:rgba(117, 243, 79, 0.25);
  --color-green:light-dark(#264e1a,#c4ffb2);
  /*--color-blue-light:#3696d8;
  --light-blue-bg:light-dark(#d2e3fc,#627ca2);*/
  --bg-light-1: light-dark(#f0f0f0,#23222D);
  --bg-1: #f4f9f5;
  --gray-50: #f9f9f9;
  --gray-100: #ececec;
  --gray-200: #e3e3e3;
  --gray-300: #cdcdcd;
  --gray-400: #b4b4b4;
  --gray-500: #9b9b9b;
  --gray-600: light-dark(#676767,#d0d0d0);
  --gray-700: light-dark(#424242,#ececec);
  --gray-750: #2f2f2f;
  --gray-800: light-dark(#212121,#ececec);
  --gray-900: #171717;
  --gray-950: #0d0d0d;
  --black-01: #121215;
  --bg-white: light-dark(#ffffff,#000);
  --bg-white-1: light-dark(#ffffff,#121215);
  --black-02: light-dark(#FAFAFA,#18181C);
  --gray-01: light-dark(#D9D9D9,#3A3948);
}
:root {
  &:has(html[data-bs-theme="light auto"]) {
    color-scheme: light;
  }
  &:has(html[data-bs-theme="dark"]) {
    color-scheme: dark;
  }
}
*,::after,::before {box-sizing: border-box;}
* {
  margin: 0;
  padding: 0;
  font-family: "Work Sans", sans-serif;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}
button, input, optgroup, select, textarea {font-family: "Work Sans", sans-serif;}
a,a:hover,a:focus,a:focus-visible {text-decoration: none;outline: none;cursor: pointer;}
html {scroll-behavior: smooth;}
img {object-fit: cover;object-position: center;}
img.img-icon {object-fit:scale-down;}
ul li {list-style: none;}
ul.list li {list-style: disc;color: var(--color-content);}
.wrapper {width: 100%;background-color:var(--color-white);}
.center-section{position: relative;z-index: 1}
html[data-bs-theme="dark"] .bg-gray-100 {background: var(--gray-950);}
svg.btn-icon-white, svg.btn-icon-white path {fill: var(--color-dark) !important;}
svg.btn-icon-dark, svg.btn-icon-dark path {fill: var(--color-white) !important;}
html[data-bs-theme="dark"] svg {fill: var(--color-first);}
/*========== COLOR & BACKGROUND STYLE ===========================*/
.color-gray-50 {color: var(--gray-50);}
.color-gray-100 {color: var(--gray-100);}
.color-gray-200 {color: var(--gray-200);}
.color-gray-300 {color: var(--gray-300);}
.color-gray-400 {color: var(--gray-400);}
.color-gray-500 {color: var(--gray-500);}
.color-gray-600 {color: var(--gray-600);}
.color-gray-700 {color: var(--gray-700);}
.color-gray-800 {color: var(--gray-800);}
.color-gray-900 {color: var(--gray-900);}
.color-gray-950 {color: var(--gray-950);}
.color-first {color: var(--color-first);}
.color-second {color: var(--color-second);}
.color-third {color: var(--color-third);}
.color-fourth {color: var(--color-fourth);}
.color-white {color: var(--color-white);}
.color-yellow {color: var(--color-yellow);}
.color-light-green {color: var(--color-light-green);}
.coin-text-color {color: #362D06;}
.shopping-text-color {color: #264e1a;}
.shopping-svg, .shopping-svg path {fill: #264e1a;}
html[data-bs-theme="dark"] .coin-text-color, html[data-bs-theme="dark"] .shopping-text-color {color: #f9f9f9;}

.bg-color-first {background-color: var(--color-first);}
.bg-color-second {background-color: var(--color-second);}
.bg-color-third {background-color: var(--color-third);}
.bg-color-fourth {background-color: var(--color-fourth);}
.bg-color-white {background-color: var(--color-white);}
.bg-color-light-green {background-color: var(--color-light-green);}
.bg-light-1 {background-color: var(--bg-light-1);}
.bg-1 {background-color: var(--bg-1);}
.bg-gray-50 {background-color: var(--gray-50);}
.bg-gray-100 {background-color: var(--gray-100);}
.bg-gray-200 {background-color: var(--gray-200);}
.bg-gray-300 {background-color: var(--gray-300);}
.bg-gray-400 {background-color: var(--gray-400);}
.bg-gray-500 {background-color: var(--gray-500);}
.bg-gray-600 {background-color: var(--gray-600);}
.bg-gray-700 {background-color: var(--gray-700);}
.bg-gray-800 {background-color: var(--gray-800);}
.bg-gray-900 {background-color: var(--gray-900);}
.bg-gray-950 {background-color: var(--gray-950);}
.border-color {border-color: var(--border-color-dark);}
.border-first {border-color: var(--color-first) !important;}

/*bg colors with opacity*/
.bg-color-50 {position: relative;}
.bg-color-50:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  opacity: 0.5;
  z-index: -1;
}
.icon-bg-yellow:after, .bg-color-yellow:after {background-color: #fdd94b;}
.coin-icon-bg {position: relative;width: 40px;height: 40px;padding: 8px; z-index: 1; display:flex;justify-content: center;align-items: center;}
.coin-icon-bg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  opacity: 0.5;
  z-index: -1;
}
.icon-bg-light:after{background-color: #cdcdcd;}
.icon-bg-gray:after{background-color: #c9c9c9;}
.icon-bg-yellow:after {background-color: #fdd94b;}
.bg-color-yellow {background-color: rgba(253, 217, 75, 0.5) !important;}
.bg-color-yellow.bg-color-50 {background-color: transparent !important;}
.icon-bg-green:after {background-color: #a3ffad;}
.icon-bg-blue:after {background-color: #93ceff;}
/*bg colors with opacity end*/

/*gradient-bg*/
.gradient-bg{
  background-color: #fbeaff;
  background: linear-gradient(135deg,#fbeaff 0%,#fef7e0 30%,#e0fdf4 60%,#e7f0fd 100%);
  background: -webkit-linear-gradient(135deg,#fbeaff 0%,#fef7e0 30%,#e0fdf4 60%,#e7f0fd 100%);
  background: -moz-linear-gradient(135deg,#fbeaff 0%,#fef7e0 30%,#e0fdf4 60%,#e7f0fd 100%);
}
.other-gradient-bg{
  background: -webkit-linear-gradient(to right, #fcd7ea 0%, #fef3c7 8%, #d1fbd0 16%, #d3f2fb 24%, #ffffff 40%, #ffffff 100%);
  background: -moz-linear-gradient(to right, #fcd7ea 0%, #fef3c7 8%, #d1fbd0 16%, #d3f2fb 24%, #ffffff 40%, #ffffff 100%);
  background: -o-linear-gradient(to right, #fcd7ea 0%, #fef3c7 8%, #d1fbd0 16%, #d3f2fb 24%, #ffffff 40%, #ffffff 100% );
  background: -ms-linear-gradient(to right, #fcd7ea 0%, #fef3c7 8%, #d1fbd0 16%, #d3f2fb 24%, #ffffff 40%, #ffffff 100% );
  background: linear-gradient(to right, #fcd7ea 0%, #fef3c7 8%, #d1fbd0 16%, #d3f2fb 24%, #ffffff 40%, #ffffff 100%);
}
html[data-bs-theme="dark"] .gradient-bg{
  background-color: #1a1b1e;
  background: linear-gradient(135deg, #3c2e4f 0%, #3b3a3c 30%, #2c4a45 60%, #243349 100%);
  background: -webkit-linear-gradient(135deg, #3c2e4f 0%, #3b3a3c 30%, #2c4a45 60%, #243349 100%);
  background: -moz-linear-gradient(135deg, #3c2e4f 0%, #3b3a3c 30%, #2c4a45 60%, #243349 100%);
}
html[data-bs-theme="dark"] .other-gradient-bg{
  background: -webkit-linear-gradient(to right, #3c2e4f 0%, #3b3a3c 8%, #2c4a45 16%, #243349 24%, #212121 40%, #212121 100%);
  background: -moz-linear-gradient(to right, #3c2e4f 0%, #3b3a3c 8%, #2c4a45 16%, #243349 24%, #212121 40%, #212121 100%);
  background: -o-linear-gradient(to right, #3c2e4f 0%, #3b3a3c 8%, #2c4a45 16%, #243349 24%, #212121 40%, #212121 100% );
  background: -ms-linear-gradient(to right, #3c2e4f 0%, #3b3a3c 8%, #2c4a45 16%, #243349 24%, #212121 40%, #212121 100% );
  background: linear-gradient(to right, #3c2e4f 0%, #3b3a3c 8%, #2c4a45 16%, #243349 24%, #212121 40%, #212121 100%);
}
html[data-bs-theme="dark"] .bg-light{background: var(--gray-900) !important;}
html[data-bs-theme="dark"] .bg-white{background: var(--color-dark) !important;}
.bg-white-1{background: #ffffff !important;}
html[data-bs-theme="dark"] .bg-white-1{background: var(--black-01) !important;}
/*========== BUTTON STYLE ===========================*/
.button-parent{
  padding: 3px;
  border-radius:9999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height:32px;
}
.button-parent.outline-button-parent{background: transparent;border:1.5px solid var(--color-first);padding: 1px;}
.button-parent.green-button-parent{border:1.5px solid var(--color-green); padding: 1px;}
.button,input[type="submit"].button,.btn-outline-first {
  padding: 4px 14px 4px 14px;
  border-radius: 16px;
  background: var(--color-first);
  color:var(--color-dark);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:0;
  line-height:1.25rem;
  border-radius:9999px;
  text-transform:capitalize;
  pointer-events:auto;
  cursor:pointer;
  border:0;
  margin-right: 0;
}
.btn-first {background-color: var(--color-first);}
.btn-outline-first {color: var(--color-first);background: transparent;border: 1px solid var(--color-first);}
.btn-green{color: var(--color-green);background: transparent;}
.btn-yellow{color: var(--color-first);background: transparent;}
html[data-bs-theme=dark] .btn-outline-first:hover{color: var(--color-dark);}
html[data-bs-theme=dark] .btn-outline-secondary{color: var(--secondary-dark);}
button.button:focus,button.btn:focus,input.form-control:focus,select.form-select:focus,textarea:focus {
outline: 0 !important;
box-shadow: none !important;
border-color: var(--secondary-dark) !important;
}
.btn-outline-first:hover,.btn-outline-first:focus.btn-outline-first:active{background: var(--color-first);color: var(--color-white);}
.btn-outline-first.show-search-result:hover svg path,
.btn-outline-first.show-search-result:focus svg path {
fill: var(--secondary-dark);
}
/*========== HEADING and ICONS WIDTH STYLE ==========================*/
.text-base {font-size: 1rem !important;line-height: 1.5rem !important;}
.text-sm {font-size: .875rem !important;line-height: 1.25rem !important;}
.text-lg {font-size: 1.125rem;line-height: 1.75rem;}
.text-2xl {font-size: 1.5rem;line-height: 2rem;}
.text-3xl {font-size: 1.875rem;line-height: 2.25rem;}
.text-4xl {font-size: 2.25rem;line-height: 2.5rem;}
.text-5xl {font-size: 3rem;line-height: 1;}
.text-7xl {font-size: 4.5rem;line-height: 1;}
.text-5 {font-size: .5rem;}
.text-65 {font-size: .65rem}
.text-70 {font-size: .7rem}
.text-75 {font-size: .75rem}
.text-8 {font-size: 8px}
.text-9 {font-size: 9px}
.text-10 {font-size: 10px}
.text-11 {font-size: 11px}
.text-12 {font-size: 12px}
.text-13 {font-size: 13px}
.text-14 {font-size: 14px}
.text-15 {font-size: 15px}
.text-16 {font-size: 16px}
.text-17 {font-size: 17px}
.text-18 {font-size: 18px}
.text-19 {font-size: 19px}
.text-20 {font-size: 20px}
.text-21 {font-size: 21px;line-height: 1.33;}
.text-24 {font-size: 24px}
.text-28 {font-size: 28px}
.text-32 {font-size: 32px}
.text-31 {font-size: 31px}
.text-34 {font-size: 34px;}
.text-36 {font-size: 36px}
.text-37 {font-size: 37px;}
.text-40 {font-size: 40px}
.text-48 {font-size: 48px}
.text-50{font-size:50px; line-height:67px;}
.text-81, .input-redeem .form-control{font-size: 81px;}
.icon-xs,.icon-sm,.icon-md,.icon-sm-heavy,.icon-sidebar,.icon-md-heavy,.icon-lg,.icon-lg-heavy,
.icon-xl,.icon-xl-heavy,.icon-2xl {flex-shrink: 0;}
.icon-xs {stroke-width: 1.5;height: .75rem;width: .75rem}
.icon-sm {stroke-width: 2;height: 1rem;width: 1rem}
.icon-md {stroke-width: 1.5;height: 18px;width: 18px;}
.icon-sm-heavy {stroke-width: 2.5;height: 1rem;width: 1rem;}
.icon-md-heavy {stroke-width: 2.5;height: 18px;width: 18px;}
.icon-lg {stroke-width: 1.5;height: 1.5rem;width: 1.5rem;}
.icon-lg-heavy {stroke-width: 2;height: 22px;width: 22px;}
.icon-xl {stroke-width: 1.5;height: 1.75rem;width: 1.75rem;}
.icon-xl-heavy {stroke-width: 2;height: 24px;width: 24px;}
.icon-2xl {stroke-width: 1.5;height: 2rem;width: 2rem;}
.icon-heavy {stroke-width: 3;height: 2rem;width: 2rem;}
.icon-sm-fill {height: 1rem;width: 1rem}
.icon-md-fill {height: 1.5rem;width: 1.5rem}
.icon-80-fill {height: 80px;min-width: 80px;width: 80px;}
.icon-85-fill {height: 85px;min-width: 85px;width: 85px;}
html[data-bs-theme="dark"] .fill-dark-white, html[data-bs-theme="dark"] .fill-dark-white path {fill: var(--color-first) !important;}
html[data-bs-theme="dark"] .fill-dark-black, html[data-bs-theme="dark"] .fill-dark-black path {fill: var(--color-dark) !important;}
/*========== INPUT FIELD STYLE ======================*/
input.form-control,select.form-select {height: 40px;border-radius: 0;font-size: 0.85rem;}
textarea.form-control {resize: none;border-radius: 0;}
.form-check-input {width: 1.5em;height: 1.5em;}
.form-check-input:checked {background-color: var(--color-first);border-color: var(--color-first);}
label strong {font-size: 1rem;font-weight: 500;}
.form-check-input:focus {box-shadow: none;}
.h-40 {height: 40px;}
.martop {margin-top: 65px;}
.form-switch .form-check-input:checked {background-repeat: no-repeat;}
.form-switch .form-check-input {width: 3em;}
.loginSection .form-check {padding-left: 2.5rem;}
.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {color: var(--color-first);}
.form-check-input.is-valid:checked,.was-validated .form-check-input:valid:checked {
  background-color: var(--color-first);
}
.input-border{border-color:#d9d9d9 !important}
.input-border:hover, .input-border:focus{border-color:var(--color-light)!important}
[data-bs-theme="dark"] .input-border{border-color:#3a3948 !important;  background-color: #000;}
[data-bs-theme="dark"] .input-border:hover{border-color:#fff !important;
background-color: #121215 !important;}
  
/*========== TEXT LIMIT STYLE =======================*/
.text-limit-1,.text-limit-2,.text-limit-3,.text-limit-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: nowrap;
}
.text-limit-1 {-webkit-line-clamp: 1;}
.text-limit-2 {-webkit-line-clamp: 2;}
.text-limit-3 {-webkit-line-clamp: 3;}
.text-limit-4 {-webkit-line-clamp: 4;}
.pt-65{padding-top: 65px;}
/*============ HEADER STYLE ===========================*/
.logo,.brand-logo { width: 150px;}
header{top: 0;}
/*============ FOOTER STYLE ===========================*/
footer{ background: var(--color-white);bottom:0;z-index:1049 !important; }
footer a,footer p {font-weight: 500;font-size: 0.75rem;}
/*footer a,footer p {font-weight: 500;font-size: 0.75rem;color: var(--color-second);}
============ RESPONSIVE ======================*/
@media only screen and (max-width:1200px) {
  .side-fixed-menu-list.nav-pills .main-category-button.active{padding: 8px 0 0 0;}
}
@media only screen and (max-width:1284px) {
  footer a,footer p {font-size: 0.7rem;}
  .footer-side-menu-list{padding-bottom: 30px}
}
@media only screen and (max-width:992px) {
  footer{z-index:1030 !important; }
  footer a,footer p {font-size: 11px;}
  .user-setting-dropdwown {left: 5%;bottom: 2%;}
  .collapse-icon-btn {
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
  }
  .btn-profile {background: var(--color-first);border: 0}
  .more-toggle {display: none;}
  .more-toggle.active {display: block;}
  .profile-name {
    font-size: 0.9rem;
    width: 80%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .btn-profile.dropdown-toggle::after{display: none;}
}
@media screen and (max-width: 991px) {
  header.z-9999 {z-index: 9;}
}
@media only screen and (max-width:512px) {
  .text-2xl {font-size: 1.1rem;}
  .text-3xl {font-size: 1.5rem;}
  .text-4xl {font-size: 1.875rem;}
  .text-5xl {font-size: 2.25rem;}
  .text-7xl {font-size: 3rem;}
}
/*============ SHOPPING PAGE =====================*/
.news-card .card .news-title{line-height: 1.7rem;}
.news-card .card .news-title.text-base{line-height: 1rem !important}
.tab-keywords{position: relative;z-index: 999999;}
.tab-keywords ul li{background: var(--gray-50);padding: 5px 10px;margin:3px 5px;}
.tab-keywords ul li:nth-child(1){margin-left: 0}
.tab-keywords ul li.active,.tab-keywords ul li:hover{background: var(--color-first);}
.tab-keywords ul li a{font-weight: normal;color: var(--color-first);font-size: 0.8rem}
.tab-keywords ul li.active a,.topic-keywords ul li:hover a{color: var(--gray-50);}

/*============== selectbox ==============*/
.cashback-rewards-section .form-select, .outline-selectbox {
  height: 35px !important;
  font-size:15px;
  color:#000;
  padding:5px 8px 6px 16px;
  border-radius: 50px !important;
  border: 2px solid  var(--color-first) !important;
  background-size: 16px 16px;
  background-position: right .75rem top .6rem;
  background-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}
select{cursor:pointer;}
.cashback-rewards-section .form-select:focus, .outline-selectbox:focus{
  border-color: var(--color-first) !important;
}
.selected, .cashback-rewards-section .form-select:hover, .outline-selectbox:hover {
  background-color:var(--color-first) !important;
  border-color: var(--color-first) !important;
  color:var(--color-dark) !important;
}
.form-select.selected, .cashback-rewards-section .form-select:hover,
.outline-selectbox.selected, .outline-selectbox:hover {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html[data-bs-theme="dark"] .cashback-rewards-section .form-select, html[data-bs-theme="dark"] .outline-selectbox,
[data-bs-theme="dark"] .cashback-rewards-section .form-select:hover, html[data-bs-theme="dark"] .outline-selectbox:hover {
  border-color:#fff !important;
  color:#fff;
}
[data-bs-theme="dark"] .form-select.selected, [data-bs-theme="dark"] .outline-selectbox.selected,
[data-bs-theme="dark"] .cashback-rewards-section .form-select:hover, html[data-bs-theme="dark"] .outline-selectbox:hover {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
/*============== selectbox ==============*/
/*...........................................................*/
.profile-dropdown{left: 60px !important;bottom: -100px !important;
  max-height: 180px;min-width: 100px}
svg.g-style g.icon-svg{stroke: var(--color-first);}
.z-9999 {z-index: 9999;}

.cursor-pointer {cursor: pointer !important;}
.h-32 {height: 32px !important;}
.h-40 {height: 40px;min-height: 40px;}
.h-48 {height: 48px;min-height: 48px;}
.h-104px {height: 104px !important;}
.w-32 {width: 32px !important;}
.w-40 {width: 40px;min-width: 40px;}
.w-48 {width: 48px !important;}
.w-162 {width: 162px !important;}
.w-fit-content {width: fit-content;}
.w-max-content {width: max-content;}
.italic {font-style: italic;}
.lh-normal {line-height: normal;}
.form-control, input, textarea {caret-color: #269dff;}
.form-control::placeholder, input::placeholder, textarea::placeholder {color: var(--color-first);opacity: 1;}
.border-light {border-color: #d9d9d9 !important;}
html[data-bs-theme="dark"] .border-light {border-color: #3a3948 !important;}
.border-transparent {border-color: transparent;}

/*btn*/
.no-bg-btn {
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: none !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.disabled {opacity: 50% !important;cursor: default !important;}
.disabled svg, button:disabled svg, a:disabled svg,
.disabled svg path, button:disabled svg path, a:disabled svg path {fill: var(--color-first) !important;}
.disabled, button:disabled, a:disabled, .disabled:hover, button:disabled:hover, a:disabled:hover {
  opacity: 50% !important;
  cursor: default !important;
  text-decoration: none !important;
  background-color: transparent !important;
}
.btn-icon-primary {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px !important;
  border: solid 2px var(--color-first);
  background-color: var(--color-first);
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.7s;
}
.btn-icon-primary.btn-icon-primary2 {border-radius: 5px !important;}
.btn-icon-primary:hover {background-color: var(--color-dark);}
.btn-icon-primary svg, .btn-icon-primary svg path {fill: var(--color-dark);}
.btn-icon-primary:hover svg, .btn-icon-primary:hover svg path {fill: var(--color-first);}
.btn-label, .redeem-coins-btn, .btn-icon-left,
.redeem-coins-btn svg, .btn-icon-left svg, .redeem-coins-btn svg path, .btn-icon-left svg path {transition: all 0.7s;}
.btn-icon-small, .btn-icon-label{transition: all 0.25s;}
.btn-icon-small:hover {opacity: 0.7;}
.btn-icon-label:hover {opacity: 0.7;text-decoration: underline !important;}
.btn-label {text-decoration: underline !important;}
.btn-label:hover {text-decoration: none !important;}
.btn-label.disabled, .btn-label:disabled,
.btn-label.disabled:hover, .btn-label:disabled:hover {text-decoration: underline !important;}
.btn-icon, .btn-icon svg path {fill: var(--color-first);}
.btn-icon:hover, .btn-icon:hover svg path {fill: var(--color-first);opacity:0.7;}
.btn-icon.disabled, .btn-icon.disabled svg path {fill: var(--color-first);opacity:50%;cursor:none}
.redeem-coins-btn, .btn-icon-left {color: var(--color-first);border: 2px solid var(--color-first);width: fit-content;background-color: transparent;}
.redeem-coins-btn svg, .btn-icon-left svg, .redeem-coins-btn svg path, .btn-icon-left svg path {fill: var(--color-first);}
.redeem-coins-btn:hover, .btn-icon-left:hover, .btn-icon-left.active {color: var(--color-dark) !important;background-color: var(--color-first);}
.redeem-coins-btn:disabled:hover, .btn-icon-left:disabled:hover,
.redeem-coins-btn.disabled:hover, .btn-icon-left.disabled:hover {color: var(--color-first) !important;}
.redeem-coins-btn:hover svg, .btn-icon-left:hover svg, .btn-icon-left.active svg,
.redeem-coins-btn:hover svg path, .btn-icon-left:hover svg path, .btn-icon-left.active svg path {fill: var(--color-dark);}
.redeem-coins-btn-white, .btn-bg-outline-white{
  border: 2px solid #fff;
  color:#fff;
  background:transparent;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.5s;
}
.btn-outline{
border: 2px solid transparent;
transition: all 0.5s;
}
/*.btn-outline img{margin:-2px;}*/
.btn-outline:hover{
border: 2px solid var(--color-first);
}
/*.btn-outline:hover img{
margin:0px;
}*/
.redeem-coins-btn-white:hover, .btn-bg-outline-white:hover, .redeem-coins-btn-white .active, .btn-bg-outline-white.active{
border: 2px solid transparent;
color:#000;
background:#fff;
}
.btn-bg-white{
color: var(--color-first);
border: 2px solid var(--bg-white-1);
background-color: var(--bg-white-1);
outline: none !important;
box-shadow: none !important;
transition: all 0.5s;
}
.btn-bg-white:hover{
border: 2px solid var(--color-first);
}
.btn-bg-white.active {
color: var(--color-dark);
border: 2px solid var(--color-first);
background-color: var(--color-first);
}
.btn-bg-black{
color: var(--color-dark);
border: 2px solid var(--color-first);
background-color: var(--color-first);
outline: none !important;
box-shadow: none !important;
transition: all 0.5s;
}
.btn-bg-black svg path {fill:var(--color-dark);} 
.btn-bg-black:hover svg path{fill: var(--color-first);} 

.btn-bg-black:hover{
color: var(--color-first);
background-color: var(--bg-white-1);
}
.btn-bg-black:disabled, .btn-bg-black.disabled{
color: var(--color-first) !important;
background-color: transparent !important;
}
.btn-bg-green {color: #264e1a;border: solid 2px #264e1a;background-color: rgba(117, 243, 79, 0.25);transition:all 0.5s;}
.btn-bg-green span {color: #264e1a;}
.btn-bg-green:hover{color:#fff;border: solid 2px #264e1a;background-color:#264e1a;}
.btn-bg-green:hover span{color:#fff;}
.btn-bg-green:hover svg path{fill:#fff;}
html[data-bs-theme="dark"] .btn-bg-green{color:#75f34f; border: solid 2px #75f34f;
background-color: rgba(117, 243, 79, 0.25);}
html[data-bs-theme="dark"] .btn-bg-green span {color:#75f34f;}
html[data-bs-theme="dark"] .btn-bg-green svg path{fill:#75f34f;}
html[data-bs-theme="dark"] .btn-bg-green:hover{color:#23222d;background-color:#75f34f;border: solid 2px #75f34f;}
html[data-bs-theme="dark"] .btn-bg-green:hover span{color:#23222d;}
html[data-bs-theme="dark"] .btn-bg-green:hover svg path{fill:#23222d;}
.invert-none{filter:none!important}
html[data-bs-theme="dark"] .invert-block{filter:invert(1)!important}
.bg-l-blue {background-color: #93ceff;}
/*btn end*/
.custom-popup-icon{
width: 40px;
height: 40px;
padding: 8px;
border: solid 2px var(--color-first);
background-color: var(--color-dark);
position: absolute;
right: -18px;
top: -18px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;    
z-index:99999;
}
html[data-bs-theme="dark"] .custom-popup-icon, .custom-popup-icon:hover, .bg-modal .modal-content, .bg-modal .modal-content:hover, .bg-modal input, .bg-modal input:hover, .bg-modal input:focus{border-color:#3a3948 !important}
html[data-bs-theme="dark"]  .modal-content{background-color:var(--color-white);}
.modal-backdrop.show{background-color:var(--bg-white) !important; opacity:0.9;}

/*popup icon amd overlay end*/

@media screen and (max-width: 1024px){
  .text-81 {font-size: 60px;}
  .text-50 {font-size: 40px;line-height: 48px;}
  .text-37 {font-size: 32px;}
  .text-34 {font-size: 28px;}
  .text-24 {font-size: 22px;}
  .text-21 {font-size: 19px;}
  .text-20 {font-size: 18px;}
}
@media screen and (max-width: 991px){
  .text-81 {font-size: 52px;}
  .text-50 {font-size: 34px;line-height: 42px;}
  .text-37 {font-size: 28px;}
  .text-34 {font-size: 24px;}
  .text-24 {font-size: 20px;}
  .text-21 {font-size: 17.5px;}
  .text-20 {font-size: 16.5px;}
}
@media screen and (max-width: 767px){
  .text-81 {font-size: 40px;}
  .profile-dropdown{bottom:0px !important;}
  .text-50 {font-size: 30px;line-height: 34px;}
  .text-37 {font-size: 22px;}
  .text-34 {font-size: 20px;}
  .text-24 {font-size: 18.5px;}
  .text-21 {font-size: 16.5px;}
  .pl-48 {padding-left: 48px;}
  .bg-activity-area {position: relative;padding: 4px 0;}
  .custom-popup-icon{right: 0px;top: -50px;}
}
/*================ search chatbox ================*/
.search-chatbox {height: 124px;width: 100%;padding: 0;}
.search-box-input {height: 24px;resize: none;}
.search-box-form {width: 776px;}
.search-box-textarea {padding: 14px 8px 30px 8px;}
.search-chatbox-fixed{margin-bottom:45px;}
/*@media screen search chatbox*/
@media screen and (max-width: 1024px){
  .search-box-form {width: 680px;}
}
@media screen and (max-width: 767px){
  .search-chatbox {padding: 0 12px;}
  .search-box-form {width: 100%;margin-bottom: 110px;}
}
@media screen and (max-width: 992px) {
  .search-chatbox-fixed{margin-bottom:60px;}
}
@media screen and (max-width: 767px) {
  .search-chatbox-fixed{margin-bottom:55px;}
}
@media screen and (max-width: 576px) {
  .search-chatbox-fixed{margin-bottom:72px;}
}
@media screen and (max-width: 390px) {
  .search-chatbox-fixed{margin-bottom:82px;}
}
/*@media screen search chatbox end*/
/*================ search chatbox end ================*/

/*================ section ================*/
.section-padding {
  width: 100%;
  height: 100vh;
  overflow:hidden;
  padding-bottom:36px;
  display: flex;
  flex-direction: column;
}
.pages-section {
  width: 100%;
  padding: 26px 30px 55px 110px;
  overflow-x: hidden;
  overflow-y: auto;
  height: auto;
  flex-grow: 1;
}

@media screen and (max-width: 991px) {
    .section-padding {padding-bottom: 52px;}
    .pages-section {padding: 26px 30px 80px 30px;}
}
@media screen and (max-width: 767px) {
    .section-padding {padding-bottom:44px;}
    .pages-section {padding: 16px 12px 80px 12px;}
    .btn-bg-green{width:100%}
}
@media screen and (max-width: 558px) {.section-padding {padding-bottom:44px;}}
@media screen and (max-width: 387px) {.section-padding {padding-bottom:75px;}}
@media screen and (min-width: 1366px) {
.webContainer {width: 1196px;max-width: 1196px;margin: 0 auto;}
}
@media screen and (max-width: 1365px) {
.webContainer {width: 100%;max-width: 100%;margin: 0 auto;}
}
/*================ section end ================*/
/*================ dropdown style =============*/
.dropdown-toggle.no-dropdown-icon:after{display:none;}
/*================ dropdown style end =========*/
#speech-toggle-btn.listening { background-color:#ff4c4c;}
#speech-toggle-btn i{pointer-events:none;}
.upload-option{transition:all 0.5s;padding:3px 5px 3px 5px;;display:flex;column-gap:2px;
align-items:center;border-radius:0.5rem;}
.upload-option:hover{background:var(--bg-light-1);}
/*================ filter question end =========*/  
.search-filter-section button{font-weight: 600;}
.light-orange-border{border-color: #ff5e0040 !important;}
.light-green-border{border-color: #00a82d40 !important;}
.light-blue-border{border-color: #0c4ff240 !important;}
.light-purple-border{border-color:#d70cf240 !important;}
.light-grey-border{border-color:#00000040 !important;}
.light-red-border{border-color: #f20c2940 !important;}
.light-yellow-border{border-color: #e9ff0340 !important;}
.light-skyblue-border{border-color: #8dfdff40 !important;}
.light-greenish-border{border-color:#03ffdf40 !important;}
/*================ filter question end =========*/